[IMP] website_sale: use link instead of javascript hack for button 'add cart' and 'checkout'

bzr revid: chm@openerp.com-20130808142341-ju7qq63543fkr2uw

addons/website_sale/controllers/main.py

@@ -2,10 +2,11 @@
 
 import math
 import openerp
-import simplejson
 from openerp.osv import osv
 from openerp.addons.web import http
 from openerp.addons.web.http import request
+import werkzeug
+from urllib import urlencode
 
 def get_order(order_id=None):
     order_obj = request.registry.get('sale.order')
@@ -86,7 +87,7 @@ class Ecommerce(http.Controller):
         product_ids = product_obj.search(request.cr, request.uid, [("id", "in", product_ids)])
         return product_obj.browse(request.cr, request.uid, product_ids)
 
-    @http.route(['/shop', '/shop/category/<cat_id>', '/shop/category/<cat_id>/page/<page>', '/shop/page/<page>'], type='http', auth="public")
+    @http.route(['/shop/', '/shop/category/<cat_id>/', '/shop/category/<cat_id>/page/<page>/', '/shop/page/<page>/'], type='http', auth="public")
     def category(self, cat_id=0, page=0, **post):
 
         website = request.registry['website']
@@ -133,7 +134,7 @@ class Ecommerce(http.Controller):
         })
         return self.render("website_sale.products", values)
 
-    @http.route(['/shop/product/<product_id>'], type='http', auth="public")
+    @http.route(['/shop/product/<product_id>/'], type='http', auth="public")
     def product(self, cat_id=0, product_id=0):
         website = request.registry['website']
         order = get_current_order()
@@ -151,7 +152,7 @@ class Ecommerce(http.Controller):
         })
         return self.render("website_sale.product", values)
 
-    @http.route(['/shop/mycart'], type='http', auth="public")
+    @http.route(['/shop/mycart/'], type='http', auth="public")
     def mycart(self, **post):
         website = request.registry['website']
         order = get_current_order()
@@ -169,9 +170,7 @@ class Ecommerce(http.Controller):
 
         return self.render("website_sale.mycart", values)
 
-    @http.route(['/shop/add_cart'], type='http', auth="public")
-    def add_cart(self, product_id=0, remove=False):
-        website = request.registry['website']
+    def add_product_to_cart(self, product_id=0, number=1):
         context = {}
 
         order_line_obj = request.registry.get('sale.order.line')
@@ -187,7 +186,7 @@ class Ecommerce(http.Controller):
         order_line_ids = order_line_obj.search(request.cr, openerp.SUPERUSER_ID, [('order_id', '=', order.id), ('product_id', '=', product_id)], context=context)
         if order_line_ids:
             order_line = order_line_obj.read(request.cr, openerp.SUPERUSER_ID, order_line_ids, [], context=context)[0]
-            quantity = order_line['product_uom_qty'] + (remove and -1 or 1)
+            quantity = order_line['product_uom_qty'] + number
             if quantity <= 0:
                 order_line_obj.unlink(request.cr, openerp.SUPERUSER_ID, order_line_ids, context=context)
         else:
@@ -210,32 +209,42 @@ class Ecommerce(http.Controller):
                 order_line_id = order_line_obj.create(request.cr, openerp.SUPERUSER_ID, values, context=context)
                 order.write({'order_line': [(4, order_line_id)]}, context=context)
 
-        values = website.get_rendering_context()
-        html = self.render("website_sale.total", values)
-        return simplejson.dumps({"quantity": quantity, "totalHTML": html})
+        return quantity
 
-    @http.route(['/shop/remove_cart'], type='http', auth="public")
+    @http.route(['/shop/add_cart/<product_id>/', '/shop/<path:path>/add_cart/<product_id>/'], type='http', auth="public")
+    def json_add_cart(self, path=None, product_id=0, remove=False):
+        self.add_product_to_cart(product_id, remove and -1 or 1)
+        if path:
+            return werkzeug.utils.redirect("/shop/%s/" % path)
+        else:
+            return werkzeug.utils.redirect("/shop/")
+
+    @http.route(['/shop/remove_cart/<product_id>/', '/shop/<path:path>/remove_cart/<product_id>/'], type='http', auth="public")
+    def json_remove_cart(self, path=None, product_id=0, remove=False):
+        return self.json_add_cart(path=path, product_id=product_id, remove=True)
+
+    @http.route(['/shop/remove_cart/'], type='http', auth="public")
     def remove_cart(self, product_id=0):
         return self.add_cart(product_id=product_id, remove=True)
 
