modified product form to split attribute.

templates/frontOffice/default/assets/css/styles.css

@@ -5174,7 +5174,7 @@ body.modal-open,
   left: 100%;
 }
 .carousel-inner > .prev {
-  left: -99.99999999%;
+  left: -100%;
 }
 .carousel-inner > .next.left,
 .carousel-inner > .prev.right {
@@ -12260,7 +12260,7 @@ td.product .name > a:focus,
   display: block;
   font-size: 14px;
   line-height: 25px;
-  font-style: italic;
+  font-style: normal;
   font-weight: 400;
 }
 .product-price .old-price .price {
@@ -12605,6 +12605,11 @@ td.product .name > a:focus,
   margin-top: -8px;
   margin-bottom: 20px;
 }
+#product-details .product-info .pse-name {
+  color: #555555;
+  font-size: 14px;
+  margin-left: 10px;
+}
 #product-details .product-price .price-container {
   margin-left: -15px;
   margin-right: -15px;

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

@@ -137,11 +137,227 @@
         });
 
         // Product AddtoCard - OnSubmit
-        $(document).on('submit.form-product', '.form-product', function () { 
+        if (typeof window.PSE_FORM !== "undefined"){
+            // cache dom elements
+            var $pse = {
+                    "id": $("#pse-id"),
+                    "product": $("#product"),
+                    "name": $("#pse-name"),
+                    "ref": $("#pse-ref"),
+                    "ean": $("#pse-ean"),
+                    "availability": $("#pse-availability"),
+                    "quantity": $("#pse-quantity"),
+                    "promo": $("#pse-promo"),
+                    "new": $("#pse-new"),
+                    "weight": $("#pse-weight"),
+                    "price": $("#pse-price"),
+                    "priceOld": $("#pse-price-old"),
+                    "submit": $(".btn_add_to_cart"),
+                    "options": {},
+                    "pseId": null
+                };
+
+            var buildProductForm = function buildProductForm() {
+                var pse = null,
+                    combinationId = null,
+                    combinationValue = null,
+                    combinationValueId = null;
+
+                // get the select for options
+                $("#pse-options .pse-option").each(function(){
+                    var $option = $(this);
+                    $pse['options'][$option.data("attribute")] = $option;
+                    $option.on("change", updateProductForm);
+                });
+
+                // build select
+                for (combinationValueId in PSE_COMBINATIONS_VALUE) {
+                    combinationValue = PSE_COMBINATIONS_VALUE[combinationValueId];
+                    $pse.options[combinationValue[1]]
+                        .append("<option value='" + combinationValueId + "'>"
+                                    + combinationValue[0] + "</option>");
+                }
+
+                // initialization for the first default pse
+                $pse.pseId = $pse.id.val();
+                setPseForm();
+            };
+
+            var setPseForm = function setPseForm(id) {
+                var i = 0,
+                    pse = null,
+                    combinationValueId;
+                pse = PSE[id || $pse.pseId];
+                for (var i=0; i<pse.combinations.length; i++){
+                    combinationValueId = pse.combinations[i];
+                    $pse['options'][PSE_COMBINATIONS_VALUE[combinationValueId][1]].val(pse.combinations[i])
+                }
+            };
+
+            var updateProductForm = function updateProductForm() {
+                var pseId = null,
+                    selection;
+
+                // get form data
+                selection = getFormSelection();
+                // get the pse
+                pseId = pseExist(selection);
+
+                if ( ! pseId ) {
+                    // not exists, revert
+                    setPseForm();
+                } else {
+                    $pse.pseId = pseId;
+                }
+
+                // Update UI
+                updateProductUI();
+            }
+
+            var updateProductUI = function updateProductUI() {
+                var pse = PSE[$pse.pseId],
+                    name = [],
+                    pseValueId,
+                    i
+                    ;
+
+                $pse.ref.html(pse.ref);
+                // $pse.ean.html(pse.ean);
+                // name
+                for (i = 0; i < pse.combinations.length; i++){
+                    pseValueId = pse.combinations[i]
+                    name.push(
+                        //PSE_COMBINATIONS[PSE_COMBINATIONS_VALUE[pseValueId][1]].name +
+                        //":" +
+                        PSE_COMBINATIONS_VALUE[pseValueId][0]
+                    )
+                }
+                $pse.name.html(" - " + name.join(", ") + "");
+
+                // promo
+                if (pse.promo) {
+                    $pse.product.addClass("product--is-promo");
+                } else {
+                    $pse.product.removeClass("product--is-promo");
+                }
+
+                // new
+                if (pse.new) {
+                    $pse.new.addClass("product--is-new");
+                } else {
+                    $pse.new.removeClass("product--is-new");
+                }
+
+                // availability
+                if (pse.quantite > 0 || ! PSE_CHECK_AVAILABILITY) {
+                    $pse.availability
+                        .removeClass("out-of-stock")
+                        .addClass("in-stock")
+                        .attr("href", "http://schema.org/InStock");
+
+                    $pse.quantity.val(pse.quantity);
+
+                    $pse.submit.attr("disabled", false);
+                } else {
+                    $pse.new.removeClass("in-stock")
+                            .addClass("out-of-stock")
+                            .attr("href", "http://schema.org/OutOfStock");
+
+                    $pse.submit.attr("disabled", true);
+                }
+
+                // price
+                $pse.priceOld.html(pse.promo);
+                $pse.price.html(pse.price);
+            }
+
+            /*
+            if (qty == 0) {
+                // Disable button
+                $btnAddToCart.attr("disabled", true);
+
+                // Update stock information
+                $stockInformation
+                    .removeClass("in-stock")
+                    .addClass("out-of-stock")
+                    .attr("href", "http://schema.org/OutOfStock");
+
+            } else {
+                // Active button
+                $btnAddToCart.attr("disabled", false);
+
+                // Update Field Quantity if the current value is over Max
+                if (parseInt($quantityInput.val()) > parseInt(qty)) {
+                    $quantityInput.val(qty);
+                }
+
+                // Update stock information
+                $stockInformation
+                    .removeClass("out-of-stock")
+                    .addClass("in-stock")
+                    .attr("href", "http://schema.org/InStock");
+            }
+
+            // HTML5 number attribute
+            $quantityInput.attr("max", qty);
+
+            // Update Prices
+            $(".old-price > .price", $productDetails).html($current.data('old-price'));
+            $(".special-price > .price, .regular-price > .price", $productDetails).html($current.data('price'));
+            */
+
+            var pseExist = function pseExist(selection) {
+                var pseId,
+                    pse = null,
+                    combinations,
+                    i,
+                    j,
+                    existCombination;
+
+                for (pse in PSE){
+                    pseId = pse;
+                    combinations = PSE[pse].combinations;
+                    for (i = 0; i < selection.length; i++){
+                        existCombination = false;
+                        for (j = 0; j < combinations.length; j++){
+                            if (selection[i] == combinations[j]){
+                                existCombination = true;
+                                break;
+                            }
+                        }
+                        if (existCombination === false) {
+                            break;
+                        }
+                    }
+                    if (existCombination) {
+                        return pseId;
+                    }
+                }
+
+                return false;
+            }
+
+            var getFormSelection = function getFormSelection() {
+                var selection = [],
+                    combinationId;
+
+                for (combinationId in $pse.options){
+                    selection.push($pse.options[combinationId].val());
+                }
+
+                return selection;
+            }
+
+            buildProductForm();
+            updateProductForm();
+
+        }
+
+        $(document).on('submit.form-product', '.form-product', function () {
             if (doAjax) {
                 var url_action  = $(this).attr("action"),
                     product_id  = $("input[name$='product_id']",this).val();
-                    
+
                 $.ajax({type: "POST", data: $(this).serialize(), url: url_action,
                     success: function(data){
                         $(".cart-container").html($(data).html());
@@ -167,6 +383,9 @@
             }
             return;
         });
+
+        /*
+
             
         $(document).on('change.quantity', 'select:has([data-quantity])', function () { 
             var $productDetails         = $(this).closest("#product-details"),
@@ -212,6 +431,8 @@
             $(".special-price > .price, .regular-price > .price", $productDetails).html($current.data('price'));
 
         });
+        */
+
 
         // Toolbar
         var $category_products = $ ('#category-products');
@@ -353,5 +574,6 @@
 
     });
 
+
 })(jQuery);
 

templates/frontOffice/default/assets/less/thelia/product.less

@@ -42,6 +42,9 @@
     }
 }
 
