Zdravím,
Chcem dosiahnuť toho, aby po kliknutí na farbu v color picker-i sa zobrazovala aj daná farba niekde ako text (Kvôli SEO a UI)
Potrebujem poradiť ako upraviť tento kód, chyba je len v product.JS aby mi nebralo farbu z linku ale normálne z color pickeru, resp. tak ako je farba uložená pod jej názvom.
Tieto úpravy som spravil, všetko funguje OK, až nato, keď sa načítava farba javascriptom ,tak sa načíta z URL. Takže je bez diakritiky, resp. ak je farba napr. "Bledá ružová" tak sa zobrazuje ako "Bleda_ruzova" atp.
Product.tpl (Doplniť na miesto, kde chceme aby sa zobrazovala farba)
Kód:
<span id="theColorname"></span>
Rovnako v product.tpl nájdeme tento riadok:
Kód:
<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" id="color_{$id_attribute|intval}" name="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"{/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}">
Zmeníme ho na:
Kód:
<a id="color_{$id_attribute|intval}" onclick="colorPickerClick(this);getProductAttribute();$('#theColorname').text('Farba: {$colors.$id_attribute.name}');{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}" href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" name="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"{/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}">
Potom v /theme/vasa-tema/js/product.JS vo funcki checkURL za tento riadok:
Kód:
product_id = $('#product_page_product_id').val();
// fill html with values
Vložíme toto:
Kód:
/ 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] == "farba")
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("Farba: " + selectedColor);
Ak odstránime JS funkciu, farba sa zobrazuje OK (S diakritikou), ale problém je ten, že ak linkneme konkrétnu farbu čiže link bude obsahovať ../#farba-xxxx tak sa farba nenačíta... Načíta sa až po kliknutí na farbu.
Ďakujem za pomoc