-    @http.route(['/shop/checkout'], type='http', auth="public")
+    @http.route(['/shop/checkout/'], type='http', auth="public")
     def checkout(self, **post):
         website = request.registry['website']
+
         values = website.get_rendering_context({
-            'partner': False
+            'partner': False,
+            'checkout': request.session.setdefault('checkout', {}),
+            'error': post.get("error") and dict.fromkeys(post.get("error").split(","), 1) or []
         })
         order = get_current_order()
 
-        if order.state != 'draft':
-            return self.confirmed(**post)
-        if not order.order_line:
+        if order.state != 'draft' or not order.order_line:
             return self.mycart(**post)
 
         partner_obj = request.registry.get('res.partner')
         user_obj = request.registry.get('res.users')
         country_obj = request.registry.get('res.country')
         country_state_obj = request.registry.get('res.country.state')
-        payment_obj = request.registry.get('portal.payment.acquirer')
 
         if request.uid != website.get_public_user().id:
             values['partner'] = user_obj.browse(request.cr, request.uid, request.uid).partner_id
@@ -247,39 +256,33 @@ class Ecommerce(http.Controller):
         values['countries'] = country_obj.browse(request.cr, openerp.SUPERUSER_ID, country_obj.search(request.cr, openerp.SUPERUSER_ID, [(1, "=", 1)]))
         values['states'] = country_state_obj.browse(request.cr, openerp.SUPERUSER_ID, country_state_obj.search(request.cr, openerp.SUPERUSER_ID, [(1, "=", 1)]))
 
-        payment_ids = payment_obj.search(request.cr, openerp.SUPERUSER_ID, [('visible', '=', True)])
-        values['payments'] = payment_obj.browse(request.cr, openerp.SUPERUSER_ID, payment_ids)
-        for payment in values['payments']:
-            content = payment_obj.render(request.cr, openerp.SUPERUSER_ID, payment.id, order, order.name, order.pricelist_id.currency_id, order.amount_total)
-            payment._content = content
-
         return website.render("website_sale.checkout", values)
 
-    @http.route(['/shop/confirm_order'], type='http', auth="public")
+    @http.route(['/shop/confirm_order/'], type='http', auth="public")
     def confirm_order(self, **post):
         website = request.registry['website']
         order = get_current_order()
 
-        json = {'error': [], 'validation': False}
+        error = []
         partner_obj = request.registry.get('res.partner')
         user_obj = request.registry.get('res.users')
 
         if order.state != 'draft':
-            json['validation'] = True
-            return json
+            return werkzeug.utils.redirect("/shop/checkout/")
         if not order.order_line:
-            json['error'].append("empty_cart")
-            return json
+            error.append("empty_cart")
+            return werkzeug.utils.redirect("/shop/checkout/")
 
         # check values
+        request.session['checkout'] = post
         required_field = ['phone', 'zip', 'email', 'street', 'city', 'name', 'country_id']
         for key in required_field:
             if not post.get(key):
-                json['error'].append(key)
-            if 'shipping_name' in post and key != 'email' and not post.get("shipping_%s" % key):
-                json['error'].append("shipping_%s" % key)
-        if json['error']:
-            return simplejson.dumps(json)
+                error.append(key)
+            if post.get('shipping_different') and key != 'email' and not post.get("shipping_%s" % key):
+                error.append("shipping_%s" % key)
+        if error:
+            return werkzeug.utils.redirect("/shop/checkout/?error=%s" % ",".join(error))
 
         # search or create company
         company_id = None
@@ -339,30 +342,34 @@ class Ecommerce(http.Controller):
         order_value.update(request.registry.get('sale.order').onchange_partner_id(request.cr, openerp.SUPERUSER_ID, [], request.uid, context={})['value'])
         order.write(order_value)
 
-        json['validation'] = True
-        return simplejson.dumps(json)
+        request.httprequest.session['ecommerce_order_id_old'] = order.id
+        request.httprequest.session['ecommerce_order_id'] = None
 
