Add AJAX on "Add to Cart" buttons

core/lib/Thelia/Controller/Front/CartController.php

@@ -61,6 +61,13 @@ class CartController extends BaseFrontController
             $message = $e->getMessage();
         }
 
+        // If Ajax Request
+        if ($this->getRequest()->isXmlHttpRequest()) {
+            $request = $this->getRequest();
+            $request->attributes->set('_view', "includes/mini-cart");
+        }
+
+
         if ($message) {
             $cartAdd->setErrorMessage($message);
             $this->getParserContext()->addForm($cartAdd);

templates/default/assets/js/script.js

@@ -204,10 +204,12 @@
 
             var $old_price_container    = $(".old-price", $("#product-details"));
 
+            var $select_quantity        = $(this).find(":selected").attr("data-quantity");
+
 
             // Switch Quantity in product page
             $("select", $(".product-options")).change(function(){
-                var $select_quantity        = $(this).find(":selected").attr("data-quantity");
+                $select_quantity        = $(this).find(":selected").attr("data-quantity");
                 var $old_price              = $(this).find(":selected").attr("data-old-price");
 
                 var $best_price             = $(this).find(":selected").attr("data-price");
@@ -259,7 +261,31 @@
             });
         }
 
+        $(".form-product").submit(function(){
+            var url_action      = $(this).attr("action");
+            var $cartContainer  = $(".cart-container");
 
+            $.ajax({type:"POST", data: $(this).serialize(), url:url_action,
+                    success: function(data){
+                        console.log($(data).html());
+                        $cartContainer.html($(data).html());
+
+                        $.ajax({url:"ajax/addCartMessage",
+                            success: function(data){
+                                bootbox.dialog({
+                                    message : data,
+                                    buttons : {}
+                                });
+                            }
+                        });
+                },
+                error: function(){
+                    console.log('Error.');
+                }
+            });
+
+        return false;
+        });
 
         $('#limit-top').change(function(e){
             window.location = $(this).val()

templates/default/includes/addedToCart.html

@@ -0,0 +1,50 @@
+    {loop type="cart" name="cartloop" position="last"}
+        <table>
+            <tr>
+                <td class="col-md-4">
+                    {loop name="product_thumbnail" type="image" product=$PRODUCT_ID width="218" height="146" resize_mode="borders" limit="1"}
+                        <img itemprop="image" src="{$IMAGE_URL}" alt="Product #{$LOOP_COUNT}">
+                    {/loop}
+                </td>
+                <td class="col-md-4">
+                    <h2>{$TITLE}</h2>
+                    {loop type="attribute_combination" name="product_options" product_sale_elements="$PRODUCT_SALE_ELEMENTS_ID"}
+                        <p>{$ATTRIBUTE_TITLE}</p>
+                        <p>{$ATTRIBUTE_AVAILABILITY_TITLE}</p>
+                    {/loop}
+                </td>
+                <td class="col-md-4">
+
+                    {if $IS_PROMO == 1}
+                        {assign "real_price" $PROMO_TAXED_PRICE}
+                        <div class="special-price"><span class="price">{currency attr="symbol"} {$PROMO_TAXED_PRICE}</span></div>
+                        <small class="old-price"> <span class="price">{currency attr="symbol"} {$TAXED_PRICE}</span></small>
+                    {else}
+                        {assign "real_price" $TAXED_PRICE}
+                        <div class="special-price"><span class="price">{currency attr="symbol"} {$TAXED_PRICE}</span></div>
+                    {/if}
+
+                </td>
+            </tr>
+        </table>
+    {/loop}
+
+    <a href="{navigate to="index"}" role="button" class="btn btn_add_to_cart pull-right"><span>{intl l="View cart"}</span></a>
+    <a href="{navigate to="index"}" role="button" class="btn btn-checkout pull-right"><span>{intl l="Continue Shopping"}</span></a>
+
+    {ifloop rel="product_upsell"}
+        <aside id="products-upsell" role="complementary" aria-labelledby="products-upsell-label">
+            <div class="products-heading">
+                <h3 id="products-upsell-label">{intl l="Upsell Products"}</h3>
+            </div>
+
+            <div class="products-content">
+                <ul class="products-grid product-col-3 hover-effect">
+                    {loop name="product_upsell" type="product" promo="yes" limit="3"}
+                        {include file="includes/single-product.html" product_id=$ID hasBtn=false hasDescription=true width="218" height="146"}
+                    {/loop}
+
+                </ul>
+            </div>
+        </aside><!-- #products-upsell -->
+    {/ifloop}

templates/default/includes/mini-cart.html

@@ -1,5 +1,5 @@
 {ifloop rel="cartloop"}
-<li class="dropdown pull-right cart-not-empty">
+<li class="dropdown pull-right cart-not-empty cart-container">
     <a href="{url path="/cart"}" rel="nofollow" class="cart">
         {intl l="Cart"} <span class="badge">{cart attr="count_item"}</span>
     </a>

templates/default/product.html

@@ -134,7 +134,7 @@
                 </div>
 
                 {form name="thelia.cart.add" }
-                <form id="form-product-details" action="{url path="/cart/add" }" method="post" role="form">
+                <form id="form-product-details" action="{url path="/cart/add" }" method="post" role="form" class="form-product">
                     {form_hidden_fields form=$form}
                     <input type="hidden" name="view" value="product">
                     <input type="hidden" name="product_id" value="{$ID}">
@@ -238,4 +238,6 @@
         </div>
 
     </div><!-- /.container -->
+
+
 {/block}