antadis/bebeboutik
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

slider blockbestsellers in product page

Browse Source
This commit is contained in:
Marion Muszynski 2016-05-04 15:31:28 +02:00
parent 60cb1752c7
commit 402ac44f49
5 changed files with 448 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
modules/blockbestsellers/blockbestsellers.php
View File

@ -219,6 +219,48 @@ class BlockBestSellers extends Module
$smarty->cache_lifetime = -1;
return $display;
}
public function hookProductFooter($params)
{
if(_PS_MOBILE_) {
return false;
}
global $smarty;
global $cookie;
$id_lang = $cookie->id_lang;
Tools::enableCache();
$smarty->cache_lifetime = 3600;
$cache_id = "blockbestsellers_productfooter".$id_lang;
if(!$this->isCached('blockbestsellers_productfooter_'.(int) $cookie->id_lang.'.tpl', $cache_id)) {
$currency = new Currency((int)($params['cookie']->id_currency));
$bestsellers = ProductSale::getBestSalesVp((int)($params['cookie']->id_lang), 0, 5);
if (!$bestsellers AND !Configuration::get('PS_BLOCK_BESTSELLERS_DISPLAY'))
return;
$best_sellers = array();
if($bestsellers)
foreach ($bestsellers AS $bestseller)
{
$bestseller['price'] = Tools::displayPrice(Product::getPriceStatic((int)($bestseller['id_product'])), $currency);
$best_sellers[] = $bestseller;
}
$smarty->assign(
array(
'best_sellers' => $best_sellers,
)
);
}
$display = $this->display(__FILE__, 'blockbestsellers_productfooter_'.(int) $cookie->id_lang.'.tpl' , $cache_id);
Tools::restoreCacheSettings();
$smarty->cache_lifetime = -1;
return $display;
}
public function hookLeftColumn($params)

83
modules/blockbestsellers/blockbestsellers_productfooter.tpl Normal file
View File