-    @http.route(['/shop/confirmed'], type='http', auth="public")
-    def confirmed(self, **post):
+        return werkzeug.utils.redirect("/shop/payment/")
+
+    @http.route(['/shop/payment/'], type='http', auth="public")
+    def payment(self, **post):
         website = request.registry['website']
+        order = get_order(request.httprequest.session.get('ecommerce_order_id_old'))
 
-        if request.httprequest.session.get('ecommerce_order_id'):
-            order = get_current_order()
-            if order.state != 'draft':
-                request.httprequest.session['ecommerce_order_id_old'] = order.id
-                request.httprequest.session['ecommerce_order_id'] = None
-
-        order_old = get_order(request.httprequest.session.get('ecommerce_order_id_old'))
-        if not order_old.order_line:
+        if order.state != 'progress':
             return self.mycart(**post)
 
         values = website.get_rendering_context({
-            'temp': 0,
-            'order': order_old,
+            'partner': False,
+            'order': order
         })
-        return self.render("website_sale.confirmed", values)
 
-    @http.route(['/shop/publish'], type='http', auth="public")
+        payment_obj = request.registry.get('portal.payment.acquirer')
+        payment_ids = payment_obj.search(request.cr, openerp.SUPERUSER_ID, [('visible', '=', True)])
+        values['payments'] = payment_obj.browse(request.cr, openerp.SUPERUSER_ID, payment_ids)
+        for payment in values['payments']:
+            content = payment_obj.render(request.cr, openerp.SUPERUSER_ID, payment.id, order, order.name, order.pricelist_id.currency_id, order.amount_total)
+            payment._content = content
+
+        return website.render("website_sale.payment", values)
+
+    @http.route(['/shop/publish/'], type='http', auth="public")
     def publish(self, **post):
         product_id = int(post['id'])
         product_obj = request.registry['product.product']

addons/website_sale/static/src/js/ecommerce.js

@@ -16,53 +16,10 @@ $(document).ready(function () {
         });
     });
 
-    $('.oe_ecommerce').on('click', '.oe_product .btn, .oe_product_detail .btn', function (e) {
-        var $button = $(e.currentTarget);
-        var $product = $button.parents('.oe_product:first, .oe_product_detail:first');
-        var link = $button.hasClass('btn-inverse') ? '/shop/remove_cart' : '/shop/add_cart';
-        var $add = $product.find('.btn-success,.btn-primary');
-        var $remove = $product.find('.btn-inverse');
-
-        $.get(link, {'product_id': $button.data('id')}, function (result) {
-            var result = JSON.parse(result);
-            var quantity = parseInt(result.quantity);
-            $add.find('.oe_quantity')
-                .html(quantity);
-            $add.toggleClass('btn-primary', !quantity)
-                .toggleClass('btn-success', !!quantity);
-            $remove.toggleClass('hidden', !quantity);
-            if ($('.oe_mycart').size() && !quantity) {
-                $product.remove()
-            }
-            $('.oe_ecommerce .oe_total').replaceWith(''+result.totalHTML);
-        });
-    });
-
 
     var $checkout = $(".oe_ecommerce .oe_checkout");
     $(".oe_ecommerce input[name='shipping_different']").change(function() {
         $(".oe_ecommerce .js_shipping").toggle();
     });
-    $(".oe_ecommerce .js_error_payment").click(function(e) {
-        var values = {};
-        $checkout.find(".js_inputs:not(:hidden) input:not(:checkbox), .js_inputs:not(:hidden) select, .js_signin_modal input").each(function() {
-            values[$(this).attr("name")] = $(this).val();
-        });
-        $checkout.find("input").css("border", "");
-        $.post('/shop/confirm_order', values, function (result) {
-            var result = JSON.parse(result);
-            console.log(result);
-            if (result.error.length) {
-                $inputs = $checkout.find("input[name='" + result.error.join("'], input[name='") + "']");
-                $inputs.css("border", "1px solid #dd0000");
-                $inputs.first().focus();
-            }
-            if (result.validation) {
-                var $form = $(e.currentTarget).parent().find("input[name='submit']").click();
-                setTimeout(function() {
-                    window.location.href = "/shop/confirmed";
-                }, 0);
-            }
-        });
-    });
+
 });

addons/website_sale/views/ecommerce.xml

