Jump to content
  • 0

Slider zdjęć w karcie produktu

IgorDev

Asked by IgorDev,

 Share

Question

IgorDev Newbie

IgorDev

Posted
Posted (edited)

Witajcie, jak wykonać modyfikację JS dla strony product.tpl by zdjęcia miniaturki w karcie były przewijane w pionie, a nie w poziomie ?

Znalazłem kod JS ktory prawdopodobnie za to odpowiada:
 


	if (parseInt($('#thumbs_list_frame >li:visible').length) != parseInt($('#thumbs_list_frame >li').length))
		$('#wrapResetImages').stop(true, true).show();
	else
		$('#wrapResetImages').stop(true, true).hide();

	$('#thumbs_list_frame').width(parseInt($('#thumbs_list_frame >li').outerWidth(true) * $('#thumbs_list_frame >li').length) + 'px');
	$('#thumbs_list').trigger('goto', 0);
	serialScrollFixLock('', '', '', '', 0);

Jak to ładnie zrobić by w wersji dla > 992px była wersja Pionowa a ponizej <992px wersja pozioma ?

Edited by IgorDev (see edit history)
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
IgorDev Newbie

IgorDev

Posted
  • Author
Posted

Czyli jeśli dobrze zrozumiałem wystarczy zrobić coś takiego jak poniżej by przewijanie zaczeło działać w pionie ? 

 

if ($(window).width() > 767 ){
		
		if (parseInt($('#thumbs_list_frame >li:visible').length) != parseInt($('#thumbs_list_frame >li').length))
			$('#wrapResetImages').stop(true, true).show();
		else
			$('#wrapResetImages').stop(true, true).hide();

		$('#thumbs_list_frame').height(parseInt($('#thumbs_list_frame >li').outerHeight(true) * $('#thumbs_list_frame >li').length) + 'px');
		$('#thumbs_list').trigger('goto', 0);
		serialScrollFixLock('', '', '', '', 0);
		
	}else{
		
		if (parseInt($('#thumbs_list_frame >li:visible').length) != parseInt($('#thumbs_list_frame >li').length))
			$('#wrapResetImages').stop(true, true).show();
		else
			$('#wrapResetImages').stop(true, true).hide();

		$('#thumbs_list_frame').width(parseInt($('#thumbs_list_frame >li').outerWidth(true) * $('#thumbs_list_frame >li').length) + 'px');
		$('#thumbs_list').trigger('goto', 0);
		serialScrollFixLock('', '', '', '', 0);
		
	}
Link to comment
Share on other sites
  • 0
() Maciej () Enthusiast

() Maciej ()

Posted
Posted

Niezupełnie. Pominęłeś jeszcze .length, która ma sprawdzać długość obrazka na osi OX i na tej podstawie rozmieszczać kolejne obrazki. O ile są to kwadraty to jeszcze można oko przymknąć, bo kod powinien działać. Ale jeśli będzie to prostokąt to mierzenie długości obrazka w poziomie jest bez sensu.

 

Poza tym trzeba by też poprawić klasę w plikach CSS z rozmieszczeniem tagu " li " i dopisać odpowiednie formatowanie do odpowiedniej funkcji.

Nie mam obecnie jak tego przetestować na telefonie :)

Link to comment
Share on other sites
  • 0
IgorDev Newbie

IgorDev

Posted
  • Author
Posted (edited)

kurde próbuje, ale przewijanie ani ruszy. 
Mogę podesłać to co próbowałem zrobić w jS jak i CSS, ale powiem szczerze, nie wiem dlaczego to może nie działać.

Przede wszystkim w pliku product.js

w .serialScroll dałem warunek, 

if ($(window).width() > 767 ){
	if (!!$.prototype.serialScroll)
		$('#thumbs_list').serialScroll({
			axis:'y',
			prev:'#view_scroll_up',
			next:'#view_scroll_down',
		});
}else{
	if (!!$.prototype.serialScroll)
		$('#thumbs_list').serialScroll({
			axis:'x',
			prev:'#view_scroll_left',
			next:'#view_scroll_right',
		});
}

(reszta w obu .serialScroll jest taka sama czyli:

		
items:'li:visible',
offset:0,
start:0,			
stop:true,
onBefore:serialScrollFixLock,
duration:700,
lazy: true,
lock: false,
force:false,
cycle:false

W funkcji serialScrollFixLock także dokonałem zmiany z warunkiem 

if ($(window).width() > 767 ){
	var serialScrollNbImages = $('#thumbs_list li:visible').height;
	var leftArrow = position == 0 ? true : false;
	var rightArrow = position + serialScrollNbImagesDisplayed >= serialScrollNbImages ? true : false;

	$('#view_scroll_up').css('cursor', leftArrow ? 'default' : 'pointer').css('display', leftArrow ? 'none' : 'block').fadeTo(0, leftArrow ? 0 : 1);
	$('#view_scroll_down').css('cursor', rightArrow ? 'default' : 'pointer').fadeTo(0, rightArrow ? 0 : 1).css('display', rightArrow ? 'none' : 'block');
	return true;
}else{
	var serialScrollNbImages = $('#thumbs_list li:visible').length;
	var leftArrow = position == 0 ? true : false;
	var rightArrow = position + serialScrollNbImagesDisplayed >= serialScrollNbImages ? true : false;

	$('#view_scroll_left').css('cursor', leftArrow ? 'default' : 'pointer').css('display', leftArrow ? 'none' : 'block').fadeTo(0, leftArrow ? 0 : 1);
	$('#view_scroll_right').css('cursor', rightArrow ? 'default' : 'pointer').fadeTo(0, rightArrow ? 0 : 1).css('display', rightArrow ? 'none' : 'block');
	return true;
}

No i plik CSS. 
 

/* miniatures */
.pb-left-column #views_block {
  margin-top: 10px; }
  @media (max-width: 991px) {
    .pb-left-column #views_block {	} 
  }
 
 @media (max-width: 991px) {
	.pb-left-column #views_block #thumbs_list_pagination_pc {display:none;}
	.pb-left-column #views_block #thumbs_list_pagination_mobile{display:block;}
 }
 @media (min-width: 991px) {
	.pb-left-column #views_block #thumbs_list_pagination_pc {display:block;}
	.pb-left-column #views_block #thumbs_list_pagination_mobile{display:none;}
 }
#thumbs_list {
  overflow: hidden;
  float: left;
  height: 450px; }
  @media (min-width: 992px) and (max-width: 1199px) {
    #thumbs_list {
      height: 294px; } }
  @media (max-width: 991px) {
    #thumbs_list {
      width: 80%; 
	  margin:auto;}
	  }
  #thumbs_list ul#thumbs_list_frame {
    list-style-type: none;
    padding-left: 0;
    overflow: hidden;
	height: 450px!important; 
	width:90px !important; }
  #thumbs_list li {
    height: 90px;
    width: 90px;
    cursor: pointer;
    margin-right: 8px;
    line-height: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
	
    @media (max-width: 991px) {
		
	  #thumbs_list ul#thumbs_list_frame {
		height: 75px;
		width: 100% !important; }
		
      #thumbs_list li {
		float:left;
        width: 76px;
        height: 76px;
        margin-right: 6px; } }
		
		
		
    #thumbs_list li a {
      display: block;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background: #fbfbfb;
	  position: relative;
	  margin: 0;}
      #thumbs_list li a:hover, #thumbs_list li a.shown {
		background: rgba(0, 0, 0, 0.78);
	}
	 #thumbs_list li a:hover .thumb_hover {
		display: block;
	}
	 #thumbs_list li a .thumb_hover{
		display: none;
		position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;
		background-color: rgba(0,0,0,0.3); 
	}
	
    #thumbs_list li img {
      border: 1px solid #fff;
      width: 100%;
      height: 100%;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }

.show-right-column.hide-left-column #thumbs_list, .hide-right-column.show-left-column #thumbs_list {
  width: 294px; }
  @media (min-width: 992px) and (max-width: 1199px) {
    .show-right-column.hide-left-column #thumbs_list, .hide-right-column.show-left-column #thumbs_list {
      width: 194px; } }
  @media (min-width: 768px) and (max-width: 991px) {
    .show-right-column.hide-left-column #thumbs_list, .hide-right-column.show-left-column #thumbs_list {
      width: 82px; } }
  @media (max-width: 767px) {
    .show-right-column.hide-left-column #thumbs_list, .hide-right-column.show-left-column #thumbs_list {
      width: 196px; } }

span.view_scroll_spacer {
  float: left;
  width: 39px;
  padding-left: 12px; }
  @media (min-width: 992px) and (max-width: 1199px) {
    span.view_scroll_spacer {
      width: 45px;
      padding-left: 18px; } }
  @media (min-width: 768px) and (max-width: 991px) {
    span.view_scroll_spacer {
      width: 30px;
      padding-left: 3px; } }
  @media (max-width: 767px) {
	span.view_scroll_spacer {
		width: 25px;
		padding-left: 0;
	}
	}

.show-right-column.hide-left-column span.view_scroll_spacer, .hide-right-column.show-left-column span.view_scroll_spacer {
  width: 27px;
  padding-left: 2px; }
  @media (min-width: 992px) and (max-width: 1199px) {
    .show-right-column.hide-left-column span.view_scroll_spacer, .hide-right-column.show-left-column span.view_scroll_spacer {
      width: 44px;
      padding-left: 16px; } }
  @media (min-width: 768px) and (max-width: 991px) {
    .show-right-column.hide-left-column span.view_scroll_spacer, .hide-right-column.show-left-column span.view_scroll_spacer {
      width: 41px;
      padding-left: 13px; } }
  @media (max-width: 767px) {
    .show-right-column.hide-left-column span.view_scroll_spacer, .hide-right-column.show-left-column span.view_scroll_spacer {
      width: 45px;
      padding-left: 14px; } }

