diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index 486914dfd6a..871622c9a26 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -98,18 +98,33 @@ class QueryURL(object):
         return path
 
 
-def get_pricelist():
-    cr, uid, context, pool = request.cr, request.uid, request.context, request.registry
-    sale_order = context.get('sale_order')
-    if sale_order:
-        pricelist = sale_order.pricelist_id
-    else:
-        partner = pool['res.users'].browse(cr, SUPERUSER_ID, uid, context=context).partner_id
-        pricelist = partner.property_product_pricelist
-    return pricelist
-
 class website_sale(http.Controller):
 
+    def get_pricelist(self):
+        cr, uid, context, pool = request.cr, request.uid, request.context, request.registry
+        sale_order = context.get('sale_order')
+        if sale_order:
+            pricelist = sale_order.pricelist_id
+        else:
+            partner = pool['res.users'].browse(cr, SUPERUSER_ID, uid, context=context).partner_id
+            pricelist = partner.property_product_pricelist
+        return pricelist
+
+    def get_attribute_value_ids(self, product):
+        cr, uid, context, pool = request.cr, request.uid, request.context, request.registry
+        currency_obj = pool['res.currency']
+        attribute_value_ids = []
+        if request.website.pricelist_id.id != context['pricelist']:
+            website_currency_id = request.website.currency_id.id
+            currency_id = self.get_pricelist().currency_id.id
+            for p in product.product_variant_ids:
+                price = currency_obj.compute(cr, uid, website_currency_id, currency_id, p.lst_price)
+                attribute_value_ids.append([p.id, map(int, p.attribute_value_ids), p.price, price])
+        else:
+            attribute_value_ids = [[p.id, map(int, p.attribute_value_ids), p.price, p.lst_price] for p in product.product_variant_ids]
+
+        return attribute_value_ids
+
     @http.route(['/shop',
         '/shop/page/<int:page>',
         '/shop/category/<model("product.public.category"):category>',
@@ -194,7 +209,6 @@ class website_sale(http.Controller):
         cr, uid, context, pool = request.cr, request.uid, request.context, request.registry
         category_obj = pool['product.public.category']
         template_obj = pool['product.template']
-        currency_obj = pool['res.currency']
 
         context.update(active_id=product.id)
 
@@ -215,16 +229,6 @@ class website_sale(http.Controller):
             context['pricelist'] = int(self.get_pricelist())
             product = template_obj.browse(cr, uid, int(product), context=context)
 
-        attribute_value_ids = []
-        if request.website.pricelist_id.id != context['pricelist']:
-            company_currency_id = request.website.company_currency_id.id
-            currency_id = self.get_pricelist().currency_id.id
-            for p in product.product_variant_ids:
-                price = currency_obj.compute(cr, uid, company_currency_id, currency_id, p.lst_price)
-                attribute_value_ids.append([p.id, map(int, p.attribute_value_ids), p.price, price])
-        else:
-            attribute_value_ids = [[p.id, map(int, p.attribute_value_ids), p.price, p.lst_price] for p in product.product_variant_ids]
-
         values = {
             'search': search,
             'category': category,
@@ -235,7 +239,7 @@ class website_sale(http.Controller):
             'category_list': category_list,
             'main_object': product,
             'product': product,
-            'attribute_value_ids': attribute_value_ids
+            'get_attribute_value_ids': self.get_attribute_value_ids
         }
         return request.website.render("website_sale.product", values)
 
@@ -279,7 +283,7 @@ class website_sale(http.Controller):
         prod_obj = pool['product.product']
 
         order = request.website.sale_get_order(force_create=1)
-        line_id, quantity = order._cart_update(product_id=int(product_id), add_qty=int(add_qty), set_qty=int(set_qty))
+        order._cart_update(product_id=int(product_id), add_qty=int(add_qty), set_qty=int(set_qty))
 
         if goto_shop:
             return request.redirect("/shop/product/%s" % slug(prod_obj.browse(cr, uid, product_id).product_tmpl_id))
@@ -289,16 +293,14 @@ class website_sale(http.Controller):
     @http.route(['/shop/cart/update_json'], type='json', auth="public", methods=['POST'], website=True)
     def cart_update_json(self, product_id, line_id, add_qty=None, set_qty=None, display=True):
         order = request.website.sale_get_order(force_create=1)
-        line_id, quantity = order._cart_update(product_id=product_id, line_id=line_id, add_qty=add_qty, set_qty=set_qty)
+        value = order._cart_update(product_id=product_id, line_id=line_id, add_qty=add_qty, set_qty=set_qty)
         if not display:
             return None
-        return {
-            'quantity': quantity,
-            'cart_quantity': order.cart_quantity,
-            'website_sale.total': request.website._render("website_sale.total", {
-                    'website_sale_order': request.website.sale_get_order()
-                })
-        }
+        value['cart_quantity'] = order.cart_quantity
+        value['website_sale.total'] = request.website._render("website_sale.total", {
+                'website_sale_order': request.website.sale_get_order()
+            })
+        return value
 
     #------------------------------------------------------
     # Checkout
diff --git a/addons/website_sale/models/sale_order.py b/addons/website_sale/models/sale_order.py
index 49f69c9ff57..165030f9f1a 100644
--- a/addons/website_sale/models/sale_order.py
+++ b/addons/website_sale/models/sale_order.py
@@ -4,7 +4,6 @@ import random
 from openerp import SUPERUSER_ID
 from openerp.osv import osv, orm, fields
 from openerp.addons.web.http import request
-from openerp.tools.translate import _
 
 
 class payment_transaction(orm.Model):
@@ -15,13 +14,6 @@ class payment_transaction(orm.Model):
         'sale_order_id': fields.many2one('sale.order', 'Sale Order'),
     }
 
-class sale_order_line(osv.Model):
-    _inherit = "sale.order.line"
-    _columns = {
-        'linked_line_id': fields.many2one('sale.order.line', 'Linked Order Line', domain="[('order_id','!=',order_id)]"),
-        'option_line_ids': fields.one2many('sale.order.line', 'linked_line_id', string='Options Linked'),
-    }
-
 class sale_order(osv.Model):
     _inherit = "sale.order"
 
@@ -51,7 +43,7 @@ class sale_order(osv.Model):
             'order': order
         }
 
