Skip to Content
Odoo Menu
  • Sign in
  • Try it free
  • Apps
    Finance
    • Accounting
    • Invoicing
    • Expenses
    • Spreadsheet (BI)
    • Documents
    • Sign
    Sales
    • CRM
    • Sales
    • POS Shop
    • POS Restaurant
    • Subscriptions
    • Rental
    Websites
    • Website Builder
    • eCommerce
    • Blog
    • Forum
    • Live Chat
    • eLearning
    Supply Chain
    • Inventory
    • Manufacturing
    • PLM
    • Purchase
    • Maintenance
    • Quality
    Human Resources
    • Employees
    • Recruitment
    • Time Off
    • Appraisals
    • Referrals
    • Fleet
    Marketing
    • Social Marketing
    • Email Marketing
    • SMS Marketing
    • Events
    • Marketing Automation
    • Surveys
    Services
    • Project
    • Timesheets
    • Field Service
    • Helpdesk
    • Planning
    • Appointments
    Productivity
    • Discuss
    • Approvals
    • IoT
    • VoIP
    • Knowledge
    • WhatsApp
    Third party apps Odoo Studio Odoo Cloud Platform
  • Industries
    Retail
    • Book Store
    • Clothing Store
    • Furniture Store
    • Grocery Store
    • Hardware Store
    • Toy Store
    Food & Hospitality
    • Bar and Pub
    • Restaurant
    • Fast Food
    • Guest House
    • Beverage Distributor
    • Hotel
    Real Estate
    • Real Estate Agency
    • Architecture Firm
    • Construction
    • Estate Management
    • Gardening
    • Property Owner Association
    Consulting
    • Accounting Firm
    • Odoo Partner
    • Marketing Agency
    • Law firm
    • Talent Acquisition
    • Audit & Certification
    Manufacturing
    • Textile
    • Metal
    • Furnitures
    • Food
    • Brewery
    • Corporate Gifts
    Health & Fitness
    • Sports Club
    • Eyewear Store
    • Fitness Center
    • Wellness Practitioners
    • Pharmacy
    • Hair Salon
    Trades
    • Handyman
    • IT Hardware & Support
    • Solar Energy Systems
    • Shoe Maker
    • Cleaning Services
    • HVAC Services
    Others
    • Nonprofit Organization
    • Environmental Agency
    • Billboard Rental
    • Photography
    • Bike Leasing
    • Software Reseller
    Browse all Industries
  • Community
    Learn
    • Tutorials
    • Documentation
    • Certifications
    • Training
    • Blog
    • Podcast
    Empower Education
    • Education Program
    • Scale Up! Business Game
    • Visit Odoo
    Get the Software
    • Download
    • Compare Editions
    • Releases
    Collaborate
    • Github
    • Forum
    • Events
    • Translations
    • Become a Partner
    • Services for Partners
    • Register your Accounting Firm
    Get Services
    • Find a Partner
    • Find an Accountant
    • Meet an advisor
    • Implementation Services
    • Customer References
    • Support
    • Upgrades
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Get a demo
  • Pricing
  • Help

Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:

  • CRM
  • e-Commerce
  • Accounting
  • Inventory
  • PoS
  • Project
  • MRP
All apps
You need to be registered to interact with the community.
All Posts People Badges
Tags (View all)
odoo accounting v14 pos v15
About this forum
You need to be registered to interact with the community.
All Posts People Badges
Tags (View all)
odoo accounting v14 pos v15
About this forum
Help

webshop grid adding second image hidden to product picture in DOM for java script usage

Subscribe

Get notified when there's activity on this post

This question has been flagged
webshopgridview
1 Reply
4883 Views
Avatar
joachim grubelnik
  • Goal:

adding an icon container which i can use later with a javascript, this should not harm existing stuff

first i tried to replace the ribbon which works but this was not a good idea i think :-) it harms....

i don't want to replace the existing picture, i just want to add a icon container which should be hidden in background


  • info:
    not sure if i would need the <a> this is how its done in some areas  i have checked ...maybe giving the icon container z-index: and or display: none; to later activate it via the css or java script 

  • Thats what i tried yet:

<template id="products_item_icon_container" inherit_id="website_sale.products_item" name="icon container">

<xpath expr="//div[@class='oe_product_image']" position="after">

<!-- Product Image -->
<div class="oe_product_image">
<a itemprop="url" class="front" t-att-href="keep('/shop/product/%s' % slug(product), page=(pager['page']['num'] if pager['page']['num']>1 else None))">
<img itemprop="image" class="img img-responsive" t-att-src="website.image_url(product, 'image', None if product_image_big else '300x300')" t-att-alt="product.name"/>
</a>
<div class="icon_container">
<img src="/shopgrid_config/static/img/icon_box.png"/>
</div>
</div>
</xpath>
</template>

thanks 
0
Avatar
Discard
Avatar
joachim grubelnik
Author Best Answer

maybe this helps someone else 

ok as maybe lots of you already know, you cannot insert something into an existing structure if i want to add some elements inside 

so you always have to replace the whole existing content if you want to have a new container wrapping around the whole part where you want to insert, the problem is if any other module overrides this part you replacing there will be a totaly crash. 

even if you inherit an existing id its not rendered first and your addings are added to it, you have to replace the whole part. 

so i replaced this part for example:

<template id="wsd_products_item_image" inherit_id="website_sale.products_item" name="Square Images" customize_show="True" active="False">
 <xpath expr="//div[@class='oe_product_image']" position="replace">
 <div class="flip">
 <div class="front">
 <div class="oe_product_image">
 <a itemprop="url" t-att-href="keep('/shop/product/%s' % slug(product), page=(pager['page']['num'] if pager['page']['num']>1 else None))"> <img itemprop="image" class="img img-responsive" t-att-src="website.image_url(product, 'image_square')" t-att-alt="product.name"/> </a>
 </div>
 </div>
 <div class="back">
 <div class="wsd-icon_container">
 </div>
 </div>
 </div>
 </xpath>
</template> 

and in another modul i just insert whatever i needed inside this container so existing stuff is not harmed

<template id="products_item_flip_image" inherit_id="website_sale_donate.wsd_products_item_image" name="Some Products Item Image">
<xpath expr="//div[@class='wsd-icon_container']" position="inside">
<img src="/some_config/static/img/icon_geschenk.png"/>
</xpath>
</template>
0
Avatar
Discard
Enjoying the discussion? Don't just read, join in!

Create an account today to enjoy exclusive features and engage with our awesome community!

Sign up
Related Posts Replies Views Activity
product comparison is not showing odoo community
webshop
Avatar
Avatar
1
Sep 24
1892
To create column in grid view
gridview
Avatar
0
Apr 23
2554
Display prices in webshop
webshop
Avatar
Avatar
2
Jan 23
7385
Can I host my odoo store under the same domain as my website?
webshop
Avatar
0
Feb 21
3158
Webshop: sending pdf invoice automatically (event tickets and products)
webshop
Avatar
0
Mar 17
4161
Community
  • Tutorials
  • Documentation
  • Forum
Open Source
  • Download
  • Github
  • Runbot
  • Translations
Services
  • Odoo.sh Hosting
  • Support
  • Upgrade
  • Custom Developments
  • Education
  • Find an Accountant
  • Find a Partner
  • Become a Partner
About us
  • Our company
  • Brand Assets
  • Contact us
  • Jobs
  • Events
  • Podcast
  • Blog
  • Customers
  • Legal • Privacy
  • Security
الْعَرَبيّة Català 简体中文 繁體中文 (台灣) Čeština Dansk Nederlands English Suomi Français Deutsch हिंदी Bahasa Indonesia Italiano 日本語 한국어 (KR) Lietuvių kalba Język polski Português (BR) română русский язык Slovenský jazyk slovenščina Español (América Latina) Español ภาษาไทย Türkçe українська Tiếng Việt

Odoo is a suite of open source business apps that cover all your company needs: CRM, eCommerce, accounting, inventory, point of sale, project management, etc.

Odoo's unique value proposition is to be at the same time very easy to use and fully integrated.

Website made with

Odoo Experience on YouTube

1. Use the live chat to ask your questions.
2. The operator answers within a few minutes.

Live support on Youtube
Watch now