modified product form to split attribute.
This commit is contained in:
Julien Chanséaume
committed by
Julien Chanseaume
Julien Chanseaume
parent
b4d0d085fe
commit
4e1e082a7c
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -42,6 +42,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.product-pse-name {
|
||||
|
||||
}
|
||||
|
||||
// Option block
|
||||
.option {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
{if $REF}<span itemprop="sku" class="sku">{intl l='Ref.'}: {$REF}</span>{/if}
|
||||
<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.'}: <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 class="in">{intl l='In Stock'}</span><span class="out">{intl l='Out of Stock'}</span>
|
||||
<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>
|
||||
</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 -->
|
||||
<meta itemprop="priceCurrency" content="{currency attr="symbol"}"> <!-- List of currency : The currency used to describe the product price, in three-letter ISO format. -->
|
||||
{if $IS_PROMO }
|
||||
{loop name="productSaleElements_promo" type="product_sale_elements" 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="old-price"><span class="price-label">{intl l="Regular Price:"} </span><span class="price">{format_number number="{$TAXED_PRICE}"} {currency attr="symbol"}</span></span>
|
||||
{/loop}
|
||||
{else}
|
||||
<span class="regular-price"><span itemprop="price" class="price">{format_number number="{$BEST_TAXED_PRICE}"} {currency attr="symbol"}</span></span>
|
||||
{/if}
|
||||
{* List of condition : NewCondition, DamagedCondition, UsedCondition, RefurbishedCondition *}
|
||||
<meta itemprop="itemCondition" itemscope itemtype="http://schema.org/NewCondition">
|
||||
{* List of currency : The currency used to describe the product price, in three-letter ISO format. *}
|
||||
<meta itemprop="priceCurrency" content="{currency attr="symbol"}">
|
||||
|
||||
<span id="pse-promo">
|
||||
<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>
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -165,32 +153,25 @@
|
||||
<input id="{$label_attr.for}" type="hidden" name="{$name}" value="{$ID}" {$attr} >
|
||||
{/form_field}
|
||||
|
||||
<fieldset class="product-options">
|
||||
{ifloop rel="stock"}
|
||||
{* pse *}
|
||||
{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 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}
|
||||
<select id="option-{$ID}" name="option-{$ID}" class="form-control pse-option" data-attribute="{$ID}"></select>
|
||||
</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}
|
||||
Reference in New Issue
Block a user