-    def _cart_find_product_line(self, cr, uid, ids, product_id=None, line_id=None, context=None, *args):
+    def _cart_find_product_line(self, cr, uid, ids, product_id=None, line_id=None, context=None, **kwargs):
         for so in self.browse(cr, uid, ids, context=context):
             domain = [('order_id', '=', so.id), ('product_id', '=', product_id)]
             if line_id:
@@ -81,14 +73,14 @@ class sale_order(osv.Model):
             values['tax_id'] = [(6, 0, values['tax_id'])]
         return values
 
-    def _cart_update(self, cr, uid, ids, product_id=None, line_id=None, add_qty=0, set_qty=0, context=None, *args):
+    def _cart_update(self, cr, uid, ids, product_id=None, line_id=None, add_qty=0, set_qty=0, context=None, **kwargs):
         """ Add or set product quantity, add_qty can be negative """
         sol = self.pool.get('sale.order.line')
 
         quantity = 0
         for so in self.browse(cr, uid, ids, context=context):
             if line_id != False:
-                line_ids = so._cart_find_product_line(product_id, line_id, context=context, *args)
+                line_ids = so._cart_find_product_line(product_id, line_id, context=context, **kwargs)
                 if line_ids:
                     line_id = line_ids[0]
 
@@ -114,7 +106,7 @@ class sale_order(osv.Model):
                 values['product_uom_qty'] = quantity
                 sol.write(cr, SUPERUSER_ID, [line_id], values, context=context)
 
-        return (line_id, quantity)
+        return {'line_id': line_id, 'quantity': quantity}
 
     def _cart_accessories(self, cr, uid, ids, context=None):
         for order in self.browse(cr, uid, ids, context=context):
diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
index c3774f9ed03..8055d0ad310 100644
--- a/addons/website_sale/static/src/css/website_sale.css
+++ b/addons/website_sale/static/src/css/website_sale.css
@@ -302,7 +302,7 @@
   display: none;
 }
 