#view_scroll_left,
#view_scroll_right,
#view_scroll_up,
#view_scroll_down {
  height: 20px;
  width: 20px;
  line-height: 0;
  font-size: 0;
  overflow: hidden; }
  @media (min-width: 768px) and (max-width: 991px) {
    #view_scroll_left,
    #view_scroll_right {
      margin-top: 28px; } }
  #view_scroll_left:before,
  #view_scroll_right:before,
  #view_scroll_up:before,
  #view_scroll_down:before  {
    padding-left: 2px;
    color: #c0c0c0;
    font-family: "FontAwesome";
    font-size: 20px;
    line-height: 22px; }
  #view_scroll_left:hover:before,
  #view_scroll_right:hover:before,
  #view_scroll_up:hover:before,
  #view_scroll_down:hover:before {
    color: #333; }

#view_scroll_down,
#view_scroll_right {
  margin-top: 5px;
  margin-left: 35px;
  float: left; }
  #view_scroll_down:before,
  #view_scroll_right:before {
	content:"\f107";
	}

#view_scroll_up,
#view_scroll_left {
  margin-top: 0; 
  margin-left: 25px;}
  #view_scroll_up:before,
  #view_scroll_left:before {
	content:"\f106";
    padding-right: 2px; }

Będę wdzięczny za pomoc. 
 

Edited by IgorDev (see edit history)
Link to comment
Share on other sites
  • 0
() Maciej () Enthusiast

() Maciej ()

Posted
Posted

Nie za bardzo mam teraz czas grzebać się w wersji 1.6.xx, ale na wzór dam Ci zawartość plików product.tpl oraz product.js ze strony gdzie przewijanie w pionie działa na wersji 1.5.4.1.

 

Jak po świętach znajdę chwilę czasu żeby to ogarnąć na 1.6.xx to możliwe, że podam Ci praktycznie gotowca. Wcześniej nie dam rady :)

Lokalizacja plików : themes/szablon/ i podfolder js   oraz product.css z folderu css

 

Product.tpl

