Jump to content

[SOLVED] Add color name from colorPickerClick selection to product page

JLE
 Share

Recommended Posts

JLE Newbie

JLE

Posted
Posted (edited)

Hello,

 

I would like to add the displayed color attribute name "{$colors.$id_attribute.name}" besides the product reference on the product page (see picture in attachment).

 

 

 

For the moment I'm not able to display this content dynamically at the onclick event. I suppose it has to be integrated within my theme's product.js (colorPickerClick or getProductAttribute or findCombination function)?

 

Thank you for sharing your knowledge and time!

 

 

 

product.tpl section:

 

{elseif (isset($group.group_type) && $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 $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" /><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}" />
 

Theme product.js content:

 

var addCombination;
var findCombination;
var updateDisplay;
var displayImage;
var displayDiscounts;
var serialScrollFixLock;
var refreshProductImages;
var saveCustomization;
var submitPublishProduct;
var checkMinimalQuantity;
var colorPickerClick;
var getProductAttribute;
var initLocationChange;
var checkUrl;
var updateColorSelect;
 
//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))
setTimeout(oosHookJsCodeFunctions+'()', 0);
}
}
 
if (prestashop_version == '1.5')
{
//add a combination of attributes in the global JS sytem
addCombination = function(idCombination, arrayOfIdAttributes, quantity, price, ecotax, id_image, reference, unit_price, minimal_quantity, available_date, combination_specific_price)
{
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;
combination['available_date'] = available_date;
combination['specific_price'] = new Array();
combination['specific_price'] = combination_specific_price;
combinations.push(combination);
}
 
// search the combinations' case of attributes and update displaying of availability, prices, ecotax, and image
findCombination = function(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, div#attributes input[type=hidden], div#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;
updateDisplay();
}
 
//update display of the availability of the product AND the prices of the product
updateDisplay = function()
{
if (!selectedCombination['unavailable'] && quantityAvailable > 0 && productAvailableForOrder == 1)
{
//show the choice of quantities
$('#quantity_wanted_p:hidden').show('slow');
 
//show the "add to cart" button ONLY if it was hidden
$('#add_to_cart:hidden').fadeIn(600);
 
//hide the hook out of stock
$('#oosHook').hide();
 
//hide availability date
$('#availability_date_label').hide();
$('#availability_date_value').hide();
 
//availability value management
if (availableNowValue != '')
{
//update the availability statut of the product
$('#availability_value').removeClass('outofstock');
$('#availability_value').removeClass('available_later');
$('#availability_value').addClass('available');
$('#availability_value').text(availableNowValue);
if(stock_management == 1)
$('#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('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').removeClass('available');
$('#availability_value').removeClass('available_later');
$('#availability_value').text(doesntExistNoMore + (globalQuantity > 0 ? ' ' + doesntExistNoMoreBut : '')).addClass('outofstock');
}
else
{
$('#availability_value').removeClass('available');
$('#availability_value').removeClass('available_later');
$('#availability_value').text(doesntExist).addClass('outofstock');
$('#oosHook').hide();
}
if(stock_management == 1)
$('#availability_statut:hidden').show();
 
//display availability date
if (selectedCombination.length)
{
var available_date = selectedCombination['available_date'];
tab_date = available_date.split('-');
var time_available = new Date(tab_date[2], tab_date[1], tab_date[0]);
time_available.setMonth(time_available.getMonth()-1);
var now = new Date();
// date displayed only if time_available
if (now.getTime() < time_available.getTime())
{
$('#availability_date_value').text(selectedCombination['available_date']);
$('#availability_date_label').show();
$('#availability_date_value').show();
}
else
{
$('#availability_date_label').hide();
$('#availability_date_value').hide();
}
}
//show the 'add to cart' button ONLY IF it's possible to buy when out of stock AND if it was previously invisible
if (allowBuyWhenOutOfStock && !selectedCombination['unavailable'] && productAvailableForOrder == 1)
{
$('#add_to_cart:hidden').fadeIn(600);
 
if (availableLaterValue != '')
{
$('#availability_value').removeClass('outofstock');
$('#availability_value').removeClass('available');
$('#availability_value').addClass('available_later');
$('#availability_value').text(availableLaterValue);
if(stock_management == 1)
$('p#availability_statut:hidden').show('slow');
}
else
$('p#availability_statut:visible').hide('slow');
}
else
{
$('#add_to_cart:visible').fadeOut(600);
if(stock_management == 1)
$('p#availability_statut:hidden').show('slow');
}
 
if (productAvailableForOrder == 0)
$('p#availability_statut:visible').hide();
}
 
if (selectedCombination['reference'] || productReference)
{
if (selectedCombination['reference'])
$('#product_reference span').text(selectedCombination['reference']);
else if (productReference)
$('#product_reference span').text(productReference);
$('#product_reference:hidden').show();
}
else
$('#product_reference:visible').hide();
 
//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 display_specific_price;
if (selectedCombination.specific_price)
{
display_specific_price = selectedCombination.specific_price['price'];
if (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(selectedCombination['specific_price'].reduction_price, currencyFormat, currencySign, currencyBlank));
$('#reduction_percent').hide();
$('#reduction_amount').show();
} else {
$('#reduction_percent').hide();
$('#reduction_amount').hide();
}
}
else
{
display_specific_price = product_specific_price['price'];
if (product_specific_price['reduction_type'] == 'percentage')
$('#reduction_percent_display').html(product_specific_price['specific_price'].reduction_percent);
}
 
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')
$('#reduction_percent').show();
else
$('#reduction_percent').hide();
if (display_specific_price)
$('#not_impacted_by_discount').show();
else
$('#not_impacted_by_discount').hide();
 
var taxExclPrice = (display_specific_price && display_specific_price >= 0  ? (specific_currency ? display_specific_price : display_specific_price * currencyRate) : priceTaxExclWithoutGroupReduction) + selectedCombination['price'] * currencyRate;
 
if (display_specific_price)
productPriceWithoutReduction = priceTaxExclWithoutGroupReduction + selectedCombination['price'] * currencyRate; // Need to be global => no var
 
if (!displayPrice && !noTaxForThisProduct)
{
productPrice = taxExclPrice * tax; // Need to be global => no var
if (display_specific_price)
productPriceWithoutReduction = ps_round(productPriceWithoutReduction * tax, 2);
}
else
{
productPrice = ps_round(taxExclPrice, 2); // Need to be global => no var
if (display_specific_price)
productPriceWithoutReduction = ps_round(productPriceWithoutReduction, 2);
}
 
var reduction = 0;
if (selectedCombination['specific_price'].reduction_price || selectedCombination['specific_price'].reduction_percent)
{
selectedCombination['specific_price'].reduction_price = (specific_currency ? selectedCombination['specific_price'].reduction_price : selectedCombination['specific_price'].reduction_price * currencyRate);
reduction = productPrice * (parseFloat(selectedCombination['specific_price'].reduction_percent) / 100) + selectedCombination['specific_price'].reduction_price;
if (selectedCombination['specific_price'].reduction_price && (displayPrice || noTaxForThisProduct))
reduction = ps_round(reduction / tax, 6);
}
else if (product_specific_price.reduction_price || product_specific_price.reduction_percent)
{
product_specific_price.reduction_price = (specific_currency ? product_specific_price.reduction_price : product_specific_price.reduction_price * currencyRate);
reduction = productPrice * (parseFloat(product_specific_price.reduction_percent) / 100) + product_specific_price.reduction_price;
if (product_specific_price.reduction_price && (displayPrice || noTaxForThisProduct))
reduction = ps_round(reduction / tax, 6);
}
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);
var our_price = '';
if (productPrice > 0) {
our_price = formatCurrency(productPrice, currencyFormat, currencySign, currencyBlank);
} else {
our_price = formatCurrency(0, currencyFormat, currencySign, currencyBlank);
}
$('#our_price_display').text(our_price);
$('#old_price_display').text(formatCurrency(productPriceWithoutReduction, currencyFormat, currencySign, currencyBlank));
if (productPriceWithoutReduction > productPrice)
$('#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"
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
displayImage = function(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').fadeOut((no_animation ? 0 : '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');
}
}
 
//update display of the discounts table
displayDiscounts = function(combination)
{
$('#quantityDiscount table 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).length != 0) {
$('#quantityDiscount_'+combination).show();
$('#noQuantityDiscount').hide();
} else
$('#noQuantityDiscount').show();
}
 
// Serialscroll exclude option bug ?
serialScrollFixLock = function(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
refreshProductImages = function(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])).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) + 3) + 'px'); //  Bug IE6, needs 3 pixels more ?
}
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:700,
step: 2,
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: 200, //zooming div default width(default width value is 200)
yzoom: 200, //zooming div default width(default height value is 200)
offset: 21 //zooming div default offset(default offset value is 10)
//position: "right" //zooming div position(default position value is "right")
});
}
//add a link on the span 'view full size' and on the big image
$('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.lnk').click(function(){
$('#more_info_tab_more_info').click();
$.scrollTo( '#more_info_tabs', 1200 );
});
 