-.css_not_available.js_product > *:nth-child(3) > *, .css_not_available.js_product *:nth-child(4) > * {
+.css_not_available.js_product > *:nth-child(4) > * {
   display: none;
 }
 .css_not_available.js_product .product_price, .css_not_available.js_product .css_quantity {
diff --git a/addons/website_sale/static/src/css/website_sale.sass b/addons/website_sale/static/src/css/website_sale.sass
index 17dfcb8ea44..f08b635124c 100644
--- a/addons/website_sale/static/src/css/website_sale.sass
+++ b/addons/website_sale/static/src/css/website_sale.sass
@@ -260,7 +260,7 @@
 .css_not_available_msg
     display: none
 .css_not_available.js_product
-    > *:nth-child(3) > *, *:nth-child(4) > *
+    > *:nth-child(4) > *
         display: none
     .product_price, .css_quantity
         display: none
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index c9a8c8eea3a..6cc283976d0 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -15,9 +15,10 @@ $(document).ready(function () {
     $(".oe_website_sale .oe_cart input.js_quantity").change(function () {
         var $input = $(this);
         var value = parseInt($input.val(), 10);
+        var line_id = parseInt($input.data('line-id'),10);
         if (isNaN(value)) value = 0;
         openerp.jsonRpc("/shop/cart/update_json", 'call', {
-            'line_id': parseInt($input.data('line-id'),10),
+            'line_id': line_id,
             'product_id': parseInt($input.data('product-id'),10),
             'set_qty': value})
             .then(function (data) {
@@ -33,13 +34,15 @@ $(document).ready(function () {
                 var $q = $(".my_cart_quantity");
                 $q.parent().parent().removeClass("hidden", !data.quantity);
                 $q.html(data.cart_quantity).hide().fadeIn(600);
+
                 $input.val(data.quantity);
+                $('.js_quantity[data-line-id='+line_id+']').val(data.quantity).html(data.quantity);
                 $("#cart_total").replaceWith(data['website_sale.total']);
             });
     });
 
     // hack to add and rome from cart with json
-    $('.oe_website_sale a.js_add_cart_json').on('click', function (ev) {
+    $('.oe_website_sale').on('click', 'a.js_add_cart_json', function (ev) {
         ev.preventDefault();
         var $link = $(ev.currentTarget);
         var $input = $link.parent().parent().find("input");
@@ -82,9 +85,9 @@ $(document).ready(function () {
         return price + (dec ? '' : '.0') + (dec%10 ? '' : '0');
     }
 
-    $('input.js_variant_change, select.js_variant_change').change(function (ev) {
+    $('.oe_website_sale').on('change', 'input.js_variant_change, select.js_variant_change', function (ev) {
         var $ul = $(this).parents('ul.js_add_cart_variants:first');
-        var $parent = $ul.parents('.js_product:first');
+        var $parent = $ul.closest('.js_product');
         var $product_id = $parent.find('input.product_id').first();
         var $price = $parent.find(".oe_price:first .oe_currency_value");
         var $default_price = $parent.find(".oe_default_price:first .oe_currency_value");
@@ -121,7 +124,7 @@ $(document).ready(function () {
                     return;
                 }
             }
-            $input.parents("label:first").addClass("css_not_available");
+            $input.closest("label").addClass("css_not_available");
             $input.find("option[value='" + id + "']").addClass("css_not_available");
         });
 
@@ -139,42 +142,13 @@ $(document).ready(function () {
         $('input.js_variant_change, select.js_variant_change', this).first().trigger('change');
     });
 
-    $("input.js_quantity").change(function (event) {
-        var qty = parseFloat($(this).val());
-        if (qty === 1) {
-            $(".js_remove .js_items").addClass("hidden");
-            $(".js_remove .js_item").removeClass("hidden");
-        } else {
-            $(".js_remove .js_items").removeClass("hidden").text($(".js_remove .js_items").text().replace(/[0-9.,]+/, qty));
-            $(".js_remove .js_item").addClass("hidden");
-        }
-    });
-    
-
-    $('#product_detail form[action^="/shop/cart/update"] .a-submit').off("click").click(function (event) {
-        event.preventDefault();
-        var $link = $(this);
-        var $form = $link.parents("form:first");
-        var quantity = parseInt($('input[name="add_qty"]:last').val() || 1, 10);
-        var defs = [];
-        $link.attr('disabled', 'disabled');
-        $.when.apply($.when, defs).then(function () {
-            if ($link.hasClass("js_goto_shop")) {
-                $form.prepend('<input type="hidden" name="goto_shop" value="1"/>');
-            }
-            $form.submit();
-        });
-        return false;
-    });
-
-
-    $(".oe_website_sale select[name='country_id']").change(function () {
+    $(".oe_website_sale").on('change', "select[name='country_id']", function () {
         var $select = $("select[name='state_id']");
         $select.find("option:not(:first)").hide();
         var nb = $select.find("option[data-country_id="+($(this).val() || 0)+"]").show().size();
         $select.parent().toggle(nb>1);
     }).change();
-    $(".oe_website_sale select[name='shipping_country_id']").change(function () {
+    $(".oe_website_sale").on('change', "select[name='shipping_country_id']", function () {
         var $select = $("select[name='shipping_state_id']");
         $select.find("option:not(:first)").hide();
         var nb = $select.find("option[data-country_id="+($(this).val() || 0)+"]").show().size();
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 3372fc26748..7e4252df18e 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -76,7 +76,7 @@
               <t t-if="(website.compute_curency(product.lst_price) - product.price) &gt; 0.1">
                 <del class="text-danger" style="white-space: nowrap;" t-field="product.lst_price" t-field-options='{
                   "widget": "monetary",
-                  "from_currency": "website.company_currency_id",
+                  "from_currency": "website.currency_id",
                   "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
                 }'/>&amp;nbsp;
               </t>
@@ -416,7 +416,7 @@
 </template>
 
 <template id="product_quantity" inherit_id="website_sale.product" optional="enabled" name="Select Quantity">
-  <xpath expr="//form" position="inside">
+  <xpath expr="//a[@id='add_to_cart']" position="before">
     <div class="css_quantity input-group" style="width: 108px;">
         <span class="input-group-addon">
             <a t-attf-href="#" class="mb8 js_add_cart_json">
@@ -440,7 +440,7 @@
             t-field="product.lst_price"
             t-field-options='{
               "widget": "monetary",
-              "from_currency": "website.company_currency_id",
+              "from_currency": "website.currency_id",
               "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
            }'/><br/>
           <b class="oe_price" style="white-space: nowrap;"
@@ -473,7 +473,7 @@
         <span class="badge" t-if="variant_id.price_extra">
           <t t-esc="variant_id.price_extra > 0 and '+' or ''"/><span t-field="variant_id.price_extra" style="white-space: nowrap;" t-field-options='{
                 "widget": "monetary",
-                "from_currency": "website.company_currency_id",
+                "from_currency": "website.currency_id",
                 "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
               }'/>
         </span>
@@ -483,6 +483,7 @@
 </template>
 
 <template id="variants">
+  <t t-set="attribute_value_ids" t-value="get_attribute_value_ids(product)"/>
   <ul t-attf-class="list-unstyled js_add_cart_variants #{ul_class}" t-att-data-attribute_value_ids="attribute_value_ids">
     <t t-foreach="product.attribute_line_ids" t-as="variant_id">
       <li t-if="len(variant_id.value_ids) > 1">
@@ -497,7 +498,7 @@
                   <span t-if="value_id.price_extra">
                       <t t-esc="value_id.price_extra > 0 and '+' or ''"/><span t-field="value_id.price_extra" style="white-space: nowrap;" t-field-options='{
                                "widget": "monetary",
-                                "from_currency": "website.company_currency_id",
+                                "from_currency": "website.currency_id",
                                "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
                            }'/>
                   </span>
@@ -517,7 +518,7 @@
                           <span class="badge" t-if="value_id.price_extra">
                               <t t-esc="value_id.price_extra > 0 and '+' or ''"/><span t-field="value_id.price_extra" style="white-space: nowrap;" t-field-options='{
                                       "widget": "monetary",
-                                      "from_currency": "website.company_currency_id",
+                                      "from_currency": "website.currency_id",
                                       "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
                                    }'/>
                           </span>
@@ -679,7 +680,8 @@
                           </tr>
                       </thead>
                       <tbody>
-                          <tr t-foreach="website_sale_order.website_order_line" t-as="line">
+                        <t t-foreach="website_sale_order.website_order_line" t-as="line">
+                          <tr>
                               <td colspan="2" t-if="not line.product_id.product_tmpl_id"></td>
                               <td align="center" t-if="line.product_id.product_tmpl_id">
                                   <span t-field="line.product_id.image_small"
@@ -687,12 +689,9 @@
                               </td>
                               <td t-if="line.product_id.product_tmpl_id">
                                   <div>
-                                      <a t-if="not line.linked_line_id" t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
+                                      <a t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
                                           <strong t-esc="line.product_id.name_get()[0][1]"/>
                                       </a>
-                                      <t t-if="line.linked_line_id">
-                                        <strong t-esc="line.product_id.name_get()[0][1]"/>
-                                      </t>
                                   </div>
                                   <div class="text-muted" t-field="line.name"/>
                               </td>
@@ -701,7 +700,7 @@
                                   <del class="text-danger" style="white-space: nowrap;"
                                     t-field="line.product_id.lst_price" t-field-options='{
                                         "widget": "monetary",
-                                        "from_currency": "website.company_currency_id",
+                                        "from_currency": "website.currency_id",
                                         "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
                                     }'/>&amp;nbsp;
                                 </t>
@@ -711,7 +710,7 @@
                                  }'/>
                               </td>
                               <td class="text-center">
-                                  <div class="input-group" t-if="not line.linked_line_id">
+                                  <div class="input-group">
                                       <span class="input-group-addon">
                                           <a t-attf-href="#" class="mb8 js_add_cart_json" data-no-instant="">
                                               <i class="fa fa-minus"></i>
@@ -727,12 +726,9 @@
                                           </a>
                                       </span>
                                   </div>
-                                  <t t-if="line.linked_line_id">
-                                    <span class="js_quantity" t-att-data-line-id="line.id" t-esc="int(line.product_uom_qty)"/>
-                                  </t>
-
                               </td>
                           </tr>
+                        </t>
                       </tbody>
                   </table>
                   <t t-call="website_sale.total"/>
@@ -798,7 +794,7 @@
                         <del class="text-danger" style="white-space: nowrap;"
                           t-field="product.lst_price" t-field-options='{
                               "widget": "monetary",
-                              "from_currency": "website.company_currency_id",
+                              "from_currency": "website.currency_id",
                               "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
                           }'/>&amp;nbsp;
                       </t>
diff --git a/addons/website_sale_options/controllers/main.py b/addons/website_sale_options/controllers/main.py
index fa014fbf9f7..df114a2ddd8 100644
--- a/addons/website_sale_options/controllers/main.py
+++ b/addons/website_sale_options/controllers/main.py
@@ -3,13 +3,13 @@
 from openerp import SUPERUSER_ID
 from openerp.addons.web import http
 from openerp.addons.web.http import request
-from openerp.addons.website.models.website import slug
 from openerp.addons.website_sale.controllers.main import website_sale
 
 class website_sale_options(website_sale):
 
+    @http.route(['/shop/product/<model("product.template"):product>'], type='http', auth="public", website=True)
     def product(self, product, category='', search='', **kwargs):
-        r = super(website_sale_options, self)
+        r = super(website_sale_options, self).product(product, category, search, **kwargs)
 
         cr, uid, context, pool = request.cr, request.uid, request.context, request.registry
         template_obj = pool['product.template']
@@ -22,30 +22,54 @@ class website_sale_options(website_sale):
         r.qcontext['optional_product_ids'] = optional_product_ids
         return r
 
-    @http.route(['/shop/cart/update_option_json'], type='json', auth="public", methods=['POST'], website=True)
+    @http.route(['/shop/cart/update_option'], type='http', auth="public", methods=['POST'], website=True)
     def cart_options_update_json(self, product_id, add_qty=1, set_qty=0, goto_shop=None, **kw):
         cr, uid, context, pool = request.cr, request.uid, request.context, request.registry
-        order = request.website.sale_get_order(force_create=1)
 
-        line_id = None
+        order = request.website.sale_get_order(force_create=1)
+        product = pool['product.product'].browse(cr, uid, int(product_id), context=context)
+
+
+        option_ids = [p.id for tmpl in product.optional_product_ids for p in tmpl.product_variant_ids]
         optional_product_ids = []
         for k, v in kw.items():
-            if "optional-product-" in k and int(kw.get(k.replace("product", "quantity"))):
+            if "optional-product-" in k and int(kw.get(k.replace("product", "add"))) and int(v) in option_ids:
                 optional_product_ids.append(int(v))
+
+        value = {}
         if add_qty or set_qty:
-            line_id, quantity = order._cart_update(product_id=int(product_id),
+            value = order._cart_update(product_id=int(product_id),
                 add_qty=int(add_qty), set_qty=int(set_qty),
                 optional_product_ids=optional_product_ids)
 
         # options have all time the same quantity
         for option_id in optional_product_ids:
-            order._cart_update(product_id=option_id, set_qty=quantity, linked_line_id=line_id)
+            order._cart_update(product_id=option_id,
+                set_qty=value.get('quantity'),
+                linked_line_id=value.get('line_id'))
 
-        return {
-            'quantity': quantity,
-            'cart_quantity': order.cart_quantity,
-            'website_sale.total': request.website._render("website_sale.total", {
-                    'website_sale_order': request.website.sale_get_order()
-                })
-            }
+        return str(order.cart_quantity)
 
+    @http.route(['/shop/modal'], type='json', auth="public", methods=['POST'], website=True)
+    def modal(self, product_id, **kw):
+        cr, uid, context, pool = request.cr, request.uid, request.context, request.registry
+        currency_obj = pool['res.currency']
+        if not context.get('pricelist'):
+            context['pricelist'] = int(self.get_pricelist())
+
+        product = pool['product.product'].browse(cr, uid, int(product_id), context=context)
+
+        attribute_value_ids = []
+        if request.website.pricelist_id.id != context['pricelist']:
+            website_currency_id = request.website.currency_id.id
+            currency_id = self.get_pricelist().currency_id.id
+            for p in product.product_variant_ids:
+                price = currency_obj.compute(cr, uid, website_currency_id, currency_id, p.lst_price)
+                attribute_value_ids.append([p.id, map(int, p.attribute_value_ids), p.price, price])
+        else:
+            attribute_value_ids = [[p.id, map(int, p.attribute_value_ids), p.price, p.lst_price] for p in product.product_variant_ids]
+
+        return request.website._render("website_sale_options.modal", {
+                'product': product,
+                'get_attribute_value_ids': self.get_attribute_value_ids,
+            })
\ No newline at end of file
diff --git a/addons/website_sale_options/models/sale_order.py b/addons/website_sale_options/models/sale_order.py
index 30f29a8ff04..0e6f13def11 100644
--- a/addons/website_sale_options/models/sale_order.py
+++ b/addons/website_sale_options/models/sale_order.py
@@ -5,13 +5,20 @@ from openerp.osv import osv, orm, fields
 from openerp.tools.translate import _
 
 
+class sale_order_line(osv.Model):
+    _inherit = "sale.order.line"
+    _columns = {
+        'linked_line_id': fields.many2one('sale.order.line', 'Linked Order Line', domain="[('order_id','!=',order_id)]"),
+        'option_line_ids': fields.one2many('sale.order.line', 'linked_line_id', string='Options Linked'),
+    }
+
 class sale_order(osv.Model):
     _inherit = "sale.order"
 
-    def _cart_find_product_line(self, cr, uid, ids, product_id=None, line_id=None, context=None, *args):
+    def _cart_find_product_line(self, cr, uid, ids, product_id=None, line_id=None, context=None, **kwargs):
         line_ids = super(sale_order, self)._cart_find_product_line(cr, uid, ids, product_id, line_id, context=context)
-        linked_line_id = args.get('linked_line_id')
-        optional_product_ids = args.get('optional_product_ids')
+        linked_line_id = kwargs.get('linked_line_id')
+        optional_product_ids = kwargs.get('optional_product_ids')
 
         for so in self.browse(cr, uid, ids, context=context):
             domain = [('order_id', '=', so.id), ('product_id', '=', product_id), ('id', 'in', line_ids)]
@@ -26,33 +33,35 @@ class sale_order(osv.Model):
 
             return self.pool.get('sale.order.line').search(cr, SUPERUSER_ID, domain, context=context)
 
-    def _cart_update(self, cr, uid, ids, product_id=None, line_id=None, add_qty=0, set_qty=0, context=None, *args):
+    def _cart_update(self, cr, uid, ids, product_id=None, line_id=None, add_qty=0, set_qty=0, context=None, **kwargs):
         """ Add or set product quantity, add_qty can be negative """
-        line_id, quantity = super(sale_order, self)._cart_update(cr, uid, ids, product_id, line_id, add_qty, set_qty, context=context, *args)
-        linked_line_id = args.get('linked_line_id')
+        value = super(sale_order, self)._cart_update(cr, uid, ids, product_id, line_id, add_qty, set_qty, context=context, **kwargs)
+        
+        linked_line_id = kwargs.get('linked_line_id')
         sol = self.pool.get('sale.order.line')
+        line = sol.browse(cr, SUPERUSER_ID, value.get('line_id'), context=context)
 
         for so in self.browse(cr, uid, ids, context=context):
-            values = {}
 
             if linked_line_id and linked_line_id in map(int,so.order_line):
                 linked = sol.browse(cr, SUPERUSER_ID, linked_line_id, context=context)
-                sol.write(cr, SUPERUSER_ID, [line_id], {
-                        "name": _("%s\nOption for: %s") % (values["name"], linked.product_id.name_get()[0][1]),
+                line.write({
+                        "name": _("%s\nOption for: %s") % (line.name, linked.product_id.name_get()[0][1]),
                         "linked_line_id": linked_line_id
                     }, context=context)
 
             # select linked product
-            option_ids = [line.id for line in so.order_line if line.linked_line_id.id == line_id]
+            option_ids = [l.id for l in so.order_line if l.linked_line_id.id == line.id]
 
             if option_ids:
                 # Remove zero of negative lines
-                if quantity <= 0:
+                if value.get('quantity') <= 0:
                     sol.unlink(cr, SUPERUSER_ID, option_ids, context=context)
                 else:
                     # update line
                     sol.write(cr, SUPERUSER_ID, option_ids, {
-                            'product_uom_qty': quantity
+                            'product_uom_qty': value.get('quantity')
                         }, context=context)
 
-        return (line_id, quantity)
+        value['option_ids'] = option_ids
+        return value
diff --git a/addons/website_sale_options/static/src/css/Makefile b/addons/website_sale_options/static/src/css/Makefile
new file mode 100644
index 00000000000..6753818a302
--- /dev/null
+++ b/addons/website_sale_options/static/src/css/Makefile
@@ -0,0 +1,2 @@
+sass:
+	sass -t expanded --unix-newlines --watch website_sale.sass:website_sale.css&
diff --git a/addons/website_sale_options/static/src/css/website_sale.css b/addons/website_sale_options/static/src/css/website_sale.css
new file mode 100644
index 00000000000..4ba8937020d
--- /dev/null
+++ b/addons/website_sale_options/static/src/css/website_sale.css
@@ -0,0 +1,3 @@
+.css_not_available.js_product > *:nth-child(5) > * {
+  display: none;
+}
diff --git a/addons/website_sale_options/static/src/css/website_sale.sass b/addons/website_sale_options/static/src/css/website_sale.sass
new file mode 100644
index 00000000000..675a8e04fc2
--- /dev/null
+++ b/addons/website_sale_options/static/src/css/website_sale.sass
@@ -0,0 +1,3 @@
+.css_not_available.js_product
+    > *:nth-child(5) > *
+        display: none
\ No newline at end of file
diff --git a/addons/website_sale_options/static/src/js/website_sale.js b/addons/website_sale_options/static/src/js/website_sale.js
index 30e2d8272bd..1c7f6ef4560 100644
--- a/addons/website_sale_options/static/src/js/website_sale.js
+++ b/addons/website_sale_options/static/src/js/website_sale.js
@@ -1,38 +1,67 @@
 $(document).ready(function () {
 
-    $('#add_to_cart').click(function (event) {
-        event.preventDefault();
-        openerp.jsonRpc("/shop/cart/update_json", 'call', {
-            'line_id': parseInt($input.data('line-id'),10),
-            'product_id': parseInt($input.data('product-id'),10),
-            'set_qty': value})
-            .then(function (data) {
-                if (!data.quantity) {
-                    location.reload();
-                    return;
-                }
-                if (data.option_ids.length) {
-                    _.each(data.option_ids, function (line_id) {
-                        $(".js_quantity[data-line-id="+line_id+"]").text(data.quantity);
-                    });
-                }
-                var $q = $(".my_cart_quantity");
-                $q.parent().parent().removeClass("hidden", !data.quantity);
-                $q.html(data.cart_quantity).hide().fadeIn(600);
-                $input.val(data.quantity);
-                $("#cart_total").replaceWith(data['website_sale.total']);
-            });
-        return false;
-    });
+    $('#add_to_cart')
+        .off('click')
+        .removeClass('a-submit')
+        .click(function (event) {
+            var $form = $(this).closest('form');
+            var quantity = parseFloat($form.find('input[name="add_qty"]').val());
+            event.preventDefault();
+            openerp.jsonRpc("/shop/modal", 'call', {
+                    'product_id': parseInt($('input.product_id[name="product_id"]').val(),10),
+                    kwargs: {
+                       context: openerp.website.get_context()
+                    },
+                }).then(function (modal) {
+                    var $modal = $(modal);
 
-    $('form:has(#add_to_cart)').submit(function (event) {
-        event.preventDefault();
-        $(this).ajaxSubmit({
-            beforeSubmit:  function () { console.log("beforeSubmit"); },
-            success:       function () { console.log("success"); },
-            url:           '/stqdfdsfdf'
+                    $modal.appendTo($form)
+                        .modal()
+                        .on('hidden.bs.modal', function () {
+                            $(this).remove();
+                        });
+
+                    $modal.on('click', '.a-submit', function () {
+                        var $a = $(this);
+                        $form.ajaxSubmit({
+                            url:  '/shop/cart/update_option',
+                            success: function (quantity) {
+                                if (!$a.hasClass('js_goto_shop')) {
+                                    window.location.href = "../cart";
+                                }
+                                var $q = $(".my_cart_quantity");
+                                $q.parent().parent().removeClass("hidden", !quantity);
+                                $q.html(quantity).hide().fadeIn(600);
+                            }
+                        });
+                        $modal.modal('hide');
+                    });
+
+                    $modal.on("click", "a.js_add, a.js_remove", function (event) {
+                        event.preventDefault();
+                        var $parent = $(this).parents('.js_product:first');
+                        $parent.find("a.js_add, span.js_remove").toggleClass("hidden");
+                        $parent.find("input.js_optional_same_quantity").val( $(this).hasClass("js_add") ? 1 : 0 );
+                        var $remove = $parent.find(".js_remove");
+                    });
+
+                    $modal.on("change", "input.js_quantity", function (event) {
+                        var qty = parseFloat($(this).val());
+                        if (qty === 1) {
+                            $(".js_remove .js_items").addClass("hidden");
+                            $(".js_remove .js_item").removeClass("hidden");
+                        } else {
+                            $(".js_remove .js_items").removeClass("hidden").text($(".js_remove .js_items").text().replace(/[0-9.,]+/, qty));
+                            $(".js_remove .js_item").addClass("hidden");
+                        }
+                    });
+
+                    $modal.find('input[name="add_qty"]').val(quantity).change();
+                    $('ul.js_add_cart_variants').each(function () {
+                        $('input.js_variant_change, select.js_variant_change', this).first().trigger('change');
+                    });
+                });
+            return false;
         });
-        return false;
-    });
 
 });
diff --git a/addons/website_sale_options/views/templates.xml b/addons/website_sale_options/views/templates.xml
index e4760b893ea..534afc5032a 100644
--- a/addons/website_sale_options/views/templates.xml
+++ b/addons/website_sale_options/views/templates.xml
@@ -11,11 +11,26 @@
 <template id="product_options_script" inherit_id="website_sale.product" name="Script for Options">
   <xpath expr="//t[@t-set='head']" position="inside">
       <script type="text/javascript" src="/website_sale_options/static/src/js/website_sale.js"></script>
+      <link rel='stylesheet' href='/website_sale_options/static/src/css/website_sale.css'/>
   </xpath>
 </template>
 
-<template id="optional_products" name="Optional Products">
-<div id="modal_optional_products" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
+<template id="optional_products" inherit_id="website_sale.cart" name="Optional products">
+  <xpath expr="//table[@id='cart_products']/tbody//td[last()]/div" position="attributes">
+    <attribute name="t-if">not line.linked_line_id</attribute>
+  </xpath>
+  <xpath expr="//table[@id='cart_products']/tbody//tr" position="attributes">
+    <attribute name="t-att-class">'optional_product info' if line.linked_line_id else ''</attribute>
+  </xpath>
+  <xpath expr="//table[@id='cart_products']/tbody//td[last()]" position="inside">
+    <t t-if="line.linked_line_id">
+      <span class="js_quantity text-muted" t-att-data-line-id="line.id" t-esc="int(line.product_uom_qty)"/>
+    </t>
+  </xpath>
+</template>
+
+<template id="modal" name="Optional Products">
+<div id="modal_optional_products" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
@@ -77,11 +92,11 @@
                 </td>
               </tr>
 
-              <tr t-if="optional_product_ids"><td colspan="4"><h4>Select Your Options:</h4></td></tr>
+              <tr t-if="product.optional_product_ids"><td colspan="5"><h4>Select Your Options:</h4></td></tr>
               <t t-set="option_inc" t-value="0"/>
-              <tr class="js_product" t-foreach="optional_product_ids" t-as="product">
+              <tr class="js_product" t-foreach="product.optional_product_ids" t-as="product">
                 <td width="100">
-                  <input type="hidden" class="optional_product_id" t-attf-name="optional-product-#{option_inc}" t-att-value="int(product.product_variant_ids[0]) if len(product.product_variant_ids) == 1 else '0'"/>
+                  <input type="hidden" class="product_id" t-attf-name="optional-product-#{option_inc}" t-att-value="int(product.product_variant_ids[0]) if len(product.product_variant_ids) == 1 else '0'"/>
                   <span t-field="product.image_small" t-field-options='{"widget": "image"}'/>
                 </td>
                 <td>
@@ -114,7 +129,7 @@
                   <p class="css_not_available_msg bg-danger" style="position:absolute; padding: 15px;">Product not available</p>
                 </td>
                 <td>
-                  <input type="hidden" class="js_optional_same_quantity" t-attf-name="optional-quantity-#{option_inc}" value="0"/>
+                  <input type="hidden" class="js_optional_same_quantity" t-attf-name="optional-add-#{option_inc}" value="0"/>
                   <a href="#" class="js_add"><strong>Add to Cart</strong></a>
                   <span class="js_remove hidden">
                     <span class="js_item">1 Item</span><span class="js_items hidden">5 Items</span><br/>