Added fallback method to product page when pse use differrents attributes.

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

@@ -45,7 +45,9 @@ var pseManager = (function($){
             "priceOld": $("#pse-price-old"),
             "submit": $("#pse-submit"),
             "options": {},
-            "pseId": null
+            "pseId": null,
+            "useFallback": false,
+            "fallback": $("#pse-options .pse-fallback")
         };
     }
 
@@ -53,33 +55,61 @@ var pseManager = (function($){
         var pse = null,
             combinationId = null,
             combinationValue = null,
-            combinationValueId = null;
+            combinationValueId = null,
+            combinations = null,
+            combinationName = [],
+            i;
 
         // initialization for the first default pse
         $pse.pseId = $pse.id.val();
 
         if (PSE_COUNT > 1) {
-            // get the select for options
+            // Use fallback method ?
-            $("#pse-options .pse-option").each(function(){
+            $pse.useFallback = useFallback();
-                var $option = $(this);
+
-                if ( $option.data("attribute") in PSE_COMBINATIONS){
+            if ($pse.useFallback) {
-                    $pse['options'][$option.data("attribute")] = $option;
+                $("#pse-options .option-option").remove();
-                    $option.on("change", updateProductForm);
+
-                } else {
+                for (pse in PSE){
-                    // not affected to this product -> remove
+                    combinations = PSE[pse].combinations;
-                    $option.closest(".option").remove();
+                    combinationName = [];
+                    for (i = 0; i < combinations.length; i++){
+                        combinationName.push(PSE_COMBINATIONS_VALUE[combinations[i]][0]);
+                    }
+                    $pse.fallback
+                        .append("<option value='" + pse + "'>"
+                            + combinationName.join(', ') + "</option>");
                 }
-            });
 
-            // build select
+                $("#pse-options .pse-fallback").on("change",function(){
-            for (combinationValueId in PSE_COMBINATIONS_VALUE) {
+                    updateProductForm();
-                combinationValue = PSE_COMBINATIONS_VALUE[combinationValueId];
+                });
-                $pse.options[combinationValue[1]]
+
-                    .append("<option value='" + combinationValueId + "'>"
+            } else {
-                        + combinationValue[0] + "</option>");
+                $("#pse-options .option-fallback").remove();
+
+                // get the select for options
+                $("#pse-options .pse-option").each(function(){
+                    var $option = $(this);
+                    if ( $option.data("attribute") in PSE_COMBINATIONS){
+                        $pse['options'][$option.data("attribute")] = $option;
+                        $option.on("change", updateProductForm);
+                    } else {
+                        // not affected to this product -> remove
+                        $option.closest(".option").remove();
+                    }
+                });
+
+                // build select
+                for (combinationValueId in PSE_COMBINATIONS_VALUE) {
+                    combinationValue = PSE_COMBINATIONS_VALUE[combinationValueId];
+                    $pse.options[combinationValue[1]]
+                        .append("<option value='" + combinationValueId + "'>"
+                            + combinationValue[0] + "</option>");
+                }
+
+                setPseForm();
             }
-
-            setPseForm();
         }
     }
 
@@ -88,9 +118,13 @@ var pseManager = (function($){
             pse = null,
             combinationValueId;
         pse = PSE[id || $pse.pseId];
-        for (var i=0; i<pse.combinations.length; i++){
+        if ($pse.useFallback) {
-            combinationValueId = pse.combinations[i];
+            $pse.fallbak.val(pse.id);
-            $pse['options'][PSE_COMBINATIONS_VALUE[combinationValueId][1]].val(pse.combinations[i])
+        } else {
+            for (var i=0; i<pse.combinations.length; i++){
+                combinationValueId = pse.combinations[i];
+                $pse['options'][PSE_COMBINATIONS_VALUE[combinationValueId][1]].val(pse.combinations[i])
+            }
         }
     }
 
@@ -100,20 +134,25 @@ var pseManager = (function($){
 
         if (PSE_COUNT > 1) {
 
-            // get form data
+            if ($pse.useFallback) {
-            selection = getFormSelection();
+                pseId = $pse.fallback.val();
-            // get the pse
-            pseId = pseExist(selection);
-
-            if ( ! pseId ) {
-                // not exists, revert
-                displayNotice();
-                setPseForm();
             } else {
-                $pse.validity.hide();
+                // get form data
-                $pse.id.val(pseId);
+                selection = getFormSelection();
-                $pse.pseId = pseId;
+                // get the pse
+                pseId = pseExist(selection);
+
+                if ( ! pseId ) {
+                    // not exists, revert
+                    displayNotice();
+                    setPseForm();
+                } else {
+                    $pse.validity.hide();
+                }
             }
+
+            $pse.id.val(pseId);
+            $pse.pseId = pseId;
         }
 
         // Update UI
@@ -140,6 +179,7 @@ var pseManager = (function($){
         // $pse.ean.html(pse.ean);
         // name
         if (PSE_COUNT > 1) {
+
             for (i = 0; i < pse.combinations.length; i++){
                 pseValueId = pse.combinations[i]
                 name.push(
@@ -148,6 +188,7 @@ var pseManager = (function($){
                     PSE_COMBINATIONS_VALUE[pseValueId][0]
                 )
             }
+
             $pse.name.html(" - " + name.join(", ") + "");
         }
 
@@ -232,6 +273,29 @@ var pseManager = (function($){
         return false;
     }
 
+    function useFallback() {
+        var pse = null,
+            count = -1,
+            pseCount = 0,
+            combinations,
+            i;
+
+        for (pse in PSE){
+            combinations = PSE[pse].combinations;
+            pseCount = 0;
+            for (i = 0; i < combinations.length; i++) {
+                pseCount += PSE_COMBINATIONS_VALUE[combinations[i]][1];
+            }
+            if (count == -1){
+                count = pseCount;
+            } else if (count != pseCount) {
+                return true;
+            }
+        }
+
+        return (count <= 0);
+    }
+
     function getFormSelection() {
         var selection = [],
             combinationId;

templates/frontOffice/default/product.html

@@ -173,14 +173,22 @@
                         {* 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">
+                            <div class="option option-option">
                                 <label for="option-{$ID}" class="option-heading">{$TITLE}</label>
                                 <div class="option-content">
                                     <select id="option-{$ID}" name="option-{$ID}" class="form-control pse-option" data-attribute="{$ID}"></select>
                                 </div>
                             </div>
                             {/loop}
+                            <div class="option option-fallback">
+                                <label for="option-fallback" class="option-heading">{intl l="Options"}</label>
+                                <div class="option-content">
+                                    <select id="option-fallback" name="option-fallback" class="form-control pse-option pse-fallback" data-attribute="0"></select>
+                                </div>
+                            </div>
                         </fieldset>
+
+
                     {/if}
 
                     <fieldset class="product-cart form-inline">