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

Refactor addToProduct's and change Quantity scripts and i added a way to get the product's quickView

Browse Source
This commit is contained in:
Christophe Laffont
2014-06-11 10:15:05 +02:00
parent afe48b2d33
commit 75d339f811
6 changed files with 13622 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@@ -25,7 +25,7 @@
(function ($) {
/* ------------------------------------------------------------------
callback Function -------------------------------------------------- */
callback Function ------------------------------------------------ */
var confirmCallback = {
'address.delete': function ($elm) {
$.post($elm.attr('href'), function (data) {
@@ -38,8 +38,9 @@
}
};
/* ------------------------------------------------------------------
onLoad Function -------------------------------------------------- */
onLoad Function ------------------------------------------------- */
$(document).ready(function () {
// Loader
@@ -52,6 +53,9 @@
.ajaxStop(function () { $loader.hide(); })
.ajaxError(function () { $loader.hide(); });
// Check if the size of the window is appropriate for ajax
var doAjax = ($(window).width() > 768) ? true : false;
// Main Navigation Hover
$('.nav-main')
.on('click.subnav', '[data-toggle=dropdown]', function (event) {
@@ -111,6 +115,99 @@
return false;
});
// Product Quick view Dialog
$(document).on('click.product-quickview', '.product-quickview', function () {
if (doAjax) {
$.get(this.href,
function (data) {
// Hide all currently active bootbox dialogs
bootbox.hideAll();
// Show dialog
bootbox.dialog({
message : $("#product",data)
});
}
);
return false;
}
return;
});
// Product AddtoCard - OnSubmit
$(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());
$.ajax({url:"ajax/addCartMessage", data:{ product_id: product_id },
success: function (data) {
// Hide all currently active bootbox dialogs
bootbox.hideAll();
// Show dialog
bootbox.dialog({
message : data,
buttons : {}
});
}
});
},
error: function (e) {
console.log('Error.', e);
}
});
return false;
}
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');
if ($category_products.size() > 0) {
@@ -125,16 +222,18 @@
return false;
});
};
}
// Login
var $form_login = $('#form-login');
if ($form_login.size() > 0) {
$form_login.on('change.account', ':radio', function () {
if ($(this).val() === '0')
if ($(this).val() === '0') {
$('#password', $form_login).val('').prop('disabled', true); // Disabled (new customer)
else
}
else {
$('#password', $form_login).prop('disabled', false); // Enabled
}
}).find(':radio:checked').trigger('change.account');
}
@@ -203,25 +302,22 @@
});
// Product details Thumbnails
$('#product-gallery').each(function () {
var $item = $('.item', this),
$thumbnails = $('.thumbnail', this),
$image = $('.product-image > img', this);
// Show Carousel control if needed
if ($item.size() > 1) {
$('#product-thumbnails', this).carousel({interval: false}).find('.carousel-control').show();
}
$(this).on('click.thumbnails', '.thumbnail', function () {
$(document).on('click.thumbnails', '#product-thumbnails .thumbnail', function () {
if ($(this).hasClass('active')) { return false; }
$image.attr('src',$(this).attr('href'));
$thumbnails.removeClass('active');
var $productGallery = $(this).closest("#product-gallery");
$('.product-image > img', $productGallery).attr('src',$(this).attr('href'));
$('.thumbnail', $productGallery).removeClass('active');
$(this).addClass('active');
return false;
});
// Show Carousel control if needed
$('#product-gallery').each(function () {
if ($('.item', this).size() > 1) {
$('#product-thumbnails', this).carousel({interval: false}).find('.carousel-control').show();
}
});
// Payment Method
@@ -245,106 +341,9 @@
errorClass: 'help-block'
});
if($("body").is(".page-product")){
var $quantityInput = $("#quantity");
var $btnAddToCart = $(".btn_add_to_cart", $("#form-product-details"));
var $productMeta = $("#stock-information");
var $inStock = $(".in",$productMeta);
var $outOfStock = $(".out",$productMeta);
var $old_price_container = $(".old-price", $("#product-details"));
var $select_quantity = $(this).find(":selected").attr("data-quantity");
// Switch Quantity in product page
$("select", $(".product-options")).change(function(){
$select_quantity = $(this).find(":selected").attr("data-quantity");
var $old_price = $(this).find(":selected").attr("data-old-price");
var $best_price = $(this).find(":selected").attr("data-price");
$quantityInput.attr("max", $select_quantity);
// Show Out Of Stock OR In Stock
if ($select_quantity == 0) {
$btnAddToCart.attr("disabled", true);
$productMeta.removeClass("in-stock");
$productMeta.addClass("out-of-stock");
$productMeta.attr("href", "http://schema.org/OutOfStock");
$outOfStock.show();
$inStock.hide();
} else {
$btnAddToCart.attr("disabled", false);
$productMeta.removeClass("out-of-stock");
$productMeta.addClass("in-stock");
$productMeta.attr("href", "http://schema.org/InStock");
$inStock.show();
$outOfStock.hide();
}
if (parseInt($quantityInput.val()) > parseInt($select_quantity)) {
$quantityInput.val($select_quantity);
}
if ($old_price_container.size() > 0) {
$(".price", $old_price_container).html($old_price);
$(".price", $(".special-price")).html($best_price);
} else {
$(".price", $(".regular-price")).html($best_price);
}
}).change();
$quantityInput.focusout(function () {
$quantityInput.attr("max", $select_quantity);
if (parseInt($quantityInput.val()) > parseInt($select_quantity)) {
$quantityInput.val($select_quantity);
}
});
}
$(".form-product").submit(function () {
var url_action = $(this).attr("action");
var $cartContainer = $(".cart-container");
var product_id = "product_id=" + $("input[name$='product_id']",this).val();
$.ajax({type: "POST", data: $(this).serialize(), url: url_action,
success: function(data){
$cartContainer.html($(data).html());
$.ajax({url:"ajax/addCartMessage", data:product_id,
success: function (data) {
bootbox.dialog({
message : data,
buttons : {}
});
}
});
},
error: function (e) {
console.log('Error.', e);
}
});
return false;
});
$('#content').on('change', '#limit-top, #sortby-top', function () {
window.location = $(this).val()
// Toolbar filter
$('#content').on('change.toolbarfilter', '#limit-top, #sortby-top', function () {
window.location = $(this).val();
});
});

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

@@ -8,27 +8,33 @@
top: -14px !important;
margin: 0;
}
}
// Availibility
.availability {
display: block;
// In Stock
.in-stock {
font-style: italic;
color: #44B661;
font-style: italic; font-weight: bold;
text-transform: uppercase;
.in { display: block; }
.out { display: none; }
.quantity{
font-style: italic;
}
}
// Out of Stock
.out-of-stock {
color: #FF0000;
font-style: italic; font-weight: bold;
text-transform: uppercase;
.in { display: none; }
.out { display: block; }
}
#stock-information {

13
templates/frontOffice/default/assets/themes/default/less/theme.less
View File

@@ -349,12 +349,11 @@ td.product,
// Availibility
.availibity-label { .sr-only; }
.products-grid,
.products-list {
// Animation
@media (min-width: @screen-tablet) {
.product-image {
.product-image {
> .mask {
.border-radius(@border-radius-base);
}
@@ -378,6 +377,16 @@ td.product,
}
}
}
&.product-quickview {
&:hover,
&:focus {
.mask:before {
.icon(@search);
font-size: 40px;
margin-top: 0;
}
}
}
}
}
}

