kingfisher_9/views/snippets.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template id="feature" name="Feature/New Product">
    <section class="oe_snippet_body oe_product_slider" data-product-count="0" data-slider-type="" contentEditable="false">
        <div class="container">
            <div class="slider_product_slider">
                <div class="col-sm-12">
                    <h3 id="snippet-title" class="section-title style1">
                        <span>NEW ARRIVALS</span>
                    </h3> 
                </div>
            </div>
        </div>
    </section>
</template>

<template id="info_block" name="Information Block">
    <section class="oe_snippet_body policy-wrap">
        <div class="container">
            <div class="block-policy row">
              <div class="policy policy1 col-md-3 col-sm-6 ">
                <div class="policy-inner"><i class="fa fa-money fa-4x"></i>
                  <h2>30 days return</h2>money back</div>
              </div>
              <div class="policy policy2  col-md-3 col-sm-6 ">
                
                <div class="policy-inner"><i class="fa fa-truck fa-4x"></i><h2>free shipping</h2>on all orders over $99</div>
                
              </div>
              <div class="policy policy3 col-md-3 col-sm-6 ">
                
                <div class="policy-inner"><i class="fa fa-calendar fa-4x"></i><h2>lowest price</h2>guarantee</div>
                
              </div>
              <div class="policy policy4 col-md-3 col-sm-6 ">
               <div class="policy-inner"><i class="fa fa-check-square fa-4x"></i><h2>safe shopping</h2>guarantee </div>
              </div>
            </div>
      </div>
    </section>
</template>

<template id="brands" name="Our Brands">
    <section class="oe_snippet_body oe_brand_slider">
        <div class="container">
            <div class="row our-brands">
                <div class="col-md-12">
                   <h3 id="snippet-title" class="section-title style1"><span>Our Brands</span></h3> 
                </div>
            </div>
        </div>
    </section>
</template>

<template id="kingfisher_product_option" inherit_id="website.snippet_options" name="Modify Options">
    <xpath expr="//div" position="after">
        <div data-js="kingfisher_product_slider"
             data-snippet-option-id='kingfisher_product_slider'
             data-selector=".oe_product_slider">
            <li data-product_slider=''>
                <a class="oe_product_slider_pop" >Modify</a>
            </li>
        </div>
        <div data-js="kingfisher_brand_slider"
             data-snippet-option-id='kingfisher_brand_slider'
             data-selector=".oe_brand_slider">
             <li data-brand_slider=''>
                <a class="oe_brand_slider">Modify</a>
            </li>
        </div>
    </xpath>
</template>

<template id="s_hero_image_slider" name="Hero Images Slider">
    <div id="s_hero_slider" class="carousel slide s_hero oe_custom_bg" data-interval="10000" style="height: 320px;">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#s_hero_slider" data-slide-to="0" class="active"></li>
            <li data-target="#s_hero_slider" data-slide-to="1"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item oe_img_bg oe_custom_bg active" style="background-image: url(/kingfisher/static/src/img/banner1.jpg)">
                <div class="container">
                    <div class="row content">
                    </div>
                </div>
            </div>
            <div class="item oe_img_bg oe_custom_bg" style="background-image: url(/kingfisher/static/src/img/banner2.jpg)">
                <div class="container">
                    <div class="row content">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<template id="kingfisher_custom_snippet" inherit_id="website.snippets" name="Feature/New Product">

    <xpath expr="//div[@id='snippet_structure']/div[@class='o_panel_body']" position="inside">
        <t t-snippet="kingfisher.feature" t-thumbnail="/kingfisher/static/src/img/New-Product.png"/>
        <t t-snippet="kingfisher.info_block" t-thumbnail="/kingfisher/static/src/img/Information-Block.png"/>
        <t t-snippet="kingfisher.brands" t-thumbnail="/kingfisher/static/src/img/our-brand.png"/>
    </xpath>
    <xpath expr="//div[@id='snippet_effect']/div[@class='o_panel_body']" position="inside">
        <t t-snippet="kingfisher.s_hero_image_slider" t-thumbnail="/kingfisher/static/src/img/Parralax-Kingfisher.png"/>
    </xpath>
</template>

<template id="slider_script" inherit_id="website.assets_frontend" name="Product Slider script">
    <xpath expr="/t" position="inside">
        <script type="text/javascript" src="/kingfisher/static/src/js/kingfisher_front.js"></script>
    </xpath>