@ -0,0 +1,83 @@
<div id="best-sellers_block_product" class="block products_block">
<h1 class="">{l s='Les meilleures ventes' mod='blockbestsellers'}</h1>
{if $best_sellers|@count > 0}
<div class="slider_sales_product_footer">
<ul class="slides">
{foreach from=$best_sellers item=product name=myLoop}
<li>
<div class="hover-slide">
<a class="add-to-cart ajax_add_to_cart_product_footer_button" rel="ajax_id_product_footer_{$product.id_product}" href="" title="{l s='Add to cart' mod='blockbestsellers'}"></a>
<a class="see-product" href="{$product.link}" title="{l s='See this product' mod='blockbestsellers'}"></a>
</div>
<div class="product_added product_added_{$product.id_product}">
<p>{l s='Product was added to your cart' mod='blockbestsellers'}</p>
</div>
<div class="img_sellers">
<a href="{$product.link}" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'medium')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" /></a>
</div>
<div class="info_sellers">
<a href="{$product.link}" title="{$product.name|escape:'htmlall':'UTF-8'}" class="product_link_sellers">{$product.name}</a>
<p class="price">{$product.price}</p>
<p class="price_info">
<span class="old_price">{convertPrice price=$product.price_without_reduction}</span>
{if $product.specific_prices.reduction_type =='percentage'}
{assign var="reduc_value" value=$product.specific_prices.reduction * 100}
<span class="percentage">(-{$reduc_value|intval}%)</span>
{elseif $product.specific_prices.reduction_type == 'amount'}
<span class="amount">(-{$product.specific_prices.reduction|number_format:2:",":"."}€)</span>
{/if}
</p>
</div>
</li>
{/foreach}
</ul>
</div>
{else}
<p>{l s='No best sellers at this time' mod='blockbestsellers'}</p>
{/if}
</div>
<link rel="stylesheet" href="/modules/blockbestsellers/assets/css/flexslider.css">
<script type="text/javascript" src="/modules/blockbestsellers/assets/js/jquery.flexslider.js"></script>
<script>
{literal}
$( document ).ready(function() {
$('.slider_sales_product_footer').flexslider({
animation: "slide",
directionNav: true,
itemWidth: (860/3),
useCSS : false,
pauseOnHover: true,
});
$('.ajax_add_to_cart_product_footer_button').click(function(){
var idProduct = $(this).attr('rel').replace('ajax_id_product_footer_', '');
if ($(this).attr('disabled') != 'disabled'){
$.ajax({
type: 'POST',
url: baseDir + 'cart.php',
async: true,
cache: false,
dataType : "json",
data: 'add=1&ajax=true&qty=1&id_product=' + idProduct + '&token=' + static_token + '&ipa=',
success: function(jsonData,textStatus,jqXHR)
{
ajaxCart.updateCartInformation(jsonData, false);
$('.product_added_'+idProduct).show();
setTimeout(function() {
$('.product_added_'+idProduct).hide();
}, 3000);
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert("TECHNICAL ERROR: unable to add the product.\n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus);
}
});
}
return false;
});
});
{/literal}
</script>

83
modules/blockbestsellers/blockbestsellers_productfooter_2.tpl Normal file
View File

@ -0,0 +1,83 @@
<div id="best-sellers_block_product" class="block products_block">
<h1 class="">{l s='Les meilleures ventes' mod='blockbestsellers'}</h1>
{if $best_sellers|@count > 0}
<div class="slider_sales_product_footer">
<ul class="slides">
{foreach from=$best_sellers item=product name=myLoop}
<li>
<div class="hover-slide">
<a class="add-to-cart ajax_add_to_cart_product_footer_button" rel="ajax_id_product_footer_{$product.id_product}" href="" title="{l s='Add to cart' mod='blockbestsellers'}"></a>
<a class="see-product" href="{$product.link}" title="{l s='See this product' mod='blockbestsellers'}"></a>
</div>
<div class="product_added product_added_{$product.id_product}">
<p>{l s='Product was added to your cart' mod='blockbestsellers'}</p>
</div>
<div class="img_sellers">
<a href="{$product.link}" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'medium')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" /></a>
</div>
<div class="info_sellers">
<a href="{$product.link}" title="{$product.name|escape:'htmlall':'UTF-8'}" class="product_link_sellers">{$product.name}</a>
<p class="price">{$product.price}</p>
<p class="price_info">
<span class="old_price">{convertPrice price=$product.price_without_reduction}</span>
{if $product.specific_prices.reduction_type =='percentage'}
{assign var="reduc_value" value=$product.specific_prices.reduction * 100}
<span class="percentage">(-{$reduc_value|intval}%)</span>
{elseif $product.specific_prices.reduction_type == 'amount'}
<span class="amount">(-{$product.specific_prices.reduction|number_format:2:",":"."}€)</span>
{/if}
</p>
</div>
</li>
{/foreach}
</ul>
</div>
{else}
<p>{l s='No best sellers at this time' mod='blockbestsellers'}</p>
{/if}
</div>
<link rel="stylesheet" href="/modules/blockbestsellers/assets/css/flexslider.css">
<script type="text/javascript" src="/modules/blockbestsellers/assets/js/jquery.flexslider.js"></script>
<script>
{literal}
$( document ).ready(function() {
$('.slider_sales_product_footer').flexslider({
animation: "slide",
directionNav: true,
itemWidth: (860/3),
useCSS : false,
pauseOnHover: true,
});
$('.ajax_add_to_cart_product_footer_button').click(function(){
var idProduct = $(this).attr('rel').replace('ajax_id_product_footer_', '');
if ($(this).attr('disabled') != 'disabled'){
$.ajax({
type: 'POST',
url: baseDir + 'cart.php',
async: true,
cache: false,
dataType : "json",
data: 'add=1&ajax=true&qty=1&id_product=' + idProduct + '&token=' + static_token + '&ipa=',
success: function(jsonData,textStatus,jqXHR)
{
ajaxCart.updateCartInformation(jsonData, false);
$('.product_added_'+idProduct).show();
setTimeout(function() {
$('.product_added_'+idProduct).hide();
}, 3000);
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert("TECHNICAL ERROR: unable to add the product.\n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus);
}
});
}
return false;
});
});
{/literal}
</script>

159
themes/site/css/style.css
View File

@ -5797,11 +5797,11 @@ div#giftvoucher_ask_infos_block .gv_customization > .gv_param input {
max-width: 225px;
}
#product .reduction_product {
#product .buy_block .reduction_product {
margin-left: 0px;
position: absolute;
}
#product p.price{
#product #buy_block p.price{
border-top: 1px solid #cac7bf;
}
@ -5867,6 +5867,161 @@ div#giftvoucher_ask_infos_block .gv_customization > .gv_param input {
padding: 20px 0px;
background: #F3F3F3;
}
/* Slider product footer (blockbestsellers)*/
#product #best-sellers_block_product h1 {
background-size: 100% 100%;
color: #4F4E9A;
margin-right: 0px;
}
#product #best-sellers_block_product .slider_sales_product_footer {
padding: 20px 60px;
position: relative;
-moz-box-shadow: 0px 0px 5px 1px #cccccc;
-webkit-box-shadow: 0px 0px 5px 1px #CCC;
-ms-box-shadow:: 0px 0px 5px 1px #cccccc;
-o-box-shadow: 0px 0px 5px 1px #cccccc;
box-shadow: 0px 0px 5px 1px #CCC;
}
#product #best-sellers_block_product .flex-direction-nav {
position: inherit;
}
#product #best-sellers_block_product .flex-control-nav{
display: none;
}
#product #best-sellers_block_product .flex-direction-nav .flex-prev,
#product #best-sellers_block_product .flex-direction-nav .flex-next {
top: -80px;
border-radius: 50%;
width: 50px;
height: 50px;
content: '';
background: #fff;
color: transparent;
opacity: 1;
-moz-box-shadow: 0px 0px 5px 1px #cccccc;
-webkit-box-shadow: 0px 0px 5px 1px #CCC;
-ms-box-shadow:: 0px 0px 5px 1px #cccccc;
-o-box-shadow: 0px 0px 5px 1px #cccccc;
box-shadow: 0px 0px 5px 1px #CCC;
}
#product #best-sellers_block_product .flex-direction-nav .flex-prev:before,
#product #best-sellers_block_product .flex-direction-nav .flex-next:before{
display: none;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides {
padding: 10px 0;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li{
margin-right: 10px;
margin-left: 10px;
background: #fff;
padding: 10px;
box-sizing: border-box;
position: relative;
max-height: 134px;
-moz-box-shadow: 0px 0px 5px 1px #cccccc;
-webkit-box-shadow: 0px 0px 5px 1px #CCC;
-ms-box-shadow:: 0px 0px 5px 1px #cccccc;
-o-box-shadow: 0px 0px 5px 1px #cccccc;
box-shadow: 0px 0px 5px 1px #CCC;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .hover-slide,
#product #best-sellers_block_product .slider_sales_product_footer .slides li .product_added{
display: none;
top: 0;
left: 0;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.7);
box-sizing: border-box;
text-align: center;
position: absolute;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .product_added{
z-index: 999;
padding: 45px 20px;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .product_added p{
color: #fff;
font-family: "georgia";
font-style: italic;
font-weight: bold;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li:hover div.hover-slide{
display: block;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .hover-slide a{
display: inline-block;
width: 40%;
height: 100%;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .hover-slide a.add-to-cart {
background: url("../img/panier2.png") no-repeat center center;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .hover-slide a.see-product {
background: url("../img/loupe.png") no-repeat center center;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li:after{
content: '';
display: block;
clear: both;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .img_sellers,
#product #best-sellers_block_product .slider_sales_product_footer .slides li .info_sellers {
text-align: center;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .img_sellers{
width: 40%;
float: left;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .info_sellers {
width: 60%;
padding: 5px 10px;
box-sizing: border-box;
background-color: #E4E4EE;
float: right;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .info_sellers .product_link_sellers,
#product #best-sellers_block_product .slider_sales_product_footer .slides li .info_sellers p.price,
#product #best-sellers_block_product .slider_sales_product_footer .slides li .info_sellers .old_price,
#product #best-sellers_block_product .slider_sales_product_footer .slides li .info_sellers .percentage,
#product #best-sellers_block_product .slider_sales_product_footer .slides li .info_sellers .amount{
font-family: "georgia";
font-style: italic;
font-weight: bold;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .info_sellers .product_link_sellers{
display: block;
display: -webkit-box;
max-width: 110px;
height: 41px;
margin: 0 auto;
font-size: 12px;
line-height: 15px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: #4F4E9A;
font-weight: 500;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .info_sellers .product_link_sellers:hover{
text-decoration: none;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .info_sellers p.price{
border:0;
color: #FB69AA;
font-size: 16px;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .info_sellers .old_price {
color: #B0B0B0;
text-decoration: line-through;
}
#product #best-sellers_block_product .slider_sales_product_footer .slides li .info_sellers .percentage,
#product #best-sellers_block_product .slider_sales_product_footer .slides li .info_sellers .amount{
color: #4F4E9A;
}
@keyframes slideInDown {
0% {

83
themes/site/modules/blockbestsellers/blockbestsellers_productfooter.tpl Normal file
View File

@ -0,0 +1,83 @@
<div id="best-sellers_block_product" class="block products_block">
<h1 class="">{l s='Les meilleures ventes' mod='blockbestsellers'}</h1>
{if $best_sellers|@count > 0}
<div class="slider_sales_product_footer">
<ul class="slides">
{foreach from=$best_sellers item=product name=myLoop}
<li>
<div class="hover-slide">
<a class="add-to-cart ajax_add_to_cart_product_footer_button" rel="ajax_id_product_footer_{$product.id_product}" href="" title="{l s='Add to cart' mod='blockbestsellers'}"></a>
<a class="see-product" href="{$product.link}" title="{l s='See this product' mod='blockbestsellers'}"></a>
</div>
<div class="product_added product_added_{$product.id_product}">
<p>{l s='Product was added to your cart' mod='blockbestsellers'}</p>
</div>
<div class="img_sellers">
<a href="{$product.link}" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'medium')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" /></a>
</div>
<div class="info_sellers">
<a href="{$product.link}" title="{$product.name|escape:'htmlall':'UTF-8'}" class="product_link_sellers">{$product.name}</a>
<p class="price">{$product.price}</p>
<p class="price_info">
<span class="old_price">{convertPrice price=$product.price_without_reduction}</span>
{if $product.specific_prices.reduction_type =='percentage'}
{assign var="reduc_value" value=$product.specific_prices.reduction * 100}
<span class="percentage">(-{$reduc_value|intval}%)</span>
{elseif $product.specific_prices.reduction_type == 'amount'}
<span class="amount">(-{$product.specific_prices.reduction|number_format:2:",":"."}€)</span>
{/if}
</p>
</div>
</li>
{/foreach}
</ul>
</div>
{else}
<p>{l s='No best sellers at this time' mod='blockbestsellers'}</p>
{/if}
</div>
<link rel="stylesheet" href="/modules/blockbestsellers/assets/css/flexslider.css">
<script type="text/javascript" src="/modules/blockbestsellers/assets/js/jquery.flexslider.js"></script>
<script>
{literal}
$( document ).ready(function() {
$('.slider_sales_product_footer').flexslider({
animation: "slide",
directionNav: true,
itemWidth: (860/3),
useCSS : false,
pauseOnHover: true,
});
$('.ajax_add_to_cart_product_footer_button').click(function(){
var idProduct = $(this).attr('rel').replace('ajax_id_product_footer_', '');
if ($(this).attr('disabled') != 'disabled'){
$.ajax({
type: 'POST',
url: baseDir + 'cart.php',
async: true,
cache: false,
dataType : "json",
data: 'add=1&ajax=true&qty=1&id_product=' + idProduct + '&token=' + static_token + '&ipa=',
success: function(jsonData,textStatus,jqXHR)
{
ajaxCart.updateCartInformation(jsonData, false);
$('.product_added_'+idProduct).show();
setTimeout(function() {
$('.product_added_'+idProduct).hide();
}, 3000);
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert("TECHNICAL ERROR: unable to add the product.\n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus);
}
});
}
return false;
});
});
{/literal}
</script>