@@ -10,8 +10,8 @@
         <field name="arch" type="xml">
             <data>
                 <xpath expr="(//li)[last()]" position="after">
-                    <li class="pull-right"><a href="/shop/mycart"><i class="icon-shopping-cart icon-large" style="position: absolute;"></i>&amp;nbsp; &amp;nbsp; &amp;nbsp;  My cart</a></li>
-                    <li class="pull-right"><a href="/shop">Shop</a></li>
+                    <li class="pull-right"><a href="/shop/mycart/"><i class="icon-shopping-cart icon-large" style="position: absolute;"></i>&amp;nbsp; &amp;nbsp; &amp;nbsp;  My cart</a></li>
+                    <li class="pull-right"><a href="/shop/">Shop</a></li>
                 </xpath>
            </data>
         </field>
@@ -22,8 +22,8 @@
         <field name="arch" type="xml">
             <data>
                 <xpath expr="(//li)[last()]" position="after">
-                    <li class="pull-right"><a href="/shop/mycart"><i class="icon-shopping-cart icon-large" style="position: absolute;"></i>&amp;nbsp; &amp;nbsp; &amp;nbsp;  My cart</a></li>
-                    <li class="pull-right"><a href="/shop">Shop</a></li>
+                    <li class="pull-right"><a href="/shop/mycart/"><i class="icon-shopping-cart icon-large" style="position: absolute;"></i>&amp;nbsp; &amp;nbsp; &amp;nbsp;  My cart</a></li>
+                    <li class="pull-right"><a href="/shop/">Shop</a></li>
                 </xpath>
            </data>
         </field>
@@ -76,7 +76,7 @@
 
     <template id="categories_recursive">
         <li t-att-class="category.id == current_category and 'active' or ''">
-            <a t-att-href="'/shop/category/%%s' %% category.id" t-field="category.name"></a>
+            <a t-att-href="'/shop/category/%%s/' %% category.id" t-field="category.name"></a>
             <ul t-if="category.child_id" class="nav nav-list">
                 <t t-foreach="category.child_id" t-as="category">
                     <t t-call="website_sale.categories_recursive"/>
@@ -91,11 +91,11 @@
         <t t-set="classname" t-value="classname or ''" />
         <div t-if="page_count != 1" t-att-class="classname + ' pagination'">
             <ul>
-                <li t-att-class=" 'disabled' if page == 1 else '' " ><a t-att-href=" '#' if page == 1 else ('/shop/category/%%s/page/%%s' %% (current_category, max(0,page-1))) ">Prev</a></li>
+                <li t-att-class=" 'disabled' if page == 1 else '' " ><a t-att-href=" '#' if page == 1 else ('/shop/category/%%s/page/%%s/' %% (current_category, max(0,page-1))) ">Prev</a></li>
                 <t t-foreach="pages" t-as="p">
-                    <li t-att-class=" 'active' if p == page else '' " ><a t-att-href=" '/shop/category/%%s/page/%%s' %% (current_category, p)" t-raw='p'></a></li>
+                    <li t-att-class=" 'active' if p == page else '' " ><a t-att-href=" '/shop/category/%%s/page/%%s/' %% (current_category, p)" t-raw='p'></a></li>
                 </t>
-                <li t-att-class=" 'disabled' if page == page_count else '' "><a t-att-href=" '#' if page == page_count else ('/shop/category/%%s/page/%%s' %% (current_category, min(page_count,page+1))) ">Next</a></li>
+                <li t-att-class=" 'disabled' if page == page_count else '' "><a t-att-href=" '#' if page == page_count else ('/shop/category/%%s/page/%%s/' %% (current_category, min(page_count,page+1))) ">Next</a></li>
             </ul>
         </div>
     </template>
@@ -109,7 +109,7 @@
                         <t t-call="website_sale.product_pager" >
                             <t t-set="classname">pull-left</t>
                         </t>
-                        <form action="/shop" method="get" class="navbar-search pull-right">
+                        <form action="/shop/" method="get" class="navbar-search pull-right">
                             <input type="text" name="search" class="search-query span2" placeholder="Search" t-att-value="search or '' or ''"/>
                         </form>
                     </div>
@@ -131,20 +131,18 @@
 
     <template id="product_card">
         <div class="oe_product span2 mb16 thumbnail text-center">
