Merge pull request #221 from enurit/patch-5

[front office] Modifying upsell products popup

templates/frontOffice/default/assets/js/script.js

@@ -296,13 +296,13 @@
         $(".form-product").submit(function () {
             var url_action      = $(this).attr("action");
             var $cartContainer  = $(".cart-container");
+			var product_id  = "product_id=" + $("input[name$='product_id']",this).val();
 			
             $.ajax({type: "POST", data: $(this).serialize(), url: url_action,
                     success: function(data){
 
                         $cartContainer.html($(data).html());
-
+                        $.ajax({url:"ajax/addCartMessage", data:product_id,
-                        $.ajax({url:"ajax/addCartMessage",
                             success: function (data) {
                                 bootbox.dialog({
                                     message : data,

templates/frontOffice/default/includes/addedToCart.html

@@ -1,9 +1,9 @@
+{loop type="product" name="add_product_to_cart" id={product attr="id"}}
 <div class="clearfix">
-    {loop type="cart" name="cartloop" limit="1" order="reverse"}
         <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"}
+                    {loop name="product_thumbnail" type="image" product=$ID width="218" height="146" resize_mode="borders" limit="1"}
                         <img itemprop="image" src="{$IMAGE_URL}" alt="Product #{$LOOP_COUNT}">
                     {/loop}
                 </td>
@@ -17,8 +17,8 @@
                 <td class="col-md-4">
 
                     {if $IS_PROMO == 1}
-                        {assign "real_price" $PROMO_TAXED_PRICE}
+                        {assign "real_price" $TAXED_PROMO_PRICE}
-                        <div class="special-price"><span class="price">{$PROMO_TAXED_PRICE} {currency attr="symbol"}</span></div>
+                        <div class="special-price"><span class="price">{$TAXED_PROMO_PRICE} {currency attr="symbol"}</span></div>
                         <small class="old-price"> <span class="price">{$TAXED_PRICE} {currency attr="symbol"}</span></small>
                     {else}
                         {assign "real_price" $TAXED_PRICE}
@@ -28,25 +28,21 @@
                 </td>
             </tr>
         </table>
-    {/loop}
-
     <a href="{url path="/cart"}" role="button" class="btn btn_add_to_cart pull-right"><span>{intl l="View Cart"}</span></a>
     <button type="button" class="btn btn-checkout pull-right" data-dismiss="modal"><span>{intl l="Continue Shopping"}</span></button>
 </div>
-
+{ifloop rel="accessories"}
-{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"}
+                {loop type="accessory" name="accessories" product="$ID" order="random" limit="3"}
-                        {include file="includes/single-product.html" product_id=$ID hasBtn=false hasDescription=true width="218" height="146"}
+                    {include file="includes/single-product.html" product_id=$ACCESSORY_ID hasBtn=false hasDescription=false width="218" height="146"}
                 {/loop}
-
             </ul>
         </div>
     </aside><!-- #products-upsell -->
 {/ifloop}
+{/loop}

templates/frontOffice/default/includes/single-product.html

@@ -1,32 +1,35 @@
-<li class="item">
 {assign var="hasSubmit" value = false}
-    {assign var="productTitle" value="{$TITLE}"}
-
 <article itemscope itemtype="http://schema.org/Product">
+{if not $product_id}
+{assign var="$product_id" value=$ID}
+{/if}
     <!-- Use the meta tag to specify content that is not visible on the page in any way -->
-        {loop name="brand.feature" type="feature" product=$ID title="brand"}
+    {loop name="brand.feature" type="feature" product=$product_id title="brand"}
         {loop name="brand.value" type="feature_value" feature=$ID product=$product_id}
             <meta itemprop="brand" content="{$TITLE}">
         {/loop}
     {/loop}
-        {loop name="brand.feature" type="feature" product=$ID title="isbn"}
+    {loop name="brand.feature" type="feature" product=$product_id title="isbn"}
         {loop name="brand.value" type="feature_value" feature=$ID product=$product_id}
             <meta itemprop="productID" content="isbn:{$TITLE}">
         {/loop}
     {/loop}
 
-        <a href="{$URL}" itemprop="url" tabindex="-1" class="product-image">
+    <div class="product-image">
-            {loop name="product_thumbnail" type="image" product=$ID width="{$width}" height="{$height}" resize_mode="borders" limit="1"}
+        {loop name="product_thumbnail" type="image" product="$product_id" width="{$width}" height="{$height}" resize_mode="borders" limit="1"}
-                <img itemprop="image" src="{$IMAGE_URL}" alt="{$productTitle}">
+            <img itemprop="image" src="{$IMAGE_URL}" alt="Product #{$LOOP_COUNT}">
         {/loop}
-            {elseloop rel="product_thumbnail"}
+    
-                {images file='../assets/img/218x146.png'}<img itemprop="image" src="{$asset_url}" alt="{$productTitle}">{/images}
+        <span class="mask">
-            {/elseloop}
+            <div class="product-btn">
-            <span class="mask"></span>
+                <a class="product-link-btn" href="{$URL}">{intl l="More details"}</a>
-        </a>
+
+            </div>
+        </span>
+    </div>
 
     <div class="product-info">
-            <h3 class="name"><a href="{$URL}"><span itemprop="name">{$productTitle}</span></a></h3>
+        <h3 class="name"><a href="{$URL}"><span itemprop="name">{$TITLE}</span></a></h3>
         {if $hasDescription}
             <div class="description" itemprop="description">
                 <p>{$DESCRIPTION}</p>
@@ -40,30 +43,23 @@
             <meta itemprop="itemCondition" itemscope itemtype="http://schema.org/NewCondition"> <!-- List of condition : NewCondition, DamagedCondition, UsedCondition, RefurbishedCondition -->
             <meta itemprop="priceCurrency" content="{currency attr="symbol"}"> <!-- List of currency : The currency used to describe the product price, in three-letter ISO format. -->
             <link itemprop="availability" href="http://schema.org/InStock" content="in_stock" />
-                <!-- List of availibility :
-                    out_of_stock : http://schema.org/OutOfStock
-                    in_stock : http://schema.org/InStock
-                    instore_only : http://schema.org/InStoreOnly
-                    preorder : http://schema.org/PreOrder
-                    online_only : http://schema.org/OnlineOnly
-                -->
             {if $IS_PROMO }
-                    {loop name="productSaleElements_promo" type="product_sale_elements" product=$ID limit="1" order="min_price"}
+                {loop name="productSaleElements_promo" type="product_sale_elements" product=$product_id limit="1" order="min_price"}
                 {assign var="default_product_sale_elements" value=$ID}
-                        <span class="special-price"><span itemprop="price" class="price-label">{intl l="Special Price:"} </span><span class="price">{format_number number=$TAXED_PROMO_PRICE} {currency attr="symbol"}</span></span>
+                    <span class="special-price"><span class="price">{format_number number=$TAXED_PROMO_PRICE} {currency attr="symbol"}</span>
-                        <span class="old-price"><span class="price-label">{intl l="Regular Price:"} </span><span class="price">{format_number number=$TAXED_PRICE} {currency attr="symbol"}</span></span>
+                    <span class="old-price"><span class="price">{format_number number=$TAXED_PRICE} {currency attr="symbol"}</span>
                 {/loop}
             {else}
-                    <span class="regular-price"><span itemprop="price" class="price">{format_number number=$BEST_TAXED_PRICE} {currency attr="symbol"}</span></span>
+                <span class="regular-price">{format_number number=$BEST_TAXED_PRICE} {currency attr="symbol"}</span>
             {/if}
 
         </div>
         {if $hasBtn == true}
             {form name="thelia.cart.add" }
-            <form id="form-product-details" action="{url path="/cart/add" }" method="post" class="form-product">
+            <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}">
+                <input type="hidden" name="product_id" value="{$product_id}">
 
                 {if $form_error}<div class="alert alert-error">{$form_error_message}</div>{/if}
 
@@ -71,13 +67,13 @@
                 {if $default_product_sale_elements }
                     <input type="hidden" name="{$name}" value="{$default_product_sale_elements}" {$attr}>
                 {else}
-                    {loop name="productSaleElements_promo" type="product_sale_elements" product="{$ID}" limit="1"}
+                    {loop name="productSaleElements_promo" type="product_sale_elements" product="{$product_id}" limit="1"}
                         <input type="hidden" name="{$name}" value="{$ID}" {$attr}>
                     {/loop}
                 {/if}
                 {/form_field}
                 {form_field form=$form field="product"}
-                    <input id="{$label_attr.for}" type="hidden" name="{$name}" value="{$ID}" {$attr} >
+                    <input id="{$label_attr.for}" type="hidden" name="{$name}" value="{$product_id}" {$attr} >
                 {/form_field}
 
                 <fieldset class="product-options hide">
@@ -86,11 +82,11 @@
                             <label for="options" class="option-heading">Options</label>
                             <div class="option-content">
                                 <select name="options" class="form-control">
-                                    {loop name="stock" type="product_sale_elements" product="$ID" order="min_price"}
+                                    {loop name="stock" type="product_sale_elements" product="$product_id" order="min_price"}
                                     {if $LOOP_TOTAL == 1}
                                         {assign var="hasSubmit" value = true}
                                     {/if}
-                                    {loop name="combi" type="attribute_combination" product_sale_elements="$ID" order="alpha"}
+                                    {loop name="combi" type="attribute_combination" product_sale_elements="$product_id" order="alpha"}
                                             <option value="{$ID}" data-quantity="{$QUANTITY}" data-price="{format_number number="{$BEST_TAXED_PRICE}"} {currency attr="symbol"}" data-old-price="{format_number number="{$TAXED_PRICE}"} {currency attr="symbol"}">{$ATTRIBUTE_AVAILABILITY_TITLE}</small></option>
                                         {/loop}
                                     {/loop}
@@ -133,4 +129,3 @@
         {/if}
     </div>
 </article><!-- /product -->
-</li>