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

This commit is contained in:
Julien Chanséaume
2014-08-04 18:05:50 +02:00
committed by Julien Chanseaume
parent 18b3a12771
commit a3021a0768
2 changed files with 108 additions and 36 deletions

View File

@@ -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,12 +55,39 @@ 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) {
// Use fallback method ?
$pse.useFallback = useFallback();
if ($pse.useFallback) {
$("#pse-options .option-option").remove();
for (pse in PSE){
combinations = PSE[pse].combinations;
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>");
}
$("#pse-options .pse-fallback").on("change",function(){
updateProductForm();
});
} else {
$("#pse-options .option-fallback").remove();
// get the select for options
$("#pse-options .pse-option").each(function(){
var $option = $(this);
@@ -82,17 +111,22 @@ var pseManager = (function($){
setPseForm();
}
}
}
function setPseForm(id) {
var i = 0,
pse = null,
combinationValueId;
pse = PSE[id || $pse.pseId];
if ($pse.useFallback) {
$pse.fallbak.val(pse.id);
} 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])
}
}
}
function updateProductForm() {
var pseId = null,
@@ -100,6 +134,9 @@ var pseManager = (function($){
if (PSE_COUNT > 1) {
if ($pse.useFallback) {
pseId = $pse.fallback.val();
} else {
// get form data
selection = getFormSelection();
// get the pse
@@ -111,10 +148,12 @@ var pseManager = (function($){
setPseForm();
} else {
$pse.validity.hide();
}
}
$pse.id.val(pseId);
$pse.pseId = pseId;
}
}
// Update UI
updateProductUI();
@@ -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;

View File

@@ -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">