-            <a t-att-href="'/shop/product/%%s' %% product.id">
+            <a t-att-href="'/shop/product/%%s/' %% product.id">
                 <h5  t-field="product.name"> </h5>
             </a>
-            <a t-att-href="'/shop/product/%%s' %% product.id">
+            <a t-att-href="'/shop/product/%%s/' %% product.id">
                 <img class="img-rounded" t-att-src="'data:image/png;base64,' + product.image"/>
             </a>
             <div>
                 <div t-field="product.description_sale"></div>
                 <div><span t-field="product.list_price"></span>€</div>
                 <div class="mb8 mt8">
-                    <button t-att-class="'btn mb8 btn-small btn-inverse %%s' %% (not quantity and 'hidden' or '')" t-att-data-id="product.id">Remove one</button>
-                    <button t-att-class="'btn btn-small %%s' %% (quantity and 'btn-success' or 'btn-primary')" t-att-data-id="product.id">
-                        Add to cart <t t-if="quantity">(<t t-esc="quantity"/>)</t>
-                    </button>
+                    <a t-if="quantity" t-att-href="'./remove_cart/%s/' % product.id" class="btn mb8 btn-small btn-inverse">Remove one</a>
+                    <a t-att-href="'./add_cart/%s/' % product.id" class="btn btn-small btn-success">Add to cart <t t-if="quantity">(<t t-esc="quantity"/>)</t></a>
                 </div>
             </div>
         </div>
@@ -156,7 +154,7 @@
             <div class='row mt16'>
             <t t-foreach="recommended_products or []" t-as="product">
                 <div class='span2 thumbnail'>
-                    <a t-att-href="'/shop/product/%%s' %% product.id">
+                    <a t-att-href="'/shop/product/%%s/' %% product.id">
                         <div class='mt16 text-center'>
                             <img t-att-src="'data:image/png;base64,' + product.image"/>
                             <h5 t-field='product.name'></h5>
@@ -182,10 +180,8 @@
                     <h2 t-field="product.name"></h2>
 
                     <div class="oe_button_cart">
-                        <button t-att-class="'btn btn-small btn-inverse %%s' %% (not quantity and 'oe_hidden' or '')" t-att-data-id="product.id">Remove one</button>
-                        <button t-att-class="'btn btn-small %%s' %% (quantity and 'btn-success' or 'btn-primary')" t-att-data-id="product.id">
-                            Add to cart <t t-if="quantity" >(<t t-esc="quantity"/>)</t>
-                        </button>
+                        <a t-if="quantity" t-att-href="'./remove_cart/%s/' % product.id" class="btn btn-small btn-inverse">Remove one</a>
+                        <a t-att-href="'./add_cart/%s/' % product.id" class="btn btn-small btn-success">Add to cart <t t-if="quantity">(<t t-esc="quantity"/>)</t></a>
                     </div>
                     <img class="media-object" t-att-src="'data:image/png;base64,' + product.image"/>
                     <div t-field="product.description_website"></div>
@@ -213,11 +209,11 @@
                         </t>
                     </div>
                     <t t-call="website_sale.total"/>
-                    <form t-if="order.order_line" class="well form-search" action="/shop/mycart" >
+                    <form t-if="order.order_line" class="well form-search" action="/shop/mycart/" method="post">
                         <input name="code" class='input' type="text" placeholder="Reduction Code..."/>
                         <button class="btn">Apply Code</button>
                     </form>
-                    <a t-if="order.order_line" href="/shop/checkout"><button class="btn btn-success">Proceed To Payment</button></a>
+                    <a t-if="order.order_line" href="/shop/checkout/"><button class="btn btn-success">Proceed To Payment</button></a>
                     <t t-call="website_sale.product_recommended"/>
                 </div>
             </t>
@@ -246,7 +242,6 @@
         <t t-call="website.layout">
             <t t-set="head">
                 <script type="text/javascript" src="/website_sale/static/src/js/ecommerce.js"></script>
-                <link rel='stylesheet' href='/website_sale/static/src/css/ecommerce.css'/>
                 <t t-raw="head"/>
             </t>
             <t t-set="title">Shop - Checkout</t>
@@ -272,58 +267,147 @@
                             </tbody>
                         </table>
                     </div>