// 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() {
refreshProductImages(0);
});
 
$('.thickbox').fancybox({
'hideOnContentClick': true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
 
original_url = window.location+'';
first_url_check = true;
checkUrl();
initLocationChange();
 
});
 
saveCustomization = function()
{
$('#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();
}
 
submitPublishProduct = function(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;
}
 
checkMinimalQuantity = function(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');
}
}
 
colorPickerClick = function(elt)
{
id_attribute = $(elt).attr('id').replace('color_', '');
$(elt).parent().parent().children().removeClass('selected');
$(elt).fadeTo('fast', 1, function(){
$(this).fadeTo('fast', 0, function(){
$(this).fadeTo('fast', 1, function(){
$(this).parent().addClass('selected');
});
});
});
$(elt).parent().parent().parent().children('.color_pick_hidden,#color_pick_hidden').val(id_attribute);
findCombination(false);
}
 
 
getProductAttribute = function()
{
// 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 = new Array();
$('div#attributes select, div#attributes input[type=hidden], div#attributes input[type=radio]:checked').each(function(){
tab_attributes.push($(this).val());
});
 
// build new request
for (i in attributesCombinations)
for (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;
}
 
initLocationChange = function(time)
{
if(!time) time = 500;
setInterval(checkUrl, time);
}
 
checkUrl = function()
{
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 = new Array();
if (tabParams[0] == '')
tabParams.shift();
for (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 (z in tabValues)
for (a in attributesCombinations)
if (attributesCombinations[a]['group'] == decodeURIComponent(tabValues[z][0])
&& attributesCombinations[a]['attribute'] == tabValues[z][1])
{
count++;
// add class 'selected' to the selected color
$('#color_'+attributesCombinations[a]['id_attribute']).addClass('selected');
$('#color_'+attributesCombinations[a]['id_attribute']).parent().addClass('selected');
$('input:radio[value='+attributesCombinations[a]['id_attribute']+']').attr('checked', true);
$('input:hidden[name=group_'+attributesCombinations[a]['id_attribute_group']+']').val(attributesCombinations[a]['id_attribute']);
$('select[name=group_'+attributesCombinations[a]['id_attribute_group']+']').val(attributesCombinations[a]['id_attribute']);
}
// find combination
if (count >= 0)
{
findCombination(false);
original_url = window.location+'';
}
// no combination found = removing attributes from url
else
window.location = url.substring(0, url.indexOf('#'));
}
}
}
}
 
 
 
