[IMP] website_sale: improve layout of my cart and checkout pages

bzr revid: chm@openerp.com-20130813103948-fqg91t8nhg3szbn5

addons/website_sale/controllers/main.py

@@ -111,7 +111,7 @@ class Ecommerce(http.Controller):
         })
         return website.render("website_sale.mycart", values)
 
-    def add_product_to_cart(self, product_id=0, number=1):
+    def add_product_to_cart(self, product_id=0, number=1, set_number=-1):
         context = {}
 
         order_line_obj = request.registry.get('sale.order.line')
@@ -127,7 +127,10 @@ 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'] + number
+            if set_number >= 0:
+                quantity = set_number
+            else:
+                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:
@@ -153,30 +156,29 @@ class Ecommerce(http.Controller):
         return quantity
 
     @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)
+    def add_cart(self, path=None, product_id=0, remove=None):
+        self.add_product_to_cart(product_id, number=(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)
+    def remove_cart(self, path=None, product_id=0):
+        return self.add_cart(product_id=product_id, path=path, 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/set_cart/<product_id>/<set_number>/', '/shop/<path:path>/set_cart/<product_id>/<set_number>/'], type='http', auth="public")
+    def set_cart(self, path=None, product_id=0, set_number=0):
+        self.add_product_to_cart(product_id, set_number=set_number)
+        if path:
+            return werkzeug.utils.redirect("/shop/%s/" % path)
+        else:
+            return werkzeug.utils.redirect("/shop/")
 
     @http.route(['/shop/checkout/'], type='http', auth="public")
     def checkout(self, **post):
         website = request.registry['website']
 
-        values = website.get_rendering_context({
-            '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' or not order.order_line:
@@ -187,12 +189,27 @@ class Ecommerce(http.Controller):
         country_obj = request.registry.get('res.country')
         country_state_obj = request.registry.get('res.country.state')
 
+        values = website.get_rendering_context({
+            'shipping': post.get("shipping"),
+            'error': post.get("error") and dict.fromkeys(post.get("error").split(","), 'error') or {}
+        })
+
+        checkout = {}
         if request.uid != website.get_public_user().id:
-            values['partner'] = user_obj.browse(request.cr, request.uid, request.uid).partner_id
-            shipping_ids = partner_obj.search(request.cr, request.uid, [("parent_id", "=", values['partner'].id), ('type', "=", 'delivery')])
-            values['shipping'] = None
+            partner = user_obj.browse(request.cr, request.uid, request.uid).partner_id
+            partner_id = partner.id
+            checkout = user_obj.read(request.cr, openerp.SUPERUSER_ID, [partner_id], [])[0]
+            checkout['company'] = partner.parent_id and partner.parent_id.name or ''
+
+            shipping_ids = partner_obj.search(request.cr, request.uid, [("parent_id", "=", partner_id), ('type', "=", 'delivery')])
             if shipping_ids:
-                values['shipping'] = partner_obj.browse(request.cr, request.uid, shipping_ids[0])
+                for k,v in partner_obj.read(request.cr, request.uid, shipping_ids[0]).items():
+                    checkout['shipping_'+k] = v or ''
+
+        checkout.update(request.session.setdefault('checkout', {}))
+        for k,v in checkout.items():
+            checkout[k] = v or ''
+        values['checkout'] = checkout
 
         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)]))
@@ -223,7 +240,7 @@ class Ecommerce(http.Controller):
             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))
+            return werkzeug.utils.redirect("/shop/checkout/?error=%s&shipping=%s" % (",".join(error), post.get('shipping_different') and 'on' or ''))
 
         # search or create company
         company_id = None

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