2
templates/frontOffice/default/category.html
View File

@@ -81,7 +81,7 @@
<div class="products-content">
<ul class="product-col-4">
{loop type="product" name="product_list" category={category attr="id"} limit=$limit page=$product_page order=$product_order}
{include file="includes/single-product.html" product_id=$ID hasBtn=true hasDescription=true width="218" height="146"}
{include file="includes/single-product.html" product_id=$ID hasBtn=true hasDescription=true hasQuickView=true width="218" height="146"}
{/loop}
</ul>
</div>

23
templates/frontOffice/default/includes/single-product.html
View File

@@ -2,7 +2,7 @@
{assign var="hasSubmit" value = false}
{assign var="productTitle" value="{$TITLE}"}
{if not $product_id}
{assign var="$product_id" value=$ID}
{assign var="product_id" value=$ID}
{/if}
<article itemscope itemtype="http://schema.org/Product">
<!-- Use the meta tag to specify content that is not visible on the page in any way -->
@@ -17,7 +17,7 @@
{/loop}
{/loop}
<a href="{$URL}" itemprop="url" tabindex="-1" class="product-image">
<a href="{$URL}" itemprop="url" tabindex="-1" class="product-image{if $hasQuickView == true} product-quickview{/if}">
{loop name="product_thumbnail" type="image" product=$product_id width="{$width}" height="{$height}" resize_mode="borders" limit="1"}
<img itemprop="image" src="{$IMAGE_URL}" alt="{$productTitle}">
{/loop}
@@ -36,12 +36,27 @@
{/if}
</div>
{* Default value *}
{assign var="current_stock_content" value = "in_stock"}
{assign var="current_stock_href" value = "http://schema.org/InStock"}
{loop name="stock_meta" type="product_sale_elements" product=$product_id}
{loop name="combi_meta" type="attribute_combination" product_sale_elements="$ID"}
{if $LOOP_COUNT == 0}
{if $QUANTITY == 0}
{assign var="current_stock_content" value = "out_stock"}
{assign var="current_stock_href" value = "http://schema.org/OutOfStock"}
{/if}
{/if}
{/loop}
{/loop}
<div class="product-price">
<div class="price-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="category" content="{category attr="title"}">
<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. -->
<link itemprop="availability" href="http://schema.org/InStock" content="in_stock" />
<link itemprop="availability" href="{$current_stock_href}" content="{$current_stock_content}" />
<!-- List of availibility :
out_of_stock : http://schema.org/OutOfStock
in_stock : http://schema.org/InStock
@@ -62,7 +77,7 @@
</div>
{if $hasBtn == true}
{form name="thelia.cart.add" }
<form id="form-product-details" action="{url path="/cart/add" }" method="post" class="form-product">
<form id="form-product-details{$product_id}" action="{url path="/cart/add" }" method="post" class="form-product">
{form_hidden_fields form=$form}
<input type="hidden" name="view" value="product">
<input type="hidden" name="product_id" value="{$product_id}">