</template>

<template id="assets_editor" inherit_id="website.assets_editor" name="Event Editor">
    <xpath expr="." position="inside">
        <script type="text/javascript" src="/kingfisher/static/src/js/kingfisher.editor.js"></script>
    </xpath>
</template>

<template id="our_brand_slider" name="Brand Snippet">
<div class="container">
    <div class="row our-brands">
        <div class="col-sm-12">
          <h3 class="section-title style1" t-if="not brand_header"><span>Our Brands</span></h3>
          <h3 class="section-title style1" t-if="brand_header"><span><t t-esc="brand_header"/></span></h3>  
                          <t t-set="website_brans_img" t-value="website.get_brand_img()"/>
          <div class="owl-carousel" t-if="website_brans_img"> 
            <t t-foreach="website_brans_img" t-as="brand">
                <div class="brand-logo"> 
                    <img t-att-src="website.image_url(brand, 'image','210x88')" title="" alt="" width="210" height="88"/> 
                </div>
            </t>
          </div>
        </div>
    </div>
    </div>
</template>

<template id="product_snippet" name="Product Snippet">
    <div class="slider_product_slider" contentEditable="false">
        <div class="container">
            <div class="row featured-pro">
                <div class="col-sm-12">
                    <t t-if="products">
                        <h3 class="section-title style1" t-if="header">
                            <span>
                                <t t-esc="header"/>
                            </span>
                        </h3>
                        <h3 class="section-title style1" t-if="not header and default_header == 'is_arrival'">
                            <span>NEW ARRIVALS</span>
                        </h3>
                        <h3 class="section-title style1" t-if="not header and default_header == 'is_features'">
                            <span>FEATURES PRODUCT</span>
                        </h3>
                        <div class="owl-carousel" t-if="products">
                            <t t-as="product" t-foreach="products">
                                <div class="product">
                                    <a t-attf-href="/shop/product/#{slug(product)}">
                                        <div class="product-img">
                                            <img alt="" t-att-src="website.image_url(product, 'image', None if product_image_big else '300x300')" title=""/>
                                        </div>
                                    </a>
                                    <div class="pro-info">
                                        <div class="title">
                                            <a t-attf-href="/shop/product/#{slug(product)}">
                                                <span t-esc="product.name"/>
                                            </a>
                                        </div>
                                        <div class="price-box">
                                            <span class="special-price">
                                                <div class="product_price" itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" t-if="product.product_variant_ids">
                                                    <b>
                                                        <t t-if="(compute_currency(product.lst_price) - product.price) &gt; 0.1">
                                                            <del class="text-danger mr8" style="white-space: nowrap;" t-field="product.lst_price" t-field-options="{                   &quot;widget&quot;: &quot;monetary&quot;,                   &quot;from_currency&quot;: &quot;product.company_id.currency_id&quot;,                   &quot;display_currency&quot;: &quot;website.currency_id&quot;                  }"/>
                                                        </t>
                                                        <span style="white-space: nowrap;" t-field="product.price" t-field-options="{                   &quot;widget&quot;: &quot;monetary&quot;,                   &quot;display_currency&quot;: &quot;website.currency_id&quot;                  }"/>
                                                    </b>
                                                </div>
                                            </span>
                                        </div>
                                        <div class="add-cart">
                                            <form action="/shop/cart/update" method="post">
                                                <input name="csrf_token" t-att-value="request.csrf_token()" type="hidden"/>
                                                <input name="product_id" t-att-value="product.product_variant_ids[0].id" type="hidden"/>
                                                <button class="btn btn-primary" onclick="submit();">
                                                    <i class="fa fa-shopping-cart"/>Add to cart</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </t>
                        </div>
                    </t>
                    <t t-if="not products">

                        <h3 class="section-title style1" t-if="header">
                            <span>
                                <t t-esc="header"/>
                            </span>
                        </h3>
                        <h3 class="section-title style1" t-if="not header and default_header == 'is_arrival'">
                            <span>NEW ARRIVALS</span>
                        </h3>
                        <h3 class="section-title style1" t-if="not header and default_header == 'is_features'">
                            <span>FEATURES PRODUCT</span>
                        </h3>
                        <div class="col-md-6" t-if="not products">Product Not Available</div>
                    </t>
                </div>
            </div>
        </div>
    </div>
</template>
</odoo>