Search the Community

Bonjour, Comment faire pour activer JQZoom au clic plutôt qu'au survol ? J'ai essayer de faire des modification dans jquery.jqzoom.js le problème est que je ne connais pas du tout JS et donc je n'ai pas réussi à résoudre mon problème... Merci de votre aide

Bonjour Je rencontre un pb sur le jqzoom j’ai tenté des dizaines de configurations mais je n’arrive pas a obtenir de zoom plus grand avec l’option jqzoom. j’ai modifier la taille de l image thickbox défaut comme thickbox du thème et modifié les valeurs dans le fichier product.js du thème. Mais rien ne zoom plus grand …le cadre lui s’agrandit bien mais l’image reste aux dimensions d’origine …et cela ne fonctionne qu avec la première image produit. (quand on zoom sur la deuxième image ou la troisième etc… on a toujours la première image qui s’affiche dans le zoom au lieu des images sélectionnés) (voir captures jointes) Que puis je faire pour avoir un vrai effet de zoom et pour chacune des images du produit? D’avance merci Cordialement.

Hello, I'm using prestashop 1.7.3.3 and i installed the module JQZoom Evolution to show zoom effect on mouse hover in product page, but the module shows the following problems : - On descktop : On hover the zoomed image moves out of the original image frame due to the fixed position given to the header on Scroll. - On mobile/tablet : The module JQZoom generates error on Chrome Console : Cannot read property 'eventunbind' of undefined The code generating the error $(".xzoom").each(function(){var o=$(this).data("xzoom");o.eventunbind() Does anyone have an idea how to solve this problems ? I did a lot of searching but still no idea how to solve this. Best regards.

I have a problem with JqZoom on the product page. When I have multiples images for the product, wether JqZoom is enabled or not, gets me a JS error "this.options.step.call is not a function". It works fine if I only have one picture. I use Prestashop 1.6.1.14 with the default JS.

I want to Disable jqZoom from Product Page but i am not getting Any module to disable Jqzoom. Please help

Bonjour à tous, Sur mon 1.6.0.11, JqZoom fonctionne bien sur mon Mac. Mais sur iPad & iPhone, il n'y a pas le curseur carré, l'image agrandie est bien dans le cadre, mais elle est impossible à déplacer. Avez vous eu ce souci ??

Hi, I increased the jqZoom size, but after it the jqzoom moved to the front of the of image, so wasn't working properly, but, i went to "js\jquery\plugins\jqzoom\jquery.jqzoom.js" and i added some values, i got the help from a post that i saw in the forum. this is the change I did: $(this).hover(function() { var imageRelativeLeft = $(this).get(0).offsetLeft; var imageLeft = $($(this).get(0)).offset().left; var imageRelativeTop = $(this).get(0).offsetTop + 100; var imageTop = $($(this).get(0)).offset().top; var imageWidth = $(this).get(0).offsetWidth; var imageHeight = $(this).get(0).offsetHeight; the "+100" was the change, and worked from the top to the bottom, the jqZoom got down, but in the "offsetLeft" so I can move right to left wasn't working, I added values in the "var imageLeft", the "var imageRelativeLeft", increasing or reducing(+100, -100), and none worked. So it is now like this: How do i position the jqZoom in the side of the image? Thank's

Hi, I use the bootstrap-default theme. I have jqZoom enabled in my shop for the product page. I need the Fancybox zoom box to pop up if the product image is clicked on. Alternatively, I have some static text below the product image. It would suffice if clicking on that text launched the Fancybox zoom as well. I have been examining the product.tpl file but cannot see any mention of Fancybox (presumably there is an 'onclick' event and handler for that?). Can someone help, please? Thanks.

hi, i am using jqzoom but i do not want it to be used at mobile or ipad version, so is there any way i can disable it and use a click function to open the product image in another window. Thanks in advance

