flectra/addons/website_sale/views/templates.xml

<?xml version="1.0" encoding="utf-8"?>
<flectra>
    <!-- Layout and common templates -->
    <template id="assets_backend" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_backend.js"></script>
            <link rel="stylesheet" href="/website_sale/static/src/less/website_sale_dashboard.less"/>
        </xpath>
    </template>

    <template id="assets_frontend" inherit_id="website.assets_frontend" name="Shop">
        <xpath expr="." position="inside">
            <link rel="stylesheet" href="/website_sale/static/src/css/website_sale.css" />
            <link rel="stylesheet" href="/website_sale/static/src/css/website_mail.css" />
            <link rel="stylesheet" href="/website_sale/static/src/less/website_sale.less"/>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_utils.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_payment.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_validate.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_tour_buy.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_tracking.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/products_view_switcher.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/products_view_limit.js"></script>
        </xpath>
    </template>

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

    <template id="assets_common" name="tour" inherit_id="web.assets_common">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_tour_shop.js"></script>
        </xpath>
    </template>

    <template id="header" inherit_id="website.layout" name="Header Shop My Cart Link">
        <xpath expr="//header//ul[@id='top_menu']/li" position="before">
            <t t-set="website_sale_order" t-value="website.sale_get_order()" />
            <li id="my_cart" t-att-class="'' if website_sale_order and website_sale_order.cart_quantity else 'hidden'">
                <a href="/shop/cart">
                    <i class="fa fa-shopping-cart"></i>
                    My Cart <sup t-attf-class="my_cart_quantity label label-primary" t-esc="website_sale_order and website_sale_order.cart_quantity or ''" />
                </a>
            </li>
        </xpath>
    </template>

    <template id="search" name="Search Box">
        <form t-att-action="keep('/shop'+ ('/category/'+slug(category)) if category else None, search=0)" method="get" t-att-class="search_class">
            <t t-if="attrib_values">
                <t t-foreach="attrib_values" t-as="a">
                    <input type="hidden" name="attrib" t-att-value="'%s-%s' % (a[0], a[1])" />
                </t>
            </t>
            <t t-call="website.website_search_box" />
        </form>
    </template>

    <template id="search count" inherit_id="website.website_search_box" active="False" customize_show="True" name="Show # found">
        <xpath expr="//button[hasclass('oe_search_button')]" position="inside">
            <span t-if='search and search_count' class='oe_search_found'> <small>(<t t-esc="search_count"/> found)</small></span>
        </xpath>
    </template>

    <template id="404">
        <t t-call="website.layout">
            <div id="wrap">
                <div class="oe_structure oe_empty">
                    <div class="container">
                        <h1 class="mt32">Product not found!</h1>
                        <p>Sorry, this product is not available anymore.</p>
                        <p>
                            <a t-attf-href="/shop">Return to the product list.</a>
                        </p>
                    </div>
                </div>
            </div>
        </t>
    </template>

    <!-- View Switcher Icons Template -->
    <template id="product_view_switcher" name="Product View Switcher">
        <div class="btn-group switch-grp">
            <button class="btn btn-default view-switcher grid_view"
                data-toggle="tooltip" title="Grid View">
                <span class="fa fa-th-large" />
            </button>
            <button class="btn btn-default view-switcher list_view"
                data-toggle="tooltip" title="List View">
                <span class="fa fa-bars" />
            </button>
        </div>
    </template>

    <!-- Product item used by /shop and /shop/cart -->
    <template id="products_item" name="Products item">
        <form action="/shop/cart/update" method="post">
            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
            <div itemscope="itemscope" itemtype="http://schema.org/Product">
                <div class="ribbon-wrap">
                    <div class="ribbon"
                        t-attf-style="background-color:#{product.ribbon_id.ribbon_color_back or product.ribbon_id.ribbon_color_back};color:#{product.ribbon_id.ribbon_color_text or product.ribbon_id.ribbon_color_text};">
                        <span t-esc="product.ribbon_id.name"></span>
                    </div>
                </div>
                <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']&gt;1 else None))">
                        <img class="img img-responsive image-center thumb-hover" itemprop="image" t-att-alt="product.name" t-att-prod-id="product.id" t-att-title="product.name" t-attf-src="#{base_url}#{ website.image_url(product, 'image', '300x300')}"/>
                    </a>
                </div>
                <t t-if="show_publish">
                    <div id="website_published_button" class="" groups="sales_team.group_sale_manager">
                        <t t-call="website.publish_management">
                            <t t-set="object" t-value="product" />
                            <t t-set="publish_edit" t-value="True" />
                            <t t-set="action" t-value="'product.product_template_action'" />
                        </t>
                    </div>
                </t>
                <section>
                    <h5>
                        <strong>
                            <a itemprop="name" t-att-href="keep('/shop/product/%s' % slug(product), page=(pager['page']['num'] if pager['page']['num']&gt;1 else None))" t-att-content="product.name" t-field="product.name" />
                        </strong>
                    </h5>
                    <div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" class="product_price" t-if="product.product_variant_ids">
                        <b>
                            <t t-if="product.website_price_difference and website.get_current_pricelist().discount_policy=='without_discount'">
                                <del class="text-danger mr8" style="white-space: nowrap;" t-esc="compute_currency(product.website_public_price)" t-options="{'widget': 'monetary', 'display_currency': website.get_current_pricelist().currency_id, 'from_currency': website.currency_id}" />
                            </t>

                            <span t-esc="product.website_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                            <span itemprop="price" style="display:none;" t-esc="product.website_price" />
                            <span itemprop="priceCurrency" style="display:none;" t-esc="website.currency_id.name" />
                        </b>
                    </div>
                </section>
            </div>
        </form>
    </template>

    <template id="products_description" inherit_id="website_sale.products_item" active="False" customize_show="True" name="Product Description">
        <xpath expr="//div[hasclass('product_price')]" position="before">
            <div class="text-info oe_subdescription" contenteditable="false">
                <div itemprop="description" t-field="product.description_sale"></div>
            </div>
        </xpath>
    </template>

    <template id="products_add_to_cart" inherit_id="website_sale.products_item" active="False" customize_show="True" name="Add to Cart">
        <xpath expr="//div[hasclass('product_price')]" position="inside">
            <input name="product_id" t-att-value="product.product_variant_id.id" type="hidden" />
            <t t-if="len(product.product_variant_ids) == 1">
                <a class="btn btn-default btn-xs a-submit">
                    <span class="fa fa-shopping-cart" />
                </a>
            </t>
            <t t-if="len(product.product_variant_ids) &gt; 1">
                <a class="btn btn-default btn-xs" t-att-href="keep('/shop/product/%s' % slug(product), page=(pager['page']['num'] if pager['page']['num']&gt;1 else None))">
                    <span class="fa fa-shopping-cart" />
                </a>
            </t>
        </xpath>
    </template>

    <template id="pricelist_list" name="Pricelists Dropdown">
        <t t-set="website_sale_pricelists" t-value="website.get_pricelist_available(show_visible=True)" />
        <div t-attf-class="#{website_sale_pricelists and len(website_sale_pricelists)&gt;1 and 'dropdown' or 'hidden'} btn-group">
            <t t-set="curr_pl" t-value="website.get_current_pricelist()" />
            <a href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown">
                <t t-esc="curr_pl and curr_pl.name or ' - '" />
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li t-foreach="website_sale_pricelists" t-as="pl">
                    <a t-att-href="'/shop/change_pricelist/%s' % pl.id">
                        <span class="switcher_pricelist" t-att-data-pl_id="pl.id" t-esc="pl.name" />
                    </a>
                </li>
            </ul>
        </div>
    </template>

    <!-- /shop Main Template -->
    <template id="main_shop_page" name="Shop Page Variants (Use Any One)">
        <t t-call="website_sale.products"/>
    </template>

    <!-- /shop product listing -->
    <template id="products" name="Products">
        <t t-call="website.layout">
            <t t-set="additional_title">Shop</t>
            <div id="wrap" class="js_sale">
                <div class="oe_structure" />
                <div class="container oe_website_sale">
                    <div class="products_pager">
                        <div class="row" style="width: 100%;">
                            <t t-call="website_sale.search">
                                <t t-set="search_class" t-value="'pagination form-inline o_website_sale_search'"/>
                            </t>
                            <t t-call="website_sale.pricelist_list" />
                            <t t-call="website.pager" />
                            <t t-call="website_sale.product_view_switcher" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="hidden" id="products_grid_before"></div>
                        <div class="col-md-12" id="products_grid">
                            <t t-foreach="products" t-as="product">
                                <div id="grid_list"
                                    class="col-md-4 oe_product oe_grid oe_product_cart oe-height-4"
                                    t-att-data-publish="product.website_published and website in product.website_ids and 'on' or 'off'">
                                    <t t-call="website_sale.products_item">
                                    </t>
                                </div>
                            </t>
                            <t t-if="not bins">
                                <div class="text-center text-muted oe_product">
                                    <h3 class="css_editable_display">No product defined.</h3>
                                    <p groups="sales_team.group_sale_manager">Click <i>'New'</i> in the top-right corner to create your first product.</p>
                                </div>
                            </t>
                        </div>
                    </div>
                    <div class="products_pager">
                        <t t-call="website.pager" />
                    </div>
                </div>
                <div class="oe_structure mb32" />
            </div>
        </t>
    </template>

    <!-- /shop blank page (design your own shop page) -->
    <template id="blank_shop_page" inherit_id="website_sale.main_shop_page"
              name="Blank Shop Page" active="False" customize_show="True">
        <xpath expr="//t[@t-call='website_sale.products']" position="replace">
            <t t-if="category">
                <t t-call="website_sale.products"/>
            </t>
            <t t-else="">
                <t t-call="website.layout">
                    <t t-set="additional_title">Shop</t>
                    <div id="wrap" class="oe_structure oe_empty"/>
                </t>
            </t>
        </xpath>
    </template>

    <!-- /shop category listing,
         Supported to level-1 (Main Category & Child Category) -->
    <template id="categorized_shop_page" inherit_id="website_sale.main_shop_page"
              name="Categorized Shop Page" active="False" customize_show="True">
        <xpath expr="//t[@t-call='website_sale.products']" position="replace">
            <t t-if="category">
                <t t-call="website_sale.products"/>
            </t>
            <t t-else="">
                <t t-call="website.layout">
                    <t t-set="additional_title">Shop</t>
                    <div id="wrap">
                        <div class="oe_structure" />
                        <div class="container mt32 mb32 s_product_categories">
                            <div class="col-md-12" id="filter-cm">
                                <t t-foreach="categories" t-as="c">
                                    <t t-call="website_sale.categories_recursive_snippet"/>
                                </t>
                            </div>
                        </div>
                       <div class="oe_structure" />
                    </div>
                </t>
            </t>
        </xpath>
    </template>

    <!-- /shop category listing: Parent Category -->
    <template id="categories_recursive_snippet" name="Category list">
        <div class="col-md-6 mb16" t-if="website in c.website_ids or not c.website_ids">
            <a t-att-href="keep('/shop/category/' + slug(c), category=0)" class="main-categ">
                <span t-field="c.name"/>
                <i class="fa fa-caret-right"/>
            </a>
            <div t-if="c.child_id">
                <t t-foreach="c.child_id" t-as="c">
                    <t t-call="website_sale.categories_recursive_snippet_child"/>
                </t>
            </div>
        </div>
    </template>

    <!-- /shop category listing: Child Category -->
    <template id="categories_recursive_snippet_child" name="Category list">
        <div class="col-md-6 child-categ" t-if="website in c.website_ids or not c.website_ids">
            <a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-field="c.name"/>
        </div>
    </template>

    <template id="sort" inherit_id="website_sale.products" active="True" customize_show="True" name="Show Sort by">
        <xpath expr="//div[hasclass('products_pager')]/div/t[@t-call][last()]" position="after">
            <t t-set="new_arrivals_label">New Arrivals</t>
            <t t-set="list_price_desc_label">Price</t>
            <t t-set="list_price_asc_label">Price</t>
            <t t-set="name_asc_label">Name</t>
            <t t-set="name_desc_label">Name</t>
            <t t-set="website_sale_sortable"
               t-value="[
               (new_arrivals_label + ' &lt;i class=\'fa fa-paper-plane\' aria-hidden=\'true\'&gt;&lt;/i&gt;', 'id desc'),
               (list_price_desc_label + ' &lt;i class=\'fa fa-arrow-up\' aria-hidden=\'true\'&gt;&lt;/i&gt;', 'list_price desc'),
               (list_price_asc_label + ' &lt;i class=\'fa fa-arrow-down\' aria-hidden=\'true\'&gt;&lt;/i&gt;', 'list_price asc'),
               (name_asc_label + ' &lt;i class=\'fa fa-sort-alpha-asc\' aria-hidden=\'true\'&gt;&lt;/i&gt;', 'name asc'),
               (name_asc_label + ' &lt;i class=\'fa fa-sort-alpha-desc\' aria-hidden=\'true\'&gt;&lt;/i&gt;', 'name desc'),
            ]" />
            <t t-set="website_sale_sortable_current" t-value="[sort for sort in website_sale_sortable if sort[1]==request.params.get('order', '')]"/>
            <div class="dropdown btn-group dropdown_sorty_by">
                <a href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown">
                    <t t-if='len(website_sale_sortable_current)'>
                        <span>Sorting by : <t t-raw='website_sale_sortable_current[0][0]'/></span>
                    </t>
                    <t t-else='1'>
                        <span>Sort by</span>
                        <span class="caret"></span>
                    </t>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li t-foreach="website_sale_sortable" t-as="sortby">
                        <a t-att-href="keep('/shop', order=sortby[1])">
                            <span t-raw="sortby[0]"/>
                        </a>
                    </li>
                </ul>
            </div>
        </xpath>
    </template>

    <!-- View Limit Template -->
    <template id="product_limit" inherit_id="website_sale.products" active="True" customize_show="True" name="Show Per Page Product Limit">
        <xpath expr="//div[hasclass('products_pager')]/div/t[@t-call][last()]" position="after">
            <div t-if="limits" class="product_limit dropdown btn-group">
                <button class="btn btn-default dropdown-toggle active_limit"
                    type="button" data-toggle="dropdown">
                    <b>
                        <t t-esc="PPG" />
                    </b>
                    <span class="perPage"> per Page </span>
                    <span class="caret"/>
                </button>
                <ul class="dropdown-menu limit_list">
                    <li t-foreach="limits" t-as="limit">
                        <a class="product_limit_link" t-att-value="limit['name']">
                            <t t-esc="limit['name']" />
                        </a>
                    </li>
                </ul>
            </div>
        </xpath>
    </template>

    <!-- Add to cart button-->
    <template id="categories_recursive" name="Category list">
        <li t-att-class="'active' if c.id == int(category or 0) else None" t-if="website in c.website_ids or not c.website_ids">
            <a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-field="c.name"></a>
            <ul t-if="c.child_id" class="nav nav-pills nav-stacked nav-hierarchy">
                <t t-foreach="c.child_id" t-as="c">
                    <t t-call="website_sale.categories_recursive" />
                </t>
            </ul>
        </li>
    </template>

    <template id="products_categories" inherit_id="website_sale.products" active="False" customize_show="True" name="eCommerce Categories">
        <xpath expr="//div[@id='products_grid_before']" position="inside">
            <ul class="nav nav-pills nav-stacked mt32" id="filter-cm">
                <li t-att-class=" '' if category else 'active' ">
                    <a t-att-href="keep('/shop',category=0)" class="o_not_editable">All Products</a>
                </li>
                <t t-foreach="categories" t-as="c">
                    <t t-call="website_sale.categories_recursive" />
                </t>
            </ul>
        </xpath>
        <xpath expr="//div[@id='products_grid_before']" position="attributes">
            <attribute name="class">col-md-3 col-sm-4 col-xs-12</attribute>
        </xpath>
        <xpath expr="//div[@id='products_grid']" position="attributes">
            <attribute name="class">col-md-9 col-sm-8</attribute>
        </xpath>
    </template>

    <template id="option_collapse_categories_recursive" name="Collapse Category Recursive">
        <li t-att-class="'active' if categ.id == int(category or 0) else None">
            <i t-if="categ.child_id" t-attf-class="text-primary fa #{'fa-chevron-down' if categ.id in parent_category_ids else 'fa-chevron-right'}" />
            <a t-att-href="keep('/shop/category/' + slug(categ), category=0)" t-field="categ.name"></a>
            <ul t-if="categ.child_id" class="nav nav-pills nav-stacked nav-hierarchy" t-att-style="'display:block;' if categ.id in parent_category_ids else 'display:none;'">
                <t t-foreach="categ.child_id" t-as="categ">
                    <t t-call="website_sale.option_collapse_categories_recursive" />
                </t>
            </ul>
        </li>
    </template>

    <template id="option_collapse_products_categories" name="Collapsible Category List" inherit_id="website_sale.products_categories" active="False" customize_show="True">
        <xpath expr="//div[@id='products_grid_before']/ul" position="replace">
            <h3 class="title_block widget-title">
                <span>
                    Categories
                </span>
            </h3>
            <ul class="nav nav-pills nav-stacked mt16" id="o_shop_collapse_category">
                <li t-att-class=" '' if category else 'active' ">
                    <a t-att-href="keep('/shop',category=0)" class="o_not_editable">All Products</a>
                </li>
                <t t-foreach="categories" t-as="categ">
                    <t t-call="website_sale.option_collapse_categories_recursive" />
                </t>
            </ul>
        </xpath>
    </template>

    <template id="products_attributes" inherit_id="website_sale.products" active="False" customize_show="True" name="Product Attribute's Filters">
        <xpath expr="//div[@id='products_grid_before']" position="inside">
            <form class="js_attributes" method="get">
                <input type="hidden" name="search" t-att-value="search" />
                <ul class="nav nav-pills nav-stacked">
                    <t t-foreach="attributes" t-as="a">
                        <li t-if="a.value_ids and len(a.value_ids) &gt; 1" class="mt32 attr-list">
                            <div>
                                 <h4 class="title-block">
                                     <span t-field="a.name"/>
                                 </h4>
                            </div>
                            <t t-if="a.type == 'select'">
                                <select class="form-control" name="attrib">
                                    <option value="" />
                                    <t t-foreach="a.value_ids" t-as="v">
                                        <option t-att-value="'%s-%s' % (a.id,v.id)" t-esc="v.name" t-att-selected="v.id in attrib_set" />
                                    </t>
                                </select>
                            </t>
                            <t t-if="a.type == 'radio'">
                                <ul class="nav nav-pills nav-stacked" id="radio-option">
                                    <t t-foreach="a.value_ids" t-as="v">
                                        <li t-att-class="'active' if v.id in attrib_set else None">
                                            <div>
                                                <input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id,v.id)"
                                                       t-att-checked="'checked' if v.id in attrib_set else None"/>
                                                <label style="font-weight: normal" t-field="v.name"/>
                                            </div>
                                        </li>
                                    </t>
                                </ul>
                            </t>
                            <t t-if="a.type == 'color'">
                                <ul class="nav nav-pills nav-stacked" id="color-option">
                                    <t t-foreach="a.value_ids" t-as="v">
                                        <label t-attf-style="background-color:#{v.html_color or v.name}"
                                              t-attf-class="css_attribute_color #{'active' if v.id in attrib_set else ''}">
                                            <input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id,v.id)"
                                                  t-att-checked="'checked' if v.id in attrib_set else None"
                                                   t-att-title="v.name"/>
                                        </label>
                                    </t>
                                </ul>
                            </t>
                        </li>
                    </t>
                </ul>
            </form>
        </xpath>
        <xpath expr="//div[@id='products_grid_before']" position="attributes">
            <attribute name="class">col-md-3 hidden-xs</attribute>
        </xpath>
        <xpath expr="//div[@id='products_grid']" position="attributes">
            <attribute name="class">col-md-9</attribute>
        </xpath>
    </template>

    <template id="products_list_view" inherit_id="website_sale.products" name="List View" active="False">
        <xpath expr="//div[@id='products_grid']/t/div[@id='grid_list']" position="replace">
            <div class="oe_product oe_list oe_product_cart"
                t-att-data-publish="product.website_published and website in product.website_ids and 'on' or 'off'">
                <t t-call="website_sale.products_item">
                    <t t-set="show_publish" t-value="True" />
                </t>
            </div>
        </xpath>
    </template>

    <!-- /shop/product product page -->
    <template id="product_edit_options" inherit_id="website.user_navbar" name="Edit Product Options">
        <xpath expr="//li[@id='edit-page-menu']" position="after">
            <t t-if="main_object._name == 'product.template'" t-set="action" t-value="'product.product_template_action'" />
        </xpath>
    </template>
    <template id="product" name="Product">
        <t t-call="website.layout">
            <t t-set="additional_title" t-value="product.name" />
            <div itemscope="itemscope" itemtype="http://schema.org/Product" id="wrap" class="js_sale">
                <section t-attf-class="container mt8 oe_website_sale #{(compute_currency(product.lst_price) - product.website_price) &gt; 0.01 and website.get_current_pricelist().discount_policy == 'without_discount'  and 'discount'}" id="product_detail">
                    <div class="row">
                        <div class="col-sm-4">
                            <ol class="breadcrumb">
                                <li>
                                    <a t-att-href="keep(category=0)">Products</a>
                                </li>
                                <li t-if="category">
                                    <a t-att-href="keep('/shop/category/%s' % slug(category), category=0)" t-field="category.name" />
                                </li>
                                <li class="active">
                                    <span t-field="product.name" />
                                </li>
                            </ol>
                        </div>
                        <div class="col-sm-3 mb8">
                            <t t-call="website_sale.search" />
                        </div>
                        <div id="website_published_button" class="col-sm-3">
                        </div>
                        <div class="col-sm-2 text-right">
                            <t t-call="website_sale.pricelist_list" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-7">
                            <span itemprop="image" t-attf-content="{{request.httprequest.url_root}}web/image/product.template/{{product.id}}/image" t-field="product.image" t-options="{'widget': 'image', 'class': 'product_detail_img', 'alt-field': 'name', 'zoom': 'image'}" groups="!website_sale.group_website_multi_image"/>
                            <t groups="website_sale.group_website_multi_image">
                                <t t-set="variant_img" t-value="product.product_variant_id.image_variant"/>
                                <t t-set="image_ids"  t-value="product.product_image_ids"/>
                                <div id="o-carousel-product" class="carousel slide" data-ride="carousel" data-interval="0">
                                  <div class="carousel-outer">
                                    <div class="carousel-inner">
                                        <div class="item active" itemprop="image" t-field="product.image" t-options="{'widget': 'image', 'class': 'product_detail_img js_variant_img', 'alt-field': 'name', 'zoom': 'image', 'unique': product['__last_update']}"/>
                                        <div t-if="variant_img" class="item" itemprop="image" t-field="product.product_variant_id.image" t-options="{'widget': 'image', 'class': 'product_detail_img', 'alt-field': 'name', 'zoom': 'image', 'unique': product['__last_update'] + (product.product_variant_id['__last_update'] or '')}"/>
                                        <t t-if="len(image_ids)" t-foreach="image_ids" t-as="pimg">
                                            <div class="item" t-field="pimg.image" t-options='{"widget": "image", "class": "product_detail_img", "alt-field": "name", "zoom": "image" }'/>
                                        </t>
                                    </div>

                                    <t t-if="len(image_ids) or variant_img">
                                        <a class="carousel-control left" href="#o-carousel-product" role="button" data-slide="prev" >
                                            <span class="fa fa-chevron-left" aria-hidden="true"/>
                                            <span class="sr-only">Previous</span>
                                        </a>
                                        <a class="carousel-control right" href="#o-carousel-product" role="button" data-slide="next">
                                            <span class="fa fa-chevron-right" aria-hidden="true"/>
                                            <span class="sr-only">Next</span>
                                        </a>
                                    </t>
                                  </div>

                                  <ol class="carousel-indicators" t-if="len(image_ids) or variant_img">
                                    <li data-target="#o-carousel-product" data-slide-to="0" class="active">
                                        <img class="img img-responsive js_variant_img_small" t-attf-src="/website/image/product.template/{{product.id}}/image/90x90" t-att-alt="product.name"/>
                                    </li>
                                    <li t-if="variant_img" data-target="#o-carousel-product" data-slide-to="1" class="">
                                        <img class="img img-responsive" t-attf-src="/website/image/product.product/{{product.product_variant_id.id}}/image/90x90" t-att-alt="product.name"/>
                                    </li>
                                    <t t-if="len(image_ids)" t-foreach="image_ids" t-as="pimg">
                                        <li data-target="#o-carousel-product" t-att-data-slide-to="pimg_index + (variant_img and 2 or 1)">
                                            <img class="img img-responsive" t-attf-src="/website/image/product.image/{{pimg.id}}/image/90x90" t-att-alt="pimg.name"/>
                                        </li>
                                    </t>
                                  </ol>
                                </div>
                            </t>
                        </div>
                        <div class="col-sm-5 col-lg-4 col-lg-offset-1" id="product_details">
                            <h1 itemprop="name" t-field="product.name">Product Name</h1>
                            <span itemprop="url" style="display:none;" t-esc="'%sshop/product/%s' % (request.httprequest.url_root, slug(product))"/>
                            <t t-set="attribute_value_ids" t-value="get_attribute_value_ids(product)"/>
                            <form action="/shop/cart/update" class="js_add_cart_variants" t-att-data-attribute_value_ids="attribute_value_ids" method="POST">
                                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                <div class="js_product" t-if="product.product_variant_ids" id="js_product_style">
                                    <t t-placeholder="select">
                                        <input type="hidden" class="product_id" name="product_id" t-att-value="product.product_variant_id.id if len(product.product_variant_ids) == 1 else '0'" />
                                        <t t-call="website_sale.variants">
                                            <t t-set="ul_class" t-value="'nav-stacked'" />
                                        </t>
                                    </t>
                                    <t t-call="website_sale.product_price" />
                                    <p t-if="len(product.product_variant_ids) &gt; 1" class="css_not_available_msg bg-danger" style="padding: 15px;">This combination does not exist.</p>
                                    <a id="add_to_cart" class="btn btn-primary btn-lg mt8 js_check_product a-submit" href="#">Add to Cart</a>
                                </div>
                            </form>
                            <hr t-if="product.description_sale" />
                            <div class="o_not_editable">
                                <p t-field="product.description_sale" class="text-muted" />
                            </div>
                            <hr />
                            <p class="text-muted">
                              30-day money-back guarantee<br />
                              Free Shipping in U.S.<br />
                              Buy now, get in 2 days
                            </p>
                        </div>
                    </div>

                    <div id="product_description_reviews" class="mt8">
                        <ul class="nav nav-tabs">
                            <li class="active" id="li-full-desc">
                                <a href="#full-desc" data-toggle="tab">
                                    <strong>Description</strong>
                                </a>
                            </li>
                            <t t-if="product.attribute_line_ids">
                                <li role="presentation" class="" id="product_specification_tab">
                                    <a href="#product-additional-info" aria-controls="full" role="tab"
                                        data-toggle="tab" aria-expanded="true">
                                        <strong>Specifications</strong>
                                    </a>
                                </li>
                            </t>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="full-desc">
                                <div itemprop="description" t-field="product.website_description"
                                    class="oe_structure mt16" id="product_full_description" />
                            </div>
                            <div class="tab-pane fade" id="product-additional-info">
                                <div t-if="product.attribute_line_ids">
                                    <div id="product_attribute_details" class="mt32 mb32">
                                        <table class="table table-striped">
                                            <tbody>
                                                <tr t-foreach="product.attribute_line_ids" t-as="pfl">
                                                    <td class="col-md-4">
                                                        <strong>
                                                            <p t-esc="pfl.attribute_id.name" style="margin: 0 0 0px;" />
                                                        </strong>
                                                    </td>
                                                    <td>
                                                        <p style="margin: 0 0 0px;">
                                                            <t t-set="i" t-value="0" />
                                                            <t t-foreach="pfl.value_ids" t-as="pfv">
                                                                <t t-esc="pfv.name" />
                                                                <span t-if="i != len(pfl.value_ids)-1">
                                                                    ,
                                                                </span>
                                                                <t t-set="i" t-value="i+1" />
                                                            </t>
                                                        </p>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <t t-set="head">
                    <!-- Facebook and linkedin sharing data -->
                    <meta property="og:type" content="website" />
                    <meta property="og:url" t-att-content="request.httprequest.url" />
                    <meta property="og:image" t-attf-content="#{request.httprequest.url_root}web/image/product.template/#{product.id}/image" />
                    <meta property="og:description" t-att-content="product.description_sale" />
                    <!--  Twitter sharing data -->
                    <meta name="twitter:card" content="summary_large_image" />
                    <meta name="twitter:site" t-attf-content="@#{res_company.name}" />
                    <meta name="twitter:title" t-att-content="product.name" />
                    <meta name="twitter:description" t-att-content="product.description_sale" />
                    <meta name="twitter:image" t-attf-content="#{request.httprequest.url_root}web/image/product.template/#{product.id}/image" />
                </t>
            </div>
        </t>
    </template>

    <template inherit_id='website_sale.product' id="product_picture_magnify" customize_show="True" name="Activate Magnify">
        <xpath expr='//div[hasclass("js_sale")]' position='attributes'>
            <attribute name="class" separator=" " add="ecom-zoomable zoomflectra-hover" />
        </xpath>
    </template>

    <template id="recommended_products" inherit_id="website_sale.product" customize_show="True" name="Alternative Products">
        <xpath expr="//div[@id='product_full_description']" position="after">
            <div class="container mt32" t-if="product.alternative_product_ids">
                <h3>Alternative Products:</h3>
                <div class="row mt16" style="">
                    <t t-foreach="product.alternative_product_ids" t-as="alt_product">
                        <div class="col-md-2 thumbnail" style="width: 170px; height:130px; float:left; display:inline; margin-right: 10px; overflow:hidden;">
                            <div class="mt16 text-center" style="height: 100%;">
                                <div t-field="alt_product.image_small" t-options="{'widget': 'image', 'class': 'img-rounded shadow o_alternative_product' }" />
                                <h5>
                                    <a t-attf-href="/shop/product/#{ slug(alt_product) }" style="display: block">
                                        <span t-att-title="alt_product.name" t-field="alt_product.name" style="display: block;" />
                                    </a>
                                </h5>
                            </div>
                        </div>
                    </t>
                </div>
            </div>
        </xpath>
    </template>

    <template id="product_attributes" inherit_id="website_sale.product" name="Product attributes">
        <xpath expr="//p[@t-field='product.description_sale']" position="after">
            <hr t-if="sum([(1 if len(l.value_ids)==1 else 0) for l in product.attribute_line_ids])" id='hr_product_attributes_simple'/>
            <p class="text-muted" id="product_attributes_simple">
                <t t-foreach="product.attribute_line_ids.sorted(key=lambda x: x.attribute_id.sequence)" t-as="variant_id">
                    <t t-if="len(variant_id.value_ids)==1">
                        <span t-field="variant_id.attribute_id" />: <span t-field="variant_id.value_ids[0].name" /><br /></t>
                </t>
            </p>
        </xpath>
    </template>

    <!-- Product options: OpenChatter -->
    <template id="product_comment" inherit_id="website_sale.product" active="False" customize_show="True" name="Discussion and Rating">
        <xpath expr="//li[@id='li-full-desc']" position="after">
            <li id="li-comment">
                <a href="#full-comment" data-toggle="tab">
                    <strong>Discussion and Rating</strong>
                </a>
            </li>
        </xpath>
        <xpath expr="//div[@id='full-desc']" position="after">
            <div class="tab-pane fade" id="full-comment">
                <t t-call="portal.message_thread">
                    <t t-set="object" t-value="product"/>
                    <t t-set="display_rating" t-value="True"/>
                </t>
            </div>
        </xpath>
    </template>

    <template id="product_quantity" inherit_id="website_sale.product" customize_show="True" name="Select Quantity">
      <xpath expr="//a[@id='add_to_cart']" position="before">
        <div class="css_quantity input-group oe_website_spinner" contenteditable="false">
            <a t-attf-href="#" class="mb8 input-group-addon js_add_cart_json">
                <i class="fa fa-minus"></i>
            </a>
            <input type="text" class="form-control quantity" data-min="1" name="add_qty" value="1"/>
            <a t-attf-href="#" class="mb8 input-group-addon float_left js_add_cart_json">
                <i class="fa fa-plus"></i>
            </a>
        </div>
      </xpath>
    </template>

    <template id="product_price">
      <div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" class="product_price mt16">
          <h4 class="oe_price_h4 css_editable_mode_hidden">
              <span class="text-danger oe_default_price" style="text-decoration: line-through; white-space: nowrap;"
                t-esc="compute_currency(product.website_public_price)" t-options="{'widget': 'monetary', 'display_currency': website.get_current_pricelist().currency_id, 'from_currency': website.currency_id}" t-att-style="'text-decoration: line-through; white-space: nowrap; ' + '' if product.website_price_difference and website.get_current_pricelist().discount_policy == 'without_discount' else 'display: none;'"
              />
              <b class="oe_price" style="white-space: nowrap;" t-esc="product.website_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
              <span itemprop="price" style="display:none;" t-esc="product.website_price"/>
              <span itemprop="priceCurrency" style="display:none;" t-esc="website.currency_id.name"/>
          </h4>
          <h4 class="css_non_editable_mode_hidden decimal_precision" t-att-data-precision="str(product.currency_id.decimal_places)">
            <span t-field="product.lst_price"
                t-options='{
                   "widget": "monetary",
                   "display_currency": product.currency_id,
               }'/>
          </h4>
          <h4 class="hidden oe_not_available bg-warning">Product not available</h4>
      </div>
    </template>

    <template id="product_variants" inherit_id="website_sale.product" active="False" customize_show="True" name="List View of Variants">
      <xpath expr="//t[@t-placeholder='select']" position="replace">
        <input type="hidden" t-if="len(product.product_variant_ids) == 1" class="product_id" name="product_id" t-att-value="product.product_variant_id.id"/>
        <t t-if="len(product.product_variant_ids) &gt; 1">
          <label label-default="label-default" class="radio" t-foreach="product.product_variant_ids" t-as="variant_id">
            <input type="radio" name="product_id" class="js_product_change" t-att-checked="'checked' if variant_id_index == 0 else None" t-att-value="variant_id.id" t-att-data-lst_price="variant_id.lst_price" t-att-data-price="variant_id.price"/>
            <label t-esc="variant_id.name_get()[0][1]"/>
            <span class="badge" t-if="variant_id.price_extra">
              <t t-esc="variant_id.price_extra > 0 and '+' or ''"/><span t-field="variant_id.price_extra" style="white-space: nowrap;" t-options='{
                    "widget": "monetary",
                    "from_currency": product.currency_id,
                    "display_currency": website.currency_id
                  }'/>
            </span>
          </label>
        </t>
      </xpath>
    </template>

    <template id="variants">
      <t t-set="attribute_value_ids" t-value="get_attribute_value_ids(product)"/>
      <ul t-attf-class="list-unstyled js_add_cart_variants #{ul_class}" t-att-data-attribute_value_ids="attribute_value_ids">
        <t t-foreach="product.attribute_line_ids.sorted(key=lambda x: x.attribute_id.sequence)" t-as="variant_id">
          <li t-if="len(variant_id.value_ids) > 1">

            <strong t-field="variant_id.attribute_id.name"/>

            <t t-if="variant_id.attribute_id.type == 'select'">
              <select t-attf-class="form-control #{'js_variant_change' if variant_id.attribute_id.create_variant else ''}" t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)">
                <t t-foreach="variant_id.value_ids" t-as="value_id">
                  <option t-att-value="value_id.id">
                      <span t-field="value_id.name"/>
                      <span t-if="value_id.price_extra">
                          <t t-esc="value_id.price_extra > 0 and '+' or ''"/><span t-field="value_id.price_extra" style="white-space: nowrap;" t-options='{
                                   "widget": "monetary",
                                    "from_currency": product.currency_id,
                                   "display_currency": website.currency_id
                               }'/>
                      </span>
                  </option>
                </t>
              </select>
            </t>

            <t t-if="variant_id.attribute_id.type == 'radio'">
              <ul class="list-unstyled">
                  <t t-set="inc" t-value="0"/>
                  <t t-foreach="variant_id.value_ids" t-as="value_id">
                      <li class="form-group js_attribute_value" style="margin: 0;">
                          <label class="control-label">
                              <input type="radio" t-att-class="'js_variant_change_full js_variant_change' if variant_id.attribute_id.create_variant else None" t-att-checked="'checked' if not inc else None" t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)" t-att-value="value_id.id" style="vertical-align: top; margin-right: 10px;"/>
                              <label t-field="value_id.name"/>
                              <span class="badge" t-if="value_id.price_extra">
                                  <t t-esc="value_id.price_extra > 0 and '+' or ''"/><span t-field="value_id.price_extra" style="white-space: nowrap;" t-options='{
                                          "widget": "monetary",
                                          "from_currency": product.currency_id,
                                          "display_currency": website.currency_id
                                       }'/>
                              </span>
                          </label>
                      </li>
                      <t t-set="inc" t-value="inc+1"/>
                  </t>
              </ul>
            </t>

            <t t-if="variant_id.attribute_id.type == 'color'">
              <ul class="list-inline">
                  <t t-set="inc" t-value="0"/>
                  <li t-foreach="variant_id.value_ids" t-as="value_id">
                      <label t-attf-style="background-color:#{value_id.html_color or value_id.name}"
                          t-attf-class="css_attribute_color #{'active' if not inc else ''}">
                        <input type="radio" t-att-class="'js_variant_change' if variant_id.attribute_id.create_variant else None"
                          t-att-checked="'checked' if not inc else None"
                          t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
                          t-att-value="value_id.id"
                          t-att-title="value_id.name"/>
                      </label>
                      <t t-set="inc" t-value="inc+1"/>
                  </li>
              </ul>
            </t>

          </li>
        </t>
      </ul>
    </template>

    <template id="wizard_checkout" name="Wizard Checkout">
        <ul class="wizard pull-right hidden-xs">
            <li t-att-class="step==10 and 'text-primary' or 'text-muted'" id="step10">
                <t t-set="step_review_order" t-value="step&gt;10 and step&lt;50"/>
                <a t-att-href="step_review_order and '/shop/cart' or '#'" t-att-class="step_review_order and 'text-success' or 'o_link_disable'">
                    <span>Review Order</span>
                </a>
                <span class="chevron"/>
            </li>
            <li t-att-class="(step==20 and 'text-primary') or 'text-muted'" id="step20">
                <!-- why website_sale_order is not set here ? -->
                <t t-set="step_billing" t-value="step&gt;20 and step&lt;50"/>
                <a t-att-href="step_billing and '/shop/checkout' or '#'" t-att-class="step_billing and 'text-success' or ('o_link_disable' + ('' if step == 20 else ' text-muted'))">
                    <!-- billing if not loggedin - TODO -->
                    <t t-set="website_sale_order" t-value="website.sale_get_order()" />
                    <span>Billing</span>
                    <t t-if="not website_sale_order or not website_sale_order.website_order_line or not website_sale_order.only_services"><span> &amp; Shipping</span></t>
                    <span class="chevron"/>
                </a>
            </li>
            <li t-att-class="(step==40 and 'text-primary') or 'text-muted'" id="step40">
                Payment<span class="chevron"></span>
            </li>
            <li t-att-class="(step==50 and 'text-primary') or 'text-muted'" id="step50">
                Confirmation<span class="chevron"></span>
            </li>
        </ul>
    </template>

    <template id="extra_info" name="Checkout Extra Info">
        <t t-call="website.layout">
            <t t-set="no_footer">1</t>
            <div id="wrap">
                <div class="container oe_website_sale">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 oe_cart">
                            <div class='row'>
                                <t t-call="website_sale.wizard_checkout">
                                    <t t-set="step" t-value="30"/>
                                </t>
                            </div>
                            <div class="row mb32">
                                <div class='col-md-12 o_website_sale_rightfit'>
                                    <h2 class="mb8 mt8">Extra Step</h2>
                                    <form action="/website_form/" method="post" class="s_website_form form-horizontal container-fluid" enctype="multipart/form-data" data-force_action="shop.sale.order" data-model_name="sale.order" data-success_page="/shop/payment">
                                        <div class="form-group form-field o_website_form_custom">
                                            <div class="col-md-3 col-sm-4 text-right-not-xs">
                                                <label class="control-label" for="client_order_ref">Your Reference</label>
                                            </div>
                                            <div class="col-md-7 col-sm-8">
                                                <input type="text" class="form-control o_website_form_input" name="client_order_ref"/>
                                            </div>
                                        </div>
                                        <div class="form-group form-field o_website_form_custom">
                                            <div class="col-md-3 col-sm-4 text-right-not-xs">
                                                <label class="control-label" for="Give us your feedback...">Give us your feedback...</label>
                                            </div>
                                            <div class="col-md-7 col-sm-8">
                                                <textarea class="form-control o_website_form_input" name="Give us your feedback..." />
                                            </div>
                                        </div>
                                        <div class="form-group form-field o_website_form_custom">
                                            <div class="col-md-3 col-sm-4 text-right-not-xs">
                                                <label class="control-label" for="a_document">A document to provide</label>
                                            </div>
                                            <div class="col-md-7 col-sm-8">
                                                <input type="file" class="form-control o_website_form_input" name="a_document" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-md-3 col-sm-4">
                                            </div>
                                            <div class="col-md-7 col-sm-8">
                                                <a href="/shop/checkout" class="btn btn-default mb32 pull-left"><span class="fa fa-long-arrow-left" /> Previous</a>
                                                <a class="btn btn-primary pull-right mb32 o_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-long-arrow-right" /></a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <!--
                                Sample Code to re-inject previous value is needed.
                                <script>
                                    $("input[name='client_order_ref']").val(_.unescape('<t t-esc="escape(website_sale_order.client_order_ref or '') or ''"/>'));
                                </script>
                            -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="oe_structure row" />
        </t>
    </template>

    <template id="extra_info_option" name="Extra Step Option" inherit_id="wizard_checkout" active="False" customize_show="True">
        <xpath expr="//li[@id='step40']" position="replace">
            <li t-att-class="(step==40 and 'text-primary') or 'text-muted'" id="step40">
                <t t-if="step&gt;40 and step&lt;50">
                    <a href="/shop/payment" class="text-success">
                        Payment<span class="chevron"></span>
                    </a>
                </t>
                <t t-if="not (step&gt;40 and step&lt;50)">
                    Payment<span class="chevron"></span>
                </t>
            </li>
        </xpath>
        <xpath expr="//li[@id='step20']" position="after">
            <li t-att-class="(step==30 and 'text-primary') or 'text-muted'" id="step30">
                <t t-if="step&gt;30 and step&lt;50">
                    <a href="/shop/extra_info" class="text-success">
                        Extra Info<span class="chevron"></span>
                    </a>
                </t>
                <t t-if="not (step&gt;30 and step&lt;50)">
                    Extra Info<span class="chevron"></span>
                </t>
            </li>
        </xpath>
    </template>

    <template id="cart_lines" name="Shopping Cart Lines">
        <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="js_cart_lines well well-lg">
          Your cart is empty!
        </div>
        <table class="table table-striped table-condensed js_cart_lines" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
            <thead>
                <tr>
                    <th class="td-img">Product</th>
                    <th></th>
                    <th class="text-center td-qty">Quantity</th>
                    <th class="text-center td-price">Price</th>
                </tr>
            </thead>
            <tbody>
                <t t-foreach="website_sale_order.website_order_line" t-as="line">
                    <tr>
                        <td colspan="2" t-if="not line.product_id.product_tmpl_id" class='td-img'></td>
                        <td align="center" t-if="line.product_id.product_tmpl_id" class='td-img'>
                            <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
                        </td>
                        <td t-if="line.product_id.product_tmpl_id" class='td-product_name'>
                            <div>
                                <a t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
                                    <strong t-esc="line.product_id.with_context(display_default_code=False).display_name" />
                                </a>
                            </div>
                            <div class="text-muted hidden-xs small">
                                <t t-foreach="line.name.splitlines()[1:]" t-as="name_line">
                                    <span><t t-esc="name_line"/></span><br/>
                                </t>
                            </div>
                            <a href='#' class='js_delete_product hidden-xs no-decoration'> <small><i class='fa fa-trash-o'></i> Remove</small></a>
                        </td>
                        <td class="text-center td-qty">
                            <div class="css_quantity input-group oe_website_spinner">
                                <a t-attf-href="#" class="mb8 input-group-addon js_add_cart_json hidden-xs">
                                    <i class="fa fa-minus"></i>
                                </a>
                                <input type="text" class="js_quantity form-control quantity" t-att-data-line-id="line.id" t-att-data-product-id="line.product_id.id" t-att-value="int(line.product_uom_qty)" />
                                <a t-attf-href="#" class="mb8 input-group-addon float_left js_add_cart_json hidden-xs">
                                    <i class="fa fa-plus"></i>
                                </a>
                            </div>
                        </td>
                        <td class="text-center td-price" name="price">
                            <t t-if="(compute_currency(line.product_id.lst_price) - line.price_reduce ) &gt; 0.01  and website.get_current_pricelist().discount_policy=='without_discount'">
                                <del t-attf-class="#{'text-danger mr8'}" style="white-space: nowrap;" t-esc="compute_currency(line.product_id.website_public_price)" t-options="{'widget': 'monetary', 'display_currency': website.get_current_pricelist().currency_id, 'from_currency': website.currency_id}" />
                            </t>
                            <span t-field="line.price_reduce_taxexcl" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="sale.group_show_price_subtotal" />
                            <span t-field="line.price_reduce_taxinc" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="sale.group_show_price_total" />
                        </td>
                    </tr>
                </t>
            </tbody>
        </table>
        <div class="js_cart_lines row">
            <t t-call="website_sale.total">
                <t t-set='extra_class' t-value='"col-xs-12 col-sm-5 col-sm-push-7"'/>
                <t t-set='redirect'>/shop/cart</t>
            </t>
        </div>
    </template>

    <template id="cart" name="Shopping Cart">
        <t t-call="website.layout">
            <div id="wrap">
                <div class="container oe_website_sale">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 oe_cart">
                            <div class="row">
                                <t t-call="website_sale.wizard_checkout">
                                    <t t-set="step" t-value="10" />
                                </t>
                            </div>
                            <div class="row mb32">
                                <div class="col-md-12 o_website_sale_rightfit">
                                    <h2 class="mb8 mt8">Shopping Cart</h2>
                                    <div t-if="abandoned_proceed or access_token" class="mt8 mb8 alert alert-info"> <!-- abandoned cart choices -->
                                        <t t-if="abandoned_proceed">
                                            <p>Your previous cart has already been completed.</p>
                                            <p t-if="website_sale_order">Please proceed your current cart.</p>
                                        </t>
                                        <t t-if="access_token">
                                            <p>This is your current cart.</p>
                                            <p>
                                                <strong><a t-attf-href="/shop/cart/?access_token=#{access_token}&amp;revive=squash">Click here</a></strong> if you want to restore your previous cart. Your current cart will be replaced with your previous cart.</p>
                                            <p>
                                                <strong><a t-attf-href="/shop/cart/?access_token=#{access_token}&amp;revive=merge">Click here</a></strong> if you want to merge your previous cart into current cart.
                                            </p>
                                        </t>
                                    </div>
                                    <t t-call="website_sale.cart_lines" />
                                    <div class="clearfix" />
                                    <a t-if="not optional_products and website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32 mr8" href="/shop/checkout">
                                        <span class="hidden-xs">Process Checkout</span>
                                        <span class="visible-xs-inline">Checkout</span>
                                        <span class="fa fa-long-arrow-right" />
                                    </a>
                                    <div class="oe_structure" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="oe_structure" />
            </div>
        </t>
    </template>

    <template id="cart_popover" name="Cart Popover">
        <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="well well-lg">
                  Your cart is empty!
                </div>
        <t t-if="website_sale_order and website_sale_order.website_order_line">
            <t t-foreach="website_sale_order.website_order_line" t-as="line">
                <div class="row mb8 cart_line">
                    <div class="col-xs-3">
                        <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
                    </div>
                    <div class="col-xs-9">
                        <a t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
                            <span t-esc="line.product_id.with_context(display_default_code=False).display_name" class="h6" />
                        </a>
                        <br />
                        <small>Qty: <t t-esc="int(line.product_uom_qty)" /></small>
                    </div>
                </div>
            </t>
            <div class="text-center">
                <span class="h5">
                    <t t-call="website_sale.total">
                        <t t-set='hide_coupon'>True</t>
                    </t>
                </span>
                <a class="btn btn-primary" href="/shop/cart">
                       View Cart (<t t-esc="website_sale_order.cart_quantity" /> items)
                     </a>
            </div>
        </t>
    </template>

    <template id="suggested_products_list" inherit_id="website_sale.cart_lines" customize_show="True" name="Alternative Products in my cart">
        <xpath expr="//table[@id='cart_products']" position="after">
            <h5 class='text-muted js_cart_lines' t-if="suggested_products">Suggested Accessories:</h5>
            <table t-if="suggested_products" class="js_cart_lines table table-striped table-condensed">
                <tbody>
                    <tr t-foreach="suggested_products" t-as="product">
                        <td class='td-img'>
                            <a t-attf-href="/shop/product/#{ slug(product.product_tmpl_id) }">
                                <span t-field="product.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
                            </a>
                        </td>
                        <td class='td-product_name'>
                            <div>
                                <a t-attf-href="/shop/product/#{ slug(product.product_tmpl_id) }">
                                    <strong t-field="product.display_name" />
                                </a>
                            </div>
                            <div class="text-muted hidden-xs" t-field="product.description_sale" />
                        </td>
                        <td class='td-price'>
                            <t t-if="product.website_price_difference  and website.get_current_pricelist().discount_policy=='without_discount'">
                                <del class="text-danger mr8" style="white-space: nowrap;" t-field="product.lst_price" t-options="{'widget': 'monetary','from_currency': product.currency_id, 'display_currency': website.currency_id}" />
                            </t>
                            <span t-field="product.website_price" style="white-space: nowrap;" t-options="{'widget': 'monetary','display_currency': website.currency_id}" />
                        </td>
                        <td class="col-md-2 col-sm-3 col-xs-4 text-center">
                            <input class="js_quantity" name="product_id" t-att-data-product-id="product.id" type="hidden" />
                            <a class="btn btn-link js_add_suggested_products">
                                <strong>Add to Cart</strong>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </xpath>
    </template>

    <template id="continue_shopping" inherit_id="website_sale.cart" customize_show="True" name="Continue Shopping Button">
        <xpath expr="//a[@href='/shop/checkout']" position="before">
            <a href="/shop" class="btn btn-default mb32">
                <span class="fa fa-long-arrow-left" />
                <span class="hidden-xs">Continue Shopping</span>
                <span class="visible-xs-inline">Continue</span>
            </a>
        </xpath>
    </template>

    <template id='coupon_form' name='Coupon form'>
        <t t-if="request.params.get('code_not_available')" name="code_not_available">
            <p class="bg-warning">This promo code is not available</p>
        </t>
        <form t-att-action="'/shop/pricelist%s' % (redirect and '?r=' + redirect or '')"
            method="post" class="mb32" name="coupon_code">
            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
            <div class="input-group">
                <input name="promo" class="form-control" type="text" placeholder="code..." t-att-value="website_sale_order.pricelist_id.code or None" />
                <div class="input-group-btn">
                    <a class="btn btn-default a-submit">Apply</a>
                </div>
            </div>
        </form>
    </template>

    <template id="checkout">
        <t t-call="website.layout">
            <t t-set="additional_title">Shop - Checkout</t>
            <t t-set="no_footer">1</t>
            <div id="wrap">
                <div class="container oe_website_sale">
                    <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 oe_cart">
                            <div class='row'>
                                <t t-call="website_sale.wizard_checkout">
                                    <t t-set="step" t-value="20" />
                                </t>
                            </div>
                            <div class="row mb32">
                                <div class="col-md-12">
                                    <h2 class="page-header mt8">Billing Address</h2>
                                </div>
                                <div class="col-md-6 one_kanban">
                                    <t t-call="website_sale.address_kanban">
                                        <t t-set='contact' t-value="order.partner_id"/>
                                        <t t-set='selected' t-value="1"/>
                                        <t t-set='readonly' t-value="1"/>
                                    </t>
                                </div>
                            </div>
                            <t t-if="not only_services" groups="sale.group_delivery_invoice_address">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2 class="page-header mt16 mb4">Shipping Address
                                        </h2>
                                    </div>
                                </div>
                                <div class="row all_shipping">
                                    <div class="col-md-12">
                                        <div class="row mt8">
                                            <div class="col-sm-12 col-md-12 one_kanban">
                                                <form action="/shop/address" method="post" class=''>
                                                    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                                    <a class='a-submit btn btn-default mb16 btn-block'>
                                                        <i class="fa fa-plus-square" aria-hidden="true"></i> Add an address
                                                    </a>
                                                </form>
                                            </div>
                                            <t t-foreach="shippings" t-as="ship">
                                                <div class="col-sm-12 col-md-6 one_kanban">
                                                    <t t-call="website_sale.address_kanban">
                                                        <t t-set="actual_partner" t-value="order.partner_id" />
                                                        <t t-set='contact' t-value="ship"/>
                                                        <t t-set='selected' t-value="order.partner_shipping_id==ship"/>
                                                        <t t-set='readonly' t-value="bool(len(shippings)==1)"/>
                                                        <t t-set='edit_billing' t-value="bool(ship==order.partner_id)"/>
                                                    </t>
                                                </div>
                                            </t>
                                        </div>
                                    </div>
                                </div>
                            </t>
                            <div class="clearfix" />
                            <div>
                                <a href="/shop/cart" class="btn btn-default mb32">
                                    <span class="fa fa-long-arrow-left" /> Return to Cart</a>
                                <a class="btn btn-primary pull-right mb32 " href="/shop/confirm_order">Confirm <span class="fa fa-long-arrow-right" /></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </t>
    </template>

    <template id="address_kanban" name="Kanban address">
            <form action="/shop/checkout" method="POST" class='hide'>
                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                <input type="hidden" name="partner_id" t-att-value="contact.id" />
                <t t-if='edit_billing'>
                    <input type="hidden" name="callback" value="/shop/checkout?use_billing" />
                </t>
                <input type='submit'/>
            </form>
            <a t-if="not actual_partner or (ship.id in actual_partner.ids + actual_partner.child_ids.ids)" class='btn btn-link pull-right fa fa-edit js_edit_address no-decoration' title="Edit this address"></a>
            <div t-att-class="'panel panel-default %s' % (selected and 'border_primary' or 'js_change_shipping')">
                <div class='panel-body' style='min-height: 130px;'>
                    <t t-esc="contact" t-options="dict(widget='contact', fields=['name', 'address'], no_marker=True)"/>
                </div>
                <div class='panel-footer' t-if='not readonly'>
                    <span class='btn-ship' t-att-style="'' if selected else 'display:none;'">
                        <a class="btn btn-block btn-primary">
                            <i class='fa fa-check'></i> Ship to this address
                        </a>
                    </span>
                    <span class='btn-ship' t-att-style="'' if not selected else 'display:none;'">
                        <a class="btn btn-block btn-default">
                            Select this address
                        </a>
                    </span>
                </div>
            </div>
    </template>

    <template id="address" name="Address Management">
        <t t-set="no_footer">1</t>
        <t t-call="website.layout">
            <div id="wrap">
                <div class="container oe_website_sale">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 oe_cart">
                    <div class='row'>
                        <t t-call="website_sale.wizard_checkout">
                            <t t-set="step" t-value="20" />
                        </t>
                    </div>
                            <div class="row mb32">
                                <t t-if="mode == ('new', 'billing')">
                                    <h2 class="page-header mt8 ml16">Your Address
                                        <small> or </small>
                                        <a href='/web/login?redirect=/shop/checkout' class='btn btn-primary' style="margin-top: -11px">Log In</a>
                                    </h2>
                                </t>
                                <t t-if="mode == ('edit', 'billing')">
                                    <h2 class="page-header mt8 ml16">Your Address</h2>
                                </t>
                                <t t-if="mode[1] == 'shipping'">
                                    <h2 class="page-header mt8 ml16">Shipping Address </h2>
                                </t>
                                <t t-if="error" t-foreach="error.get('error_message', [])" t-as="err">
                                    <h4 class="text-danger" t-esc="err" />
                                </t>
                                <form name="/shop/checkout" method="post" class="checkout_autoformat">
                                    <div t-attf-class="form-group #{error.get('name') and 'has-error' or ''} col-md-12 div_name">
                                        <label class="control-label" for="name">Name</label>
                                        <input type="text" name="name" class="form-control" t-att-value="'name' in checkout and checkout['name']" />
                                    </div>
                                    <div class="clearfix" />
                                    <t t-if="mode[1] == 'billing'">
                                        <div t-attf-class="form-group #{error.get('email') and 'has-error' or ''} col-md-6" id="div_email">
                                            <label class="control-label" for="email">Email</label>
                                            <input type="email" name="email" class="form-control" t-att-value="'email' in checkout and checkout['email']" />
                                        </div>
                                    </t>
                                    <div t-attf-class="form-group #{error.get('phone') and 'has-error' or ''} col-md-6" id="div_phone">
                                        <label class="control-label" for="phone">Phone</label>
                                        <input type="tel" name="phone" class="form-control" t-att-value="'phone' in checkout and checkout['phone']" />
                                    </div>
                                    <div class="clearfix" />
                                    <t t-if="mode == ('new', 'billing')">
                                        <div t-attf-class="form-group #{error.get('company_name') and 'has-error' or ''} col-md-6">
                                            <label class="control-label font-weight-normal label-optional" for="company_name">Company Name</label>
                                            <input type="text" name="company_name" class="form-control" t-att-value="'company_name' in checkout and checkout['company_name']" />
                                        </div>
                                        <div t-attf-class="form-group #{error.get('vat') and 'has-error' or ''} col-md-6 div_vat">
                                            <label class="control-label font-weight-normal label-optional" for="vat">TIN / VAT </label>
                                            <input type="text" name="vat" class="form-control" t-att-value="'vat' in checkout and checkout['vat']" />
                                        </div>
                                    </t>
                                    <div class="clearfix" />
                                    <div t-attf-class="form-group #{error.get('street') and 'has-error' or ''} col-md-12 div_street">
                                        <label class="control-label" for="street">Street <span class="hidden-xs"> and Number</span></label>
                                        <input type="text" name="street" class="form-control" t-att-value="'street' in checkout and checkout['street']" />
                                    </div>
                                    <div t-attf-class="form-group #{error.get('street2') and 'has-error' or ''} col-md-12 div_street2">
                                        <label class="control-label label-optional" for="street2">Street 2</label>
                                        <input type="text" name="street2" class="form-control" t-att-value="'street2' in checkout and checkout['street2']" />
                                    </div>
                                    <div class="clearfix" />
                                    <t t-set='zip_city' t-value='country and [x for x in country.get_address_fields() if x in ["zip", "city"]] or ["city", "zip"]'/>
                                    <t t-if="'zip' in zip_city and zip_city.index('zip') &lt; zip_city.index('city')">
                                        <div t-attf-class="form-group #{error.get('zip') and 'has-error' or ''} col-sm-4 div_zip">
                                            <label class="control-label label-optional" for="zip">Zip Code</label>
                                            <input type="text" name="zip" class="form-control" t-att-value="'zip' in checkout and checkout['zip']" />
                                        </div>
                                    </t>
                                    <div t-attf-class="form-group #{error.get('city') and 'has-error' or ''} col-sm-8 div_city">
                                        <label class="control-label" for="city">City</label>
                                        <input type="text" name="city" class="form-control" t-att-value="'city' in checkout and checkout['city']" />
                                    </div>
                                    <t t-if="'zip' in zip_city and zip_city.index('zip') &gt; zip_city.index('city')">
                                        <div t-attf-class="form-group #{error.get('zip') and 'has-error' or ''} col-sm-4 div_zip">
                                            <label class="control-label label-optional" for="zip">Zip Code</label>
                                            <input type="text" name="zip" class="form-control" t-att-value="'zip' in checkout and checkout['zip']" />
                                        </div>
                                    </t>
                                    <div class="clearfix" />
                                    <div t-attf-class="form-group #{error.get('country_id') and 'has-error' or ''} col-md-6 div_country">
                                        <label class="control-label" for="country_id">Country</label>
                                        <select id="country_id" name="country_id" class="form-control">
                                            <option value="">Country...</option>
                                            <t t-foreach="countries" t-as="c">
                                                <option t-att-value="c.id" t-att-selected="c.id == (country and country.id or -1)">
                                                    <t t-esc="c.name" />
                                                </option>
                                            </t>
                                        </select>
                                    </div>
                                    <div t-attf-class="form-group #{error.get('state_id') and 'has-error' or ''} col-md-6 div_state" t-att-style="(not country or not country.state_ids) and 'display: none'">
                                        <label class="control-label" for="state_id">State / Province</label>
                                        <select name="state_id" class="form-control" data-init="1">
                                            <option value="">State / Province...</option>
                                            <t t-foreach="country and country.state_ids or []" t-as="s">
                                                <option t-att-value="s.id" t-att-selected="s.id == ('state_id' in checkout and country and checkout['state_id'] != '' and int(checkout['state_id']))">
                                                    <t t-esc="s.name" />
                                                </option>
                                            </t>
                                        </select>
                                    </div>

                                    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                    <input type="hidden" name="submitted" value="1" />
                                    <input type="hidden" name="partner_id" t-att-value="partner_id or '0'" />
                                    <input type="hidden" name="callback" t-att-value="callback" />
                                    <!-- Example -->
                                    <input type="hidden" name="field_required" t-att-value="mode[1] == 'billing' and 'phone,name' or ''" />

                                    <div class="clearfix"/>
                                    <div style='padding: 0 15px'>
                                        <a t-att-href="mode == ('new', 'billing') and '/shop/cart' or '/shop/checkout'" class="btn btn-default mb32">
                                            <span class="fa fa-long-arrow-left" /> Back
                                        </a>
                                        <a class="btn btn-primary pull-right mb32 a-submit a-submit-disable a-submit-loading">
                                            <span>Next </span><span class="fa fa-long-arrow-right" />
                                        </a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </t>
    </template>
    <template id="payment" name="Payment">
        <t t-call="website.layout">
            <t t-set="additional_title">Shop - Select Payment Acquirer</t>
            <t t-set="no_footer">1</t>

            <div id="wrap">
                <div class="container oe_website_sale">
                    <div class="row">
                        <div class="col-md-offset-2 col-lg-8 col-sm-9" t-if="errors">
                            <t t-foreach="errors" t-as="error">
                                <div class="alert alert-danger" t-if="error">
                                    <h4>
                                        <t t-esc="error[0]" />
                                    </h4>
                                    <t t-esc="error[1]" />
                                </div>
                            </t>
                        </div>
                        <div class="col-md-8 col-md-offset-2 oe_cart">
                          <div class='row'>
                            <t t-call="website_sale.wizard_checkout">
                                <t t-set="step" t-value="40" />
                            </t>
                         </div>
                         <div class="row mb32">
                            <div class='col-md-12 o_website_sale_rightfit'>
                                <h2 class="mb8 mt8">Confirm Order</h2>
                                <table class="table table-striped table-condensed" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
                                    <thead>
                                        <tr>
                                            <th class='td-img'>Product</th>
                                            <th></th>
                                            <th class='td-qty'>Quantity</th>
                                            <th class='text-center td-price'>Price</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr t-foreach="website_sale_order.website_order_line" t-as="line">
                                            <td class='' colspan="2" t-if="not line.product_id.product_tmpl_id"></td>
                                            <td class='td-img' t-if="line.product_id.product_tmpl_id">
                                                <a t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
                                                    <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
                                                </a>
                                            </td>
                                            <td class='td-product_name' t-if="line.product_id.product_tmpl_id">
                                                <div>
                                                    <strong t-field="line.product_id.with_context(display_default_code=False).display_name" />
                                                </div>
                                                <div class="text-muted hidden-xs small">
                                                    <t t-foreach="line.name.splitlines()[1:]" t-as="name_line">
                                                        <span><t t-esc="name_line"/></span><br/>
                                                    </t>
                                                </div>
                                            </td>
                                            <td class='td-qty'>
                                                <div t-esc="line.product_uom_qty" />
                                            </td>
                                            <td class="text-center td-price">
                                                <span t-field="line.price_unit" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-md-12">
                                <t t-call="website_sale.total">
                                    <t t-set='extra_class' t-value='"col-xs-12 col-sm-5 col-sm-push-7"'/>
                                    <t t-set='redirect'>/shop/payment</t>
                                </t>
                            </div>
                            <div class="clearfix" />
                            <div class="oe_structure" />

                            <div id="payment_method" class="col-md-12 o_website_sale_rightfit" t-if="(form_acquirers or s2s_acquirers or tokens) and website_sale_order.amount_total">
                                <h3 class="mb24">Pay with </h3>
                                <t t-call="payment.payment_tokens_list">
                                    <t t-set="mode" t-value="'payment'"/>
                                    <t t-set="submit_txt">Pay Now</t>
                                    <t t-set="icon_class" t-value="'fa-lock'"/>
                                    <t t-set="pms" t-value="tokens"/>
                                    <t t-set="form_action" t-value="'/shop/payment/token'"/>
                                    <t t-set="prepare_tx_url" t-value="'/shop/payment/transaction/'"/>
                                    <t t-set="partner_id" t-value="partner"/>
                                </t>
                            </div>

                            <div t-if="not (form_acquirers or s2s_acquirers)">
                                <a class="btn-link"
                                    groups="base.group_system"
                                    t-attf-href="/web#return_label=Website&amp;action=#{payment_action_id}">
                                        <i class="fa fa-arrow-right" aria-hidden="true"></i> Add payment acquirers
                                </a>
                            </div>
                            <div class="js_payment mb64 row" t-if="not website_sale_order.amount_total" id="payment_method">
                                <div class="col-sm-12">
                                    <form target="_self" action="/shop/payment/validate" method="post" class="pull-right">
                                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                        <a class="btn btn-primary a-submit">
                                            <span t-if="order.amount_total &gt; 0">Pay Now <span class="fa fa-long-arrow-right"></span></span>
                                            <span t-if="order.amount_total == 0">Confirm Order <span class="fa fa-long-arrow-right"></span></span>
                                        </a>
                                    </form>
                                </div>
                            </div>
                          </div>
                        </div>


                    </div>
                </div>
                <div class="oe_structure" />
            </div>
        </t>
    </template>

    <template id="payment_sale_note" inherit_id="payment" name="Accept Terms &amp; Conditions" customize_show="True" active="False">
        <xpath expr="//div[@id='payment_method']" position="before">
            <div class="oe_accept_cgv_button">
                <label>
                    <input type="checkbox" checked="checked" id="checkbox_cgv" />
                    I agree to the <a target='_BLANK' href='/shop/terms'>terms &amp; conditions</a>

                </label>
            </div>
        </xpath>
    </template>

    <template id="confirmation">
        <t t-call="website.layout">
            <t t-set="additional_title">Shop - Confirmed</t>
            <div id="wrap">
                <div class="container oe_website_sale">
                    <div class="row">
                        <div class="col-md-9">
                            <h1 class="mb32"><span>Order</span> <em t-field="order.name" /> <t t-if="order.state == 'sale'"><span>Confirmed</span></t></h1>
                            <div class="thanks_msg">
                                <h2>Thank you for your order.
                                    <a class="btn btn-primary pull-right hidden-xs" href="/shop/print" target="_blank"><i class="fa fa-print"></i> Print</a>
                                </h2>
                            </div>
                        </div>
                    </div>
                        <div class="row mb32">
                            <div class="col-md-9">
                                <div class="oe_cart mb32">
                                    <h3 class="mt32 text-left">
                                        <strong>Order Details:</strong>
                                    </h3>
                                    <table class="table table-striped table-condensed">
                                        <thead>
                                            <tr>
                                                <th class='td-product_name'>Product</th>
                                                <th class='td-qty'>Quantity</th>
                                                <th class="text-right td-price">Unit Price</th>
                                                <th class="text-right td-price-total">Subtotal</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                          <tr t-foreach="order.order_line" t-as="line">
                                              <td class='td-product_name'>
                                                  <div>
                                                      <a t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
                                                          <strong t-esc="line.product_id.with_context(display_default_code=False).display_name"/>
                                                      </a>
                                                  </div>
                                                  <div class="text-muted hidden-xs small">
                                                      <t t-foreach="line.name.splitlines()[1:]" t-as="name_line">
                                                          <span><t t-esc="name_line"/></span><br/>
                                                      </t>
                                                  </div>
                                              </td>
                                              <td class='td-qty'>
                                                  <div id="quote_qty">
                                                      <span t-field="line.product_uom_qty"/>
                                                      <span class='hidden-xs' t-field="line.product_uom" groups="product.group_uom"/>
                                                  </div>
                                              </td>
                                              <td class='td-price'>
                                                  <span class="text-right">
                                                      <div t-field="line.price_unit"
                                                          t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
                                                  </span>
                                              </td>
                                              <td class='td-price-total'>
                                                  <div class="text-right"
                                                      t-field="line.price_subtotal"
                                                      t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
                                              </td>
                                          </tr>
                                        </tbody>
                                    </table>
                                    <table class='table'>
                                      <tr>
                                          <td class="col-md-8"></td>
                                          <td class="text-right-not-xs text-left-xs col-sm-2 col-xs-3">Subtotal:</td>
                                          <td class="text-right col-sm-2 col-xs-3">
                                              <span t-field="order.amount_untaxed" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
                                          </td>
                                      </tr>
                                      <tr>
                                          <td class='noborder'></td>
                                          <td class="text-right noborder">Taxes:</td>
                                          <td class="text-right-not-xs text-left-xs noborder">
                                               <span t-field="order.amount_tax" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': order.pricelist_id.currency_id, 'display_currency': website.currency_id}" />
                                          </td>
                                      </tr>
                                      <tr>
                                          <td class='noborder'></td>
                                          <td class="text-right"><strong>Total:</strong></td>
                                          <td class="text-right-not-xs text-left-xs">
                                              <strong t-field="order.amount_total"
                                                  t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
                                          </td>
                                      </tr>
                                    </table>
                                    <div class="clearfix" />
                                    <div class="oe_structure" />
                                    <h3 class="text-left">
                                        <strong>Payment Information:</strong>
                                    </h3>
                                    <table class="table">
                                        <tbody>
                                            <tr>
                                                <td colspan="2">
                                                    <t t-esc="order.payment_acquirer_id.name" />
                                                </td>
                                                <td class="text-right" width="100">
                                                    <strong>Total:</strong>
                                                </td>
                                                <td class="text-right" width="100">
                                                    <strong t-field="order.amount_total" t-options="{'widget': 'monetary', 'display_currency': order.pricelist_id.currency_id}" />
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <t t-call="website_sale.payment_confirmation_status" />
                                    <t t-if="request.env['ir.config_parameter'].sudo().get_param('auth_signup.allow_uninvited') == 'True' and request.website.is_public_user()">
                                        <p class='alert alert-info mt16'>
                                            <a t-att-href='order.partner_id.signup_prepare() and order.partner_id.signup_url' class='btn btn-primary'>Sign Up</a>
                                             Now to Follow Your Order
                                        </p>
                                    </t>
                                </div>
                            </div>
                            <div class="col-md-3 hidden-sm hidden-xs text-muted">
                                <h3 class='mt32'>&amp;nbsp;</h3>
                                <t t-call='website_sale.bill_to'>
                                    <t t-set="order" t-value= "order"/>
                                </t>
                            </div>
                        </div>
                </div>
                <div class="oe_structure" />
            </div>
        </t>
    </template>

    <template id="total">
        <div id="cart_total" t-att-class="extra_class or ''" t-if="website_sale_order and website_sale_order.website_order_line">
            <div class="row" id="order_total_untaxed">
                <span class="col-xs-6 text-right text-muted">Subtotal:</span>
                <span class="col-xs-6 text-right-not-xs text-left-xs text-muted">
                    <span t-field="website_sale_order.amount_untaxed" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
                </span>
            </div>
            <div class="row" id="order_total_taxes">
                <span class="col-xs-6 text-right text-muted" title="Taxes may be updated after providing shipping address"> Taxes:</span>
                <span class="col-xs-6 text-right-not-xs text-left-xs text-muted">
                    <span t-field="website_sale_order.amount_tax" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" />
                </span>
            </div>
            <div class="row" id="order_total">
                <hr class="mt8 mb0"/>
                <span class="col-xs-6 text-right h4 mt0">Total:</span>
                <span class="col-xs-6 text-right-not-xs text-left-xs h4 mt0" style="white-space: nowrap;">
                    <span t-field="website_sale_order.amount_total" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
                </span>
            </div>
        </div>
    </template>

    <template id="reduction_code" inherit_id="website_sale.total" active="False" customize_show="True" name="Promo Code">
        <xpath expr="//div[@id='cart_total']" position="after">
            <div class='col-xs-12 col-sm-6 col-sm-pull-5 text-muted' t-if="not hide_coupon and website_sale_order and website_sale_order.website_order_line" id="coupon_box">
                <p>
                  Have a promo code? Fill in this field and apply.
                </p>
                <t t-call='website_sale.coupon_form'/>
            </div>
        </xpath>
    </template>

    <template id="payment_confirmation_status">
        <div class="oe_website_sale_tx_status" t-att-data-order-id="order.id">
            <div t-att-class="'panel %s' % (
                    (order.payment_tx_id.state == 'pending' and 'panel-info') or
                    (order.payment_tx_id.state == 'done' and 'panel-success') or
                    'panel-danger')">
                <a groups="base.group_system" class="btn pull-right" target="_blank"
                        t-att-href="'/web#model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % ('payment.acquirer', order.payment_acquirer_id.id, 'payment.action_payment_acquirer')">
                    <i class="fa fa-pencil"></i>
                </a>
                <div class="panel-heading">
                    <t t-if="order.payment_tx_id.state == 'pending'">
                        <t t-raw="order.payment_acquirer_id.pending_msg"/>
                    </t>
                    <t t-if="order.payment_tx_id.state == 'done'">
                        <t t-raw="order.payment_acquirer_id.done_msg"/>
                    </t>
                    <t t-if="order.payment_tx_id.state == 'cancel'">
                        <t t-raw="order.payment_acquirer_id.cancel_msg"/>
                    </t>
                    <t t-if="order.payment_tx_id.state == 'error'">
                        <t t-raw="order.payment_acquirer_id.error_msg"/>
                    </t>
                </div>
                <div class="panel-body" t-if="order.payment_acquirer_id.post_msg">
                    <t t-raw="order.payment_acquirer_id.post_msg" />
                </div>
            </div>
        </div>
    </template>

    <template id='website_sale.bill_to' name="Bill to">
        <div class="panel panel-info break-word">
          <div class="panel-heading">Bill To:</div>
          <div class="panel-body">
            <div class='o_div_text_overflow' t-field="order.partner_invoice_id" t-options="{'widget': 'contact','fields': ['address', 'name', 'phone', 'email']}" />
          </div>
        </div>
        <t t-if="not order.only_services" groups="sale.group_delivery_invoice_address">
            <div class="panel panel-info break-word">
              <div class="panel-heading">Ship To:</div>
              <div class="panel-body">
                <div class='o_div_text_overflow' t-field="order.partner_shipping_id" t-options="{'widget': 'contact','fields': ['address', 'name', 'phone']}" />
              </div>
            </div>
        </t>
    </template>

    <template id="website.layout_footer_copyright" inherit_id="website.layout" name="Footer Copyright">
        <xpath expr="//footer" position="inside">
            <div class="container mt16 mb8">
