This question has been flagged
1 Reply
3502 Views
webshopgridview
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 
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>
Avatar
Discard