Ciao a tutti, vorrei sapere come aumentare "la potenza" dello zoom. Ossia, modificando il file \themes\default\js\product.js questi parametri: $('img.jqzoom').jqueryzoom({ xzoom: 500, //zooming div default width(default width value is 200) yzoom: 500, //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" posso aumentare o diminuire la grandezza della foto. Io vorrei aumentare la potenza dello zoom per vedere meglio i dettagli. Qualcuno ha qualche suggerimento? Grazie

ho aumentato a 2048px il lato della foto della thickbox ora jqzoom non riesce a "vedere" tutta la foto. in pratica se mi sposto verso a destra dopo un po' di ferma. c'è un'opzione per fare in modo che lo spostamento del mouse risulti in uno spostamento più ampio dello zoom in modo da riuscire ad arrivare alla fine della foto? esempio: http://recordit.co/uIuJrPfzUU

Hi - using Prestashop v1.5.5 jqZoom appears to use the ALT tag to hold the name of the image to be zoomed in, as opposed to proper descriptive text of what the image is: <img id="bigpic" alt="http://www.corido.co.uk/843-thickbox_default/ascot-curved-back-teak-garden-bench-1-5m-5ft.jpg" class="jqzoom" src="http://www.corido.co.uk/843-large_default/ascot-curved-back-teak-garden-bench-1-5m-5ft.jpg" style="display: inline;"> This is causing me two issues: 1. It has an adverse affect on my SEO rankings. 2. Google sometimes displays the contents of the ALT tag in its listings Is there anyway around this?

We use Thickbox for images on product page. In full size, there is no problem at all, but when they are in normal box size (328 x 328 px) images getting blurred. You can only see this when you have a good screen or change the max. viewing angle of your screen. All in all, pictures are not top quality. Whith JqZoom, there is no problem!! Uploaded size is around 800 px. Quality for JPG is set to 100. JPG's are generated on the basis of the longest side (automatic). All pictures are regenerated. Images are not resized on my screen, have the max. resolution (large screen) for our website. Prestashop 1.6 with responsive theme. Why is Thickbox blurring/hurting the quality of our images?

Dzień dobry, Jak zupełnie wyłączyć Thickbox / JqZoom na stronach produktów? Z góry dziękuję.

Llevo unos días tratando de combinar jQzoom y Thickbox en la página de producto, pero no he tenido éxito. ¿Alguien puede darme unas indicaciones? En estos momentos estoy bastante perdido y me he quedado sin ideas.

Hi here, We need on version 1.6 on product page on image jqzoom thickbox together, is it possible? Because in administration there is jqzoom or thickbox, but not bouth together. Do anyone know solution? ​Thx

Hi ! I'm hardly preparing the release of my art website, but I have, since the installation a problem with JqZoom. On my product page, the product images can be switched (as i wanted to) thanks to the thumbnails. The only problem is that the JqZoom doesn't switchs, and stays only on the cover image ! (for example - only in french, sorry ^^ - http://coco-fesse-et-porcelaine.com/home/43-0ushebti-de-l-epoque-ptolemaique.html ). I tried everything to make the images switchs, so that we can magnify the other photographs, but, I obviously failed ... here is the code on the product.tpl page (presta 1.5.6) : <!-- product img--> <div id="image-block"> {if $have_image} <span id="view_full_size"> <!-- definition de l'image --> <!--probleme de zoom: il zoom toujours sur la premiere image --> <img 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" width="{$largeSize.width}" height="{$largeSize.height}"/> <span class="span_link">{l s='Maximize'}</span> </span> {else} <span id="view_full_size"> <img src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}" /> <span class="span_link">{l s='Maximize'}</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}" height="{$mediumSize.height}" width="{$mediumSize.width}" /> </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} {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)|escape:'html'}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></span></p>{/if} </div> And here is the jqZoom code : //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 1.2 // Author Doc. Ing. Renzi Marco(www.mind-projects.it) // Released on Dec 05 2007 // i'm searching for a job,pick me up!!! // mail: [email protected] //************************************************************** (function($) { $.fn.jqueryzoom = function(options) { var settings = { xzoom: 374, //zoomed width default width yzoom: 374, //zoomed div default width offset: 10, //zoomed div default offset position: "left" //zoomed div default position,offset position is to the right of the image }; if(options) $.extend(settings, options); var noalt =''; $(this).hover(function() { var imageRelativeLeft = $(this).get(0).offsetLeft; var imageLeft = $($(this).get(0)).offset().left; var imageRelativeTop = $(this).get(0).offsetTop; var imageTop = $($(this).get(0)).offset().top; var imageWidth = $(this).get(0).offsetWidth; var imageHeight = $(this).get(0).offsetHeight; attr = (typeof($(this).attr("rel")) != 'undefined' && $(this).attr("rel") != '') ? "rel" : "alt"; noalt = $(this).attr(attr); var bigimage = noalt; //il ne change pas d'image lors du passage sur une autre photo //var bigimage = $link->getImageLink($product->link_rewrite, $image.id_image, 'thickbox_default')|escape:'html'; //alert(bigimage); $(this).attr(attr, ''); if($("div.zoomdiv").get().length == 0) //http://coco-fesse-et-porcelaine.com/160-thickbox_default/vase-en-porcelaine-de-canton-monte-en-lampe.jpg $(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>"); //alert(bigimage+"1\n"+options +"2\n"+ $(this).attr(attr)+"3\n"); //$(this).after("<div class='zoomdiv'><img class='bigimg' src='"http://coco-fesse-et-porcelaine.com/160-thickbox_default/vase-en-porcelaine-de-canton-monte-en-lampe.jpg"'/></div>"); if(settings.position == "right") leftpos = imageRelativeLeft + imageWidth + settings.offset; else leftpos = imageRelativeLeft - settings.xzoom - settings.offset; $("div.zoomdiv").css({top: imageRelativeTop,left: 606}); $("div.zoomdiv").width(372); $("div.zoomdiv").height(600); $("div.zoomdiv").show(); $(document.body).mousemove(function(e) { var bigwidth = $(".bigimg").get(0).offsetWidth; var bigheight = $(".bigimg").get(0).offsetHeight; var scaley ='x'; var scalex= 'y'; if(isNaN(scalex)|isNaN(scaley)) { var scalex = Math.round(bigwidth/imageWidth) ; var scaley = Math.round(bigheight/imageHeight); } mouse = new MouseEvent(e); scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/2 ; $("div.zoomdiv").get(0).scrollTop = scrolly * scaley ; scrollx = mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/2 ; $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ; }); }, function() { $(this).attr(attr, noalt); $("div.zoomdiv").hide(); $(document.body).unbind("mousemove"); $(".lenszoom").remove(); $("div.zoomdiv").remove(); }); } })(jQuery); function MouseEvent(e) { this.x = e.pageX this.y = e.pageY } Pleaaaase, I need your help ! I didn't slept the whole nignt and I still don't have a clue ...

Ich habe folgendes Problem. Artikel die keine Eigenschaft wie Größe oder Farbe etc. haben, kann man nicht in den Warenkorb legen. Auf der Artikelseite erscheint stattdessen "Produkt in dieser Ausführung nicht verfügbar. Bitte wählen Sie eine andere Kombination." - obwohl der Lagerbestand ausreichend vorhanden ist. Der Kunde möchte keine Kombination hinterlegen, wenn es keine gibt. Ist das Problem bekannt? Hinweis: das Problem tritt nur auf, wenn man jQzoom statt Thickbox als Artikelvorschau aktiviert. Thickbox hat aber keine Funktion. http://84.200.234.153/uromaster/index.php?id_product=69&controller=product

PS 1.6 Buenas! Veréis, tengo activado el jqzoom en mi tienda y realiza bien la función ya que hace el zoom de la foto principal dentro de cada producto. El problema es que aparte de que haga zoom en esa foto quiero que al hacer click en la foto se habrá en grande (con thickbox). Esto recuerdo que en la plantilla de la versión 1.5 venia por defecto pero al parecer en la plantilla de la 1.6 se quito esta función. Os dejo las lineas de código (product.tpl de la plantilla) donde creo que esta mi problema por si alguien pudiera ayudarme: {if $have_image} <span id="view_full_size"> {if $jqZoomEnabled && $have_image && !$content_only} <a class="jqzoom" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" rel="gal1" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')|escape:'html':'UTF-8'}" itemprop="url"> <img class="img-responsive" width="100%" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"/> </a> {else} <img id="bigpic" class="img-responsive" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" width="{$largeSize.width}" height="{$largeSize.height}"/> {if !$content_only} <span class="span_link no-print">{l s='View larger'}</span> {/if} {/if} </span> {else} <span id="view_full_size"> <img class="img-responsive" itemprop="image" src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'html':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}"/> {if !$content_only} <span class="span_link"> {l s='View larger'} </span> {/if} </span> {/if}

My products are patterns for lace making (www.merletti.si) and so I shouldn’t show their images in too good quality, otherwise customers would print them instead of buying. I changed thumbnail size to 160 x 160px and jqzoom to “reverse” so that only part of image is shown at a time. My question is how to setup jqzoom correctly, that it will really show zoomed part of the image on the right side? And also, how to rearrange the product page a little bit so that everything will be in some proportions? If an already made solution or module which would solve my problem exists, please let me know, links to similar topics are welcome too. Technical data: Prestashop version 1.6.0.9, default-bootstrap theme, large_default and home_default image size are set to 160 x 160, jqzoom parameters changed as follows: { $('.jqzoom').jqzoom({ zoomType: 'reverse', //innerzoom/standard/reverse/drag zoomWidth: 160, //zooming div default width(default width value is 200) zoomHeight: 160, //zooming div default width(default height value is 200) xOffset: 0, //zooming div default offset(default offset value is 10) yOffset: 0, title: false }); } Many thanks in advance for help!

Hello, I have activate JqZoom on last Prasta 1.6.0.9 but it show the large_default picture instead of thickbox_default. The code seams to be correct but it show the wrong picture also if in the html code il load the big one. Probably there is somenting wrong on the preload js function. The test site is http://leonardoshoes.italianboutique.com Thanks to all.

Boa Noite Galera ! Gostaria de saber como faz pra aumentar o zoom da imagem, não o tamanho do quadrado do zoom. Obrigado.

Buenas tardes comunidad, tengo un drama con el jqZoom en al momento de visualizar un producto, y es que no carga nada ni siquiera un cuadrado en blanco, no sé que hacer en realidad, he buscado por todos los medios y soluciones que han habido por acá y sigue sin funcionar, les dejo el link para que puedan ayudarme en esto. Gracias! http://wurlitzer.cl/mpr/31-bienvenido-ovejita-mujer.html

Buenas tardes comunidad, tengo un problema con el zoom al momento de querer visualizar el producto en cuestión, compré un tema que viene con aquel zoom y cuando lo activo a través del panel de administración no funciona, no carga nada ni siquiera alguna ventana en blanco. llevo días tratando de solucionar este problema, y para una mejor revisión adjuntaré el archivo de product.js ojalá me puedan ayudar con esto. {* * 2007-2013 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-2013 PrestaShop SA * @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> {include file="$tpl_dir./breadcrumb.tpl"} <div id="primary_block" class="clearfix"> {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 btn btn-default" 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 btn btn-default" 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} <!--ADD CUSTOM CLOUD ZOOM!!!--> <!-- Call quick start function. --> <!-- right infos--> <div class="row"> <div id="pb-right-column" class="col-xs-12 col-sm-5"> <h1 class="pb-right-colum-h">{$product->name|escape:'htmlall':'UTF-8'}</h1> <!-- product img--> <div id="image-block"> {if $have_image} <span id="view_full_size"> {if $jqZoomEnabled && $have_image}<a id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:0, adjustY:0" class="cloud-zoom" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'thickbox_default')|escape:'html'}"> <img id="mousetrap_img" alt="{$product->name|escape:'htmlall':'UTF-8'}" width="106" height="106" title="{$product->name|escape:'htmlall':'UTF-8'}" src="img/mousetrap.png" > <img id="bigpic" alt="{$product->name|escape:'htmlall':'UTF-8'}" title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html'}" /><span class="mask"></span> </a> {else} <img id="bigpic" alt="{$product->name|escape:'htmlall':'UTF-8'}" title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}" /> {/if} </span> {else} <span id="view_full_size"> <img src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}" /> <span class="span_link">{l s='Maximize'}</span> </span> {/if} <div class="mousetrap" style="z-index: auto; position: absolute; width: 104px; height: 104px; left: 0px; top: 0px; cursor: move; background-image: url(http://livedemo00.template-help.com/prestashop_48237/);"></div> </div> {if isset($images) && count($images) > 0} <!-- thumbnails --> <div id="views_block" {if isset($images) && count($images) < 2} style="display:none;"{/if}> {if isset($images) && count($images) > 2}<a id="view_scroll_left" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a>{/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}"> {if $jqZoomEnabled} <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}" class="cloud-zoom-gallery" title="{$imageTitlte}" rel="useZoom: 'zoom1', smallImage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html'}'"> <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')|escape:'html'}" alt="{$imageTitlte}" /> </a> {else} <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}" /> </a> {/if} </li> {/foreach} {/if} </ul> </div> {if isset($images) && count($images) > 2}<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>{/if} </div> {/if} {if isset($images) && count($images) > 1} <p class="resetimg"> <span id="wrapResetImages" style="display:none;"> <i class="icon-reply"></i> <a id="resetImages" href="{$link->getProductLink($product)|escape:'html'}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></span></p> {/if} <ul id="usefull_link_block" class="clearfix" > {if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if} <li class="print"><a href="javascript:print();"><i class="icon-print"></i>{l s='Print'}</a></li> </ul> </div> <!-- left infos--> <h1 style="color:black;">{$product->name|escape:'htmlall':'UTF-8'}</h1> <section class="tabs" style="height:130px;"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">Descripción</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2">Info Despacho</label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> <label for="tab-3" class="tab-label-3">Info General</label> <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> <label for="tab-4" class="tab-label-4">Comentarios</label> <div class="clear-shadow"></div> <div class="content" style="height:130px;"> <div class="content-1"> <p>{$product->description_short}</p> <div id="short_description_block"> {if $product->description_short} <div id="short_description_content" class="rte align_justify">{$product->description_short}</div> {/if} </div> </div> <div class="content-2"> <p>{$product->description}</p> </div> <div class="content-3"> {if isset($features) && $features} <ul class="bullet"> {foreach from=$features item=feature} {if isset($feature.value)} <li><i class="icon-angle-right"></i> <span>{$feature.name|escape:'htmlall':'UTF-8'} - </span> {$feature.value|escape:'htmlall':'UTF-8'}</li> {/if} {/foreach} </ul> {/if} </div> <div class="content-4"> {$HOOK_PRODUCT_TAB} <div id="more_info_sheets" class="toggle_content toggle_content_comment"> {if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}{$HOOK_PRODUCT_TAB_CONTENT}{/if} </div> </div> {if ($display_qties == 1 && !$PS_CATALOG_MODE && $product->available_for_order)} <p id="pQuantityAvailable" style="position: absolute;top: 75%;left: 8%;color: #1BB9C8;display:inline-block;"> {$product->quantity|intval} {l s='Item in stock'} </p> {/if} </div> </section> <div class="row_1"> <p class="our_price_display"> {convertPrice price=$productPrice} </p> {if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE} <span class="exclusive btn btn-default disabled"> <span></span> {l s='Add to cart'} </span> {else} <p id="add_to_cart" class="buttons_bottom_block"> <a class="exclusive button btn btn-default btn_add_cart" href="javascript:document.getElementById('add2cartbtn').click();"> <span>{l s='Add to cart'} </span></a> <input id="add2cartbtn" type="submit" name="Submit" value="{l s='Add to cart'}" /> <!--show when "This product is no longer in stock with those attributes but is available with others"--> <span class="exclusive btn btn-default disabled" style="display:none;"> <span></span> {l s='Add to cart'} </span> </p> {/if} <!-- quantity wanted --> <p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) OR $virtual OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}> <a href="#" class="product_quantity_down button btn btn-default" rel="qty"><i class="icon-minus"></i></a> <input type="text" name="qty" id="quantity_wanted" class="form-control" 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} /> <a href="#" class="product_quantity_up button btn btn-default" rel="qty"><i class="icon-plus"></i></a> </p> </div> <div id="pb-left-column" class="col-xs-12 col-sm-7"> {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} style="display:none;"{/if} action="{$link->getPageLink('cart')|escape:'html'}" 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" style="display:none;"> {if isset($groups)} <!-- attributes --> <div id="attributes"> {foreach from=$groups key=id_attribute_group item=group} {if $group.attributes|@count} <fieldset class="attribute_fieldset form-group"> {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 form-control" onchange="findCombination();getProductAttribute();"> {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=""} {foreach from=$group.attributes key=id_attribute item=group_attribute} <li{if $group.default == $id_attribute} class="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 file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')} <img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="25" height="25" /><br /> {/if} </a> </li> {if ($group.default == $id_attribute)} {$default_colorpicker = $id_attribute} {/if} {/foreach} </ul> <input type="hidden" class="color_pick_hidden" name="{$groupName}" value="{$default_colorpicker}" /> {elseif ($group.group_type == 'radio')} <ul> {foreach from=$group.attributes key=id_attribute item=group_attribute} <div class="radio-inline"> <input type="radio" class="radio-inline" name="{$groupName}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} onclick="findCombination();getProductAttribute();" /> <label>{$group_attribute|escape:'htmlall':'UTF-8'}</label> </div> {/foreach} </ul> {/if} </div> </fieldset> {/if} {/foreach} </div> {/if} <!-- 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} </div> <div class="content_prices clearfix"> <!-- prices --> {if $product->show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE} <div class="row-2" {if !$product->specificPrice} style="display:none;"{/if}> <p id="reduction_percent" {if !$product->specificPrice OR $product->specificPrice.reduction_type != 'percentage'} style="display:none;"{/if}><span id="reduction_percent_display" class="price">{if $product->specificPrice AND $product->specificPrice.reduction_type == 'percentage'}-{$product->specificPrice.reduction*100}%{/if}</span></p> <p 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" class="price">{if $product->specificPrice AND $product->specificPrice.reduction_type == 'amount' && $product->specificPrice.reduction|intval !=0}-{convertPrice price=$product->specificPrice.reduction|floatval}{/if}</span></p> <p id="old_price"{if !$product->specificPrice || !$product->specificPrice.reduction} class="unvisible"{/if}> {if $priceDisplay >= 0 && $priceDisplay <= 2} <span id="old_price_display" class="price price-old">{if $productPriceWithoutReduction > $productPrice}{convertPrice price=$productPriceWithoutReduction}{if $priceDisplay != 1}{displayWtPrice p=$accessory.price}{else}{displayWtPrice p=$accessory.price_tax_exc}{/if}</span>{/if} <!-- {if $tax_enabled && $display_tax_label == 1}{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}{/if} --> {/if} </p> {if $product->on_sale} <img src="{$img_dir}onsale_{$lang_iso}.gif" alt="{l s='On sale'}" class="on_sale_img"/> <span class="on_sale">{l s='On sale!'}</span> {elseif $product->specificPrice AND $product->specificPrice.reduction AND $productPriceWithoutReduction > $productPrice} <span class="discount">{l s='Reduced price!'}</span> {/if} </div> <div class="other-prices"> {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} {if $packItems|@count && $productPrice < $product->getNoPackPrice()} <p class="pack_price">{l s='Instead of'} <span class="price price-old">{convertPrice price=$product->getNoPackPrice()}</span></p> {/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} </div> {/if} </div> {if isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS}{$HOOK_PRODUCT_ACTIONS}{/if} <!-- Out of stock hook --> <p id="oosHook"{if $product->quantity > 0} style="display: none;"{/if}> {$HOOK_PRODUCT_OOS} </p> </form> {/if} {if isset($HOOK_EXTRA_RIGHT) && $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if} </div> </div> </div> <!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> <div class="clear"></div> <!-- CARRUSEL PARA MODIFICAR! <section class="page_product_box blockproductscategory"> <h3>{$categoryProducts|@count} {l s='other products in the same category:' mod='productscategory'}<i class="icon-toggle icon-minus-sign-alt"></i></h3> <div id="block-category-slider" class="carusel-inner responsive toggle_content"> <ul id="carouselproduct" class="carousel-ul"> {foreach from=$categoryProducts item='categoryProduct' name=categoryProduct} <li class="item"> <div class="clearfix"> <a href="{$link->getProductLink($categoryProduct.id_product, $categoryProduct.link_rewrite, $categoryProduct.category, $categoryProduct.ean13)}" class="lnk_img" title="{$categoryProduct.name|htmlspecialchars}"><img src="{$link->getImageLink($categoryProduct.link_rewrite, $categoryProduct.id_image, 'medium_default')|escape:'html'}" alt="{$categoryProduct.name|htmlspecialchars}" /></a> </div> <a class="product_link noSwipe" href="{$link->getProductLink($categoryProduct.id_product, $categoryProduct.link_rewrite, $categoryProduct.category, $categoryProduct.ean13)|escape:'html'}" title="{$categoryProduct.name|htmlspecialchars}">{$categoryProduct.name|truncate:15:'...'|escape:'htmlall':'UTF-8'}</a> {if $ProdDisplayPrice AND $categoryProduct.show_price == 1 AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE} <p class="price_display"> <span class="price">{convertPrice price=$categoryProduct.displayed_price}</span> </p> {/if} </li> {/foreach} </ul> <a class="prev" id="cat_prev" href="#"></a> <a class="next" id="cat_next" href="#"></a> </div> </section> <script type="text/javascript"> $("#carouselproduct").carouFredSel({ debug: true, circular: true, infinite: true, responsive: true, align : "center", width: '100%', auto : { play : 1, timeoutDuration :15000 }, items : { visible: { min: 2, max: 6 }, width:167, }, scroll : { items : 1, pauseOnHover:false }, prev : { button : "#cat_prev" }, next : { button : "#cat_next" }, swipe: { onMouse: false, onTouch: true } }, { classnames : { selected : "selected", hidden : "hidden", disabled : "disabled", paused : "paused", stopped : "stopped" }, }); </script> TERMINO DE CARRUSEL MODIFICABLE --> {if isset($accessories) AND $accessories} <section class="page_product_box toggle_frame more_info_inner4"> <h3 class="toggle">{l s='Accessories'}<i class="icon-toggle icon-minus-sign-alt"></i></h3> {if isset($accessories) AND $accessories} <div id="block-category-slider" class="carusel-inner responsive toggle_content" style="height:300px;"> <ul id="carouselproduct" class="carousel-ul" style="height:300px;width:100% !important;"> {foreach from=$accessories item=accessory name=accessories_list} {if ($accessory.allow_oosp || (isset($accessory.quantity_all_versions) && $accessory.quantity_all_versions > 0) || $accessory.quantity > 0) AND $accessory.available_for_order AND !isset($restricted_country_mode)} {assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)} <li class="ajax_block_product row bordercolor {if $smarty.foreach.accessories_list.first}first_item{elseif $smarty.foreach.accessories_list.last}last_item{else}item{/if} product_accessories_description list-product-{$smarty.foreach.accessories_list.iteration}"> <div class="accessories_desc bordercolor col-xs-12 col-sm-9"> <a href="{$accessoryLink|escape:'htmlall':'UTF-8'}" title="{$accessory.legend|escape:'htmlall':'UTF-8'}" class="accessory_image product_img_link bordercolor"> <img src="{$link->getImageLink($accessory.link_rewrite, $accessory.id_image, 'medium_default')|escape:'html'}" alt="{$accessory.legend|escape:'htmlall':'UTF-8'}" /></a> <h5><a class="product_link" href="{$accessoryLink|escape:'htmlall':'UTF-8'}">{$accessory.name|truncate:22:'...':true|escape:'htmlall':'UTF-8'}</a></h5> </div> <div class="accessories_price col-xs-12 col-sm-3"> {if $accessory.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<span class="price" style="position:relative;top:170px;width:45px;right:122px;">{if $priceDisplay != 1}{displayWtPrice p=$accessory.price}{else}{displayWtPrice p=$accessory.price_tax_exc}{/if}</span>{/if} </div> {if !$PS_CATALOG_MODE && ($accessory.allow_oosp || $accessory.quantity > 0)} <a class="exclusive button btn btn-default ajax_add_to_cart_button btn_add_cart" style="position:relative;top: 62px;right: 30px;" href="{$link->getPageLink('cart', true, NULL, "qty=1&id_product={$accessory.id_product|intval}&token={$static_token}&add")|escape:'html'}" rel="ajax_id_product_{$accessory.id_product|intval}" title="{l s='Add to cart'}"><span>{l s='Add to cart'}</span></a> {else} <span class="exclusive disabled">{l s='Add to cart'}</span> <span class="availability"> {if (isset($accessory.quantity_all_versions) && $accessory.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if} </span> {/if} </li> {/if} {/foreach} </ul> </div> {/if} </section> {/if} <script type="text/javascript"> $("#idTab4").carouFredSel({ debug: true, circular: true, infinite: true, responsive: true, align : "center", width: '100%', auto : { play : 1, timeoutDuration :15000 }, items : { visible: { min: 2, max: 6 }, width:167, }, scroll : { items : 1, pauseOnHover:false }, prev : { button : "#cat_prev" }, next : { button : "#cat_next" }, swipe: { onMouse: false, onTouch: true } }, { classnames : { selected : "selected", hidden : "hidden", disabled : "disabled", paused : "paused", stopped : "stopped" }, }); </script> <div class="extra-box-product"> {if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if} {if (isset($quantity_discounts) && count($quantity_discounts) > 0)} <script type="text/javascript"> $(function() { $('#quantityDiscount table').footable(); breakpoints: { phone: 480 } }); </script> <section id="quantityDiscount" class="page_product_box toggle_frame"> <h3 class="toggle">{l s='Sliding scale pricing'}<i class="icon-toggle icon-minus-sign-alt"></i></h3> <div class="toggle_content"> <table class="table table-bordered table-hover std shop_table footable "> <thead> <tr> <th data-class="expand">{l s='Product'}</th> <th data-hide="phone">{l s='From (qty)'}</th> <th data-hide="phone">{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> </section> {/if} {if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments)} {if $attachments} <section class="page_product_box toggle_frame attachment_product"> <h3 class="toggle">{l s='Download'}<i class="icon-toggle icon-minus-sign-alt"></i></h3> <div class="toggle_content"> {if isset($attachments) && $attachments} <ul class="bullet"> {foreach from=$attachments item=attachment} <li> <a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html'}"> <i class="icon-angle-right"></i> {$attachment.name|escape:'htmlall':'UTF-8'} </a> {$attachment.description|escape:'htmlall':'UTF-8'} </li> {/foreach} </ul> {/if} </div> </section> {/if} {if isset($product) && $product->customizable} <section class="page_product_box toggle_frame"> <h3>{l s='Product customization'}<i class="icon-toggle icon-minus-sign-alt"></i></h3> <div class="customization_block toggle_content"> <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 titled_box clearfix"> <h2><span>{l s='Pictures'}</span></h2> <ul id="uploadable_files" > {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 class="btn btn-danger" href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html'}" title="{l s='Delete'}" ><i class="icon-trash icon-large"></i>{l s='Delete'} </a> </div> {/if} <div class="form-group"> <label class="customizationUploadBrowseDescription">{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your computer'}{/if}{if $field.required}^*{/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 titled_box clearfix"> <h2><span>{l s='Text'}</span></h2> <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}"> <p class="form-group"> <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}^*{/if}</label> <textarea class="form-control" name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="4" cols="40" class="customization_block_input" >{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea> </p> </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 btn btn-default" 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><p class="required">^* {l s='required fields'}</p> </form> </div> </section> {/if} <!--<section id="last_page_product" class="page_product_box toggle_frame"> {$HOOK_PRODUCT_TAB} <div id="more_info_sheets" class="toggle_content toggle_content_comment"> {if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}{$HOOK_PRODUCT_TAB_CONTENT}{/if} </div> </section> {/if} </div> {/if}

Hi guys, i've a problem with jqZoom, well, I bought a theme that contains jqZoom and another type of visualization image, and when in the panel administration I activate jqZoom doesn't work, don't appear anything and I don't know what can i do. Attach my product.js and if someone can help me will be fantastic. (Sorry for my english) /* * 2007-2013 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-2013 PrestaShop SA * @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)) setTimeout(oosHookJsCodeFunctions + '()', 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 a:hidden').show(); $('#add_to_cart > span:visible').hide(); //hide the hook out of stock $('#oosHook').hide(); $('#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 a:hidden').show(); $('#add_to_cart > span:visible').hide(); 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 a:visible').hide(); $('#add_to_cart > span:hidden').show(); if(stock_management == 1) $('#availability_statut:hidden').show('slow'); } if (productAvailableForOrder == 0) $('#availability_statut:visible').hide(); } if (selectedCombination['reference'] || productReference) { if (selectedCombination['reference']) $('#product_reference span').text(selectedCombination['reference']); else if (productReference) $('#product_reference span').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 newSrc = domAAroundImgThumb.attr('href').replace('thickbox', 'large'); if ($('#bigpic').attr('src') != newSrc) { $('#bigpic').attr('src', newSrc); if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled) $('#bigpic').attr('rel', domAAroundImgThumb.attr('href')), $('#zoom1').attr('href', domAAroundImgThumb.attr('href')), $('#mousetrap_img').attr('rel', domAAroundImgThumb.attr('href')).attr('src', domAAroundImgThumb.attr('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) { if ($('body').find('.container').outerWidth() ==1170) { serialScrollNbImagesDisplayed = 4; } else if (1170 > $('body').find('.container').width() > 720) { serialScrollNbImagesDisplayed = 3; } else if ($('body').find('.container').width() ==720) { serialScrollNbImagesDisplayed = 2; } else { serialScrollNbImagesDisplayed = 3; } 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').fadeTo(0, leftArrow ? 0 : 1).css('display', leftArrow ? 'none' : 'block'); $('#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:'x'}); 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++) if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled) { $('#thumbnail_' + parseInt(combinationImages[id_product_attribute])).show().children('a.shown').trigger("click"); } else { $('#thumbnail_' + parseInt(combinationImages[id_product_attribute])).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').width() + parseInt($('#thumbs_list_frame >li').css('marginRight')); $('#thumbs_list_frame').width((parseInt((thumb_width) * $('#thumbs_list_frame >li').length)) + 'px'); $('#thumbs_list').trigger('goto', 0); serialScrollFixLock('', '', '', '', 0);// SerialScroll Bug on goto 0 ? } //To do after loading HTML function galeryReload () { //init the serialScroll for thumbs $('#thumbs_list').serialScroll({ items:'li:visible', prev:'#view_scroll_left', next:'#view_scroll_right', axis:'x', offset:0, start:0, stop:true, onBefore:serialScrollFixLock, duration:700, step: 1, lazy: true, lock: false, force:false, cycle:false }); $('#thumbs_list').trigger('goto', 1);// SerialScroll Bug on goto 0 ? $('#thumbs_list').trigger('goto', 0); } $(document).ready(galeryReload); $(window).resize(refreshProductImages); $(document).ready(function() { if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled == false) { //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')); $('#zoom1').attr('href', $('#bigpic').attr('src').replace('large', 'thickbox')), $('#mousetrap_img').attr('rel',$('#bigpic').attr('src').replace('large', 'thickbox')).attr('src', $('#bigpic').attr('src').replace('large', 'thickbox')) } //add a link on the span 'view full size' and on the big image $('#view_full_size, #image-block img').click(function(){ $('#views_block .shown').click(); }); //catch the click on the "more infos" button at the top of the page $('#short_description_block .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', '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'); $('#minimal_quantity_wanted_p').css('color', 'red'); } else { $('#quantity_wanted').css('border', '1px solid #BDC2C9'); $('#minimal_quantity_wanted_p').css('color', '#374853'); } } 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.7, 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['id_attribute'] === tab_attributes[a]) request += '/'+attributesCombinations['group'] + '-' + attributesCombinations['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.location || 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.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 = url; } // no combination found = removing attributes from url else window.location = url.substring(0, url.indexOf('#')); } } } // product quantity change buttons $(document).ready(function(){ // The button to increment the product value $('.product_quantity_up').click(function(e){ e.preventDefault(); fieldName = $(this).attr('rel'); var currentVal = parseInt($('input[name=+fieldName+]').val()); if (quantityAvailable > 0) { quantityAvailableT = quantityAvailable; } else { quantityAvailableT = 100000000; } if (!isNaN(currentVal) && currentVal < quantityAvailableT) { $('input[name=+fieldName+]').val(currentVal + 1).trigger('keyup'); } else { $('input[name=+fieldName+]').val(quantityAvailableT); } return false; }); // The button to decrement the product value $(".product_quantity_down").click(function(e) { e.preventDefault(); fieldName = $(this).attr('rel'); var currentVal = parseInt($('input[name=+fieldName+]').val()); if (!isNaN(currentVal) && currentVal > 1) { $('input[name=+fieldName+]').val(currentVal - 1).trigger('keyup'); } else { $('input[name=+fieldName+]').val(1); } return false; }); });