<!--                 <div class="pull-right" t-ignore="true" t-if="not editable">
                                                      Powered by <a target="_blank" class="label label-danger" href="http://www.flectra.com/page/website-builder">Flectra</a>,
                                                      the #1 <a target="_blank" href="http://www.flectra.com/page/e-commerce">Open Source eCommerce</a>.
                                                    </div> -->
                <div class="pull-left text-muted">
                                                      Copyright &amp;copy; <span t-field="res_company.name">Company name</span></div>
            </div>
        </xpath>
    </template>

    <!-- User Navbar -->
    <template id="content_new_product" inherit_id="website.user_navbar">
        <xpath expr="//div[@id='o_new_content_menu_choices']//ul" position="inside">
            <li groups="sales_team.group_sale_manager">
                <a id="create-new-product" href="#" data-action="new_product">
                    <i class="fa fa-shopping-cart" />
                    <p>New Product</p>
                </a>
            </li>
        </xpath>
    </template>

    <template id="portal_order_page_products_links" name="Orders Followup Products Links" inherit_id="sale.portal_order_page">
        <xpath expr="//div[@id='product_name']/*" position="replace">
            <a t-if="ol.product_id.website_published" t-att-href="ol.product_id.website_url">
                <span t-esc="ol.name" />
            </a>
            <t t-if="not ol.product_id.website_published">
                <span t-esc="ol.name" />
            </t>
        </xpath>
    </template>

    <template id="terms" name="Terms &amp; Conditions">
        <t t-call="website.layout">
          <div id="wrap">
              <div class="oe_structure">
                <section class="s_title">
                  <div class="container">
                    <div class="row">
                      <div class="col-md-12">
                        <h1 class="text-center">Terms &amp;amp; Conditions</h1>
                        <div class="well s_well clearfix">
                            <ul>
                                <li>The <b>Intellectual Property</b> disclosure will inform users that the contents, logo and other visual media you created is your property and is protected by copyright laws.</li>
                                <li>A <b>Termination</b> clause will inform that users’ accounts on your website and mobile app or users’ access to your website and mobile (if users can’t have an account with you) can be terminated in case of abuses or at your sole discretion.</li>
                                <li>A <b>Governing Law</b> will inform users which laws govern the agreement. This should the country in which your company is headquartered or the country from which you operate your web site and mobile app.</li>
                                <li>A <b>Links To Other Web Sites</b> clause will inform users that you are not responsible for any third party web sites that you link to. This kind of clause will generally inform users that they are responsible for reading and agreeing (or disagreeing) with the Terms and Conditions or Privacy Policies of these third parties.</li>
                                <li>If your website or mobile apps allows users to create content and make that content public to other users, a <b>Content</b> section will inform users that they own the rights to the content they have created.<br/>The “Content” clause usually mentions that users must give you (the website or mobile app developer) a license so that you can share this content on your website/mobile app and to make it available to other users.<br/>Because the content created by users is public to other users, a DMCA notice clause (or Copyright Infringement ) section is helpful to inform users and copyright authors that, if any content is found to be a copyright infringement, you will respond to any DMCA take down notices received and you will take down the content.</li>
                                <li>A <b>Limit What Users Can Do</b> clause can inform users that by agreeing to use your service, they’re also agreeing to not do certain things. This can be part of a very long and thorough list in your Terms and Conditions agreements so as to encompass the most amount of negative uses.</li>
                           </ul>
                           <small class="text-muted pull-right">Source: https://termsfeed.com/blog/sample-terms-and-conditions-template</small>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
                <section class="s_text_block">
                  <div class="container">
                    <div class="row">
                      <div class="col-md-12 mb16 mt16">
                        <p style='white-space:pre' t-esc="website.company_id.sale_note"/>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
              <div class="oe_structure"/>
          </div>
        </t>
    </template>

    <!-- Give Space besides Add to Cart button -->
    <template id="product_side_block" inherit_id="website_sale.product"
        name="Product Side Block" active="False" customize_show="True">
        <xpath expr="//div[hasclass('col-sm-7')]" position="attributes">
            <attribute name="class">col-sm-5</attribute>
        </xpath>
        <xpath expr="//div[@id='product_details']" position="attributes">
            <attribute name="class">col-sm-5 col-lg-3 col-lg-offset-1
            </attribute>
        </xpath>
        <xpath expr="//section[@id='product_detail']/div[2]" position="inside">
            <div class="col-sm-2 col-lg-3 oe_structure">
                <h4> Put Your Content Here Like Images,Carousel,Ecommerce Terms
                    etc...
                </h4>
            </div>
        </xpath>
    </template>

    <template id="quick_view_products_item" inherit_id="website_sale.products_item"
        active="False" customize_show="True" name="Product Quick Info">
        <xpath expr="//div[hasclass('product_price')]" position="inside">
            <t t-if="(not product.website_ids or website in product.website_ids) and product.website_published">
                <a class="quick-view btn btn-default btn-xs" t-attf-href="##{ product.id }"
                    role="button" data-toggle="modal" title="Quick Info">
                    <span class="fa fa-eye"></span>
                </a>
            </t>
        </xpath>
        <xpath expr="//div[hasclass('oe_product_image')]" position="after">
            <div t-att-id="product.id" class="modal fade in quick-modal" aria-hidden="true"
                role="dialog" tabindex="-1" t-if="product.website_published">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span class="fa fa-times"></span>
                            </button>
                            <br/>
                        </div>
                        <div class="modal-body col-md-12">
                            <div class="col-md-5 col-md-offset-1">
                                <a itemprop="url"
                                    t-att-href="keep('/shop/product/%s' % slug(product), page=(pager['page']['num'] if pager['page']['num']&gt;1 else None))">
                                    <img itemprop="image" class="img img-responsive quick-view-product"
                                        t-att-src="website.image_url(product, 'image')" t-att-alt="product.name" />
                                </a>
                            </div>
                            <div class="col-md-5 col-md-offset-1">
                                <div class="col-md-12 text-left">
                                    <h2 class="mt16 mb16">
                                        <strong t-field="product.display_name"  />
                                    </h2>
                                    <div class="text-muted">
                                        <div t-field="product.description_sale" class="mt16 mb16" />
                                        <div class="js_attributes" />
                                    </div>
                                </div>
                                <div class="col-md-12 mt16 mb16">
                                    <div class="css_quantity input-group oe_website_spinner"
                                        contenteditable="false">
                                        <a t-attf-href="#" class="mb8 input-group-addon js_add_cart_json">
                                            <i class="fa fa-minus"></i>
                                        </a>
                                        <input type="text" class="form-control" data-min="1"
                                            name="add_qty" value="1" />
                                        <a t-attf-href="#"
                                            class="mb8 input-group-addon float_left js_add_cart_json">
                                            <i class="fa fa-plus"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-12 text-left">
                                    <t t-set="attribute_value_ids" t-value="get_attribute_value_ids(product)" />
                                    <form action="/shop/cart/update" class="js_add_cart_variants"
                                        t-att-data-attribute_value_ids="product.product_variant_ids.ids"
                                        method="POST">
                                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                        <div class="js_product" t-if="product.product_variant_ids">
                                            <t t-placeholder="select">
                                                <input type="hidden" class="product_id" name="product_id"
                                                    t-att-value="product.product_variant_id.id if len(product.product_variant_ids) == 1 else '0'" />
                                                <t t-call="website_sale.variants">
                                                    <t t-set="ul_class" t-value="'nav-stacked'" />
                                                </t>
                                            </t>
                                            <h1><t t-call="website_sale.product_price" /></h1>
                                            <p t-if="len(product.product_variant_ids) &gt; 1" class="css_not_available_msg bg-danger"
                                                style="padding: 15px;">This combination does not exist.</p>
                                            <a id="add_to_cart"
                                                class="btn btn-primary btn-md mt8 js_check_product a-submit"
                                                href="#">Add to Cart</a>
                                            <a itemprop="url" class="btn btn-success btn-md mt8"
                                                t-att-href="keep('/shop/product/%s' % slug(product), page=(pager['page']['num'] if pager['page']['num']&gt;1 else None))">
                                                More Info
                                            </a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                        </div>
                    </div>
                </div>
            </div>
        </xpath>
    </template>

    <!-- Enable Share Options in Product Page -->
    <template id="product_share_button" inherit_id="website_sale.product"
        name="Product Share Options" customize_show="True" active="False">
        <xpath expr="//form[hasclass('js_add_cart_variants')]" position="after">
            <hr/>
            <div class="oe_share s_share">
                <h2>
                    <a target="_Blank" class="oe_share_google share_buttons" data-toggle="tooltip" title="Google"
                        href="https://plus.google.com/share?url={url}">
                        <i class="fa fa-google-plus-square"/>
                    </a>
                    <a target="_Blank" class="oe_share_facebook share_buttons" data-toggle="tooltip" title="Facebook"
                        href="https://www.facebook.com/sharer/sharer.php?u={url}">
                        <i class="fa fa-facebook-square"/>
                    </a>
                    <a target="_Blank" class="oe_share_twitter share_buttons" data-toggle="tooltip" title="Twitter"
                        href="https://twitter.com/intent/tweet?text={title}&amp;url={url}">
                        <i class="fa fa-twitter"/>
                    </a>
                    <a href="mailto:?body={url}&amp;subject={title}" class="oe_share_mail share_buttons"
                       data-toggle="tooltip" title="Mail">
                        <i class="fa fa-envelope-o"/>
                    </a>
                </h2>
            </div>
        </xpath>
    </template>

    <!-- Product Tags Filter -->
    <template id="website_product_tags" inherit_id="website_sale.products_attributes"
        active="False" customize_show="True" name="Product Tags's Filter">
        <xpath expr="//form[hasclass('js_attributes')]" position="inside">
            <t t-if="tags">
                <div id="tags_div" class="mt32">
                    <div class="filter_title">
                        <h4 class="title-block">
                            <span>Tags</span>
                        </h4>
                    </div>
                    <t t-foreach="tags" t-as="tag">
                        <label class="product-tag btn btn-primary btn-xs mb8">
                            <input type="checkbox" name="tags" class="hidden product_tags"
                                t-att-title="tag.name" t-att-value="'%s' % (tag.id)"
                                t-att-checked="'checked' if tag.id in tag_set else None" />
                            <span style="font-weight: normal" t-field="tag.name" />
                        </label>
                    </t>
                </div>
            </t>
        </xpath>
    </template>

    <!-- Product Brands Filter -->
    <template id="website_product_brands" inherit_id="website_sale.products_attributes"
        active="False" customize_show="True" name="Product Brand's Filter">
        <xpath expr="//form[hasclass('js_attributes')]" position="inside">
            <t t-if="brands">
                <div id="brands_div" class="mt32">
                    <div class="filter_title">
                        <h4 class="title-block">
                            <span>Brands</span>
                        </h4>
                    </div>
                    <ul class="nav nav-pills nav-stacked">
                        <t t-foreach="brands" t-as="brand">
                            <li class="brand_list">
                                <label style="margin: 0 40px;">
                                    <input type="checkbox" name="brands"
                                        t-att-value="brand.id" t-att-checked="'checked' if brand.id in brand_set else None" />
                                    <label style="font-weight: normal" t-field="brand.name" />
                                </label>
                            </li>
                        </t>
                    </ul>
                </div>
            </t>
        </xpath>
    </template>

</flectra>