@@ -1,5 +1,5 @@
 $(document).ready(function () {
-    $('.oe_ecommerce').on('click', '.js_publish, .js_unpublish', function (e) {
+    $('.oe_website_sale').on('click', '.js_publish, .js_unpublish', function (e) {
         e.preventDefault();
         var $link = $(this).parent();
         $link.find('.js_publish, .js_unpublish').addClass("hidden");
@@ -17,9 +17,15 @@ $(document).ready(function () {
     });
 
 
-    var $checkout = $(".oe_ecommerce .oe_checkout");
-    $(".oe_ecommerce input[name='shipping_different']").change(function() {
-        $(".oe_ecommerce .js_shipping").toggle();
+    $(".oe_website_sale input[name='shipping_different']").change(function() {
+        $(".oe_website_sale .js_shipping").toggle();
     });
 
+    $(".oe_website_sale .oe_mycart input").change(function() {
+        var value = parseInt($(this).val());
+        if (!isNaN(value)) {
+            window.location.href = window.location.origin + window.location.pathname + 'set_cart/' + $(this).data('id') + '/' + value + '/';
+        }
+    });
+    
 });

addons/website_sale/views/website_sale.xml

@@ -51,7 +51,7 @@
                 <t t-raw="head or ''"/>
             </t>
             <t t-set="title">Shop - <t t-raw="title">Categories</t></t>
-            <div class="container mt48 oe_ecommerce">
+            <div class="container mt48 oe_website_sale">
                 <div class="row">
                     <div class="span4">
                         <ul class="nav nav-list">
@@ -147,7 +147,7 @@
                     </div>
                     <img class="media-object" t-att-src="'data:image/png;base64,' + product.image"/>
                     <div t-field="product.description_website"></div>
-                    <div class="oe_ecommerce_price"><t t-field="product.list_price" />€</div>
+                    <div class="oe_website_sale_price"><t t-field="product.list_price" />€</div>
                 </div>
             </t>
         </t>
@@ -180,44 +180,45 @@
             <t t-set="shop_content">
                 <div class="span8 oe_mycart">
                     <h2>My Shopping Cart</h2>
-                    <h3 t-if="not order.order_line">Your cart is empty</h3>
-                    <table class='table-equalized' t-if="order.order_line">
+                    <table class='table table-hover'>
                         <thead>
-                            <tr><th>Product</th><th>Qty.</th><th>Price</th></tr>
+                            <tr>
+                                <th width="80">Product</th>
+                                <th></th>
+                                <th width="80">Price</th>
+                                <th width="140">Quantity</th>
+                            </tr>
                         </thead>
-                        <tbody>
+                        <tbody t-if="not order.order_line">
+                            <tr><td colspan="4"><h3>Your cart is empty</h3></td></tr>
+                        </tbody>
+                        <tbody t-if="order.order_line">
                             <t t-foreach="order.order_line" t-as="line">
                                 <tr>
                                     <td>
-                                        <a t-att-href="line.product_id"><span t-field="line.product_id.name"/></a>
+                                        <a t-att-href="line.product_id"><img class="img-rounded" t-att-src="'data:image/png;base64,' + line.product_id.image"/></a>
                                     </td>
                                     <td>
-                                        <a t-att-href="line.product_id"><img class="img-rounded" t-att-src="'data:image/png;base64,' + line.product_id.image"/></a>
+                                        <a t-att-href="line.product_id"><span t-field="line.product_id.name"/></a><br/>
+                                        <small t-field="line.product_id.description_sale"/>
                                     </td>
                                     <td>
                                        <span t-field="line.product_id.list_price"></span>€
                                     </td>
                                     <td>
                                         <div class="mb8 mt8">
-                                            <input type="text" t-att-value="line.product_uom_qty"/>
+                                            <input type="text" class="input-mini" t-att-data-id="line.product_id.id" t-att-value="line.product_uom_qty"/>
                                             <a t-attf-href="./remove_cart/#{ line.product_id.id }/" class="btn mb8 btn-small btn-inverse">-</a>
                                             <a t-attf-href="./add_cart/#{ line.product_id.id }/" class="btn mb8 btn-small btn-success">+</a>
                                         </div>
                                     </td>
                                 </tr>
-                                <tr>
-                                    <td> </td>
-                                    <td colspan="2">
-                                        <small t-field="line.product_id.description_sale"/>
-                                    </td>
-                                </tr>
                             </t>
                         </tbody>
-
                         <tfoot>
-                            <tr> <td>Subtotal </td>      <td><t t-esc="order.amount_untaxed"/> €</td></tr>
-                            <tr> <td>Taxes </td>         <td><t t-esc="order.amount_tax"/> €</td></tr>
-                            <tr> <td><h4>Total</h4></td> <td><h4><t t-esc="order.amount_total"/> €</h4></td></tr>
+                            <tr> <td colspan="3">Subtotal </td>      <td><t t-esc="order.amount_untaxed"/> €</td></tr>
+                            <tr> <td colspan="3">Taxes </td>         <td><t t-esc="order.amount_tax"/> €</td></tr>
+                            <tr> <td colspan="3"><h4>Total</h4></td> <td><h4><t t-esc="order.amount_total"/> €</h4></td></tr>
                         </tfoot>
                     </table>
                     <form t-if="order.order_line" class="well form-search" action="/shop/mycart/" method="post">
@@ -252,134 +253,180 @@
         <t t-call="website.layout">
             <t t-set="head">
                 <script type="text/javascript" src="/website_sale/static/src/js/website_sale.js"></script>
-                <t t-raw="head"/>
+                <t t-raw="head or ''"/>
             </t>
             <t t-set="title">Shop - Checkout</t>
-            <div class="container mt48 oe_ecommerce">
+            <div class="container mt48 oe_website_sale">
                 <div class="row">
                     <div class="span4 oe_total">
-                        <table class="table table-condensed" t-if="order.order_line">
+                        <table class="table table-condensed">
                             <thead>
-                                <tr><th>Product</th><th>Qty.</th><th>Price</th></tr>
+                                <tr>
+                                    <th>Product</th>
+                                    <th>Price</th>
+                                    <th>Qty.</th>
+                                </tr>
                             </thead>
-                            <tbody>
-                                <t t-foreach="order.order_line or []" t-as="line">
+                            <tbody t-if="order.order_line">
+                                <t t-foreach="order.order_line" 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>
+                                        <td><t t-esc="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>
+                            </tbody>
+                            <tfoot>
                                 <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>
+                            </tfoot>
                         </table>
                     </div>
-                    <form class="span8" action="/shop/confirm_order/" method="post">
-                        <div class="js_inputs row">
+                    <form class="span8 form-horizontal" action="/shop/confirm_order/" method="post">
+                        <div class=" 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>
                             <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 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 t-attf-class="control-group #{error.get('name', '')}">
+                                <label class="control-label" for="contact_name">Name and firstname</label>
+                                <div class="controls">
+                                    <input type="text" name="name" t-att-value="checkout.get('name', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('phone', '')}">
+                                <label class="control-label" for="contact_name">Telephone</label>
+                                <div class="controls">
+                                    <input type="tel" name="phone" t-att-value="checkout.get('phone', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('fax', '')}">
+                                <label class="control-label" for="contact_name">Fax</label>
+                                <div class="controls">
+                                    <input type="tel" name="fax" t-att-value="checkout.get('fax', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('company', '')}">
+                                <label class="control-label" for="contact_name">Company</label>
+                                <div class="controls">
+                                    <input type="tel" name="company" t-att-value="checkout.get('company', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('email', '')}">
+                                <label class="control-label" for="contact_name">Email address</label>
+                                <div class="controls">
+                                    <input type="tel" name="email" t-att-value="checkout.get('email', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('street', '')}">
+                                <label class="control-label" for="contact_name">Street</label>
+                                <div class="controls">
+                                    <input type="tel" name="street" t-att-value="checkout.get('street', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('city', '')}">
+                                <label class="control-label" for="contact_name">City</label>
+                                <div class="controls">
+                                    <input type="tel" name="city" t-att-value="checkout.get('city', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('state_id', '')}">
+                                <label class="control-label" for="contact_name">State / Province</label>
+                                <div class="controls">
+                                    <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="state.id == checkout.get('state_id')"><t t-esc="state.name"/></option>
+                                        </t>
+                                    </select>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('zip', '')}">
+                                <label class="control-label" for="contact_name">Zip / Postal Code</label>
+                                <div class="controls">
+                                    <input type="tel" name="zip" t-att-value="checkout.get('zip', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('country_id', '')}">
+                                <label class="control-label" for="contact_name">Country</label>
+                                <div class="controls">
+                                    <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="country.id == checkout.get('country_id')"><t t-esc="country.name"/></option>
+                                        </t>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="control-group checkbox">
+                                <div class="controls">
+                                    <label class="checkbox">
+                                        <input t-if="not shipping" type="checkbox" name="shipping_different"/>
+                                        <input t-if="shipping" type="checkbox" name="shipping_different" checked="1"/>
+                                        Ship to different address
+                                    </label>
+                                </div>
+                            </div>
                         </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 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 class="js_shipping row" t-att-style="not shipping and 'display:none' or ''">
+                            <h3 class="span8 oe_shipping">Shipping Information</h3>
+                             <div t-attf-class="control-group #{error.get('shipping_name', '')}">
+                                <label class="control-label" for="contact_name">Name and firstname</label>
+                                <div class="controls">
+                                    <input type="text" name="shipping_name" t-att-value="checkout.get('shipping_name', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('shipping_phone', '')}">
+                                <label class="control-label" for="contact_name">Telephone</label>
+                                <div class="controls">
+                                    <input type="tel" name="shipping_phone" t-att-value="checkout.get('shipping_phone', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('shipping_fax', '')}">
+                                <label class="control-label" for="contact_name">Fax</label>
+                                <div class="controls">
+                                    <input type="tel" name="shipping_fax" t-att-value="checkout.get('shipping_fax', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('shipping_street', '')}">
+                                <label class="control-label" for="contact_name">Street</label>
+                                <div class="controls">
+                                    <input type="tel" name="shipping_street" t-att-value="checkout.get('shipping_street', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('shipping_city', '')}">
+                                <label class="control-label" for="contact_name">City</label>
+                                <div class="controls">
+                                    <input type="tel" name="shipping_city" t-att-value="checkout.get('shipping_city', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('shipping_state_id', '')}">
+                                <label class="control-label" for="contact_name">State / Province</label>
+                                <div class="controls">
+                                    <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="state.id == checkout.get('shipping_state_id')"><t t-esc="state.name"/></option>
+                                        </t>
+                                    </select>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('shipping_zip', '')}">
+                                <label class="control-label" for="contact_name">Zip / Postal Code</label>
+                                <div class="controls">
+                                    <input type="tel" name="shipping_zip" t-att-value="checkout.get('shipping_zip', '')"/>
+                                </div>
+                            </div>
+                            <div t-attf-class="control-group #{error.get('shipping_country_id', '')}">
+                                <label class="control-label" for="contact_name">Country</label>
+                                <div class="controls">
+                                    <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="country.id == checkout.get('shipping_country_id')"><t t-esc="country.name"/></option>
+                                        </t>
+                                    </select>
+                                </div>
+                            </div>
                         </div>
                         <button type="submit">Last stape</button>
                     </form>
@@ -391,33 +438,52 @@
     <template id="payment">
         <t t-call="website.layout">
             <t t-set="title">Shop - Payment</t>
-            <div class="container mt48 oe_ecommerce">
+            <div class="container mt48 oe_website_sale">
                 <div class="row">
                     <div class="span4 oe_total">
-                        <table class="table table-condensed" t-if="order.order_line">
+                        <table class='table table-hover'>
                             <thead>
-                                <tr><th>Product</th><th>Qty.</th><th>Price</th></tr>
+                                <tr>
+                                    <th width="80">Product</th>
+                                    <th></th>
+                                    <th width="80">Price</th>
+                                    <th width="140">Quantity</th>
+                                </tr>
                             </thead>
-                            <tbody>
-                                <t t-foreach="order.order_line or []" t-as="line">
+                            <tbody t-if="not order.order_line">
+                                <tr><td colspan="4"><h3>Your cart is empty</h3></td></tr>
+                            </tbody>
+                            <tbody t-if="order.order_line">
+                                <t t-foreach="order.order_line" 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>
+                                        <td>
+                                            <a t-att-href="line.product_id"><img class="img-rounded" t-att-src="'data:image/png;base64,' + line.product_id.image"/></a>
+                                        </td>
+                                        <td>
+                                            <a t-att-href="line.product_id"><span t-field="line.product_id.name"/></a><br/>
+                                            <small t-field="line.product_id.description_sale"/>
+                                        </td>
+                                        <td>
+                                           <span t-field="line.product_id.list_price"></span>€
+                                        </td>
+                                        <td>
+                                            <span t-field="line.product_uom_qty"></span>
+                                        </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>
+                            <tfoot>
+                                <tr> <td colspan="3">Subtotal </td>      <td><t t-esc="order.amount_untaxed"/> €</td></tr>
+                                <tr> <td colspan="3">Taxes </td>         <td><t t-esc="order.amount_tax"/> €</td></tr>
+                                <tr> <td colspan="3"><h4>Total</h4></td> <td><h4><t t-esc="order.amount_total"/> €</h4></td></tr>
+                            </tfoot>
                         </table>
                     </div>
                     <div class="span8">
-                        <div class="js_payments css_payments row">
+                        <div class="js_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 t-att-title="payment.name">
                                     <t t-raw="payment._content"/>
                                 </div>
                             </t>

addons/website_sale/website_sale.py

@@ -63,6 +63,7 @@ class sale_order(osv.osv):
  
     def get_total_quantity(self, cr, uid, ids, context=None):
         order = self.browse(cr, uid, ids[0], context=context)
+        result = 0
         if order.order_line:
             result = sum([l.product_uom_qty for l in order.order_line])
         return result