if (prestashop_version == '1.4')
{
//add a combination of attributes in the global JS sytem
addCombination = function(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
findCombination = function(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();
}
 
updateColorSelect = function(id_attribute)
{
if (id_attribute == 0)
{
refreshProductImages(0);
return ;
}
// Visual effect
$('#color_'+id_attribute).parent().parent().find('a').removeClass('selected'); 
$('#color_'+id_attribute).addClass('selected');
$('#color_'+id_attribute).parent().parent().find('a').parent().removeClass('selected'); 
$('#color_'+id_attribute).parent().addClass('selected');
// 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
updateDisplay = function()
{
if (!selectedCombination['unavailable'] && quantityAvailable > 0 && productAvailableForOrder == 1)
{
//show the choice of quantities
$('#quantity_wanted_p:hidden').show('slow');
 
//show the "add to cart" button ONLY if it was hidden
$('#add_to_cart:hidden').fadeIn(600);
 
//hide the hook out of stock
$('#oosHook').hide();
 
//availability value management
if (availableNowValue != '')
{
//update the availability statut of the product
$('#availability_value').removeClass('outofstock');
$('#availability_value').removeClass('available_later');
$('#availability_value').addClass('available');
$('#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('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').removeClass('available');
$('#availability_value').removeClass('available_later');
$('#availability_value').text(doesntExistNoMore + (globalQuantity > 0 ? ' ' + doesntExistNoMoreBut : '')).addClass('outofstock');
}
else
{
$('#availability_value').removeClass('available');
$('#availability_value').removeClass('available_later');
$('#availability_value').text(doesntExist).addClass('outofstock');
$('#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(600);
 
if (availableLaterValue != '')
{
$('#availability_value').removeClass('outofstock');
$('#availability_value').removeClass('available');
$('#availability_value').addClass('available_later');
$('#availability_value').text(availableLaterValue);
$('p#availability_statut:hidden').show('slow');
}
else
$('p#availability_statut:visible').hide('slow');
}
else
{
$('#add_to_cart:visible').fadeOut(600);
$('p#availability_statut:hidden').show('slow');
}
 
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();
}
else
$('#product_reference:visible').hide();
 
//update display of the the prices in relation to tax, discount, ecotax, and currency criteria
if (!selectedCombination['unavailable'] && productShowPrice == 1)
{
var combination_add_price = selectedCombination['price'] * group_reduction;
 
var tax = (taxRate / 100) + 1;
var taxExclPrice = (specific_price ? (specific_currency ? specific_price : specific_price * currencyRate) : productPriceTaxExcluded) + combination_add_price * currencyRate;
 
if (specific_price)
var productPriceWithoutReduction = productPriceTaxExcluded + combination_add_price * currencyRate;
 
if (!displayPrice && !noTaxForThisProduct)
{
 
var productPrice = ps_round(taxExclPrice * tax, 2);
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 = reduction / tax;
}
 
if (!specific_price)
productPriceWithoutReduction = productPrice;
productPrice -= reduction;
 
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
displayImage = function(domAAroundImgThumb)
{
    if (domAAroundImgThumb.attr('href'))
    {
        var newSrc = domAAroundImgThumb.attr('href').replace('thickbox','large');
        if ($('#bigpic').attr('src') != newSrc)
        {
            $('#bigpic').fadeOut('slow', function(){
                $(this).attr('src', newSrc).fadeIn('slow');
                if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
               $(this).attr('alt', domAAroundImgThumb.attr('href'));
            });
        }
        $('#views_block li a').removeClass('shown');
        $(domAAroundImgThumb).addClass('shown');
    }
}
 
// Serialscroll exclude option bug ?
serialScrollFixLock = function(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
refreshProductImages = function(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])).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'); //  Bug IE6, needs 3 pixels more ?
}
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:700,
step: 2,
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: 200, //zooming div default width(default width value is 200)
yzoom: 200, //zooming div default width(default height value is 200)
offset: 21 //zooming div default offset(default offset value is 10)
//position: "right" //zooming div position(default position value is "right")
});
}
 
//add a link on the span 'view full size' and on the big image
$('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.lnk').click(function(){
$('#more_info_tab_more_info').click();
$.scrollTo( '#more_info_tabs', 1200 );
});
 
// 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);
});
 
