[IMP] website_sale: improved checkout process
[odoo/odoo.git] / addons / website_sale / views / website_sale.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <openerp>
3 <data>
4
5     <!-- Layout add nav and footer -->
6
7     <template id="header" inherit_id="website.layout" name="Header Shop My Cart Link">
8         <xpath expr="//header//ul[@id='top_menu']/li" position="before">
9             <li t-att-class="(not website_sale_order or not website_sale_order.get_total_quantity()) and 'hidden' or ''">
10                 <a href="/shop/mycart/">
11                     <i class="icon-shopping-cart"></i>
12                     My cart <sup t-attf-class="my_cart_quantity label label-primary"
13                                   t-esc="website_sale_order and website_sale_order.get_total_quantity() or ''"/>
14                 </a>
15             </li>
16         </xpath>
17         <xpath expr="//head" position="inside">
18             <t t-if="editable">
19                 <script type="text/javascript" src="/website_sale/static/src/js/website.tour.shop.js"></script>
20             </t>
21         </xpath>
22     </template>
23
24     <!-- List of categories -->
25
26     <template id="categories_recursive" name="Category list">
27         <li t-att-class="str(category.id) == search.get('category') and 'active' or ''">
28             <a t-att-class="category.id not in categ[1] and 'unpublish' or ''" t-href="/shop/?category=#{ category.id }" t-field="category.name" t-keep-query="search,facettes"></a>
29             <ul t-if="category.child_id" class="nav nav-pills nav-stacked nav-hierarchy">
30                 <t t-foreach="category.child_id" t-as="category">
31                     <t t-if="category.id in categ[1] or editable">
32                         <t t-call="website_sale.categories_recursive"/>
33                     </t>
34                 </t>
35             </ul>
36         </li>
37     </template>
38
39     <!-- Product list -->
40
41     <template id="search" name="Search hidden fields">
42         <input type="hidden" name="category" t-att-value="search.get('category') or ''"/>
43         <input type="hidden" name="filter" t-att-value="search.get('filter') or ''"/>
44         <input type="text" name="search" class="search-query form-control" placeholder="Search..." t-att-value="search.get('search') or ''"/>
45     </template>
46
47     <template id="products_cart" name="Shopping cart">
48       <div class="ribbon-wrapper" contentEditable="false">
49         <div class="ribbon"><span contentEditable="true">Promo</span></div>
50       </div>
51       <div class="oe_product_description">
52           <a t-href="/shop/product/#{ product.id }/" t-keep-query="category,search,facettes">
53               <b t-field="product.name"/>
54           </a>
55       </div>
56       <div class="product_price" t-if="product.product_variant_ids">
57           <b>
58               <t t-if="product.product_variant_ids[0].lst_price != product.product_variant_ids[0].price">
59                 <del class="text-danger"
60                   t-field="product.product_variant_ids[0].lst_price" t-field-options='{
61                        "widget": "monetary",
62                        "display_currency": "website.pricelist_id.currency_id"
63                   }'/>&amp;nbsp;
64               </t>
65               <span t-field="product.product_variant_ids[0].price"  t-field-options='{
66                    "widget": "monetary",
67                    "display_currency": "website.pricelist_id.currency_id"
68                }'/>
69           </b>
70       </div>
71       <div class="oe_product_image text-center">
72           <a t-href="/shop/product/#{ product.id }/" t-keep-query="category,search,facettes">
73               <span t-field="product.image" t-field-options='{"widget": "image"}'/>
74           </a>
75       </div>
76     </template>
77
78     <template id="products" name="Products">
79         <t t-call="website.layout">
80             <t t-set="head">
81                 <script type="text/javascript" src="/web/static/lib/jquery.ui/js/jquery-ui-1.9.1.custom.js"></script>
82                 <link rel='stylesheet' href="/web/static/lib/jquery.ui/css/smoothness/jquery-ui-1.9.1.custom.css"/>
83                 <script type="text/javascript" src="/website_sale/static/src/js/website_sale.js"></script>
84                 <link rel='stylesheet' href='/website_sale/static/src/css/website_sale.css'/>
85                 <t t-raw="head or ''"/>
86             </t>
87             <t t-set="additional_title">Shop</t>
88             <div id="wrap">
89               <div class="oe_structure"/>
90               <div class="container oe_website_sale">
91                 <div class="row">
92                     <div class="col-sm-8 products_pager">
93                         <t t-call="website.pager">
94                             <t t-set="classname">pull-right</t>
95                             <t t-set="style">padding-left: 5px;</t>
96                         </t>
97                         <form action="/shop/" method="get" class="pull-right pagination form-inline" style="padding-right: 5px;">
98                             <t t-call="website_sale.search" />
99                         </form>
100                     </div>
101                 </div>
102
103                 <div class='style_default row'>
104                   <div class="hidden" id="products_grid_before"></div>
105                   <div class="col-md-12" id="products_grid">
106                     <t t-if="product_ids">
107                     <table width="100%">
108                       <tbody>
109                         <t t-set="table_products" t-value="Ecommerce.get_bin_packing_products(product_ids, product_ids_for_holes, 4)"/>
110                         <tr t-foreach="table_products" t-as="tr_product">
111                           <t t-foreach="tr_product" t-as="td_product">
112                             <t t-if="td_product">
113                             <t t-set="product" t-value="td_product['product']"/>
114                             <td t-att-colspan="td_product['x']"
115                                 t-attf-width="#{td_product['x']*25}%"
116                                 t-att-rowspan="td_product['y']"
117                                 t-attf-class="oe_product oe-height-#{td_product['y']*2} #{ td_product['class'] }">
118
119                                 <div class="oe_product_cart" t-att-data-publish="product.website_published and 'on' or 'off'">
120
121                                   <div class="css_options" t-ignore="true" t-if="is_website_publisher">
122                                     <div t-attf-class="dropdown js_options" t-att-data-id="product.id">
123                                       <a class="btn btn-default" t-att-id="'dopprod-%s' % product.id" role="button" data-toggle="dropdown">Options <span class="caret"></span></a>
124                                       <ul class="dropdown-menu" role="menu" t-att-aria-labelledby="'dopprod-%s' % product.id">
125                                         <li class='dropdown-submenu'>
126                                           <a tabindex="-1" href="#">Size</a>
127                                           <ul class="dropdown-menu" name="size">
128                                             <li><a href="#">
129                                               <table>
130                                                 <tr>
131                                                   <td class="selected"></td>
132                                                   <td t-att-class="product.website_size_x > 1 and 'selected'"></td>
133                                                   <td t-att-class="product.website_size_x > 2 and 'selected'"></td>
134                                                   <td t-att-class="product.website_size_x > 3 and 'selected'"></td>
135                                                 </tr>
136                                                 <tr>
137                                                   <td t-att-class="product.website_size_y > 1 and 'selected'"></td>
138                                                   <td t-att-class="product.website_size_y > 1 and product.website_size_x > 1 and 'selected'"></td>
139                                                   <td t-att-class="product.website_size_y > 1 and product.website_size_x > 2 and 'selected'"></td>
140                                                   <td t-att-class="product.website_size_y > 1 and product.website_size_x > 3 and 'selected'"></td>
141                                                 </tr>
142                                                 <tr>
143                                                   <td t-att-class="product.website_size_y > 2 and 'selected'"></td>
144                                                   <td t-att-class="product.website_size_y > 2 and product.website_size_x > 1 and 'selected'"></td>
145                                                   <td t-att-class="product.website_size_y > 2 and product.website_size_x > 2 and 'selected'"></td>
146                                                   <td t-att-class="product.website_size_y > 2 and product.website_size_x > 3 and 'selected'"></td>
147                                                 </tr>
148                                                 <tr>
149                                                   <td t-att-class="product.website_size_y > 3 and 'selected'"></td>
150                                                   <td t-att-class="product.website_size_y > 3 and product.website_size_x > 1 and 'selected'"></td>
151                                                   <td t-att-class="product.website_size_y > 3 and product.website_size_x > 2 and 'selected'"></td>
152                                                   <td t-att-class="product.website_size_y > 3 and product.website_size_x > 3 and 'selected'"></td>
153                                                 </tr>
154                                               </table>
155                                             </a></li>
156                                           </ul>
157                                         </li>
158                                         <li class='dropdown-submenu'>
159                                           <a tabindex="-1" href="#">Styles</a>
160                                           <ul class="dropdown-menu" name="style">
161                                             <t t-foreach="styles" t-as="style">
162                                               <li t-att-class="style_in_product(style, product) and 'active' or ''"><a href="#" t-att-data-id="style.id" t-att-data-class="style.html_class"><t t-esc="style.name"/></a></li>
163                                             </t>
164                                           </ul>
165                                         </li>
166                                       </ul>
167                                     </div>
168                                   </div>
169
170                                   <t t-call="website_sale.products_cart"/>
171                                 </div>
172
173                             </td>
174                             </t>
175                             <td t-if="td_product == None"/>
176                           </t>
177                         </tr>
178                       </tbody>
179                     </table>
180                     </t>
181                     <t t-if="not product_ids">
182                       <h3 class="text-center text-muted">No product found for this search</h3>
183                     </t>
184                   </div>
185                 </div>
186                 <div class="products_pager">
187                     <t t-call="website.pager">
188                         <t t-set="classname">pull-right</t>
189                     </t>
190                 </div>
191               </div>
192               <div class="oe_structure mb32"/>
193             </div>
194         </t>
195     </template>
196
197     <!-- Product Description-->
198
199     <template id="product_description" inherit_option_id="website_sale.products_cart" name="Product Description">
200         <xpath expr="//div[@class='oe_product_description']" position="inside">
201             <p class="text-muted oe_subdescription">
202                 <span t-field="product.description_sale"/>
203             </p>
204         </xpath>
205     </template>
206
207     <!-- Add to cart button-->
208
209     <template id="add_to_basket" inherit_option_id="website_sale.products_cart" name="Add to Cart">
210         <xpath expr="//div[@class='product_price']" position="inside">
211             <a t-href="/shop/add_cart/?product_id=#{ product.id }" class="js_add_cart_json">
212                 <span class="icon-shopping-cart"/>
213             </a>
214         </xpath>
215     </template>
216
217     <!-- List view of products -->
218
219     <template id="list_view" inherit_option_id="website_sale.products" name="List View">
220         <xpath expr="//div[@id='products_grid']//table" position="replace">
221           <div class="row">
222             <t t-set="products" t-value="Ecommerce.get_products(product_ids)"/>
223             <t t-foreach="products" t-as="product">
224               <div class="col-md-12 oe_list_products oe-height-1">
225                 <t t-call="website_sale.products_cart"/>
226               </div>
227             </t>
228           </div>
229         </xpath>
230     </template>
231
232
233     <!-- product -->
234
235     <template id="product" name="Product">
236         <t t-call="website.layout">
237             <t t-set="head">
238                 <script type="text/javascript" src="/website_sale/static/src/js/website_sale.js"></script>
239             </t>
240             <t t-set="additional_title" t-value="product.name"/>
241             <div id="wrap">
242
243               <section class="container mt8">
244                 <div class="row">
245                   <div class="col-sm-5">
246                       <ol class="breadcrumb">
247                           <li><a href="/shop">Products</a></li>
248                           <li t-if="search.get('category')"><a t-href="/shop/" t-keep-query="category,search,facettes"><span t-field="category.name"/></a></li>
249                           <li class="active"><span t-field="product.name"></span></li>
250                       </ol>
251                   </div><div class="col-sm-3">
252                       <t t-call="website.publish_management">
253                         <t t-set="object" t-value="product"/>
254                         <t t-set="publish_edit" t-value="True"/>
255                         <li class='dropdown-submenu'>
256                             <a tabindex="-1" href="#">Promote</a>
257                             <ul class="dropdown-menu" name="sequence">
258                                 <li><a href="#" class="js_go_to_top">Push to top</a></li>
259                                 <li><a href="#" class="js_go_to_bottom">Push to bottom</a></li>
260                             </ul>
261                         </li>
262                       </t>
263                   </div><div class="col-sm-3 col-sm-offset-1">
264                         <form action="/shop/" method="get" class="pull-right">
265                             <t t-call="website_sale.search" />
266                         </form>
267                   </div>
268                 </div>
269               </section>
270
271               <section class="container oe_website_sale mb16" id="product_detail">
272                 <div class="row">
273                   <div class="col-sm-7 col-md-7 col-lg-7">
274                       <span t-field="product.image" style="max-height: 500px" t-field-options='{"widget": "image", "class": "img img-responsive"}'/>
275                   </div><div class="col-sm-5 col-md-5 col-lg-4 col-lg-offset-1">
276                       <h1 t-field="product.name">Product Name</h1>
277
278                       <form action="/shop/add_cart/" class="js_add_cart_json">
279                           <input type="hidden" t-if="len(product.product_variant_ids) == 1" name="product_id" t-att-value="product.product_variant_ids[0].id"/>
280                           <t t-if="len(product.product_variant_ids) &gt; 1">
281                               <label label-default="label-default" class="radio" t-foreach="product.product_variant_ids" t-as="variant_id">
282                                   <input type="radio" name="product_id" t-att-value="variant_id.id" t-att-checked="variant_id == product.product_variant_ids[0] or None"/>
283                                   <t t-esc="variant_id.variants or ''">Standard</t>
284                                   <span class="badge" t-if="variant_id.price_extra">
285                                       <t t-esc="variant_id.price_extra > 0 and '+' or ''"/><span t-field="variant_id.price_extra" t-field-options='{
286                                                    "widget": "monetary",
287                                                    "display_currency": "website.pricelist_id.currency_id"
288                                                }'/>
289                                   </span>
290                               </label>
291                               <br/>
292                           </t>
293
294                           <div class="product_price mt16" t-if="product.product_variant_ids">
295                               <h4>
296                                   <b><span class="oe_price" t-esc="product.product_variant_ids[0].price" /> â‚¬</b>
297                                   <t t-if="product.product_variant_ids[0].lst_price != product.product_variant_ids[0].price">
298                                   <span class="text-danger" style="text-decoration: line-through;"
299                                     t-field="product.product_variant_ids[0].lst_price"
300                                     t-field-options='{
301                                        "widget": "monetary",
302                                        "display_currency": "website.pricelist_id.currency_id"
303                                    }'/><br/>
304                                   </t>
305                                   <b class="oe_price"
306                                     t-field="product.product_variant_ids[0].price"
307                                     t-field-options='{
308                                        "widget": "monetary",
309                                        "display_currency": "website.pricelist_id.currency_id"
310                                    }'/>
311                               </h4>
312                           </div>
313                           <button class="btn btn-primary btn-lg mt8">Add to Cart</button>
314                           <hr t-if="product.description_sale"/>
315                           <p t-field="product.description_sale" class="text-muted"/>
316                           <hr/>
317                           <p class="text-muted">
318                               30-day money-back guarantee<br/>
319                               Free Shipping in U.S.<br/>
320                               Buy now, get in 2 days
321                           </p>
322                       </form>
323                   </div>
324                 </div>
325               </section>
326               <div t-field="product.website_description" class="oe_structure" id="product_full_description"/>
327             </div>
328         </t>
329     </template>
330
331     <template id="recommended_products" inherit_id="website_sale.product" inherit_option_id="website_sale.product" name="Recommended Products">
332         <xpath expr="//div[@id='product_full_description']" position="after">
333             <div class="container mt32" t-if="product.recommended_products()">
334                 <h3>Customers who have bought this product also bought:</h3>
335                 <div class='row mt16' style="margin-left: 15px !important;">
336                 <t t-foreach="product.recommended_products()" t-as="product">
337                     <div class='col-md-2 thumbnail' style='width: 170px; margin-right: 16px;'>
338                         <div class='mt16 text-center'>
339                             <span t-field="product.image_small"/>
340                             <h5>
341                                 <a t-href="/shop/product/#{ product.id }/"
342                                    style="display: block">
343                                     <span t-field='product.name'
344                                           style="display: block"/>
345                                 </a>
346                             </h5>
347                         </div>
348                     </div>
349                 </t>
350                 </div>
351             </div>
352         </xpath>
353     </template>
354
355     <template id="product_attributes" inherit_option_id="website_sale.product" name="Product Attributes">
356       <xpath expr="//p[@t-field='product.description_sale']" position="after">
357         <hr t-if="product.website_attribute_ids"/>
358         <p class="text-muted">
359           <t t-set="attr" t-value="None"/>
360           <t t-foreach="product.website_attribute_ids" t-as="attribute"><br t-if="attr and attribute.attribute_id.id != attr"/><t t-if="attribute.attribute_id.id != attr"><span t-field="attribute.attribute_id"/>: </t><t t-if="attribute.attribute_id.id == attr">, </t><t t-if="attribute.attribute_id.type == 'distinct'"><span t-field="attribute.value_id"/></t><t t-if="attribute.attribute_id.type == 'float'"><span t-field="attribute.value"/></t><t t-set="attr" t-value="attribute.attribute_id.id"/></t>
361         </p>
362       </xpath>
363     </template>
364
365     <!-- Page Shop my cart -->
366
367     <template id="mycart" name="Your Cart">
368         <t t-call="website.layout">
369             <t t-set="head">
370                 <script type="text/javascript" src="/website_sale/static/src/js/website_sale.js"></script>
371                 <link rel='stylesheet' href='/website_sale/static/src/css/website_sale.css'/>
372                 <t t-raw="head or ''"/>
373             </t>
374             <div id="wrap">
375               <div class="container oe_website_sale">
376
377                 <ul class="wizard pull-right">
378                     <li class="text-primary">Review Order<span class="chevron"></span></li>
379                     <li class="text-muted">Shipping &amp; Billing<span class="chevron"></span></li>
380                     <li class="text-muted">Payment<span class="chevron"></span></li>
381                     <li class="text-muted">Confirmation<span class="chevron"></span></li>
382                 </ul>
383                 <h1 class="mb32">Shopping Cart</h1>
384                 <div class="row">
385                     <div class="col-md-8 col-sm-9 oe_mycart">
386                         <div t-if="not website_sale_order or not website_sale_order.order_line" class="well well-lg">
387                             Your cart is empty!
388                         </div>
389                         <table class='table table-striped table-condensed' id="mycart_products" t-if="website_sale_order and website_sale_order.order_line">
390                             <colgroup>
391                                 <col width="80"/>
392                                 <col/>
393                                 <col width="100"/>
394                                 <col width="120"/>
395                             </colgroup>
396                             <thead>
397                                 <tr>
398                                     <th colspan="2">Product</th>
399                                     <th>Price</th>
400                                     <th>Quantity</th>
401                                 </tr>
402                             </thead>
403                             <tbody>
404                                 <tr t-foreach="website_sale_order.order_line" t-as="line">
405                                     <td colspan="2" t-if="not line.product_id.product_tmpl_id"></td>
406                                     <td t-if="line.product_id.product_tmpl_id">
407                                         <span t-field="line.product_id.image_small"
408                                               t-field-options='{"widget": "image", "class": "img-rounded"}'/>
409                                     </td>
410                                     <td t-if="line.product_id.product_tmpl_id">
411                                         <div>
412                                             <a t-href="/shop/product/#{ line.product_id.product_tmpl_id.id }/">
413                                                 <strong t-field="line.product_id.name"/>
414                                             </a>
415                                         </div>
416                                         <div class="text-muted" t-field="line.product_id.description_sale"/>
417                                     </td>
418                                     <td class="text-center">
419                                        <del class="text-danger" t-if="line.product_id.lst_price &gt; line.price_unit">
420                                            <span t-field="line.product_id.lst_price" t-field-options='{
421                                                "widget": "monetary",
422                                                "display_currency": "website.pricelist_id.currency_id"
423                                            }'/>
424                                        </del>
425                                        <span t-field="line.price_unit" t-field-options='{
426                                            "widget": "monetary",
427                                            "display_currency": "website.pricelist_id.currency_id"
428                                        }'/>
429                                     </td>
430                                     <td>
431                                         <div class="input-group">
432                                             <span class="input-group-addon">
433                                                 <a t-href="./add_cart/?remove=True&amp;order_line_id=#{ line.id }" class="mb8 js_add_cart_json">
434                                                     <span class="icon-minus"/>
435                                                 </a>
436                                             </span>
437                                             <input type="text" class="js_quantity form-control"
438                                                 t-att-data-id="line.id" t-att-value="int(line.product_uom_qty)"/>
439                                             <span class="input-group-addon">
440                                                 <a t-href="./add_cart/?order_line_id=#{ line.id }" class="mb8 float_left js_add_cart_json">
441                                                     <span class="icon-plus"/>
442                                                 </a>
443                                             </span>
444                                         </div>
445
446                                     </td>
447                                 </tr>
448                             </tbody>
449                         </table>
450                         <table class='pull-right mb16' id="mycart_total" t-if="website_sale_order">
451                             <colgroup>
452                                 <col width="100"/>
453                                 <col width="120"/>
454                             </colgroup>
455                             <thead>
456                                 <tr style="border-top: 1px solid #000">
457                                     <th><h3>Total:</h3></th>
458                                     <th class="text-right">
459                                       <h3><t t-call="website_sale.total"/></h3>
460                                     </th>
461                                 </tr>
462                                 <tr class="text-muted">
463                                     <td><abbr title="Taxes may be updated after providing shipping address">Incl. Taxes:</abbr></td>
464                                     <td class="text-right">
465                                         <span t-field="website_sale_order.amount_tax" t-field-options='{
466                                             "widget": "monetary",
467                                             "display_currency": "website.pricelist_id.currency_id"
468                                         }'/>
469                                     </td>
470                                 </tr>
471                             </thead>
472                         </table>
473                         <div class="clearfix"/>
474                         <a href="/shop" class="btn btn-default mb32"><span class="icon-long-arrow-left"/> Continue Shopping</a>
475                         <a t-if="website_sale_order and website_sale_order.order_line" href="/shop/checkout/" class="btn btn-primary pull-right mb32">Process Checkout <span class="icon-long-arrow-right"/></a>
476                         <div class="oe_structure"/>
477                     </div>
478                     <div class="col-lg-3 col-lg-offset-1 col-sm-3 text-muted" id="right_column">
479                         <h4>Policies</h4>
480                         <ul class="list-unstyled mb32">
481                             <li>&#9745; 30-days money-back guarantee</li>
482                             <li>&#9745; Invoice sent by e-Mail</li>
483                         </ul>
484                         <h4>Secure Payment</h4>
485                         <ul class="list-unstyled mb32">
486                             <li>&#9745; 256 bit encryption</li>
487                             <li>&#9745; Processed by Ogone</li>
488                         </ul>
489                     </div>
490                 </div>
491
492               </div>
493               <div class="oe_structure"/>
494             </div>
495         </t>
496     </template>
497
498     <!-- Page Shop -->
499
500     <template id="products_categories" inherit_option_id="website_sale.products" name="Product Categories">
501         <xpath expr="//div[@id='products_grid_before']" position="inside">
502             <ul class="nav nav-pills nav-stacked mt16">
503                 <li t-att-class=" '' if search.get('category') else 'active' "><a href="/shop/">All Products</a></li>
504                 <t t-set="categ" t-value="Ecommerce.get_categories()"/>
505                 <t t-foreach="categ[0]" t-as="category">
506                     <t t-call="website_sale.categories_recursive"/>
507                 </t>
508             </ul>
509         </xpath>
510         <xpath expr="//div[@id='products_grid_before']" position="attributes">
511             <attribute name="class">col-md-3</attribute>
512         </xpath>
513         <xpath expr="//div[@id='products_grid']" position="attributes">
514             <attribute name="class">col-md-9</attribute>
515         </xpath>
516     </template>
517
518     <template id="products_attributes" inherit_option_id="website_sale.products" name="Product Filters and Attributes">
519         <xpath expr="//div[@id='products_grid_before']" position="inside">
520             <form t-action="/shop/filter/" method="post" t-keep-query="category,search,add_filter">
521                 <ul class="nav nav-pills nav-stacked mt16">
522                     <t t-set="attribute_ids" t-value="Ecommerce.get_attribute_ids()"/>
523                     <t t-foreach="attribute_ids" t-as="attribute_id">
524                       <t t-if="attribute_id.visible">
525                         <li t-if="attribute_id.value_ids and attribute_id.type == 'distinct'">
526                             <div t-field="attribute_id.name"/>
527                             <ul class="nav nav-pills nav-stacked">
528                                 <t t-foreach="attribute_id.value_ids" t-as="value_id">
529                                     <li t-att-class="Ecommerce.has_search_filter(attribute_id.id, value_id.id) and 'active' or ''">
530                                         <label style="margin: 0 20px;">
531                                             <input type="checkbox" t-att-name="'att-%s-%s' % (attribute_id.id, value_id.id)"
532                                                 t-att-checked="Ecommerce.has_search_filter(attribute_id.id, value_id.id) and 'checked' or ''"/>
533                                             <span style="font-weight: normal" t-field="value_id.name"/>
534                                         </label>
535                                     </li>
536                                 </t>
537                             </ul>
538                         </li>
539                         <li t-if="attribute_id.type == 'float' and attribute_id.float_min != attribute_id.float_max">
540                             <div t-field="attribute_id.name"/>
541                             <t t-set="attribute" t-value="Ecommerce.has_search_filter(attribute_id.id)"/>
542                             <div style="margin: 0 20px;" class="js_slider"
543                               t-att-data-id="attribute_id.id"
544                               t-att-data-value-min="attribute and attribute[1][0] or attribute_id.float_min"
545                               t-att-data-value-max="attribute and attribute[1][1] or attribute_id.float_max"
546                               t-att-data-min="attribute_id.float_min"
547                               t-att-data-max="attribute_id.float_max"></div>
548                         </li>
549                       </t>
550                     </t>
551                 </ul>
552                 <button class="btn btn-xs btn-primary mt16">Apply filter</button>
553                 <a t-href="/shop/" t-keep-query="category,search,add_filter" class="btn btn-xs btn-default mt16">Cancel filter</a>
554             </form>
555         </xpath>
556         <xpath expr="//div[@id='products_grid_before']" position="attributes">
557             <attribute name="class">col-md-3</attribute>
558         </xpath>
559         <xpath expr="//div[@id='products_grid']" position="attributes">
560             <attribute name="class">col-md-9</attribute>
561         </xpath>
562     </template>
563
564     <template id="suggested_products_list" inherit_id="website_sale.mycart" inherit_option_id="website_sale.mycart" name="Suggested Products in my cart">
565         <xpath expr="//table[@id='mycart_products']" position="after">
566             <table t-if="suggested_products" class='table table-striped table-condensed'>
567                 <colgroup>
568                     <col width="80"/>
569                     <col/>
570                     <col width="100"/>
571                     <col width="120"/>
572                 </colgroup>
573                 <thead>
574                     <tr>
575                         <th colspan="2">Suggested products</th>
576                     </tr>
577                 </thead>
578                 <tbody>
579                     <tr t-foreach="suggested_products" t-as="product">
580
581                         <td>
582                             <a t-href="/shop/product/#{ product.product_tmpl_id.id }/">
583                                 <span t-field="product.image_small"
584                                       t-field-options='{"widget": "image", "class": "img-rounded"}'/>
585                             </a>
586                         </td>
587                         <td>
588                             <div>
589                                 <a t-href="/shop/product/#{ product.product_tmpl_id.id }/">
590                                     <strong t-field="product.name"/>
591                                 </a>
592                             </div>
593                             <div class="text-muted" t-field="product.description_sale"/>
594                         </td>
595                         <td>
596                             <span t-field="product.lst_price" t-field-options='{
597                                 "widget": "monetary",
598                                 "display_currency": "website.pricelist_id.currency_id"
599                             }'/>
600                         </td>
601                         <td class="text-center">
602                             <a t-href="./add_cart/?product_id=#{ product.id }"><strong>Add to Cart</strong></a>
603                         </td>
604                     </tr>
605                 </tbody>
606             </table>
607         </xpath>
608     </template>
609
610     <template id="reduction_code" inherit_option_id="website_sale.mycart" name="Reduction Code">
611         <xpath expr="//div[@id='right_column']" position="inside">
612             <h4>Coupon Code</h4>
613             <p>
614                 Have a coupon code? Fill in this field and apply.
615             </p>
616             <form t-if="website_sale_order and website_sale_order.order_line" action="/shop/mycart/" method="post" class="mb32">
617                 <div class="input-group">
618                     <input name="promo" class='form-control' type="text" placeholder="code..." t-att-value="website_sale_order.pricelist_id.code or ''"/>
619                     <div class="input-group-btn">
620                         <button class="btn btn-default">Apply</button>
621                     </div>
622                 </div>
623             </form>
624         </xpath>
625     </template>
626
627
628     <!-- Page confirm my cart -->
629
630     <template id="checkout">
631         <t t-call="website.layout">
632           <t t-set="head">
633               <script type="text/javascript" src="/website_sale/static/src/js/website_sale.js"></script>
634               <link rel='stylesheet' href='/website_sale/static/src/css/website_sale.css'/>
635               <t t-raw="head or ''"/>
636           </t>
637           <t t-set="additional_title">Shop - Checkout</t>
638           <div id="wrap">
639             <div class="container oe_website_sale">
640                 <ul class="wizard pull-right">
641                     <li><a href="/shop/mycart" class="text-success">Review Order<span class="chevron"></span></a></li>
642                     <li class="text-primary">Shipping &amp; Billing<span class="chevron"></span></li>
643                     <li class="text-muted">Payment<span class="chevron"></span></li>
644                     <li class="text-muted">Confirmation<span class="chevron"></span></li>
645                 </ul>
646                 <h1>Your Address</h1>
647                 <form action="/shop/confirm_order/" method="post">
648
649                 <div class="row">
650                 <div class="col-md-8 oe_mycart">
651                     <h3 class="page-header mt16">Billing Information
652                         <small t-if="user_id.id == website.public_user.id"> or
653                             <a t-if="not partner" t-attf-href="/web#action=redirect&amp;url=#{ request.httprequest.url }">sign in</a>
654                         </small>
655                     </h3>
656                         <div class="row">
657                             <div t-attf-class="form-group #{error.get('name') and 'has-error' or ''} col-lg-6">
658                                 <label class="control-label" for="contact_name">Your Name</label>
659                                 <input type="text" name="name" class="form-control" t-att-value="checkout.get('name')"/>
660                             </div>
661                             <div t-attf-class="form-group #{error.get('company') and 'has-error' or ''} col-lg-6">
662                                 <label class="control-label" for="company" style="font-weight: normal">Your Company</label>
663                                 <input type="text" name="company" class="form-control" t-att-value="checkout.get('company')"/>
664                             </div>
665                             <div t-attf-class="form-group #{error.get('email') and 'has-error' or ''} col-lg-6">
666                                 <label class="control-label" for="contact_name">Email</label>
667                                 <input type="email" name="email" class="form-control" t-att-value="checkout.get('email')"/>
668                             </div>
669                             <div t-attf-class="form-group #{ error.get('phone') and 'has-error' or ''} col-lg-6">
670                                 <label class="control-label" for="phone">Phone</label>
671                                 <input type="tel" name="phone" class="form-control" t-att-value="checkout.get('phone')"/>
672                             </div>
673
674                             <div t-attf-class="form-group #{error.get('street') and 'has-error' or ''} col-lg-6">
675                                 <label class="control-label" for="street">Street</label>
676                                 <input type="text" name="street" class="form-control" t-att-value="checkout.get('street')"/>
677                             </div>
678                             <div class="clearfix"/>
679
680                             <div t-attf-class="form-group #{error.get('city') and 'has-error' or ''} col-lg-6">
681                                 <label class="control-label" for="city">City</label>
682                                 <input type="text" name="city" class="form-control" t-att-value="checkout.get('city')"/>
683                             </div>
684                             <div t-attf-class="form-group #{error.get('zip') and 'has-error' or ''} col-lg-6">
685                                 <label class="control-label" for="zip">Zip / Postal Code</label>
686                                 <input type="text" name="zip" class="form-control" t-att-value="checkout.get('zip')"/>
687                             </div>
688                             <div t-attf-class="form-group #{error.get('state_id') and 'has-error' or ''} col-lg-6">
689                                 <label class="control-label" for="state_id" style="font-weight: normal">State / Province</label>
690                                 <select name="state_id" class="form-control">
691                                     <option value="">select...</option>
692                                     <t t-foreach="states or []" t-as="state">
693                                         <option t-att-value="state.id" t-att-selected="state.id == checkout.get('state_id')"><t t-esc="state.name"/></option>
694                                     </t>
695                                 </select>
696                             </div>
697                             <div t-attf-class="form-group #{error.get('country_id') and 'has-error' or ''} col-lg-6">
698                                 <label class="control-label" for="contact_name">Country</label>
699                                 <select name="country_id" class="form-control">
700                                     <option value="">Country...</option>
701                                     <t t-foreach="countries or []" t-as="country">
702                                         <option t-att-value="country.id" t-att-selected="country.id == checkout.get('country_id')"><t t-esc="country.name"/></option>
703                                     </t>
704                                 </select>
705                             </div>
706
707                             <div class="clearfix"/>
708
709                             <div class="form-group col-lg-6">
710                                 <label>
711                                     <input t-if="not shipping" type="checkbox" name="shipping_different"/>
712                                     <input t-if="shipping" type="checkbox" name="shipping_different" checked="1"/>
713                                     Ship to a different address
714                                 </label>
715                             </div>
716                         </div>
717
718                         <div class="js_shipping row mb16" t-att-style="not shipping and 'display:none' or ''">
719                             <h3 class="oe_shipping col-lg-12 mt16">Shipping Information</h3>
720
721                             <div t-attf-class="form-group #{error.get('shipping_name') and 'has-error' or ''} col-lg-6">
722                                 <label class="control-label" for="contact_name">Name (Shipping)</label>
723                                 <input type="text" name="shipping_name" class="form-control" t-att-value="checkout.get('shipping_name', '')"/>
724                             </div>
725                             <div t-attf-class="form-group #{error.get('shipping_phone') and 'has-error' or ''} col-lg-6">
726                                 <label class="control-label" for="contact_name">Phone</label>
727                                 <input type="tel" name="shipping_phone" class="form-control" t-att-value="checkout.get('shipping_phone', '')"/>
728                             </div>
729                             <div t-attf-class="form-group #{error.get('shipping_street') and 'has-error' or ''} col-lg-6">
730                                 <label class="control-label" for="contact_name">Street</label>
731                                 <input type="text" name="shipping_street" class="form-control" t-att-value="checkout.get('shipping_street', '')"/>
732                             </div>
733                             <div class="clearfix"/>
734                             <div t-attf-class="form-group #{error.get('shipping_city') and 'has-error' or ''} col-lg-6">
735                                 <label class="control-label" for="contact_name">City</label>
736                                 <input type="text" name="shipping_city" class="form-control" t-att-value="checkout.get('shipping_city', '')"/>
737                             </div>
738                             <div t-attf-class="form-group #{error.get('shipping_zip') and 'has-error' or ''} col-lg-6">
739                                 <label class="control-label" for="contact_name">Zip / Postal Code</label>
740                                 <input type="text" name="shipping_zip" class="form-control" t-att-value="checkout.get('shipping_zip', '')"/>
741                             </div>
742                             <div t-attf-class="form-group #{error.get('shipping_state_id') and 'has-error' or ''} col-lg-6">
743                                 <label class="control-label" for="contact_name" style="font-weight: normal">State / Province</label>
744                                 <select name="shipping_state_id" class="form-control">
745                                     <option value="">State / Province...</option>
746                                     <t t-foreach="states or []" t-as="state">
747                                         <option t-att-value="state.id" t-att-selected="state.id == checkout.get('shipping_state_id')"><t t-esc="state.name"/></option>
748                                     </t>
749                                 </select>
750                             </div>
751                             <div t-attf-class="form-group #{error.get('shipping_country_id') and 'has-error' or ''} col-lg-6">
752                                 <label class="control-label" for="contact_name">Country</label>
753                                 <select name="shipping_country_id" class="form-control">
754                                     <option value="">Country...</option>
755                                     <t t-foreach="countries or []" t-as="country">
756                                         <option t-att-value="country.id" t-att-selected="country.id == checkout.get('shipping_country_id')"><t t-esc="country.name"/></option>
757                                     </t>
758                                 </select>
759                             </div>
760                         </div>
761                         <button type="submit" class="btn btn-default btn-primary pull-right mb32">Confirm <span class="icon-long-arrow-right"/></button>
762                 </div>
763                 <div class="col-lg-offset-1 col-lg-3 text-muted">
764                     <h3 class="page-header mt16">Your Order <small><a href="/shop/mycart"><span class="icon-arrow-right"/> change</a></small></h3>
765                     <div class="row">
766                         <div class="col-sm-6 text-right">Subtotal:</div>
767                         <div class="col-sm-6"><span t-esc="website_sale_order.amount_untaxed" t-field-options='{
768                             "widget": "monetary",
769                             "display_currency": "website.pricelist_id.currency_id"
770                         }'/></div>
771                         <div class="col-sm-6 text-right">Taxes:</div>
772                         <div class="col-sm-6"><span t-field="website_sale_order.amount_tax" t-field-options='{
773                             "widget": "monetary",
774                             "display_currency": "website.pricelist_id.currency_id"
775                         }'/></div>
776                         <div class="col-sm-6 text-right"><h4>Total To Pay:</h4></div>
777                         <div class="col-sm-6"><h4><span t-field="website_sale_order.amount_total" t-field-options='{
778                             "widget": "monetary",
779                             "display_currency": "website.pricelist_id.currency_id"
780                         }'/></h4></div>
781                     </div>
782                 </div>
783             </div>
784             </form>
785           </div>
786           </div>
787         </t>
788     </template>
789
790     <template id="payment">
791         <t t-call="website.layout">
792             <t t-set="head">
793                 <script type="text/javascript" src="/website_sale/static/src/js/website_sale.js"></script>
794                 <script type="text/javascript" src="/website_sale/static/src/js/website_sale_payment.js"></script>
795                 <link rel='stylesheet' href='/website_sale/static/src/css/website_sale.css'/>
796                 <t t-raw="head or ''"/>
797             </t>
798             <t t-set="additional_title">Shop - Select Payment Mode</t>
799             <div id="wrap">
800               <div class="container oe_website_sale">
801
802                 <ul class="wizard pull-right">
803                     <li><a href="/shop/mycart" class="text-success">Review Order<span class="chevron"></span></a></li>
804                     <li><a href="/shop/checkout" class="text-success">Shipping &amp; Billing<span class="chevron"></span></a></li>
805                     <li class="text-primary">Payment<span class="chevron"></span></li>
806                     <li class="text-muted">Confirmation<span class="chevron"></span></li>
807                 </ul>
808                 <h1 class="mb32">Validate Order</h1>
809                 <div class="row">
810                 <div class="col-lg-8 col-sm-9 oe_mycart">
811                     <table class='table table-striped table-condensed' id="mycart_products" t-if="website_sale_order and website_sale_order.order_line">
812                         <colgroup>
813                             <col width="80"/>
814                             <col/>
815                             <col width="100"/>
816                             <col width="120"/>
817                         </colgroup>
818                         <thead>
819                             <tr>
820                                 <th colspan="2">Product</th>
821                                 <th>Price</th>
822                                 <th>Quantity</th>
823                             </tr>
824                         </thead>
825                         <tbody>
826                             <tr t-foreach="website_sale_order.order_line" t-as="line">
827                                 <td colspan="2" t-if="not line.product_id.product_tmpl_id"></td>
828                                 <td t-if="line.product_id.product_tmpl_id">
829                                     <a t-href="/shop/product/#{ line.product_id.product_tmpl_id.id }/">
830                                         <span t-field="line.product_id.image_small"
831                                               t-field-options='{"widget": "image", "class": "img-rounded"}'/>
832                                     </a>
833                                 </td>
834                                 <td t-if="line.product_id.product_tmpl_id">
835                                    <strong t-field="line.product_id.name"/>
836                                 </td>
837                                 <td class="text-center">
838                                    <span t-field="line.price_unit" t-field-options='{
839                                        "widget": "monetary",
840                                        "display_currency": "website.pricelist_id.currency_id"
841                                    }'/>
842                                 </td>
843                                 <td>
844                                    <div t-esc="line.product_uom_qty"/>
845                                 </td>
846                             </tr>
847                         </tbody>
848                     </table>
849                     <table class='pull-right mb16' id="mycart_total">
850                         <colgroup>
851                             <col width="100"/>
852                             <col width="120"/>
853                         </colgroup>
854                         <thead>
855                             <tr style="border-top: 1px solid #000">
856                                 <th><h3>Total:</h3></th>
857                                 <th class="text-right"><h3><span t-field="website_sale_order.amount_total" t-field-options='{
858                                     "widget": "monetary",
859                                     "display_currency": "website.pricelist_id.currency_id"
860                                 }'/></h3></th>
861                             </tr>
862                             <tr class="text-muted">
863                                 <td>Incl. Taxes:</td>
864                                 <td class="text-right"><span t-field="website_sale_order.amount_tax" t-field-options='{
865                                     "widget": "monetary",
866                                     "display_currency": "website.pricelist_id.currency_id"
867                                 }'/></td>
868                             </tr>
869                         </thead>
870                     </table>
871                     <div class="clearfix"/>
872                     <div class="oe_structure"/>
873                   </div>
874                   <div class="col-lg-3 col-lg-offset-1 col-sm-3 text-muted" id="right_column">
875                       <h4>Bill To:</h4>
876                       <div t-field="website_sale_order.partner_invoice_id"/>
877                       <div>
878                         <a href="/shop/checkout"><span class="icon-arrow-right"/> Change Address</a>
879                       </div>
880
881                       <h4 class="mt32">Ship To:</h4>
882                       <div t-field="website_sale_order.partner_shipping_id"/>
883                       <div>
884                         <a href="/shop/checkout"><span class="icon-arrow-right"/> Change Address</a>
885                       </div>
886
887                   </div>
888                 </div>
889
890                 <div class="js_payment mb64" t-if="not payment_acquirer_id and payments">
891                     <p>Payment method:</p>
892                     <div>
893                         <t t-foreach="payments or []" t-as="payment">
894                             <label t-if="payment._content">
895                                 <input t-att-value="payment.id" type="radio" name="payment_type"/> <span t-field="payment.name"/>
896                             </label>
897                         </t>
898                     </div>
899                     <t t-foreach="payments" t-as="payment">
900                         <div t-att-data-id="payment.id" t-raw="payment._content" class="oe_payment_acquirer hidden"/>
901                     </t>
902                 </div>
903
904               </div>
905               <div class="oe_structure"/>
906             </div>
907
908         </t>
909     </template>
910
911     <template id="confirmation">
912         <t t-call="website.layout">
913             <t t-set="head">
914                 <link rel='stylesheet' href='/website_sale/static/src/css/website_sale.css'/>
915                 <script type="text/javascript" src="/website_sale/static/src/js/website_sale_validate.js"></script>
916                 <t t-raw="head or ''"/>
917             </t>
918             <t t-set="additional_title">Shop - Confirmed</t>
919             <div id="wrap">
920               <div class="container oe_website_sale">
921
922                 <ul class="wizard pull-right">
923                     <li class="text-muted">Review Order<span class="chevron"></span></li>
924                     <li class="text-muted">Shipping &amp; Billing<span class="chevron"></span></li>
925                     <li class="text-muted">Payment<span class="chevron"></span></li>
926                     <li class="text-primary">Confirmation<span class="chevron"></span></li>
927                 </ul>
928                 <h1 class="mb32">Order Confirmed</h1>
929                 <div class="row">
930                     <div class="col-md-8 oe_mycart">
931                         <h2>Thank you for your order.</h2>
932                         <div class="oe_website_sale_tx_status" t-att-data-order-id="order.id">
933                         </div>
934                         <div class="clearfix"/>
935                         <div class="oe_structure"/>
936                     </div>
937                     <div class="col-md-3 col-md-offset-1 text-muted" id="right_column">
938                         <h4>Bill To:</h4>
939                         <div t-field="order.partner_invoice_id"/>
940
941                         <h4 class="mt32">Ship To:</h4>
942                         <div t-field="order.partner_shipping_id"/>
943
944                         <h4 class="mt32">Amount:</h4>
945 <!--                         <div t-field="order.amount_total" t-field-options='{
946                             "widget": "monetary",
947                             "display_currency": "website.pricelist_id.currency_id"
948                         }'/> -->
949                     </div>
950                 </div>
951
952               </div>
953               <div class="oe_structure"/>
954             </div>
955
956         </t>
957     </template>
958
959     <template id="total">
960       <span t-field="website_sale_order.amount_total" t-field-options='{
961           "widget": "monetary",
962           "display_currency": "website.pricelist_id.currency_id"
963         }'/>
964     </template>
965  </data>
966 </openerp>