-                    <div class="span8 oe_checkout">
+                    <form class="span8" action="/shop/confirm_order/" method="post">
                         <div class="js_inputs row">
-                            <a t-if="not partner" t-att-href="'/admin#action=redirect&amp;url=%%s/shop/checkout' %% host_url" class="btn btn-primary">Log me, I have an account</a>
+                            <a t-if="not partner" t-att-href="'/admin#action=redirect&amp;url=%%s/shop/checkout/' %% host_url" class="btn btn-primary">Log me, I have an account</a>
                             <h3 class="span8">Billing Information</h3>
-                            <label class="span8 css_required">Name and firstname<input class="span7" type="text" name="name" placeholder="Name and firstname" t-att-value="partner.name or ''"/></label>
-                            <label class="span4 css_required">Telephone<input type="tel" name="phone" placeholder="Telephone" t-att-value="partner.phone or ''"/></label>
-                            <label class="span4">Fax<input type="tel" name="fax" placeholder="Fax" t-att-value="partner.fax or ''"/></label>
-                            <label class="span4">Company<input type="text" name="company" placeholder="Company" t-att-value="partner.parent_id and partner.parent_id.name or ''"/></label>
-                            <label class="span4 css_required">Email address<input type="email" name="email" placeholder="Email address" t-att-value="partner.email or ''"/></label>
-                            <label class="span8 css_required">Street<input class="span7" type="text" name="street" placeholder="Street address" t-att-value="partner.street or ''"/></label>
-                            <label class="span4 css_required">City<input type="text" name="city" placeholder="City" t-att-value="partner.city or ''"/></label>
-                            <label class="span4">State / Province <select name="state_id">
-                                <option value="">State / Province...</option>
-                                <t t-foreach="states or []" t-as="state">
-                                    <option t-att-value="state.id" t-att-selected="partner and partner.state_id and state.id == partner.state_id.id or None"><t t-esc="state.name"/></option>
-                                </t>
-                            </select></label>
-                            <label class="span4 css_required">Zip / Postal Code<input type="text" name="zip" placeholder="Zip/Postal Code" t-att-value="partner.zip or ''"/></label>
-                            <label class="span4 css_required">Country <select name="country_id">
-                                <option value="">Country...</option>
-                                <t t-foreach="countries or []" t-as="country">
-                                    <option t-att-value="country.id" t-att-selected="partner and partner.country_id and country.id == partner.country_id.id or None"><t t-esc="country.name"/></option>
-                                </t>
-                            </select></label>
-                            <label class="span8 checkbox">Ship to different address<input type="checkbox" name="shipping_different"/></label>
+                            <label class="span8 css_required">
+                                Name and firstname
+                                <input class="span7" type="text" name="name" placeholder="Name and firstname" t-att-value="partner.name or checkout.get('name', '')" t-att-style="error.get('name') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span4 css_required">
+                                Telephone
+                                <input type="tel" name="phone" placeholder="Telephone" t-att-value="partner.phone or checkout.get('phone', '')" t-att-style="error.get('phone') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span4">
+                                Fax
+                                <input type="tel" name="fax" placeholder="Fax" t-att-value="partner.fax or checkout.get('fax', '')" t-att-style="error.get('fax') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span4">
+                                Company
+                                <input type="text" name="company" placeholder="Company" t-att-value="partner.parent_id and partner.parent_id.name or checkout.get('company', '')" t-att-style="error.get('company') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span4 css_required">
+                                Email address
+                                <input type="email" name="email" placeholder="Email address" t-att-value="partner.email or checkout.get('email', '')" t-att-style="error.get('email') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span8 css_required">
+                                Street
+                                <input class="span7" type="text" name="street" placeholder="Street address" t-att-value="partner.street or checkout.get('street', '')" t-att-style="error.get('street') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span4 css_required">
+                                City
+                                <input type="text" name="city" placeholder="City" t-att-value="partner.city or checkout.get('city', '')" t-att-style="error.get('city') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span4">
+                                State / Province
+                                <select name="state_id" t-att-style="error.get('state_id') and 'border-color:red;' or ''">
+                                    <option value="">State / Province...</option>
+                                    <t t-foreach="states or []" t-as="state">
+                                        <option t-att-value="state.id" t-att-selected="partner and partner.state_id and state.id == partner.state_id.id or checkout.get('state_id', '')"><t t-esc="state.name"/></option>
+                                    </t>
+                                </select>
+                            </label>
+                            <label class="span4 css_required">
+                                Zip / Postal Code
+                                <input type="text" name="zip" placeholder="Zip/Postal Code" t-att-value="partner.zip or checkout.get('zip', '')" t-att-style="error.get('zip') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span4 css_required">
+                                Country
+                                <select name="country_id" t-att-style="error.get('country_id') and 'border-color:red;' or ''">
+                                    <option value="">Country...</option>
+                                    <t t-foreach="countries or []" t-as="country">
+                                        <option t-att-value="country.id" t-att-selected="partner and partner.country_id and country.id == partner.country_id.id  or checkout.get('country_id', '')"><t t-esc="country.name"/></option>
+                                    </t>
+                                </select>
+                            </label>
+                            <label class="span8 checkbox">
+                                Ship to different address
+                                <input type="checkbox" name="shipping_different"/>
+                            </label>
                         </div>
                         <div class="js_inputs js_shipping row" style="display:none">
                             <h3 class="span8 oe_shipping" style="display:none">Shipping Information</h3>
