TheCoreDev/sterivein
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved produc detail page, fixed quick view issue

Browse Source
This commit is contained in:
Julien Chanséaume
2014-07-25 11:22:41 +02:00
committed by Julien Chanseaume
parent 4e1e082a7c
commit 691553060b
4 changed files with 262 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
templates/frontOffice/default/assets/css/styles.css
View File

@@ -5174,7 +5174,7 @@ body.modal-open,
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
left: -99.99999999%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
@@ -10939,7 +10939,7 @@ td.products-grid .item .product-info .description {
display: block;
}
.availability .in-stock {
color: #44B661;
color: #5cb85c;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
@@ -10954,7 +10954,7 @@ td.products-grid .item .product-info .description {
font-style: italic;
}
.availability .out-of-stock {
color: #FF0000;
color: #f0ad4e;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
@@ -12608,7 +12608,6 @@ td.product .name > a:focus,
#product-details .product-info .pse-name {
color: #555555;
font-size: 14px;
margin-left: 10px;
}
#product-details .product-price .price-container {
margin-left: -15px;

478
templates/frontOffice/default/assets/js/script.js
View File

@@ -21,6 +21,220 @@
}
}());
var pseManager = (function($){
// cache dom elements
var manager = {};
var $pse = {};
function init(){
$pse = {
"id": $("#pse-id"),
"product": $("#product"),
"name": $("#pse-name"),
"ref": $("#pse-ref"),
"ean": $("#pse-ean"),
"availability": $("#pse-availability"),
"quantity": $("#quantity"),
"promo": $("#pse-promo"),
"new": $("#pse-new"),
"weight": $("#pse-weight"),
"price": $("#pse-price"),
"priceOld": $("#pse-price-old"),
"submit": $("#pse-submit"),
"options": {},
"pseId": null
};
}
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();
if (PSE_COUNT > 1) {
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])
}
}
function updateProductForm() {
var pseId = null,
selection;
if (PSE_COUNT > 1) {
// get form data
selection = getFormSelection();
// get the pse
pseId = pseExist(selection);
if ( ! pseId ) {
// not exists, revert
setPseForm();
} else {
$pse.pseId = pseId;
}
}
// Update UI
updateProductUI();
}
function updateProductUI() {
var pse = PSE[$pse.pseId],
name = [],
pseValueId,
i
;
$pse.ref.html(pse.ref);
// $pse.ean.html(pse.ean);
// name
if (PSE_COUNT > 1) {
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.isPromo) {
$pse.product.addClass("product--is-promo");
} else {
$pse.product.removeClass("product--is-promo");
}
// new
if (pse.isNew) {
$pse.product.addClass("product--is-new");
} else {
$pse.product.removeClass("product--is-new");
}
// availability
if (pse.quantity > 0 || ! PSE_CHECK_AVAILABILITY) {
$pse.availability
.removeClass("out-of-stock")
.addClass("in-stock")
.attr("href", "http://schema.org/InStock");
if (parseInt($pse.quantity.val()) > pse.quantity){
$pse.quantity.val(pse.quantity);
}
if (PSE_CHECK_AVAILABILITY) {
$pse.quantity.attr("max", pse.quantity);
} else {
$pse.quantity.attr("max", PSE_DEFAULT_AVAILABLE_STOCK);
}
$pse.submit.prop("disabled", false);
} else {
$pse.availability.removeClass("in-stock")
.addClass("out-of-stock")
.attr("href", "http://schema.org/OutOfStock");
$pse.submit.prop("disabled", true);
}
// price
if (pse.isPromo){
$pse.priceOld.html(pse.price);
$pse.price.html(pse.promo);
} else {
$pse.priceOld.html("");
$pse.price.html(pse.price);
}
}
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;
}
function getFormSelection() {
var selection = [],
combinationId;
for (combinationId in $pse.options){
selection.push($pse.options[combinationId].val());
}
return selection;
}
manager.load = function(){
init();
buildProductForm();
updateProductForm();
}
return manager;
}(jQuery));
/* JQUERY PREVENT CONFLICT */
(function ($) {
@@ -129,6 +343,7 @@
bootbox.hideAll();
}
});
window.pseManager.load();
}
);
return false;
@@ -138,219 +353,7 @@
// Product AddtoCard - OnSubmit
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();
window.pseManager.load();
}
$(document).on('submit.form-product', '.form-product', function () {
@@ -384,55 +387,6 @@
return;
});
/*
$(document).on('change.quantity', 'select:has([data-quantity])', function () {
var $productDetails = $(this).closest("#product-details"),
$stockInformation = $("#stock-information", $productDetails),
$quantityInput = $("#quantity", $productDetails),
$btnAddToCart = $(".btn_add_to_cart", $productDetails);
var $current = $(":selected", this);
var qty = $current.data("quantity");
// Show Out Of Stock OR In Stock
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'));
});
*/
// Toolbar
var $category_products = $ ('#category-products');

4
templates/frontOffice/default/assets/less/thelia/product.less
View File

@@ -16,7 +16,7 @@
// In Stock
.in-stock {
color: #44B661;
color: @brand-success;
font-style: italic; font-weight: bold;
text-transform: uppercase;
@@ -29,7 +29,7 @@
}
// Out of Stock
.out-of-stock {
color: #FF0000;
color: @brand-warning;
font-style: italic; font-weight: bold;
text-transform: uppercase;

72
templates/frontOffice/default/product.html
View File

@@ -132,8 +132,8 @@
<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 class="special-price"><span itemprop="price" class="price-label">{intl l="Special Price:"} </span><span id="pse-price" 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 id="pse-price-old" class="price">{format_number number="{$TAXED_PRICE}"} {currency attr="symbol"}</span></span>
</span>
</div>
</div>
@@ -186,7 +186,7 @@
{/form_field}
<div class="form-group group-btn">
<button type="submit" class="btn btn_add_to_cart">{intl l="Add to cart"}</button>
<button id="pse-submit" type="submit" class="btn btn_add_to_cart">{intl l="Add to cart"}</button>
</div>
</fieldset>
@@ -267,6 +267,42 @@
{/if}
</div>
</section>
{* javascript confiuguration to display pse *}
{$pse=[]}
{$combination_label=[]}
{$combination_values=[]}
{loop name="pse" type="product_sale_elements" product="{product attr="id"}"}
{$pse[$ID]=["id" => $ID, "isDefault" => $IS_DEFAULT, "isPromo" => $IS_PROMO, "isNew" => $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_COUNT = {$pse_count};
{if $check_availability}
var PSE_CHECK_AVAILABILITY = true;
{else}
var PSE_CHECK_AVAILABILITY = false;
{/if};
var PSE_DEFAULT_AVAILABLE_STOCK = {config key="default-available-stock" default="100"};
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 $pse_count > 1}
{/if}
</article><!-- /#product -->
<ul class="pager">
@@ -287,32 +323,6 @@
{/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}