Problème lien entre l'image et sa couleur

[bewaz]

Bonjour,

 

J'ai un soucis avec ma boutique, quand on choisit une couleur dans le menu déroulant, ce n'est pas la grande photo qui change mais la miniature ...

 

URL vers une fiche produit

 

J'ai eu beau trifouiller partout dans le code (product.js, product.tpl) et désactiver la pluspart des modules, impossible de trouver la source du problème.

 

Ci-dessous les fichiers, product.tpl et product.js, je pense que le problème vient de là ... Si une ame charitable peut m'éclairer, je lui serais grandement reconnaissant.

 

Product.tpl

<div id="image-block">
 {if $have_image}
  <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'produits')}"
{if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="produits" width="{$largeSize.width}" height="{$largeSize.height}" />
 {else}
  <img src="{$img_prod_dir}{$lang_iso}-default-produits.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="240" height="360" />
 {/if}
 </div>
 {if isset($images) && count($images) > 0}

 <!-- thumbnails -->
 <div id="views_block" {if isset($images) && count($images) < 2}class="hidden"{/if} {if isset($images) && count($images) < 4} style="margin: 0;"{/if}>
 {if isset($images) && count($images) > 3}<span class="view_scroll_spacer"><a id="view_scroll_left" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a></span>{/if}
 <div id="thumbs_list" {if isset($images) && count($images) < 4} style="margin: 0;"{/if}>
  <ul id="thumbs_list_frame">
{if isset($images)}
 {foreach from=$images item=image name=thumbnails}
 {assign var=imageIds value="`$product->id`-`$image.id_image`"}
 <li id="thumbnail_{$image.id_image}">
					<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
   <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'small')}" alt="{$image.legend|htmlspecialchars}" height="{$smallSize.height}" width="{$smallSize.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="align_center clear"><span id="wrapResetImages" style="display: none;"><a id="resetImages" href="{$link->getProductLink($product)}" onclick="$('span#wrapResetImages').hide('fast');return (false);">{l s='Display all pictures'}</a></span></p>{/if}
</div>
<!-- attributes -->
  <div id="attributes">
  {foreach from=$groups key=id_attribute_group item=group}
  {if $group.attributes|@count}
  <p>
<label for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} :</label>
{assign var="groupName" value="group_$id_attribute_group"}
<select name="{$groupName}" id="group_{$id_attribute_group|intval}" onchange="javascript:findCombination();{if $colors|@count > 0}$('#wrapResetImages').show('fast');{/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>
  </p>
  {/if}
  {/foreach}
  </div>
  {/if}
  <p id="product_reference" {if isset($groups) OR !$product->reference}style="display: none;"{/if}><label for="product_reference">{l s='Reference :'} </label><span class="editable">{$product->reference|escape:'htmlall':'UTF-8'}</span></p>

 

product.js

//global variables
var combinations = new Array();
var selectedCombination = new Array();
var globalQuantity = new Number;
var colors = new Array();
//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)
{
globalQuantity += quantity;
var combination = new Array();
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;
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 = new Array();
$('div#attributes select').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'];
  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() );
  //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;
updateDisplay();
}
function updateColorSelect(id_attribute)
{
if (id_attribute == 0)
{
 refreshProductImages(0);
 return ;
}
// Visual effect
$('#color_'+id_attribute).fadeTo(0, 1, function(){ $(this).fadeTo(0, 0, function(){ $(this).fadeTo(0, 1, function(){}); }); });
// Attribute selection
$('#group_'+id_color_default+' option[value='+id_attribute+']').attr('selected', 'selected');
$('#group_'+id_color_default+' option[value!='+id_attribute+']').removeAttr('selected');
findCombination();
}
//update display of the availability of the product AND the prices of the product
function updateDisplay()
{
if (!selectedCombination['unavailable'] && quantityAvailable > 0 && productAvailableForOrder == 1)
{
 //show the choice of quantities
 $('#quantity_wanted_p:hidden').show(0);
 //show the "add to cart" button ONLY if it was hidden
 $('#add_to_cart:hidden').fadeIn(50);
 //hide the hook out of stock
 $('#oosHook').hide();
 //availability value management
 if (availableNowValue != '')
 {
  //update the availability statut of the product
  $('#availability_value').removeClass('warning_inline');
  $('#availability_value').text(availableNowValue);
  $('#availability_statut:hidden').show();
 }
 else
 {
  //hide the availability value
  $('#availability_statut:visible').hide();
 }
 //'last quantities' message management
 if (!allowBuyWhenOutOfStock)
 {
  if (quantityAvailable <= maxQuantityToAllowDisplayOfLastQuantityMessage)
$('#last_quantities').show(0);
  else
$('#last_quantities').hide(0);
 }
 if (quantitiesDisplayAllowed)
 {
  $('#pQuantityAvailable:hidden').show(0);
  $('#quantityAvailable').text(quantityAvailable);
  if (quantityAvailable < 2) // we have 1 or less product in stock and need to show "item" instead of "items"
  {
$('#quantityAvailableTxt').show(0);
$('#quantityAvailableTxtMultiple').hide(0);
  }
  else
  {
$('#quantityAvailableTxt').hide(0);
$('#quantityAvailableTxtMultiple').show(0);
  }
 }
}
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(0);
 //hide the quantity of pieces if it was previously visible
 $('#pQuantityAvailable:visible').hide(0);
 //hide the choice of quantities
 if (!allowBuyWhenOutOfStock)
  $('#quantity_wanted_p:visible').hide(0);
 //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();
 }
 $('#availability_statut:hidden').show();

 //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(50);
  if (availableLaterValue != '')
  {
$('#availability_value').text(availableLaterValue);
$('p#availability_statut:hidden').show(0);
  }
  else