$('.thickbox').fancybox({
'hideOnContentClick': true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
 
saveCustomization = function()
{
$('#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();
}
 
submitPublishProduct = function(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;
}
 
checkMinimalQuantity = function(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');
}
}
}

 

 

  post-552991-0-92942200-1381309322_thumb.png

Edited by JLE (see edit history)
Link to comment
Share on other sites
gonebdg - webindoshop.com Newbie

gonebdg - webindoshop.com

Posted
Posted

I think you can add the necessary function straight into the onclick handler in the tpl file.

Create a html inline element to put the color name. You can set the position with css to align with product reference element

<span id="theColorname"></span>

Then add this function into the onclick handler

$('#theColorname').text('{$colors.$id_attribute.name}');
  • Like 1
Link to comment
Share on other sites
JLE Newbie

JLE

Posted
  • Author
Posted

Hi,

 

Thanks gonebdg for your reply.

 

For the moment I'm still hesitating on the location to put the code in the product.tpl file. Depending on where I drop the changes I get either the first color attribute name or the last one. The value never changes when clicking on the different attributes...

 

Do you have any idea what I'm doing wrong?

Link to comment
Share on other sites
gonebdg - webindoshop.com Newbie

gonebdg - webindoshop.com

Posted
Posted

Hmmm ... you just have to put the function into the onclick handler on the html <a> tag inside foreach

i'm copying your code above and modifying in here, please read the notes (smarty comment) :

 

Part-1

{foreach from=$group.attributes key=id_attribute item=group_attribute}
        {* modification#1 : defining default color name *}
        {if $group.default == $id_attribute}{assign var=theDefaultColor value=$colors.$id_attribute.name}{/if}
        <li{if $group.default == $id_attribute} class="selected"{/if}>
                  {* modification#2 : add js function on the onclick handler to get the selected color value *}
                  <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();$('#theColorname').text('{$colors.$id_attribute.name}');{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
                          {if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
                                  <img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" /><br>
                          {/if}
                  </a>
        </li>
        {if ($group.default == $id_attribute)}{$default_colorpicker = $id_attribute}{/if}
{/foreach}

Part-2

{* let say your product reference html block/element is in here *}
<p id="product_reference" {if isset($groups) OR !$product->reference}style="display: none;"{/if}>
     <label>{l s='Reference:'} </label>
     <span class="editable">{$product->reference|escape:'htmlall':'UTF-8'}</span>
</p>

{* create and place the new html inline element to put the color name *}
<span id="theColorname">{$theDefaultColor}</span>

Then you can create a new CSS rule (in product.css file) to adjust the position and styling the new element
e.g:

#theColorname {
    font-weight: bold;
    margin-left: 10px;
    /* ... your css code ... */
}
  • Like 2
Link to comment
Share on other sites
JLE Newbie

JLE

Posted
  • Author
Posted

Gonebdg, you are the best ;)

 

Works like a charm and I finally understand my mistake(s) :)

 

I still have one small question for you, the new CSS rule is not applied to the html element. Do you have any idea for this one too?

 

Thanks!

 

 

FYI: the different elements have the following CSS

 

#buy_block #product_reference {clear:left}
#buy_block #product_reference label {width:auto}
#buy_block #product_reference span {display:inline-block;font-weight:bold;color:#D28990;padding:4px 0}
Link to comment
Share on other sites
gonebdg - webindoshop.com Newbie

gonebdg - webindoshop.com

Posted
Posted

clear the browser cache and make sure the css loaded is the modified one

on firefox press Ctrl + Shift + Del , select cache and click "Clear Now"

and then, make sure by opening the css file e.g http://mydomain.com/theme/MY_THEME/css/product.css

Press Ctrl + F5 if necessary (force reload)

is your css modification (the new css rule) is there ?

  • Like 1
Link to comment
Share on other sites
  • 1 year later...
LEOo Newbie

LEOo

Posted
Posted 



Hi everybody, i'm searching to do the same thing on a 1.6(0.9) installation (and the standard bootstrap theme): add the color attribute value next to the product name.

Help would be appreciated, my skills.

I would like to have something like that on product.tpl line 153

<h1 itemprop="name">{$product->name|escape:'html':'UTF-8'} - {$colors.$id_attribute.name|escape:'html':'UTF-8'}</h1>


This actually doesn't work.


Link to comment
Share on other sites
  • 6 months later...
Alex-on2 Newbie

Alex-on2

Posted
Posted (edited)

 

I think you can add the necessary function straight into the onclick handler in the tpl file.

 

Create a html inline element to put the color name. You can set the position with css to align with product reference element

<span id="theColorname"></span>

Then add this function into the onclick handler

$('#theColorname').text('{$colors.$id_attribute.name}');

Thank you! It works!  :) 

Edited by Alex-on2 (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
sightless Newbie

sightless

Posted
Posted

Hello,

 

The above all works OK in Prestashop 1.6... however one little quirk!

 

If you link directly to a combination that is not default (lets say there is 3 colors, black, pink, blue, and black is default)...

 

And if you directly link to say... blue

 

Your direct link URL would be: #/color-blue

 

Then when you directly link to THAT  color combination (instead of using picker on default page)... the color would still show the default "black" instead of the actually selected "blue"...

 

Any ideas on how to get it to display the actual color selected in this instance? I think some .js in order?

Link to comment
Share on other sites
gonebdg - webindoshop.com Newbie

gonebdg - webindoshop.com

Posted
Posted

Hello,

 

The above all works OK in Prestashop 1.6... however one little quirk!

 

If you link directly to a combination that is not default (lets say there is 3 colors, black, pink, blue, and black is default)...

 

And if you directly link to say... blue

 

Your direct link URL would be: #/color-blue

 

Then when you directly link to THAT  color combination (instead of using picker on default page)... the color would still show the default "black" instead of the actually selected "blue"...

 

Any ideas on how to get it to display the actual color selected in this instance? I think some .js in order?

 

a little bit forget about this topic :D

but i believe you need to modify product.js file

there is a script in there which controlling such matter. it will read the URL parameter related to attribute combination (in this case is color) which usually prefixed with # and each attribute combinations will be separated with /

//domain.com/iso_lang/default_category/id-product.html#/id-attr_name-attr_val/another_attr_here

 

Just search with keyword "color_pick" or "#color" within product.js file, you might found the related script or function, then do the necessary modification.

maybe something like this :

// define new variable for selected color with value false
var selected_color = false;

// get the color value from URL and set as new value of selected_color var
// NOTICE YOU CAN NOT DO LIKE THIS, THIS IS JUST AN EXAMPLE
if (attr_name == 'color')
   selected_color = attr_val;

// if selected color is not false, change the content of corresponding html tag
if (selected_color)
   $('#theColorname').text(selected_color);
Link to comment
Share on other sites
sightless Newbie

sightless

Posted
Posted (edited)

Hello gonebdg,
 
Thanks for the response. The idea makes sense. However, I didn't really find anything in my product.js that handles this. Closest thing is:


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[i].split('-'));
product_id = $('#product_page_product_id').val();
// fill html with values
$('.color_pick').removeClass('selected');
$('.color_pick').parent().parent().children().removeClass('selected');
count = 0;
for (var z in tabValues)
for (var a in attributesCombinations)
if (attributesCombinations[a]['group'] === decodeURIComponent(tabValues[z][0])
&& attributesCombinations[a]['attribute'] === tabValues[z][1])
{
count++;
// add class 'selected' to the selected color
$('#color_' + attributesCombinations[a]['id_attribute']).addClass('selected');
$('#color_' + attributesCombinations[a]['id_attribute']).parent().addClass('selected');
$('input:radio[value=' + attributesCombinations[a]['id_attribute'] + ']').attr('checked', true);
$('input:hidden[name=group_' + attributesCombinations[a]['id_attribute_group'] + ']').val(attributesCombinations[a]['id_attribute']);
$('select[name=group_' + attributesCombinations[a]['id_attribute_group'] + ']').val(attributesCombinations[a]['id_attribute']);
}
// find combination
if (count >= 0)
{
findCombination(false);
original_url = url;
}
// no combination found = removing attributes from url
else
window.location = url.substring(0, url.indexOf('#'));
}
}
}
Edited by sightless (see edit history)
Link to comment
Share on other sites
gonebdg - webindoshop.com Newbie