-                            <label class="span8 css_required">Name and firstname<input class="span7" type="text" name="shipping_name" placeholder="Name and firstname" t-att-value="shipping.name or ''"/></label>
-                            <label class="span4 css_required">Telephone<input type="tel" name="shipping_phone" placeholder="Telephone" t-att-value="shipping.phone or ''"/></label>
-                            <label class="span4">Fax<input type="tel" name="shipping_fax" placeholder="Fax" t-att-value="shipping.fax or ''"/></label>
-                            <label class="span8 css_required">Street<input class="span7" type="text" name="shipping_street" placeholder="Street address" t-att-value="shipping.street or ''"/></label>
-                            <label class="span4 css_required">City<input type="text" name="shipping_city" placeholder="City" t-att-value="shipping.city or ''"/></label>
-                            <label class="span4">State / Province <select name="shipping_state_id">
-                                <option value="">State / Province...</option>
-                                <t t-foreach="states or []" t-as="state">
-                                    <option t-att-value="state.id" t-att-selected="shipping and shipping.state_id and state.id == shipping.state_id.id or None"><t t-esc="state.name"/></option>
-                                </t>
-                            </select></label>
-                            <label class="span4 css_required">Zip / Postal Code<input type="text" name="shipping_zip" placeholder="Zip/Postal Code" t-att-value="shipping.zip or ''"/></label>
-                            <label class="span4 css_required">Country <select name="shipping_country_id">
-                                <option value="">Country...</option>
-                                <t t-foreach="countries or []" t-as="country">
-                                    <option t-att-value="country.id" t-att-selected="shipping and shipping.country_id and country.id == shipping.country_id.id or None"><t t-esc="country.name"/></option>
-                                </t>
-                            </select></label>
+                            <label class="span8 css_required">
+                                Name and firstname
+                                <input class="span7" type="text" name="shipping_name" placeholder="Name and firstname" t-att-value="shipping.name or checkout.get('shipping_name', '')" t-att-style="error.get('shipping_name') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span4 css_required">
+                                Telephone
+                                <input type="tel" name="shipping_phone" placeholder="Telephone" t-att-value="shipping.phone or checkout.get('shipping_phone', '')" t-att-style="error.get('shipping_phone') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span4">
+                                Fax
+                                <input type="tel" name="shipping_fax" placeholder="Fax" t-att-value="shipping.fax or checkout.get('shipping_fax', '')" t-att-style="error.get('shipping_fax') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span8 css_required">
+                                Street
+                                <input class="span7" type="text" name="shipping_street" placeholder="Street address" t-att-value="shipping.street or checkout.get('shipping_street', '')" t-att-style="error.get('shipping_street') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span4 css_required">
+                                City
+                                <input type="text" name="shipping_city" placeholder="City" t-att-value="shipping.city or checkout.get('shipping_city', '')" t-att-style="error.get('shipping_city') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span4">
+                                State / Province
+                                <select name="shipping_state_id" t-att-style="error.get('shipping_state_id') and 'border-color:red;' or ''">
+                                    <option value="">State / Province...</option>
+                                    <t t-foreach="states or []" t-as="state">
+                                        <option t-att-value="state.id" t-att-selected="shipping and shipping.state_id and state.id == shipping.state_id.id or checkout.get('shipping_state_id', '')"><t t-esc="state.name"/></option>
+                                    </t>
+                                </select>
+                            </label>
+                            <label class="span4 css_required">
+                                Zip / Postal Code
+                                <input type="text" name="shipping_zip" placeholder="Zip/Postal Code" t-att-value="shipping.zip or checkout.get('shipping_zip', '')" t-att-style="error.get('shipping_zip') and 'border-color:red;' or ''"/>
+                            </label>
+                            <label class="span4 css_required">
+                                Country
+                                <select name="shipping_country_id" t-att-style="error.get('shipping_country_id') and 'border-color:red;' or ''">
+                                    <option value="">Country...</option>
+                                    <t t-foreach="countries or []" t-as="country">
+                                        <option t-att-value="country.id" t-att-selected="shipping and shipping.country_id and country.id == shipping.country_id.id or checkout.get('shipping_country_id', '')"><t t-esc="country.name"/></option>
+                                    </t>
+                                </select>
+                            </label>
                         </div>