+.product-pse-name {
+
+}
 
 // Option block
 .option {

templates/frontOffice/default/assets/themes/default/less/theme.less

@@ -607,6 +607,12 @@ td.product,
             font-size: ceil(@font-size-base * 0.94);
             margin-top: -8px; margin-bottom: 20px;
         }
+        .pse-name {
+            color: @gray;
+            font-size: ceil(@font-size-base * 0.94);
+            //margin-left: 10px;
+        }
+
     }
     .product-price {
         .price-container {

templates/frontOffice/default/product.html

@@ -30,6 +30,11 @@
 
 {* Content *}
 {block name="main-content"}
+
+    {$product_id={product attr="id"}}
+    {$pse_count={count type="product_sale_elements" product="$product_id"}}
+    {$check_availability={config key="check-available-stock" default="1"}}
+
     <div class="main">
         {loop name="product.details" type="product" id="{product attr="id"}" limit="1" with_prev_next_info="1"}
         <article id="product" class="col-main" role="main" itemscope itemtype="http://schema.org/Product">
@@ -73,7 +78,6 @@
                         {ifloop rel="image.carouselsup"}
                         <div class="item">
                             <ul>
-
                                 {loop name="image.carouselsup" type="image" product="{$ID}"  width="560" height="445" resize_mode="borders" offset="5"}
                                     <li>
                                         <a href="{$IMAGE_URL}" class="thumbnail">
@@ -97,8 +101,8 @@
 
             <section id="product-details">
                 <div class="product-info">
-                    <h1 class="name"><span itemprop="name">{$TITLE}</span></h1>
+                    <h1 class="name"><span itemprop="name">{$TITLE}</span><span id="pse-name" class="pse-name"></span></h1>
-                    {if $REF}<span itemprop="sku" class="sku">{intl l='Ref.'}: {$REF}</span>{/if}
+                    {if $REF}<span itemprop="sku" class="sku">{intl l='Ref.'}: <span id="pse-ref">{$REF}</span></span>{/if}
 
                     {loop name="brand_info" type="brand" product="{$ID}"}
                         <p><a href="{$URL}" title="{intl l="More information about this brand"}"><span itemprop="brand">{$TITLE}</span></a></p>
@@ -109,26 +113,12 @@
                     </div>{/if}
                 </div>
 
-                {* Default value *}
-                {assign var="current_stock_class" value = "in-stock"}
-                {assign var="current_stock_href" value = "http://schema.org/InStock"}
-                
-                {loop name="stock_meta" type="product_sale_elements" product="$ID"}
-                    {loop name="combi_meta" type="attribute_combination" product_sale_elements="$ID"}
-                       {if $LOOP_COUNT == 0}
-                           {if $QUANTITY == 0}
-                               {assign  var="current_stock_class" value = "out-of-stock"}
-                               {assign  var="current_stock_href" value = "http://schema.org/OutOfStock"}
-                           {/if}
-                       {/if}
-                    {/loop}
-                {/loop}
-
                 <div class="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                     <div class="availability">
                         <span class="availibity-label">{intl l="Availability"}: </span>
-                        <span itemprop="availability" href="{$current_stock_href}" class="{$current_stock_class}" id="stock-information">
+                        <span itemprop="availability" href="{$current_stock_href}" class="" id="pse-availability">
-                            <span class="in">{intl l='In Stock'}</span><span class="out">{intl l='Out of Stock'}</span>
+                            <span class="in">{intl l='In Stock'}</span>
+                            <span class="out">{intl l='Out of Stock'}</span>
                         </span>
                     </div>
 
@@ -136,17 +126,15 @@
                         {loop type="category" name="category_tag" id=$DEFAULT_CATEGORY}
                             <meta itemprop="category" content="{$TITLE}">
                         {/loop}
-                        <meta itemprop="itemCondition" itemscope itemtype="http://schema.org/NewCondition"> <!-- List of condition : NewCondition, DamagedCondition, UsedCondition, RefurbishedCondition -->
+                        {* 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. -->
+                        <meta itemprop="itemCondition" itemscope itemtype="http://schema.org/NewCondition">
-                        {if $IS_PROMO }
+                        {* List of currency : The currency used to describe the product price, in three-letter ISO format. *}
-                        {loop name="productSaleElements_promo" type="product_sale_elements" product="{$ID}" limit="1" order="min_price"}
+                        <meta itemprop="priceCurrency" content="{currency attr="symbol"}">
-                            {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 id="pse-promo">
-                            <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 id="pse-price" 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>
-                        {/loop}
+                            <span id="pse-price-old" 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>
-                        {else}
+                        </span>
-                            <span class="regular-price"><span itemprop="price" class="price">{format_number number="{$BEST_TAXED_PRICE}"} {currency attr="symbol"}</span></span>
-                        {/if}
                     </div>
                 </div>
 
@@ -165,32 +153,25 @@
                         <input id="{$label_attr.for}" type="hidden" name="{$name}" value="{$ID}" {$attr} >
                     {/form_field}
 
-                    <fieldset class="product-options">
+                    {* pse *}
-                        {ifloop rel="stock"}
+                    {form_field form=$form field='product_sale_elements_id'}
+                    <input id="pse-id" type="hidden" name="{$name}" value="{$PRODUCT_SALE_ELEMENT}" {$attr} >
+                    {/form_field}
+
+                    {if $pse_count > 1}
+                        {* We have more than 1 combination: custom form *}
+                        <fieldset id="pse-options" class="product-options">
+                        {loop name="attributes" type="attribute" product="$product_id" order="manual"}
                         <div class="option">
-                            <label for="options" class="option-heading">Options</label>
+                            <label for="option-{$ID}" class="option-heading">{$TITLE}</label>
                             <div class="option-content">
-                                {form_field form=$form field='product_sale_elements_id'}
+                                <select id="option-{$ID}" name="option-{$ID}" class="form-control pse-option" data-attribute="{$ID}"></select>
-                                    <select name="{$name}" class="form-control">
-                                        {loop name="stock" type="product_sale_elements" product="$ID" order="min_price"}
-                                            {if $IS_PROMO }
-                                                <option value="{$ID}" data-quantity="{$QUANTITY}" data-price="{format_number number="{$TAXED_PROMO_PRICE}"} {currency attr="symbol"}" data-old-price="{format_number number="{$TAXED_PRICE}"} {currency attr="symbol"}">{$ATTRIBUTE_AVAILABILITY_TITLE}
-                                            {else}
-                                                <option value="{$ID}" data-quantity="{$QUANTITY}" data-price="{format_number number="{$TAXED_PRICE}"} {currency attr="symbol"}" data-old-price="{format_number number="{$TAXED_PRICE}"} {currency attr="symbol"}">{$ATTRIBUTE_AVAILABILITY_TITLE}
-                                            {/if}
-                                            {$REF}
-                                            ({loop name="combi" type="attribute_combination" product_sale_elements="$ID" order="alpha"}
-                                                {if $LOOP_COUNT > 1}-{/if}
-                                                {$ATTRIBUTE_AVAILABILITY_TITLE}
-                                            {/loop})
-                                            </option>
-                                        {/loop}
-                                    </select>
-                                {/form_field}
                             </div>
                         </div>
-                        {/ifloop}
+                        {/loop}
                     </fieldset>
+                    {/if}
+
                     <fieldset class="product-cart form-inline">
                         {form_field form=$form field='quantity'}
                         <div class="form-group group-qty {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
@@ -208,6 +189,7 @@
                             <button type="submit" class="btn btn_add_to_cart">{intl l="Add to cart"}</button>
                         </div>
                     </fieldset>
+
                 </form>
                 {/form}
             </section>
@@ -303,3 +285,34 @@
 
     </div><!-- /.main -->
 {/block}
+
+{block name="javascript-initialization"}
+    {if $pse_count > 1}
+        {$pse=[]}
+        {$combination_label=[]}
+        {$combination_values=[]}
+        {loop name="pse" type="product_sale_elements" product="{product attr="id"}"}
+        {$pse[$ID]=["id" => $ID, "default" => $IS_DEFAULT, "promo" => $IS_PROMO, "new" => $IS_NEW, "ref" => "{$REF}", "ean" => "{$EAN}", "quantity" => {$QUANTITY}, "price" => "{format_number number="{$TAXED_PRICE}"} {currency attr="symbol"}", "promo" => "{format_number number="{$TAXED_PROMO_PRICE}"} {currency attr="symbol"}" ]}
+            {$pse_combination=[]}
+            {loop name="combi" type="attribute_combination" product_sale_elements="$ID"}
+                {if ! $combination_label[$ATTRIBUTE_ID]}
+                    {$combination_label[$ATTRIBUTE_ID]=["name" => "{$ATTRIBUTE_TITLE}", "values" => []]}
+                {/if}
+                {if ! $combination_values[$ATTRIBUTE_AVAILABILITY_ID]}
+                    {$combination_label[$ATTRIBUTE_ID]["values"][]=$ATTRIBUTE_AVAILABILITY_ID}
+                    {$combination_values[$ATTRIBUTE_AVAILABILITY_ID]=["{$ATTRIBUTE_AVAILABILITY_TITLE}", $ATTRIBUTE_ID]}
+                {/if}
+                {$pse_combination[]=$ATTRIBUTE_AVAILABILITY_ID}
+            {/loop}
+            {$pse[$ID]["combinations"]=$pse_combination}
+        {/loop}
+        <script type="text/javascript">
+            // Product sale elements
+            var PSE_FORM = true;
+            var PSE_CHECK_AVAILABILITY = {if $check_availability}true{else}false{/if};
+            var PSE = {$pse|json_encode nofilter};
+            var PSE_COMBINATIONS = {$combination_label|json_encode nofilter};
+            var PSE_COMBINATIONS_VALUE = {$combination_values|json_encode nofilter};
+        </script>
+    {/if}
+{/block}