gonebdg - webindoshop.com

Posted
Posted (edited)

That's it ...

 

Try to add following script underneath js comment   // fill html with values

// define new variable for selected color with value false
var selectedColor = false;

// count number of combinations from the URL
var nb_attr = tabParams.length;

// get the color value from the loop
for (var i=0; i<nb_attr i++)
{
      if (tabValues[i][1] == "color")
            selectedColor = tabValues[i][2];
}

// if selected color is not false, change the content of corresponding html tag
// in this example the html tag had an ID = theColorname
if (selectedColor )
      $('#theColorname').text(selectedColor);

If you visit the product page with URL //domain.com/product.html#/1-color-blue/

Then the selected_color var should have a value blue

and the html tag will filled with a text blue

<span id="theColorname">blue</span>
Edited by gonebdg - webindoshop.com (see edit history)
  • Like 1
Link to comment
Share on other sites
sightless Newbie

sightless

Posted
Posted (edited)

Thank you! but applying the code above does not allow people to select the color on the page...

 

I believe there is a syntax error at:

for (var i=0; i<nb_attr i++)

Hmm... so I added a semi colon as seen below... and now I can select color again BUT

for (var i=0; i<nb_attr; i++)

With above line... upon page refresh... the default color is selected and the text is still the default as well... Also the page ends up looking a little odd like something became corrupted hmm... so seems something further is an issue.

 