+                        <button type="submit">Last stape</button>
+                    </form>
+                </div>
+            </div>
+        </t>
+    </template>
+
+    <template id="payment">
+        <t t-call="website.layout">
+            <t t-set="title">Shop - Payment</t>
+            <div class="container mt48 oe_ecommerce">
+                <div class="row">
+                    <div class="span4 oe_total">
+                        <table class="table table-condensed" t-if="order.order_line">
+                            <thead>
+                                <tr><th>Product</th><th>Qty.</th><th>Price</th></tr>
+                            </thead>
+                            <tbody>
+                                <t t-foreach="order.order_line or []" t-as="line">
+                                    <tr>
+                                        <td><t t-esc="line.name"/></td>
+                                        <td><t t-esc="int(line.product_uom_qty)"/></td>
+                                        <td class="css_alignright"><t t-esc="line.product_id.list_price"/> €</td>
+                                    </tr>
+                                </t>
+                                <tr><td colspan="3" style="visibility: hidden; border: 0">-</td></tr>
+                                <tr><th>Untaxed Amount</th><td></td><td><t t-esc="order.amount_untaxed"/> €</td></tr>
+                                <tr><th>Taxes</th><td></td><td><t t-esc="order.amount_tax"/> €</td></tr>
+                                <tr><th>Total</th><td></td><td><t t-esc="order.amount_total"/> €</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="span8">
                         <div class="js_payments css_payments row">
                             <h3 class="span8">Click on your payment method</h3>
                             <t t-foreach="payments or []" t-as="payment">
                                 <div class="css_payment" t-att-title="payment.name">
-                                    <div class="js_error_payment css_error_payment"> </div>
                                     <t t-raw="payment._content"/>
                                 </div>
                             </t>
@@ -333,31 +417,5 @@
             </div>
         </t>
     </template>
-
-    <template id="confirmed">
-        <t t-call="website_sale.page">
-            <t t-set="title">Order</t>
-            <t t-set="shop_content">
-                <table class="table table-condensed" t-if="order.order_line">
-                    <thead>
-                        <tr><th>Product</th><th>Qty.</th><th>Price</th></tr>
-                    </thead>
-                    <tbody>
-                        <t t-foreach="order.order_line or []" t-as="line">
-                            <tr>
-                                <td><t t-esc="line.product_id.name"/></td>
-                                <td><t t-esc="int(line.product_uom_qty)"/></td>
-                                <td class="css_alignright"><t t-esc="line.product_id.list_price"/> €</td>
-                            </tr>
-                        </t>
-                        <tr><td colspan="3" style="visibility: hidden; border: 0">-</td></tr>
-                        <tr><th>Untaxed Amount</th><td></td><td><t t-esc="order.amount_untaxed"/> €</td></tr>
-                        <tr><th>Taxes</th><td></td><td><t t-esc="order.amount_tax"/> €</td></tr>
-                        <tr><th>Total</th><td></td><td><t t-esc="order.amount_total"/> €</td></tr>
-                    </tbody>
-                </table>
-            </t>
-        </t>
-    </template>
  </data>
 </openerp>