Skip to Content
Menu
This question has been flagged
1 Reply
3663 Views
  • 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 
Avatar
Discard
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>
Avatar
Discard
Related Posts Replies Views Activity
1
Sep 24
138
0
Apr 23
978
2
Jan 23
5248
0
Feb 21
1321
0
Mar 17
2397