I really thank you for the help so far however... seems like unlocking this answer is soon!

Edited by sightless (see edit history)
Link to comment
Share on other sites
gonebdg - webindoshop.com Newbie

gonebdg - webindoshop.com

Posted
Posted (edited)

Thank you! but applying the code above does not allow people to select the color on the page...

 

I believe there is a syntax error at:

for (var i=0; i<nb_attr i++)

Hmm... so I added a semi colon as seen below... and now I can select color again BUT

for (var i=0; i<nb_attr; i++)

With above line... upon page refresh... the default color is selected and the text is still the default as well... Also the page ends up looking a little odd like something became corrupted hmm... so seems something further is an issue.

 

I really thank you for the help so far however... seems like unlocking this answer is soon!

 

Ah yes you're right, there is a typo ... missing semi colon.

 

Not sure how you implement it within your PrestaShop, but those modification is to show the selected attribute value (in this case, color value) on the corresponding html tag according to specified ID.

Can you share the screenshots and show me the problem to know the end result that you want to accomplish?

 

Edited

i've manage my time and try to implement this to my demo site (PrestaShop v.1.6.0.14), and everything are working well.

But I've realized, there is a small difference about the combination parameter on the URL on my previous example

It was stated as

//domain.com/product.html#/1-color-blue/ (pay attention, there is an id here)