{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2012 PrestaShop SA
*  @version  Release: $Revision: 6625 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

{include file="$tpl_dir./errors.tpl"}
{if $errors|@count == 0}
<script type="text/javascript">
// <![CDATA[

// PrestaShop internal settings
var currencySign = '{$currencySign|html_entity_decode:2:"UTF-8"}';
var currencyRate = '{$currencyRate|floatval}';
var currencyFormat = '{$currencyFormat|intval}';
var currencyBlank = '{$currencyBlank|intval}';
var taxRate = {$tax_rate|floatval};
var jqZoomEnabled = {if $jqZoomEnabled}true{else}false{/if};

//JS Hook
var oosHookJsCodeFunctions = new Array();

// Parameters
var id_product = '{$product->id|intval}';
var productHasAttributes = {if isset($groups)}true{else}false{/if};
var quantitiesDisplayAllowed = {if $display_qties == 1}true{else}false{/if};
var quantityAvailable = {if $display_qties == 1 && $product->quantity}{$product->quantity}{else}0{/if};
var allowBuyWhenOutOfStock = {if $allow_oosp == 1}true{else}false{/if};
var availableNowValue = '{$product->available_now|escape:'quotes':'UTF-8'}';
var availableLaterValue = '{$product->available_later|escape:'quotes':'UTF-8'}';
var productPriceTaxExcluded = {$product->getPriceWithoutReduct(true)|default:'null'} - {$product->ecotax};
var productBasePriceTaxExcluded = {$product->base_price} - {$product->ecotax};

var reduction_percent = {if $product->specificPrice AND $product->specificPrice.reduction AND $product->specificPrice.reduction_type == 'percentage'}{$product->specificPrice.reduction*100}{else}0{/if};
var reduction_price = {if $product->specificPrice AND $product->specificPrice.reduction AND $product->specificPrice.reduction_type == 'amount'}{$product->specificPrice.reduction|floatval}{else}0{/if};
var specific_price = {if $product->specificPrice AND $product->specificPrice.price}{$product->specificPrice.price}{else}0{/if};
var product_specific_price = new Array();
{foreach from=$product->specificPrice key='key_specific_price' item='specific_price_value'}
	product_specific_price['{$key_specific_price}'] = '{$specific_price_value}';
{/foreach}
var specific_currency = {if $product->specificPrice AND $product->specificPrice.id_currency}true{else}false{/if};
var group_reduction = '{$group_reduction}';
var default_eco_tax = {$product->ecotax};
var ecotaxTax_rate = {$ecotaxTax_rate};
var currentDate = '{$smarty.now|date_format:'%Y-%m-%d %H:%M:%S'}';
var maxQuantityToAllowDisplayOfLastQuantityMessage = {$last_qties};
var noTaxForThisProduct = {if $no_tax == 1}true{else}false{/if};
var displayPrice = {$priceDisplay};
var productReference = '{$product->reference|escape:'htmlall':'UTF-8'}';
var productAvailableForOrder = {if (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE}'0'{else}'{$product->available_for_order}'{/if};
var productShowPrice = '{if !$PS_CATALOG_MODE}{$product->show_price}{else}0{/if}';
var productUnitPriceRatio = '{$product->unit_price_ratio}';
var idDefaultImage = {if isset($cover.id_image_only)}{$cover.id_image_only}{else}0{/if};
var stock_management = {$stock_management|intval};
{if !isset($priceDisplayPrecision)}
	{assign var='priceDisplayPrecision' value=2}
{/if}
{if !$priceDisplay || $priceDisplay == 2}
	{assign var='productPrice' value=$product->getPrice(true, $smarty.const.NULL, $priceDisplayPrecision)}
	{assign var='productPriceWithoutReduction' value=$product->getPriceWithoutReduct(false, $smarty.const.NULL)}
{elseif $priceDisplay == 1}
	{assign var='productPrice' value=$product->getPrice(false, $smarty.const.NULL, $priceDisplayPrecision)}
	{assign var='productPriceWithoutReduction' value=$product->getPriceWithoutReduct(true, $smarty.const.NULL)}
{/if}

var productPriceWithoutReduction = '{$productPriceWithoutReduction}';
var productPrice = '{$productPrice}';

// Customizable field
var img_ps_dir = '{$img_ps_dir}';
var customizationFields = new Array();
{assign var='imgIndex' value=0}
{assign var='textFieldIndex' value=0}
{foreach from=$customizationFields item='field' name='customizationFields'}
	{assign var="key" value="pictures_`$product->id`_`$field.id_customization_field`"}
	customizationFields[{$smarty.foreach.customizationFields.index|intval}] = new Array();
	customizationFields[{$smarty.foreach.customizationFields.index|intval}][0] = '{if $field.type|intval == 0}img{$imgIndex++}{else}textField{$textFieldIndex++}{/if}';
	customizationFields[{$smarty.foreach.customizationFields.index|intval}][1] = {if $field.type|intval == 0 && isset($pictures.$key) && $pictures.$key}2{else}{$field.required|intval}{/if};
{/foreach}

// Images
var img_prod_dir = '{$img_prod_dir}';
var combinationImages = new Array();

{if isset($combinationImages)}
	{foreach from=$combinationImages item='combination' key='combinationId' name='f_combinationImages'}
		combinationImages[{$combinationId}] = new Array();
		{foreach from=$combination item='image' name='f_combinationImage'}
			combinationImages[{$combinationId}][{$smarty.foreach.f_combinationImage.index}] = {$image.id_image|intval};
		{/foreach}
	{/foreach}
{/if}

combinationImages[0] = new Array();
{if isset($images)}
	{foreach from=$images item='image' name='f_defaultImages'}
		combinationImages[0][{$smarty.foreach.f_defaultImages.index}] = {$image.id_image};
	{/foreach}
{/if}

// Translations
var doesntExist = '{l s='This combination does not exist for this product. Please select another combination.' js=1}';
var doesntExistNoMore = '{l s='This product is no longer in stock' js=1}';
var doesntExistNoMoreBut = '{l s='with those attributes but is available with others.' js=1}';
var uploading_in_progress = '{l s='Uploading in progress, please be patient.' js=1}';
var fieldRequired = '{l s='Please fill in all the required fields before saving your customization.' js=1}';

{if isset($groups)}
	// Combinations
	{foreach from=$combinations key=idCombination item=combination}
		var specific_price_combination = new Array();
		var available_date = new Array();
		specific_price_combination['reduction_percent'] = {if $combination.specific_price AND $combination.specific_price.reduction AND $combination.specific_price.reduction_type == 'percentage'}{$combination.specific_price.reduction*100}{else}0{/if};
		specific_price_combination['reduction_price'] = {if $combination.specific_price AND $combination.specific_price.reduction AND $combination.specific_price.reduction_type == 'amount'}{$combination.specific_price.reduction}{else}0{/if};
		specific_price_combination['price'] = {if $combination.specific_price AND $combination.specific_price.price}{$combination.specific_price.price}{else}0{/if};
		specific_price_combination['reduction_type'] = '{if $combination.specific_price}{$combination.specific_price.reduction_type}{/if}';
		specific_price_combination['id_product_attribute'] = {if $combination.specific_price}{$combination.specific_price.id_product_attribute|intval}{else}0{/if};
		available_date['date'] = '{$combination.available_date}';
		available_date['date_formatted'] = '{dateFormat date=$combination.available_date full=false}';
		addCombination({$idCombination|intval}, new Array({$combination.list}), {$combination.quantity}, {$combination.price}, {$combination.ecotax}, {$combination.id_image}, '{$combination.reference|addslashes}', {$combination.unit_impact}, {$combination.minimal_quantity}, available_date, specific_price_combination);
	{/foreach}
{/if}

{if isset($attributesCombinations)}
	// Combinations attributes informations
	var attributesCombinations = new Array();
	{foreach from=$attributesCombinations key=id item=aC}
		tabInfos = new Array();
		tabInfos['id_attribute'] = '{$aC.id_attribute|intval}';
		tabInfos['attribute'] = '{$aC.attribute}';
		tabInfos['group'] = '{$aC.group}';
		tabInfos['id_attribute_group'] = '{$aC.id_attribute_group|intval}';
		attributesCombinations.push(tabInfos);
	{/foreach}
{/if}
//]]>
</script>


<div id="primary_block" class="clearfix" itemscope="" itemtype="http://schema.org/Product">

	{if isset($adminActionDisplay) && $adminActionDisplay}
	<div id="admin-action">
		<p>{l s='This product is not visible to your customers.'}
		<input type="hidden" id="admin-action-product-id" value="{$product->id}" />
		<input type="submit" value="{l s='Publish'}" class="exclusive" onclick="submitPublishProduct('{$base_dir}{$smarty.get.ad|escape:'htmlall':'UTF-8'}', 0, '{$smarty.get.adtoken|escape:'htmlall':'UTF-8'}')"/>
		<input type="submit" value="{l s='Back'}" class="exclusive" onclick="submitPublishProduct('{$base_dir}{$smarty.get.ad|escape:'htmlall':'UTF-8'}', 1, '{$smarty.get.adtoken|escape:'htmlall':'UTF-8'}')"/>
		</p>
		<p id="admin-action-result"></p>
		</p>
	</div>
	{/if}

	{if isset($confirmation) && $confirmation}
	<p class="confirmation">
		{$confirmation}
	</p>
	{/if}

	<!-- right infos-->
	<div id="pb-right-column" {if (isset($images) && count($images) < 2) || !isset($images)}class="no_thumbs"{/if}>
		<!-- product img-->
         <div class="clearfix">
		<div id="image-block">
		{if $have_image}
			<span id="view_full_size">
                {if $product->new}<span class="new">{l s='New'}</span>{/if}
                        	{if $product->on_sale}
					<span class="discount {if $product->new}discount2{/if}">{l s='On sale!'}</span>
				{elseif $product->specificPrice AND $product->specificPrice.reduction AND $productPriceWithoutReduction > $productPrice}
					<span class="discount {if $product->new}discount2{/if} reduced_price">{l s='Reduced price!'}</span>
				{/if}
				<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html'}"{if $jqZoomEnabled && $have_image} class="jqzoom"{/if} title="{if !empty($cover.legend)}{$cover.legend|escape:'htmlall':'UTF-8'}{else}{$product->name|escape:'htmlall':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'htmlall':'UTF-8'}{else}{$product->name|escape:'htmlall':'UTF-8'}{/if}" id="bigpic" />
				
				<span class="span_link">{l s='View full size'}</span>
			</span>
		{else}
			<span id="view_full_size">
               {if $product->new}<span class="new">{l s='New'}</span>{/if}
                 	{if $product->on_sale}
					<span class="discount {if $product->new}discount2{/if}">{l s='On sale!'}</span>
				{elseif $product->specificPrice AND $product->specificPrice.reduction AND $productPriceWithoutReduction > $productPrice}
					<span class="discount {if $product->new}discount2{/if}">{l s='Reduced price!'}</span>
				{/if}
				<img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" />
				<span class="span_link">{l s='View full size'}</span>
			</span>
		{/if}
		</div>

		{if isset($images) && count($images) > 0}
		<!-- thumbnails -->
		<div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
		{if isset($images) && count($images) > 3}<span class="view_scroll_spacer"><a id="view_scroll_left" class="hidden" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a></span>{/if}
		<div id="thumbs_list">
			<ul id="thumbs_list_frame">
				{if isset($images)}
				{foreach from=$images item=image name=thumbnails}
					{assign var=imageIds value="`$product->id`-`$image.id_image`"}
					{if !empty($image.legend)}
						{assign var=imageTitlte value=$image.legend|escape:'htmlall':'UTF-8'}
					{else}
						{assign var=imageTitlte value=$product->name|escape:'htmlall':'UTF-8'}
					{/if}
					<li id="thumbnail_{$image.id_image}">
						<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$imageTitlte}">
							<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')|escape:'html'}" alt="{$imageTitlte}" title="{$imageTitlte}"  />
						</a>
					</li>
					{/foreach}
				{/if}
			</ul>
		</div>
		{if isset($images) && count($images) > 3}<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>{/if}
		</div>
		{/if}
       </div>
	<div {if isset($images) && count($images) > 1}class="links_margin" {else} class="links_margin_top" {/if}>
    	{if isset($images) && count($images) > 1}<p class="resetimg clear"><span id="wrapResetImages" style="display: none;"><img src="{$img_dir}icon/cancel_11x13.gif" alt="{l s='Cancel'}" width="11" height="13"/> <a id="resetImages" href="{$link->getProductLink($product)}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></span></p>{/if}
		<!-- usefull links-->
        <!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
{if isset($warehouse_vars.addthis) && ($warehouse_vars.addthis == "0")}
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-506085301209b251"></script>
{else}
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid={$warehouse_vars.addthis}"></script>
{/if}

<!-- AddThis Button END -->
	{if isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS}{$HOOK_PRODUCT_ACTIONS}{/if}
		<ul id="usefull_link_block">
        
			{if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}
			<li class="print"><a href="javascript:print();">{l s='Print'}</a></li>
			{if $have_image && !$jqZoomEnabled}
			{/if}
		</ul>
        </div>
	</div>

	<!-- left infos-->
	<div id="pb-left-column" {if isset($images) && count($images) < 2}class="no_thumbs2"{/if}>
      <div class="product_title">
      

		<div class="left_title"><h1 id="ajax_product_name"><span itemprop="name">{$product->name|escape:'htmlall':'UTF-8'}</span></h1>
        {if isset($warehouse_vars.yotpo_stars)  && $warehouse_vars.yotpo_stars == 1}
  <div class="yotpo bottomLine" 
data-appkey="{$yotpoAppkey|escape:'htmlall':'UTF-8'}"
data-domain="{$yotpoDomain|escape:'htmlall':'UTF-8'}"
data-product-id="{$yotpoProductId|intval}"
data-product-models="{$yotpoProductModel|escape:'htmlall':'UTF-8'}"
data-name="{$yotpoProductName|escape:'htmlall':'UTF-8'}" 
data-url="{$link->getProductLink($smarty.get.id_product, $smarty.get.id_product.link_rewrite)|escape:'htmlall':'UTF-8'}" 
data-image-url="{$yotpoProductImageUrl|escape:'htmlall':'UTF-8'}" 
data-description="{$yotpoProductDescription|escape:'htmlall':'UTF-8'}" 
data-bread-crumbs="{$yotpoProductBreadCrumbs|escape:'htmlall':'UTF-8'}"
data-lang="{$yotpoLanguage|escape:'htmlall':'UTF-8'}"> 
</div>
   {/if}     
            {if $product_manufacturer->id_manufacturer}<a itemprop="brand" itemscope="" itemtype="http://schema.org/Organization" href="{$link->getmanufacturerLink($product->id_manufacturer, $product->link_rewrite)}" title={$product->manufacturer_name|escape:'htmlall':'UTF-8'}>   <span itemprop="name" style="display: none">{$product_manufacturer->name}</span>
    {assign var="myfile" value="img/m/{$product_manufacturer->id_manufacturer}-mf_image2.jpg"}
{if file_exists($myfile)}<img itemprop="image" class="imglog" src="{$base_dir_ssl}img/m/{$product_manufacturer->id_manufacturer}-mf_image2.jpg" />{else}<div class="manname">{l s='Manufacturer:'} {$product_manufacturer->name}</div>{/if}</a> {/if}
           <p {if !$product->reference}class="hidden" {/if}><span>{l s='Reference:'}</span> <span id="product_reference" itemprop="sku">{$product->reference|escape:'htmlall':'UTF-8'}</span></p>
   </div>
    </div>

		{if $product->description_short OR $packItems|@count > 0}
		<div id="short_description_block">
			{if $product->description_short}
				<div id="short_description_content" class="rte align_justify" itemprop="description">{$product->description_short}</div>
			{/if}
			{if $product->description}
			<p class="buttons_bottom_block"><a href="javascript:{ldelim}{rdelim}" class="button">{l s='More details'}</a></p>
			{/if}
			{if $packItems|@count > 0}
			<div class="short_description_pack">
				<h3>{l s='Pack content'}</h3>
				{foreach from=$packItems item=packItem}
				<div class="pack_content">
					{$packItem.pack_quantity} x <a href="{$link->getProductLink($packItem.id_product, $packItem.link_rewrite, $packItem.category)}">{$packItem.name|escape:'htmlall':'UTF-8'}</a>
					<p>{$packItem.description_short}</p>
				</div>
				{/foreach}
			</div>
			{/if}
		</div>
		{/if}

		{*{if isset($colors) && $colors}
		<!-- colors -->
		<div id="color_picker">
			<p>{l s='Pick a color:' js=1}</p>
			<div class="clear"></div>
			<ul id="color_to_pick_list" class="clearfix">
			{foreach from=$colors key='id_attribute' item='color'}
				<li><a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" width="20" height="20" />{/if}</a></li>
			{/foreach}
			</ul>
			<div class="clear"></div>
		</div>
		{/if}*}

		{if ($product->show_price AND !isset($restricted_country_mode)) OR isset($groups) OR $product->reference OR (isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS)}
		<!-- add to cart form-->
		<form id="buy_block" {if $PS_CATALOG_MODE AND !isset($groups) AND $product->quantity > 0}class="hidden"{/if} action="{$link->getPageLink('cart')}" method="post">

			<!-- hidden datas -->
			<p class="hidden">
				<input type="hidden" name="token" value="{$static_token}" />
				<input type="hidden" name="id_product" value="{$product->id|intval}" id="product_page_product_id" />
				<input type="hidden" name="add" value="1" />
				<input type="hidden" name="id_product_attribute" id="idCombination" value="" />
			</p>

			<div class="product_attributes {if !isset($groups)} noattr{/if} {if !($product->description_short)} no_top_border {/if}clearfix">
                 		<!-- Out of stock hook -->
	
				{$HOOK_PRODUCT_OOS}
		

				{if isset($groups)}
				<!-- attributes -->
				<div id="attributes">
				{foreach from=$groups key=id_attribute_group item=group}
					{if $group.attributes|@count}
						<fieldset class="attribute_fieldset">
							<label class="attribute_label" for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'}:</label>
							{assign var="groupName" value="group_$id_attribute_group"}
							<div class="attribute_list">
							{if ($group.group_type == 'select')}
								<select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select" onchange="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
									{foreach from=$group.attributes key=id_attribute item=group_attribute}
										<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
									{/foreach}
								</select>
							{elseif ($group.group_type == 'color')}
								<ul id="color_to_pick_list" class="clearfix">
							{assign var="default_colorpicker" value=""}
                               {assign var=val value=1}
									{foreach from=$group.attributes key=id_attribute item=group_attribute}
									<li class="{if ($val>5)} color_no_margin{/if} {if $group.default == $id_attribute}selected{/if}">
										<a id="color_{$id_attribute|intval}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}" style="background: {$colors.$id_attribute.value};" title="{$colors.$id_attribute.name}" onclick="colorPickerClick(this);getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
											{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
												<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="20" height="20" /><br>
											{/if}
										</a>
									</li>
									{if ($group.default == $id_attribute)}
										{$default_colorpicker = $id_attribute}
									{/if}
                                     {assign var=val value=$val+1}
									{/foreach}
								</ul>
								<input type="hidden" class="color_pick_hidden" name="{$groupName}" value="{$default_colorpicker}" />
							{elseif ($group.group_type == 'radio')}
								{foreach from=$group.attributes key=id_attribute item=group_attribute}
									<input type="radio" class="attribute_radio" name="{$groupName}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} onclick="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
									{$group_attribute|escape:'htmlall':'UTF-8'}<br/>
								{/foreach}
							{/if}
							</div>
						</fieldset>
					{/if}
				{/foreach}
				</div>
			{/if}



			<!-- availability -->
            {assign var=non value=none1}
			<p id="availability_statut"{if ($product->quantity <= 0 && !$product->available_later && $allow_oosp) OR ($product->quantity > 0 && !$product->available_now) OR !$product->available_for_order OR $PS_CATALOG_MODE}      {assign var=non value=none} style="display: none;"{/if}>
				<!-- <span id="availability_label">{l s='Availability:'}</span>-->
				<span id="availability_value"{if $product->quantity <= 0} class="warning_inline"{/if}>
				{if $product->quantity <= 0}{if $allow_oosp}{$product->available_later}{else}{l s='This product is no longer in stock'}{/if}{else}{$product->available_now}{/if}</span>{if ($display_qties == 1 && !$PS_CATALOG_MODE && $product->available_for_order)}<p id="pQuantityAvailable"{if $product->quantity <= 0} style="display: none;"{/if}>
					<label id="availability_label" {if ($non!=none)} class="hidden"{/if}>{l s='Availability:'}</label>
                <span id="quantityAvailable">{$product->quantity|intval}</span>
				<span  {if $product->quantity > 1} style="display: none;"{/if} id="quantityAvailableTxt">{l s='item in stock'}</span>
				<span   {if $product->quantity == 1} style="display: none;"{/if} id="quantityAvailableTxtMultiple">{l s='items in stock'}</span>
			</p>

			{/if}
            
                        		<p id="availability_date"{if ($product->quantity > 0) OR !$product->available_for_order OR $PS_CATALOG_MODE OR !isset($product->available_date) OR $product->available_date < $smarty.now|date_format:'%Y-%m-%d'} style="display: none;"{/if}>
				<span id="availability_date_label">{l s='Availability date:'}</span>
				<span id="availability_date_value">{dateFormat date=$product->available_date full=false}</span>
			</p>



	

			<p class="warning_inline" id="last_quantities"{if ($product->quantity > $last_qties OR $product->quantity <= 0) OR $allow_oosp OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none"{/if} >{l s='Warning: Last items in stock!'}</p>
		</div>

		<div class="content_prices clearfix">
                          {if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE}
                <script type="text/javascript">
				$('#mailalertt:hidden').fadeIn(600);
				</script>
			{/if}
		
        
        			<!-- quantity wanted -->
			<p id="quantity_wanted_p" class="clearfix"{if (!$allow_oosp && $product->quantity <= 0) OR $virtual OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
				<label>{l s='Quantity:'}</label>
				<input type="text" name="qty" id="quantity_wanted" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" size="2" maxlength="3" {if $product->minimal_quantity > 1}onkeyup="checkMinimalQuantity({$product->minimal_quantity});"{/if} />
			<span id="q_modify">
            <span id="q_up">quantity up</span>
            <span id="q_down">quantity down</span>
            </span>
            </p>


        
			<!-- prices -->
			{if $product->show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}

		
			<div class="price">
					{if !$priceDisplay || $priceDisplay == 2}
					{assign var='productPrice' value=$product->getPrice(true, $smarty.const.NULL, $priceDisplayPrecision)}
					{assign var='productPriceWithoutReduction' value=$product->getPriceWithoutReduct(false, $smarty.const.NULL)}
				{elseif $priceDisplay == 1}
					{assign var='productPrice' value=$product->getPrice(false, $smarty.const.NULL, $priceDisplayPrecision)}
					{assign var='productPriceWithoutReduction' value=$product->getPriceWithoutReduct(true, $smarty.const.NULL)}
				{/if}
				<label>{l s='Price:'}</label>
				<p class="our_price_display" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
                
                {if ($product->quantity <= 0 && !$product->available_later && $allow_oosp) OR ($product->quantity > 0 && !$product->available_now) OR !$product->available_for_order OR $PS_CATALOG_MODE}
 <link itemprop="availability" href="http://schema.org/InStock" content="in_stock" />
 {else}
 <link itemprop="availability" href="http://schema.org/OutOfStock" content="out_of_stock" />
             {/if}
                                
                
                				{if $priceDisplay >= 0 && $priceDisplay <= 2}
					<span id="our_price_display" itemprop="price">{convertPrice price=$productPrice}</span>
                    <meta itemprop="priceCurrency" content="{$currency->iso_code}"/ ><span class="currency_price">{$currencySign}</span>
					<!--{if $tax_enabled  && ((isset($display_tax_label) && $display_tax_label == 1) OR !isset($display_tax_label))}
						{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}
					{/if}-->
				{/if}
              
								<span id="old_price"{if !$product->specificPrice || !$product->specificPrice.reduction} class="hidden"{/if}>
			{if $priceDisplay >= 0 && $priceDisplay <= 2}
					<span id="old_price_display">{if $productPriceWithoutReduction > $productPrice}{convertPrice price=$productPriceWithoutReduction}{/if}</span>
					<!-- {if $tax_enabled && $display_tax_label == 1}{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}{/if} -->
			{/if}
			</span>
						
						<!-- {if $tax_enabled && $display_tax_label == 1}
							{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}
						{/if} -->
	
                
                
                
                
                
                
                
                
                
                
                
                
      
                
                
                
                
                
                
                
                
                
           			<span id="reduction_percent" {if !$product->specificPrice OR $product->specificPrice.reduction_type != 'percentage'} style="display:none;"{/if}><span id="reduction_percent_display">{if $product->specificPrice AND $product->specificPrice.reduction_type == 'percentage'}-{$product->specificPrice.reduction*100}%{/if}</span></span>
			<span id="reduction_amount" {if !$product->specificPrice OR $product->specificPrice.reduction_type != 'amount' || $product->specificPrice.reduction|intval ==0} style="display:none"{/if}>
				<span id="reduction_amount_display">
				{if $product->specificPrice AND $product->specificPrice.reduction_type == 'amount' AND $product->specificPrice.reduction|intval !=0}
					-{convertPrice price=$productPriceWithoutReduction-$productPrice|floatval}
				{/if}
				</span>
			</span></p>
                

				{if $priceDisplay == 2}
					<span id="pretaxe_price"><span id="pretaxe_price_display">{convertPrice price=$product->getPrice(false, $smarty.const.NULL)}</span> {l s='tax excl.'}</span>
				{/if}
                
           

			</div>
            
				<p id="add_to_cart"  {if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE}style="display:none"{/if} class="buttons_bottom_block">
					<input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive" />
				</p>

            
			
            			<!-- minimal quantity wanted -->
			<p id="minimal_quantity_wanted_p"{if $product->minimal_quantity <= 1 OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
				{l s='This product is not sold individually. You must select at least'} <b id="minimal_quantity_label">{$product->minimal_quantity}</b> {l s='quantity for this product.'}
			</p>
			{if $product->minimal_quantity > 1}
			<script type="text/javascript">
				checkMinimalQuantity();
			</script>
			{/if}
            
	
			{if $product->ecotax != 0}
				<p class="price-ecotax">{l s='include'} <span id="ecotax_price_display">{if $priceDisplay == 2}{$ecotax_tax_exc|convertAndFormatPrice}{else}{$ecotax_tax_inc|convertAndFormatPrice}{/if}</span> {l s='for green tax'}
					{if $product->specificPrice AND $product->specificPrice.reduction}
					<br />{l s='(not impacted by the discount)'}
					{/if}
				</p>
			{/if}
			{if !empty($product->unity) && $product->unit_price_ratio > 0.000000}
				 {math equation="pprice / punit_price"  pprice=$productPrice  punit_price=$product->unit_price_ratio assign=unit_price}
				<p class="unit-price"><span id="unit_price_display">{convertPrice price=$unit_price}</span> {l s='per'} {$product->unity|escape:'htmlall':'UTF-8'}</p>
			{/if}
			{*close if for show price*}
			{/if}
			
       	</div>
				{if isset($HOOK_EXTRA_RIGHT) && $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}
		</div>
		</form>
		{/if}

	</div>


{if (isset($quantity_discounts) && count($quantity_discounts) > 0)}
<!-- quantity discount -->
<ul class="idTabs clearfix">
	<li><a href="#discount" style="cursor: pointer" class="selected">{l s='Sliding scale pricing'}</a></li>
</ul>
<div id="quantityDiscount">
	<table class="std">
	<thead>
		<tr>
			<th>{l s='Product'}</th>
			<th>{l s='From (qty)'}</th>
			<th>{if Configuration::get('PS_DISPLAY_DISCOUNT_PRICE')}{l s='Price'}{else}{l s='Discount'}{/if}</th>
		</tr>
	</thead>
	<tbody>
		{foreach from=$quantity_discounts item='quantity_discount' name='quantity_discounts'}
		<tr id="quantityDiscount_{$quantity_discount.id_product_attribute}" class="quantityDiscount_{$quantity_discount.id_product_attribute}">
			<td>
				{if (isset($quantity_discount.attributes) && ($quantity_discount.attributes))}
					{$product->getProductName($quantity_discount.id_product, $quantity_discount.id_product_attribute)}
				{else}
					{$product->getProductName($quantity_discount.id_product)}
				{/if}
			</td>
			<td>{$quantity_discount.quantity|intval}</td>
			<td>
				{if $quantity_discount.price >= 0 OR $quantity_discount.reduction_type == 'amount'}
					{if Configuration::get('PS_DISPLAY_DISCOUNT_PRICE')}
						{convertPrice price=$productPrice-$quantity_discount.real_value|floatval}
					{else}
						-{convertPrice price=$quantity_discount.real_value|floatval}
					{/if}
				{else}
					{if Configuration::get('PS_DISPLAY_DISCOUNT_PRICE')}
						{convertPrice price = $productPrice-($productPrice*$quantity_discount.reduction)|floatval}
					{else}
						-{$quantity_discount.real_value|floatval}%
					{/if}
				{/if}
			</td>
		</tr>
		{/foreach}
	</tbody>
	</table>
</div>
{/if}


<!-- description and features -->
{if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($product) && $product->customizable) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments)}
<div id="more_info_block" class="clear">
	<ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
		{if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
		{if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
      	{if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
		{if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}
		{$HOOK_PRODUCT_TAB}
	</ul>
	<div id="more_info_sheets" class="sheets align_justify">
	{if isset($product) && $product->description}
		<!-- full description -->
		<div id="idTab1" class="rte">{$product->description}</div>
	{/if}
	{if isset($features) && $features}
		<!-- product's features -->
		<ul id="idTab2" class="bullet">
		{foreach from=$features item=feature}
            {if isset($feature.value)}
			    <li><div class="label">{$feature.name|escape:'htmlall':'UTF-8'}:</div><div class="value">{$feature.value|escape:'htmlall':'UTF-8'}</div></li>
            {/if}
		{/foreach}
		</ul>
	{/if}
    
	{if isset($attachments) && $attachments}
		<ul id="idTab9" class="bullet">
		{foreach from=$attachments item=attachment}
			<li><a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")}">{$attachment.name|escape:'htmlall':'UTF-8'}</a><br />{$attachment.description|escape:'htmlall':'UTF-8'}</li>
		{/foreach}
		</ul>
	{/if}


	<!-- Customizable products -->
	{if isset($product) && $product->customizable}
		<div id="idTab10" class="bullet customization_block">
			<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
				<p class="infoCustomizable">
					{l s='After saving your customized product, remember to add it to your cart.'}
					{if $product->uploadable_files}<br />{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
				</p>
				{if $product->uploadable_files|intval}
				<div class="customizableProductsFile">
					<h3>{l s='Pictures'}</h3>
					<ul id="uploadable_files" class="clearfix">
						{counter start=0 assign='customizationField'}
						{foreach from=$customizationFields item='field' name='customizationFields'}
							{if $field.type == 0}
								<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
									{if isset($pictures.$key)}
									<div class="customizationUploadBrowse">
										<img src="{$pic_dir}{$pictures.$key}_small" alt="" />
										<a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)}" title="{l s='Delete'}" >
											<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
										</a>
									</div>
									{/if}
									<div class="customizationUploadBrowse">
										<label class="customizationUploadBrowseDescription">{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your hard drive'}{/if}{if $field.required}<sup>*</sup>{/if}</label>
										<input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="customization_block_input {if isset($pictures.$key)}filled{/if}" />
									</div>
								</li>
								{counter}
							{/if}
						{/foreach}
					</ul>
				</div>
				{/if}
				{if $product->text_fields|intval}
				<div class="customizableProductsText">
					<h3>{l s='Text'}</h3>
					<ul id="text_fields">
					{counter start=0 assign='customizationField'}
					{foreach from=$customizationFields item='field' name='customizationFields'}
						{if $field.type == 1}
						<li class="customizationUploadLine{if $field.required} required{/if}">
							<label for ="textField{$customizationField}">{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field} {if !empty($field.name)}{$field.name}{/if}{if $field.required}<sup>*</sup>{/if}</label>
							<textarea type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="1" cols="40" class="customization_block_input" />{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea>
						</li>
						{counter}
						{/if}
					{/foreach}
					</ul>
				</div>
				{/if}
				<p id="customizedDatas">
					<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
					<input type="hidden" name="submitCustomizedDatas" value="1" />
					<input type="button" class="button" value="{l s='Save'}" onclick="javascript:saveCustomization()" />
					<span id="ajax-loader" style="display:none"><img src="{$img_ps_dir}loader.gif" alt="loader" /></span>
				</p>
			</form>
			<p class="clear required"><sup>*</sup> {l s='required fields'}</p>
		</div>
	{/if}

	{if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}{$HOOK_PRODUCT_TAB_CONTENT}{/if}
	</div>
</div>
{/if}

{if isset($packItems) && $packItems|@count > 0}
	<div id="blockpack" class="block">
		<h4>{l s='Pack content'}</h4>
        <ul id="pack_items">
        {foreach from=$packItems item=packitem name=$packitemlist}
        <li class="clearfix">
<a href="{$packitem.link|escape:'htmlall':'UTF-8'}" title="{$packitem.legend|escape:'htmlall':'UTF-8'}" class="product_image"><img src="{$link->getImageLink($packitem.link_rewrite, $packitem.id_image, 'medium_default')}" alt="{$packitem.legend|escape:'htmlall':'UTF-8'}" />
<div>
<h5><a href="{$packitem.link|escape:'htmlall':'UTF-8'}">{$packitem.name|truncate:32:'...':true|escape:'htmlall':'UTF-8'}</a></h5>
							<p class="product_accessories_price">
								{if $packitem.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<span class="price_pack">{if $priceDisplay != 1}{displayWtPrice p=$packitem.price}{else}{displayWtPrice p=$packitem.price_tax_exc}{/if}</span>
                                {if isset($packitem.reduction) && $packitem.reduction}
           <span class="old_price_pack">{convertPrice price=$packitem.price_without_reduction}</span>
           {/if}
                                {/if}
							</p></div>
</li>{/foreach}
</ul>
	</div>
{/if}


	{if isset($accessories) AND $accessories}
		<!-- accessories -->
        <section id="accesory-products_block_center" class="block products_block clearfix">
    	
        	<h4>{l s='Accessories'}</h4>
            	<div class="block_content">

            
            
                   <div id="accesory_products_slider"  class="flexslider_carousel">
          <ul class="slides">
					{foreach from=$accessories item=accessory name=accessories_list}
						{assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}
						<li class="ajax_block_product {if $smarty.foreach.accessories_list.first}first_item{elseif $smarty.foreach.accessories_list.last}last_item{else}item{/if} product_accessories_description">

						
								<div class="p_photo_container"><a href="{$accessoryLink|escape:'htmlall':'UTF-8'}" title="{$accessory.legend|escape:'htmlall':'UTF-8'}" class="product_image"><img src="{$link->getImageLink($accessory.link_rewrite, $accessory.id_image, 'home_default')}" alt="{$accessory.legend|escape:'htmlall':'UTF-8'}"   />
                                {if isset($accessory.new) && $accessory.new == 1}<span class="new">{l s='New'}</span>{/if}
                    {if isset($accessory.on_sale) && $accessory.on_sale && isset($accessory.show_price) && $accessory.show_price && !$PS_CATALOG_MODE}<span class="on_sale {if isset($accessory.new) && $accessory.new == 1} on_sale2{/if}">{l s='On sale!'}</span>
				{elseif isset($accessory.reduction) && $accessory.reduction && isset($accessory.show_price) && $accessory.show_price && !$PS_CATALOG_MODE}<span class="on_sale {if isset($accessory.new) && $accessory.new == 1} on_sale2{/if}">{l s='On sale!'}</span>{/if}
                                
                                </a>
                                {hook h='productlHook' productid=$accessory.id_product}</div>
                                
                               
                                
                                							<p class="product_name"><a href="{$accessoryLink|escape:'htmlall':'UTF-8'}">{$accessory.name|truncate:32:'...':true|escape:'htmlall':'UTF-8'}</a></p>


{if $accessory.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}
<p class="price_display">
<span class="price">{if $priceDisplay != 1}{displayWtPrice p=$accessory.price}{else}{displayWtPrice p=$accessory.price_tax_exc}{/if}</span>
</p>
{/if}


						</li>

					{/foreach}
		  </ul>
        </div></div>   </section>

	{/if}
    
    
    {if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}









{/if}

product.js

/*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2012 PrestaShop SA
*  @version  Release: $Revision: 7310 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*/


//global variables
var combinations = [];
var selectedCombination = [];
var globalQuantity = 0;
var colors = [];

//check if a function exists
function function_exists(function_name)
{
	if (typeof function_name == 'string')
		return (typeof window[function_name] == 'function');
	return (function_name instanceof Function);
}

//execute oosHook js code
function oosHookJsCode()
{
	for (var i = 0; i < oosHookJsCodeFunctions.length; i++)
	{
		if (function_exists(oosHookJsCodeFunctions[i]))
			setTimeout(oosHookJsCodeFunctions[i] + '()', 0);
	}
}

//add a combination of attributes in the global JS sytem
function addCombination(idCombination, arrayOfIdAttributes, quantity, price, ecotax, id_image, reference, unit_price, minimal_quantity, available_date, combination_specific_price)
{
	globalQuantity += quantity;

	var combination = [];
	combination['idCombination'] = idCombination;
	combination['quantity'] = quantity;
	combination['idsAttributes'] = arrayOfIdAttributes;
	combination['price'] = price;
	combination['ecotax'] = ecotax;
	combination['image'] = id_image;
	combination['reference'] = reference;
	combination['unit_price'] = unit_price;
	combination['minimal_quantity'] = minimal_quantity;
	combination['available_date'] = [];
	combination['available_date'] = available_date;
	combination['specific_price'] = [];
	combination['specific_price'] = combination_specific_price;
	combinations.push(combination);
}

// search the combinations' case of attributes and update displaying of availability, prices, ecotax, and image
function findCombination(firstTime)
{
	$('#minimal_quantity_wanted_p').fadeOut();
	$('#quantity_wanted').val(1);
	//create a temporary 'choice' array containing the choices of the customer
	var choice = [];
	$('#attributes select, #attributes input[type=hidden], #attributes input[type=radio]:checked').each(function(){
		choice.push($(this).val());
	});

	//testing every combination to find the conbination's attributes' case of the user
	for (var combination = 0; combination < combinations.length; ++combination)
	{
		//verify if this combinaison is the same that the user's choice
		var combinationMatchForm = true;
		$.each(combinations[combination]['idsAttributes'], function(key, value)
		{
			if (!in_array(value, choice))
				combinationMatchForm = false;
		});

		if (combinationMatchForm)
		{
			if (combinations[combination]['minimal_quantity'] > 1)
			{
				$('#minimal_quantity_label').html(combinations[combination]['minimal_quantity']);
				$('#minimal_quantity_wanted_p').fadeIn();
				$('#quantity_wanted').val(combinations[combination]['minimal_quantity']);
				$('#quantity_wanted').bind('keyup', function() {checkMinimalQuantity(combinations[combination]['minimal_quantity']);});
			}
			//combination of the user has been found in our specifications of combinations (created in back office)
			selectedCombination['unavailable'] = false;
			selectedCombination['reference'] = combinations[combination]['reference'];
			$('#idCombination').val(combinations[combination]['idCombination']);

			//get the data of product with these attributes
			quantityAvailable = combinations[combination]['quantity'];
			selectedCombination['price'] = combinations[combination]['price'];
			selectedCombination['unit_price'] = combinations[combination]['unit_price'];
			selectedCombination['specific_price'] = combinations[combination]['specific_price'];
			if (combinations[combination]['ecotax'])
				selectedCombination['ecotax'] = combinations[combination]['ecotax'];
			else
				selectedCombination['ecotax'] = default_eco_tax;

			//show the large image in relation to the selected combination
			if (combinations[combination]['image'] && combinations[combination]['image'] != -1)
				displayImage($('#thumb_' + combinations[combination]['image']).parent());

			//show discounts values according to the selected combination
			if (combinations[combination]['idCombination'] && combinations[combination]['idCombination'] > 0)
				displayDiscounts(combinations[combination]['idCombination']);

			//get available_date for combination product
			selectedCombination['available_date'] = combinations[combination]['available_date'];
			
			//update the display
			updateDisplay();

			if(typeof(firstTime) != 'undefined' && firstTime)
				refreshProductImages(0);
			else
				refreshProductImages(combinations[combination]['idCombination']);
			//leave the function because combination has been found
			return;
		}
	}
	//this combination doesn't exist (not created in back office)
	selectedCombination['unavailable'] = true;
	if (typeof(selectedCombination['available_date']) != 'undefined')
		delete selectedCombination['available_date'];
	updateDisplay();
}

//update display of the availability of the product AND the prices of the product
function updateDisplay()
{
	var productPriceDisplay = productPrice;
	var productPriceWithoutReductionDisplay = productPriceWithoutReduction;
	
	if (!selectedCombination['unavailable'] && quantityAvailable > 0 && productAvailableForOrder == 1)
	{
		//show the choice of quantities
		$('#quantity_wanted_p:hidden').show('slow');

		//show the "add to cart" button ONLY if it was hidden
		$('#add_to_cart:hidden').fadeIn(600);
		$('#mailalertt:visible').fadeOut(600);
		//hide the hook out of stock
		$('#oosHook').hide();
		
		//hide availability date
		$('#availability_date').fadeOut();

		//availability value management
		if (availableNowValue != '')
		{
			//update the availability statut of the product
			$('#availability_value').removeClass('warning_inline');
			$('#availability_value').text(availableNowValue);
			if(stock_management == 1)
				$('#availability_statut:hidden').show();
		}
		else
			$('#availability_statut:visible').hide();

		//'last quantities' message management
		if (!allowBuyWhenOutOfStock)
		{
			if (quantityAvailable <= maxQuantityToAllowDisplayOfLastQuantityMessage)
				$('#last_quantities').show('slow');
			else
				$('#last_quantities').hide('slow');
		}

		if (quantitiesDisplayAllowed)
		{
			$('#pQuantityAvailable:hidden').show('slow');
			$('#quantityAvailable').text(quantityAvailable);

			if (quantityAvailable < 2) // we have 1 or less product in stock and need to show "item" instead of "items"
			{
				$('#quantityAvailableTxt').show();
				$('#quantityAvailableTxtMultiple').hide();
			}
			else
			{
				$('#quantityAvailableTxt').hide();
				$('#quantityAvailableTxtMultiple').show();
			}
		}
	}
	else
	{
		//show the hook out of stock
		if (productAvailableForOrder == 1)
		{
			$('#oosHook').show();
			if ($('#oosHook').length > 0 && function_exists('oosHookJsCode'))
				oosHookJsCode();
		}

		//hide 'last quantities' message if it was previously visible
		$('#last_quantities:visible').hide('slow');

		//hide the quantity of pieces if it was previously visible
		$('#pQuantityAvailable:visible').hide('slow');

		//hide the choice of quantities
		if (!allowBuyWhenOutOfStock)
			$('#quantity_wanted_p:visible').hide('slow');

		//display that the product is unavailable with theses attributes
		if (!selectedCombination['unavailable'])
			$('#availability_value').text(doesntExistNoMore + (globalQuantity > 0 ? ' ' + doesntExistNoMoreBut : '')).addClass('warning_inline');
		else
		{
			$('#availability_value').text(doesntExist).addClass('warning_inline');
			$('#oosHook').hide();
		}
		if(stock_management == 1 && !allowBuyWhenOutOfStock)
			$('#availability_statut:hidden').show();
		
		if (typeof(selectedCombination['available_date']) != 'undefined' && selectedCombination['available_date']['date'].length != 0)
		{
			var available_date = selectedCombination['available_date']['date'];
			var tab_date = available_date.split('-');
			var time_available = new Date(tab_date[0], tab_date[1], tab_date[2]);
			time_available.setMonth(time_available.getMonth()-1);
			var now = new Date();
			if (now.getTime() < time_available.getTime() && $('#availability_date_value').text() != selectedCombination['available_date']['date_formatted'])
			{
				$('#availability_date').fadeOut('normal', function(){
					$('#availability_date_value').text(selectedCombination['available_date']['date_formatted']);
					$(this).fadeIn();
				});
			}
			else if(now.getTime() < time_available.getTime())
				$('#availability_date').fadeIn();
		}
		else
			$('#availability_date').fadeOut();
			
		//show the 'add to cart' button ONLY IF it's possible to buy when out of stock AND if it was previously invisible
		if (allowBuyWhenOutOfStock && !selectedCombination['unavailable'] && productAvailableForOrder == 1)
		{
			$('#add_to_cart:hidden').fadeIn(600);
			$('#mailalertt:visible').fadeOut(600);

			if (availableLaterValue != '')
			{
				$('#availability_value').text(availableLaterValue);
					if(stock_management == 1)
					$('#availability_statut:hidden').show('slow');
			}
			else
				$('#availability_statut:visible').hide('slow');
		}
		else
		{
			$('#add_to_cart:visible').fadeOut(600);
			$('#mailalertt:hidden').fadeIn(600);
			if(stock_management == 1)
			$('p#availability_statut:hidden').show('slow');
		}

		if (productAvailableForOrder == 0)
			$('p#availability_statut:visible').hide();
	}

	if (selectedCombination['reference'] || productReference)
	{
		if (selectedCombination['reference'])
			$('#product_reference').text(selectedCombination['reference']);
		else if (productReference)
			$('#product_reference').text(productReference);
		$('#product_reference:hidden').show('slow');
	}
	else
		$('#product_reference:visible').hide('slow');

	//update display of the the prices in relation to tax, discount, ecotax, and currency criteria
	if (!selectedCombination['unavailable'] && productShowPrice == 1)
	{
		var priceTaxExclWithoutGroupReduction = '';

		// retrieve price without group_reduction in order to compute the group reduction after
		// the specific price discount (done in the JS in order to keep backward compatibility)		
		priceTaxExclWithoutGroupReduction = ps_round(productPriceTaxExcluded, 6) * (1 / group_reduction);

		var tax = (taxRate / 100) + 1;
		var taxExclPrice = priceTaxExclWithoutGroupReduction + (selectedCombination['price'] * currencyRate);

		if (selectedCombination.specific_price && selectedCombination.specific_price['id_product_attribute'])
		{
			if (selectedCombination.specific_price['price'] && selectedCombination.specific_price['price'] >=0)
				var taxExclPrice = (specific_currency ? selectedCombination.specific_price['price'] : selectedCombination.specific_price['price'] * currencyRate);
			else
				var taxExclPrice = productBasePriceTaxExcluded * currencyRate + (selectedCombination['price'] * currencyRate);
		}
		else if (product_specific_price.price && product_specific_price.price >= 0)
			var taxExclPrice = (specific_currency ? product_specific_price.price : product_specific_price.price * currencyRate) + (selectedCombination['price'] * currencyRate);

		if (!displayPrice && !noTaxForThisProduct)
			productPriceDisplay = ps_round(taxExclPrice * tax, 2); // Need to be global => no var
		else
			productPriceDisplay = ps_round(taxExclPrice, 2); // Need to be global => no var

		productPriceWithoutReductionDisplay = productPriceDisplay * group_reduction;
		var reduction = 0;
		if (selectedCombination['specific_price'].reduction_price || selectedCombination['specific_price'].reduction_percent)
		{
			reduction_price = (specific_currency ? selectedCombination['specific_price'].reduction_price : selectedCombination['specific_price'].reduction_price * currencyRate);
			reduction = productPriceDisplay * (parseFloat(selectedCombination['specific_price'].reduction_percent) / 100) + reduction_price;
			if (reduction_price && (displayPrice || noTaxForThisProduct))
				reduction = ps_round(reduction / tax, 6);
				
		}
		else if (product_specific_price && product_specific_price.reduction && !selectedCombination.specific_price)
		{
			if (product_specific_price.reduction_type == 'amount')
				reduction_price = (specific_currency ? product_specific_price.reduction : product_specific_price.reduction * currencyRate);
			else
				reduction_price = 0;

			if (product_specific_price.reduction_type == 'percentage')
				reduction_percent = productPriceDisplay * parseFloat(product_specific_price.reduction);

			reduction = reduction_price + reduction_percent;
			if (reduction_price && (displayPrice || noTaxForThisProduct))
				reduction = ps_round(reduction / tax, 6);
		}

		if (selectedCombination.specific_price)
		{
			if (selectedCombination['specific_price'] && selectedCombination['specific_price'].reduction_type == 'percentage')
			{
				$('#reduction_amount').hide();
				$('#reduction_percent_display').html('-' + parseFloat(selectedCombination['specific_price'].reduction_percent) + '%');
				$('#reduction_percent').show();
			} else if (selectedCombination['specific_price'].reduction_type == 'amount' && selectedCombination['specific_price'].reduction_price != 0) {
				$('#reduction_amount_display').html('-' + formatCurrency(reduction_price, currencyFormat, currencySign, currencyBlank));
				$('#reduction_percent').hide();
				$('#reduction_amount').show();
			} else {
				$('#reduction_percent').hide();
				$('#reduction_amount').hide();
			}
		}
		
		if (product_specific_price['reduction_type'] != '' || selectedCombination['specific_price'].reduction_type != '')
			$('#discount_reduced_price,#old_price').show();
		else
			$('#discount_reduced_price,#old_price').hide();
		if ((product_specific_price['reduction_type'] == 'percentage' && selectedCombination['specific_price'].reduction_type == 'percentage') || selectedCombination['specific_price'].reduction_type == 'percentage')
			$('#reduction_percent').show();
		else
			$('#reduction_percent').hide();
		if (product_specific_price['price'] || (selectedCombination.specific_price && selectedCombination.specific_price['price']))
			$('#not_impacted_by_discount').show();
		else
			$('#not_impacted_by_discount').hide();

		productPriceDisplay -= reduction;
		productPriceDisplay = ps_round(productPriceDisplay * group_reduction, 2);

		var ecotaxAmount = !displayPrice ? ps_round(selectedCombination['ecotax'] * (1 + ecotaxTax_rate / 100), 2) : selectedCombination['ecotax'];

		if (ecotaxAmount != default_eco_tax)
			productPriceDisplay += ecotaxAmount - default_eco_tax;
		else
			productPriceDisplay += ecotaxAmount;

		if (ecotaxAmount != default_eco_tax)
			productPriceWithoutReductionDisplay += ecotaxAmount - default_eco_tax;
		else
			productPriceWithoutReductionDisplay += ecotaxAmount;

		var our_price = '';
		if (productPriceDisplay > 0) {
			our_price = formatCurrency(productPriceDisplay, currencyFormat, currencySign, currencyBlank);
		} else {
			our_price = formatCurrency(0, currencyFormat, currencySign, currencyBlank);
		}
		$('#our_price_display').text(our_price);
		$('#old_price_display').text(formatCurrency(productPriceWithoutReductionDisplay, currencyFormat, currencySign, currencyBlank));
		
		if (productPriceWithoutReductionDisplay > productPriceDisplay)
			$('#old_price,#old_price_display,#old_price_display_taxes').show();
		else
			$('#old_price,#old_price_display,#old_price_display_taxes').hide();
		// Special feature: "Display product price tax excluded on product page"
		var productPricePretaxed = '';
		if (!noTaxForThisProduct)
			productPricePretaxed = productPriceDisplay / tax;
		else
			productPricePretaxed = productPriceDisplay;
		$('#pretaxe_price_display').text(formatCurrency(productPricePretaxed, currencyFormat, currencySign, currencyBlank));
		// Unit price 
		productUnitPriceRatio = parseFloat(productUnitPriceRatio);
		if (productUnitPriceRatio > 0 )
		{
			newUnitPrice = (productPriceDisplay / parseFloat(productUnitPriceRatio)) + selectedCombination['unit_price'];
			$('#unit_price_display').text(formatCurrency(newUnitPrice, currencyFormat, currencySign, currencyBlank));
		}

		// Ecotax
		ecotaxAmount = !displayPrice ? ps_round(selectedCombination['ecotax'] * (1 + ecotaxTax_rate / 100), 2) : selectedCombination['ecotax'];
		$('#ecotax_price_display').text(formatCurrency(ecotaxAmount, currencyFormat, currencySign, currencyBlank));
	}
}

//update display of the large image
function displayImage(domAAroundImgThumb, no_animation)
{
	if (typeof(no_animation) == 'undefined')
		no_animation = false;
	if (domAAroundImgThumb.attr('href'))
	{
		var new_src = domAAroundImgThumb.attr('href').replace('thickbox', 'large');
		var new_title = domAAroundImgThumb.attr('title');
		var new_href = domAAroundImgThumb.attr('href');
		if ($('#bigpic').attr('src') != new_src)
		{
			$('#bigpic').attr({
				'src' : new_src, 
				'alt' : new_title, 
				'title' : new_title
			}).load(function(){
				if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
					$(this).attr('rel', new_href);
			}); 
		}
		$('#views_block li a').removeClass('shown');
		$(domAAroundImgThumb).addClass('shown');
	}
}


//update display of the discounts table
function displayDiscounts(combination)
{
	$('#quantityDiscount tbody tr').each(function() {
		if (($(this).attr('id') != 'quantityDiscount_0') &&
			($(this).attr('id') != 'quantityDiscount_' + combination) &&
			($(this).attr('id') != 'noQuantityDiscount'))
			$(this).fadeOut('slow');
	 });

	if ($('#quantityDiscount_' + combination+',.quantityDiscount_' + combination).length != 0)
	{
		$('#quantityDiscount_' + combination+',.quantityDiscount_' + combination).show();
		$('#noQuantityDiscount').hide();
	}
	else
		$('#noQuantityDiscount').show();
}

// Serialscroll exclude option bug ?
function serialScrollFixLock(event, targeted, scrolled, items, position)
{
	serialScrollNbImages = $('#thumbs_list li:visible').length;
	serialScrollNbImagesDisplayed = 5;

	var leftArrow = position == 0 ? true : false;
	var rightArrow = position + serialScrollNbImagesDisplayed >= serialScrollNbImages ? true : false;

	$('#view_scroll_left').css('cursor', leftArrow ? 'default' : 'pointer').css('display', leftArrow ? 'none' : 'block').fadeTo(0, leftArrow ? 0 : 1);
	$('#view_scroll_right').css('cursor', rightArrow ? 'default' : 'pointer').fadeTo(0, rightArrow ? 0 : 1).css('display', rightArrow ? 'none' : 'block');
	return true;
}

// Change the current product images regarding the combination selected
function refreshProductImages(id_product_attribute)
{
	$('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'y'});
	id_product_attribute = parseInt(id_product_attribute);

	if (id_product_attribute > 0 && typeof(combinationImages) != 'undefined' && typeof(combinationImages[id_product_attribute]) != 'undefined')
	{
		$('#thumbs_list li').hide();
		$('#thumbs_list').trigger('goto', 0);
		for (var i = 0; i < combinationImages[id_product_attribute].length; i++)
			$('#thumbnail_' + parseInt(combinationImages[id_product_attribute][i])).show();
		if (parseInt($('#thumbs_list_frame >li:visible').length) < parseInt($('#thumbs_list_frame >li').length))
			$('#wrapResetImages').show('slow');
		else
			$('#wrapResetImages').hide('slow');
	}
	else
	{
		$('#thumbs_list li').show();
		if (parseInt($('#thumbs_list_frame >li').length) == parseInt($('#thumbs_list_frame >li:visible').length))
			$('#wrapResetImages').hide('slow');
	}

	var thumb_width = $('#thumbs_list_frame >li').height() + parseInt($('#thumbs_list_frame >li').css('marginRight'));
	$('#thumbs_list_frame').height((parseInt((thumb_width) * $('#thumbs_list_frame >li').length)) + 'px');
	$('#thumbs_list').trigger('goto', 0);
	serialScrollFixLock('', '', '', '', 0);// SerialScroll Bug on goto 0 ?
}



			
		$(window).load(function() {
  $('#accesory_products_slider').flexslider({
			namespace: "",
			animation: "slide",
			easing: "easeInQuart",
			slideshow: false,
			animationLoop: false,
			animationSpeed: 700,
			pauseOnHover: true,
			controlNav: false, 
			itemWidth:  238, 
			minItems: flexmin,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: flexmax, 
			move: 0		});
			
			
			
			$(window).resize(function() {
	
	    try {
            $('#accesory_products_slider').flexslider(0);
if($('#center_column').width()<=280){ $('#accesory_products_slider').data('flexslider').setOpts({minItems: 1, maxItems: 1});}
else if($('#center_column').width()<=440){ $('#accesory_products_slider').data('flexslider').setOpts({minItems: 2, maxItems: 2});}
else if($('#center_column').width()<980){ $('#accesory_products_slider').data('flexslider').setOpts({minItems: 3, maxItems: 3});}
else if($('#center_column').width()>=1240){ $('#accesory_products_slider').data('flexslider').setOpts({minItems: 1, maxItems: 5});}
else if($('#center_column').width()>=990){ $('#accesory_products_slider').data('flexslider').setOpts({minItems: 1, maxItems: 4});}
        } catch(e) {
            // handle all your exceptions here
        }

});
			
			
			
			});


//To do after loading HTML
$(document).ready(function()
{
	//init the serialScroll for thumbs
$('#thumbs_list a').click(function (event) {
      event.preventDefault();
    });
		$('#thumbs_list').serialScroll({
		items:'li:visible',
		prev:'a#view_scroll_left',
		next:'a#view_scroll_right',
		axis:'y',
		offset:0,
		start:0,
		stop:true,
		onBefore:serialScrollFixLock,
		duration:700,
		step: 5,
		lazy: true,
		lock: false,
		force:false,
		cycle:false
	});
	
	
	

				
	$("#accesory_products_slider li").hover(
  function () {
	$("#accesory_products_slider li").not(this).stop().fadeTo(400, 0.85);
  },
  function () {
 	$("#accesory_products_slider li").not(this).stop().fadeTo(400, 1.0);
  }
);
	
	$('#q_up').click(function() {
var q_val_up =  parseInt($("input#quantity_wanted").val());
if(isNaN(q_val_up)) {
    q_val_up = 0;
}
  $("input#quantity_wanted").val(q_val_up+1).keyup();
});
	$('#q_down').click(function() {
var q_val_up =  parseInt($("input#quantity_wanted").val());
if(isNaN(q_val_up)) {
    q_val_up = 0;
}
if(q_val_up > 1) {
      $("input#quantity_wanted").val(q_val_up-1).keyup();;
}

});
	
	 var maxlwidth = 0;
    $(".product_attributes label").each(function(){
        if ($(this).width() > maxlwidth)
            maxlwidth = $(this).width();    
    });
    $(".product_attributes  label").width(maxlwidth);

	$('#thumbs_list').trigger('goto', 1);// SerialScroll Bug on goto 0 ?
	$('#thumbs_list').trigger('goto', 0);

	//hover 'other views' images management
	$('#views_block li a').hover(
		function(){displayImage($(this));},
		function(){}
	);

	//set jqZoom parameters if needed
	if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
	{
	$('#bigpic').attr('rel', $('#bigpic').attr('src').replace('large', 'thickbox'));
		$('img.jqzoom').jqueryzoom({
			xzoom: 200, //zooming div default width(default width value is 200)
			yzoom: 200, //zooming div default width(default height value is 200)
			offset: 21 //zooming div default offset(default offset value is 10)
			//position: "right" //zooming div position(default position value is "right")
		});
	}
	//add a link on the span 'view full size' and on the big image
	$('#view_full_size, div#image-block img').click(function(){
		$('#views_block li a.shown').click();
	});

	//catch the click on the "more infos" button at the top of the page
	$('#short_description_block p a.button').click(function(){
		$('#more_info_tab_more_info').click();
		$.scrollTo( '#more_info_tabs', 1200 );
	});

	// Hide the customization submit button and display some message
	$('#customizedDatas input').click(function() {
		$('#customizedDatas input').hide();
		$('#ajax-loader').fadeIn();
		$('#customizedDatas').append(uploading_in_progress);
	});

	original_url = window.location + '';
	first_url_check = true;
	checkUrl();
	initLocationChange();

	//init the price in relation of the selected attributes
	if (typeof productHasAttributes != 'undefined' && productHasAttributes)
		findCombination(true);
	else if (typeof productHasAttributes != 'undefined' && !productHasAttributes)
		refreshProductImages(0);

	$('#resetImages').click(function() {
		refreshProductImages(0);
	});

	$('.thickbox').fancybox({
		'hideOnContentClick': true,
		'transitionIn'	: 'elastic',
		  helpers: {
    overlay: {
      locked: false
    }
  },
		'transitionOut'	: 'elastic'
	});
});

function saveCustomization()
{
	$('#quantityBackup').val($('#quantity_wanted').val());
	customAction = $('#customizationForm').attr('action');
	$('body select[id^="group_"]').each(function() {
		customAction = customAction.replace(new RegExp(this.id + '=\\d+'), this.id +'=' + this.value);
	});
	$('#customizationForm').attr('action', customAction);
	$('#customizationForm').submit();
}

function submitPublishProduct(url, redirect, token)
{
	var id_product = $('#admin-action-product-id').val();

	$.ajaxSetup({async: false});
	$.post(url + '/index.php', { 
		action:'publishProduct',
		id_product: id_product, 
		status: 1, 
		redirect: redirect,
		ajax: 1,
		tab: 'AdminProducts',
		token: token
		},
		function(data)
		{
			if (data.indexOf('error') === -1)
			document.location.href = data;
		}
	);
	return true;
}

function checkMinimalQuantity(minimal_quantity)
{
	if ($('#quantity_wanted').val() < minimal_quantity)
	{
		$('#quantity_wanted').css('border', '1px solid red');
		$('#quantity_wanted').css('border-right', 'none');
		$('#q_modify').css('border', '1px solid red');
		$('#q_modify').css('border-left', 'none');
		$('#minimal_quantity_wanted_p').css('color', 'red');
	}
	else
	{
		$('#quantity_wanted').css('border', '1px solid #cecece');
		$('#quantity_wanted').css('border-right', 'none');
		$('#q_modify').css('border', '1px solid #cecece');
		$('#q_modify').css('border-left', 'none');
		$('#minimal_quantity_wanted_p').css('color', '#666');
	}
}

function colorPickerClick(elt)
{
	id_attribute = $(elt).attr('id').replace('color_', '');
	$(elt).parent().parent().children().removeClass('selected');
	$(elt).fadeTo('fast', 1, function(){
								$(this).fadeTo('fast', 0, function(){
									$(this).fadeTo('fast', 1, function(){
										$(this).parent().addClass('selected');
										});
									});
								});
	$(elt).parent().parent().parent().children('.color_pick_hidden,#color_pick_hidden').val(id_attribute);
	findCombination(false);
}


function getProductAttribute()
{
	// get product attribute id
	product_attribute_id = $('#idCombination').val();
	product_id = $('#product_page_product_id').val();

	// get every attributes values
	request = '';
	//create a temporary 'tab_attributes' array containing the choices of the customer
	var tab_attributes = [];
	$('#attributes select, #attributes input[type=hidden], #attributes input[type=radio]:checked').each(function(){
		tab_attributes.push($(this).val());
	});

	// build new request
	for (var i in attributesCombinations)
		for (var a in tab_attributes)
			if (attributesCombinations[i]['id_attribute'] === tab_attributes[a])
				request += '/'+attributesCombinations[i]['group'] + '-' + attributesCombinations[i]['attribute'];
	request = request.replace(request.substring(0, 1), '#/');
	url = window.location + '';

	// redirection
	if (url.indexOf('#') != -1)
		url = url.substring(0, url.indexOf('#'));

	// set ipa to the customization form
	$('#customizationForm').attr('action', $('#customizationForm').attr('action') + request);
	window.location = url + request;
}

function initLocationChange(time)
{
	if(!time) time = 500;
	setInterval(checkUrl, time);
}

function checkUrl()
{
	if (original_url != window.url || first_url_check)
	{
		first_url_check = false;
		url = window.location + '';
		// if we need to load a specific combination
		if (url.indexOf('#/') != -1)
		{
			// get the params to fill from a "normal" url
			params = url.substring(url.indexOf('#') + 1, url.length);
			tabParams = params.split('/');
			tabValues = [];
			if (tabParams[0] == '')
				tabParams.shift();
			for (var i in tabParams)
				tabValues.push(tabParams[i].split('-'));
			product_id = $('#product_page_product_id').val();
			// fill html with values
			$('.color_pick').removeClass('selected');
			$('.color_pick').parent().parent().children().removeClass('selected');
			count = 0;
			for (var z in tabValues)
				for (var a in attributesCombinations)
					if (attributesCombinations[a]['group'] === decodeURIComponent(tabValues[z][0])
						&& attributesCombinations[a]['attribute'] === tabValues[z][1])
					{
						count++;
						// add class 'selected' to the selected color
						$('#color_' + attributesCombinations[a]['id_attribute']).addClass('selected');
						$('#color_' + attributesCombinations[a]['id_attribute']).parent().addClass('selected');
						$('input:radio[value=' + attributesCombinations[a]['id_attribute'] + ']').attr('checked', true);
						$('input:hidden[name=group_' + attributesCombinations[a]['id_attribute_group'] + ']').val(attributesCombinations[a]['id_attribute']);
						$('select[name=group_' + attributesCombinations[a]['id_attribute_group'] + ']').val(attributesCombinations[a]['id_attribute']);
					}
			// find combination
			if (count >= 0)
			{
				findCombination(false);
				original_url = window.location + '';
			}
			// no combination found = removing attributes from url
			else
				window.location = url.substring(0, url.indexOf('#'));
		}
	}
}

product.css

/* miniatures */
#pb-right-column #views_block {
	width:60px;
	float:left;
	position: relative
}
#thumbs_list {
	overflow: hidden;
	height: 325px;
	width: 60px;
	margin-top: 40px;
}
#thumbs_list ul#thumbs_list_frame {
	list-style-type: none;
	padding-left: 0
}
#thumbs_list li {
	margin-bottom: 5px;
	height: 60px;
	width: 72px;
	cursor: pointer
}
#thumbs_list li img {
	margin:0;
	border:1px solid #cecece;
	opacity: 0.7;
	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;	
}

#thumbs_list li img:hover { border:1px solid #a3beec; opacity: 1.0;}
.no_thumbs {
	width: 372px !important;
}
.no_thumbs2 {
	width: 598px !important;
}
span.view_scroll_spacer {
}
#view_scroll_left {
	position: absolute;
	left: 14px;
	top: 20px;
}
#view_scroll_left, #view_scroll_right {
	height: 10px;
	width: 32px;
	text-indent: -3000px;
	background: url(../img/thumbs_up.png) no-repeat center center transparent
}
#view_scroll_right {
	margin-left:13px;
	margin-top: 10px;
	background-image: url(../img/thumbs_down.png)
}
.resetimg {
	padding:10px 0 5px 0
}
.resetimg2 {
	padding:5px 0 0px 0
}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to question listing
×
×
  • Create New...