$('p#availability_statut:visible').hide(0);
 }
 else
 {
  $('#add_to_cart:visible').fadeOut(50);
  $('p#availability_statut:hidden').show(0);
 }
 if (productAvailableForOrder == 0)
  $('p#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(0);
}
else
 $('#product_reference:visible').hide(0);
//update display of the the prices in relation to tax, discount, ecotax, and currency criteria
if (!selectedCombination['unavailable'] && productShowPrice == 1)
{
 // 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)
 if (!displayPrice && !noTaxForThisProduct)
 {
  var priceTaxExclWithoutGroupReduction = ps_round(productPriceTaxExcluded, 6) * (1 / group_reduction);
 } else {
  var priceTaxExclWithoutGroupReduction = ps_round(productPriceTaxExcluded, 6) * (1 / group_reduction);
 }
 var combination_add_price = selectedCombination['price'] * group_reduction;
 var tax = (taxRate / 100) + 1;
 var taxExclPrice = (specific_price ? (specific_currency ? specific_price : specific_price * currencyRate) : priceTaxExclWithoutGroupReduction) + selectedCombination['price'] * currencyRate;
 if (specific_price)
  var productPriceWithoutReduction = priceTaxExclWithoutGroupReduction + selectedCombination['price'] * currencyRate;
 if (!displayPrice && !noTaxForThisProduct)
 {
  var productPrice = taxExclPrice * tax;
  if (specific_price)
productPriceWithoutReduction = ps_round(productPriceWithoutReduction * tax, 2);
 }
 else
 {
  var productPrice = ps_round(taxExclPrice, 2);
  if (specific_price)
productPriceWithoutReduction = ps_round(productPriceWithoutReduction, 2);
 }
 var reduction = 0;
 if (reduction_price || reduction_percent)
 {
  reduction = productPrice * (parseFloat(reduction_percent) / 100) + reduction_price;
  if (reduction_price && (displayPrice || noTaxForThisProduct))
reduction = ps_round(reduction / tax, 6);
 }
 if (!specific_price)
  productPriceWithoutReduction = productPrice * group_reduction;

 productPrice -= reduction;
 var tmp = productPrice * group_reduction;
 productPrice = ps_round(productPrice * group_reduction, 2);
 var ecotaxAmount = !displayPrice ? ps_round(selectedCombination['ecotax'] * (1 + ecotaxTax_rate / 100), 2) : selectedCombination['ecotax'];
 productPrice += ecotaxAmount;
 productPriceWithoutReduction += ecotaxAmount;
 //productPrice = ps_round(productPrice * currencyRate, 2);
 if (productPrice > 0)
  $('#our_price_display').text(formatCurrency(productPrice, currencyFormat, currencySign, currencyBlank));
 else
  $('#our_price_display').text(formatCurrency(0, currencyFormat, currencySign, currencyBlank));
 $('#old_price_display').text(formatCurrency(productPriceWithoutReduction, currencyFormat, currencySign, currencyBlank));
 /* Special feature: "Display product price tax excluded on product page" */
 if (!noTaxForThisProduct)
  var productPricePretaxed = productPrice / tax;
 else
  var productPricePretaxed = productPrice;
 $('#pretaxe_price_display').text(formatCurrency(productPricePretaxed, currencyFormat, currencySign, currencyBlank));
 /* Unit price */
	productUnitPriceRatio = parseFloat(productUnitPriceRatio);
 if (productUnitPriceRatio > 0 )
 {
	 newUnitPrice = (productPrice / parseFloat(productUnitPriceRatio)) + selectedCombination['unit_price'];
  $('#unit_price_display').text(formatCurrency(newUnitPrice, currencyFormat, currencySign, currencyBlank));
 }
 /* Ecotax */
 var 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)
{
if (domAAroundImgThumb.attr('href'))
{
	var newSrc = domAAroundImgThumb.attr('href').replace('thickbox','produits');
	if ($('#bigpic').attr('src') != newSrc)
	{
		$('#bigpic').fadeOut('fast', function(){
			$(this).attr('src', newSrc).show();
			if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
			 $(this).attr('alt', domAAroundImgThumb.attr('href'));
		});
	}
	$('#views_block li a').removeClass('shown');
	$(domAAroundImgThumb).addClass('shown');
}
}
// Serialscroll exclude option bug ?
function serialScrollFixLock(event, targeted, scrolled, items, position)
{
serialScrollNbImages = $('#thumbs_list li:visible').length;
serialScrollNbImagesDisplayed = 3;
var leftArrow = position == 0 ? true : false;
var rightArrow = position + serialScrollNbImagesDisplayed >= serialScrollNbImages ? true : false;
$('a#view_scroll_left').css('cursor', leftArrow ? 'default' : 'pointer').css('display', leftArrow ? 'none' : 'block').fadeTo(0, leftArrow ? 0 : 1);
$('a#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'});
$('#thumbs_list li').hide();
id_product_attribute = parseInt(id_product_attribute);
if (typeof(combinationImages) != 'undefined' && typeof(combinationImages[id_product_attribute]) != 'undefined')
{
 for (var i = 0; i < combinationImages[id_product_attribute].length; i++)
  $('#thumbnail_' + parseInt(combinationImages[id_product_attribute][i])).show();
}
if (i > 0)
{
 var thumb_width = $('#thumbs_list_frame >li').width()+parseInt($('#thumbs_list_frame >li').css('marginRight'));
 $('#thumbs_list_frame').width((parseInt((thumb_width)* i)) + 'px');
}
else
{
 $('#thumbnail_' + idDefaultImage).show();
 displayImage($('#thumbnail_'+ idDefaultImage +' a'));
}
$('#thumbs_list').trigger('goto', 0);
serialScrollFixLock('', '', '', '', 0);// SerialScroll Bug on goto 0 ?
}
//To do after loading HTML
$(document).ready(function()
{
//init the serialScroll for thumbs
$('#thumbs_list').serialScroll({
 items:'li:visible',
 prev:'a#view_scroll_left',
 next:'a#view_scroll_right',
 axis:'x',
 offset:0,
 start:0,
 stop:true,
 onBefore:serialScrollFixLock,
 duration:100,
 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);
//hover 'other views' images management
$('#views_block li a').hover(
 function(){displayImage($(this));},
 function(){}
);
//set jqZoom parameters if needed
if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
{
 $('img.jqzoom').jqueryzoom({
  xzoom: 340, //zooming div default width(default width value is 200)
  yzoom: 410, //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
$('span#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
$('div#short_description_block p a.view').click(function(){
 $('#more_info_tab_more_info').click();
 $.scrollTo( '#more_info_tabs', 200 );
});
// Hide the customization submit button and display some message
$('p#customizedDatas input').click(function() {
 $('p#customizedDatas input').hide();
 $('#ajax-loader').fadeIn();
 $('p#customizedDatas').append(uploading_in_progress);
});
//init the price in relation of the selected attributes
if (typeof productHasAttributes != 'undefined' && productHasAttributes)
 findCombination(true);
else if (typeof productHasAttributes != 'undefined' && !productHasAttributes)
 refreshProductImages(0);
//
$('a#resetImages').click(function() {
 updateColorSelect(0);
});
function formatTitle(title, currentArray, currentIndex, currentOpts) {
return '<div id="thickbox-title">' + (title && title.length ? '<p>' + title + '</p>' : '' ) + '</div>';
}

$('.thickbox').fancybox({
 'titlePosition' : 'inside',
 'titleFormat' : formatTitle,
 'hideOnContentClick': false,
 'transitionIn' : 'fade',
 'transitionOut' : 'fade',
 'overlayColor' : 'white',
 'overlayOpacity' : 0.5,
 'padding' : 0,
 'speedIn' : 350,
 'speedOut' : 100
});

});
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)
{
var id_product = $('#admin-action-product-id').val();
$.ajaxSetup({async: false});
$.post(url+'/ajax.php', { submitPublishProduct: '1', id_product: id_product, status: 1, redirect: redirect },
 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');
}
}

 

Cordialement. Navré pour la longueur du code

Edited September 29, 2012 by bewaz (see edit history)

[bewaz]

Problème résolu ! Et je ne sais pas trop comment, ...j'ai repris des bouts de code du thème de base et la lumière fut.

[aitsfer]

Bonjour,

 

j'ai le même problème que bewaz, mais ceci n'arrive que quand on clique sur le bouton "vue 360 ", on voit bien le produit en 360°, maintenant, quand on ferme cette fenêtre :

 

- les petites images des coloris (à droite) ne fonctionnent plus, quand on clique dessus ça change pas les coloris des miniatures (groupe d'images au dessous de la grande image)

- quand on choisis un coloris et une pointure et quand on clique sur ajouter au panier , deux produits s'ajoute au lieu d'un seul.

 

 

Voici le lien pour visualiser ce dont je vous ai parlé:http://yasnis.com/tenuemode/product.php?id_product=15