array[0] => 1

array[1] => color

array[2] => blue

But then in fact there is no id within the combination parameter on the URL

//domain.com/product.html#/color-blue/

array[0] => color

array[1] => blue

So, you should change my previous modification script as follow :

// define new variable for selected color with value false
var selectedColor = false;

// count number of combinations from the URL
var nb_attr = tabParams.length;

// get the color value from the loop ; Attention! Changes was made to this part, read all new comments below
for (var i=0; i<nb_attr; i++)
{
      // previously the array key used on the if statement was defined as 1
      // but because there is no id within the combination parameter on the URL
      // we should change the array key as 0
      // and change the array key used to get the color value as 1
      // In here i'm also adding small improvement to uppercase the first letter of color value
      if (tabValues[i][0] == "color")
            selectedColor = tabValues[i][1].charAt(0).toUpperCase() + tabValues[i][1].slice(1);
}

// if selected color is not false, change the content of corresponding html tag
// in this example the html tag had an ID = theColorname
if (selectedColor)
      $('#theColorname').text(selectedColor);

I'm also have to inform, if you used Prestashop v.1.6.1.0 then you don't have to create and define new variable nb_attr as shown above, because within the product.js file there was an available variable which already define the count number of combinations from the URL  :

var len = tabParams.length;

Click here for working example

[//demo.webindoshop.com/en/tshirts/1-faded-short-sleeves-tshirt.html#/size-s/color-blue]

Edited by gonebdg - webindoshop.com (see edit history)
  • Like 2
Link to comment
Share on other sites
gonebdg - webindoshop.com Newbie

gonebdg - webindoshop.com

Posted
Posted

gonebdg,

 

Looks like solution above is great... but not working for me. I PM'd you the site with the code implemented so you can see the issue. Perhaps there is something more or something that could get this solution to work. Please check PM, and we can make solution public if there is some breakthrough there and I'll edit this post.

Again ... there is a typo on my previous post, sorry for that :(

 

Please check again your product.js and fix the typo >>> selectedColor Vs selected_color

 

Has been fixed on the previous post above.

Link to comment
Share on other sites
  • 1 month later...
Thomas0891 Newbie

Thomas0891

Posted
Posted

Hi gonebdg,

 

great job! Thank you!

I get it also working but two little things are strange on my installation. The theDefaultColor is always empty. I set it in the foreach loop like in your example, but it is always empty.

The second problem is the modified checkUrl function in the product.js. In my test environment with prestashop 1.6.0.11 it worked but for the version 1.6.0.9 it doesn't. What is the different?

Link to comment
Share on other sites
gonebdg - webindoshop.com Newbie

gonebdg - webindoshop.com

Posted
Posted

Hi gonebdg,

 

great job! Thank you!

I get it also working but two little things are strange on my installation. The theDefaultColor is always empty. I set it in the foreach loop like in your example, but it is always empty.

The second problem is the modified checkUrl function in the product.js. In my test environment with prestashop 1.6.0.11 it worked but for the version 1.6.0.9 it doesn't. What is the different?

 

Please read my previous post #16

You might found an idea about the differences.

Link to comment
Share on other sites
Thomas0891 Newbie

Thomas0891

Posted
Posted

Thank you for your quick reply... it was the right hint!

 

My test-system has an english product-catalog. And the live system is german.

The color url is farb-blau instead of color-blue. I totally ignore this fact.

A Problem might be in a multi-language shop... the url is for all languages the same. But thats not importent for me at the moment.

 

The only left problem is the default-color... In your demo-shop it works excellent. I installed a fresh test-copy of presta-shop with the Default Template, and it doesn't work.

 

But I'm happy that I can fixed my issue with the checkUrl function.

Again: Thank you!

Link to comment
Share on other sites
  • 2 years later...
Kaper Explorer

Kaper

Posted
Posted

Hi guys, thanks for your solutions. Working well. BUT i have a one question.

 

The problem is in the JS. If i select some color, it loads color name via JS from the URL?! If i have these colors in my language: (and click on the color combination) 
 

"Červená" (English translate = RED) , the span inside have name "Cervena" instead of "Červená". (Without Punctuation).

This is no issue at all in countries, where didn´t use Extended Latin.

 

 

How Can i fix that please? THANKS !

Link to comment
Share on other sites
  • 1 year later...
  • 6 months later...

Create an account or sign in to comment

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

Create an account

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

Register a new account

Sign in

Already have an account? Sign in here.

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