PrestaShop Forum

Всем доброго дня!
На странице продукта при выборе цвета используется следующее
{elseif ($group.group_type == 'color')}
.........
<input type="hidden" class="color_pick_hidden" name="{$groupName|escape:'html':'UTF-8'}"  value="{$default_colorpicker|intval}" />

Значение в
value="{$default_colorpicker|intval}"
Решил вывести на странице продукта при выборе иконки с цветом, файл палитры.
Файлы хранятся в папке ..\img\co\ с темже значением {$default_colorpicker|intval}
Вопрос только как при выборе иконки с цветом получить значение {$default_colorpicker|intval} и вывести файл палитры с этим значением (Значение.jpg)
Пробовал ставить через
<input type="hidden" class="color_pick_hidden" name="{$groupName|escape:'html':'UTF-8'}" onclick="addTableColor();" value="{$default_colorpicker|intval}" />
Думал через ява скрипт загружу функцию addTableColor()
Ничего не выходит.
У кого какие соображения есть?

Код вывода палитры на странице товара
{if $img_color_exists}
<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20" />
{/if}

Спасибо за ответ.
Нет так не идет. Может я не правельно объяснил.
На вкладке показано как должно быть.
При выборе иконки цвета в центральной части должно быть увеличенное изображение файла палитры.
Спасибо!

В атрибуте цвет загружаются файлы с изображением цвета (палитра) или квадраты залитые одним цветом. Оба варианта загрузить нельзя.

Спасибо всем кто ответил.
Вопрос то состоял в том что-бы не вывести оба варианта, а при выборе квадратика цвета получить его id, и по его id в центральной части страницы продукта, вывести файл палитры определенным размерам.
Решение может быть таким..
Создал переменную и функцию на странице продукта в нужном месте центральной части
<input type="hidden" class="exclusive_mini" name="colorr" id= "colorr"  onclick="addTableColor();" value="">

<script language="JavaScript">
function addTableColor()
{
qty_ell = document.getElementById('colorr');
qty_ell.value = qty_ell.value+'.jpg';
alert(qty_ell.value);

    }
</script>

В product.js  добавил
function colorPickerClick(elt)
{........
qty_ell = document.getElementById('colorr');
qty_ell.value=(elt).attr('id').replace('color_', '');
$('.exclusive_mini').click();
}
Теперь на странице продукта при выборе значка цвета я получаю значение в переменной colorr, результат во вложении, имя файла палитры.
Как теперь вывести файл палитры вместо alert(qty_ell.value) размером например width="100" height="100"
Типа как-то так
document.write ("<div style="width: 100px; height: 100px; background: url('../img/co/"+qty_ell.value+"')"></div>");
Но так не выводит..
Спасибо.

В стандарной теме функуция определения ид атрибута цвета уже определена в файле /themes/default-bootstrap/js/product.js в colorPickerClick.
$(document).on('click', '.color_pick', function(e){
e.preventDefault();
colorPickerClick($(this));
getProductAttribute();
});
..
Там вы можете добавить свой код.
Для показа выбранного атрибута в всплывающем окне используйте class="fancybox".
Пример можете посмотреть у картинок на странице товара.

Спасибо большое.
Вот смотрите..
На странице продукта в месте перед
{if $PS_STOCK_MANAGEMENT}
стоит фунуция
<script language="JavaScript">
function addTableColor()
{
qty_ell = document.getElementById('suscolorr');
qty_ell.value = qty_ell.value+'.jpg';
alert(qty_ell.value);
document.location.replace("{$base_dir}img/co/"+qty_ell.value)

    }
</script>

При выборе цвета (квадратика), я получаю вывожу
alert(qty_ell.value);
где уже есть qty_ell.value- файл палитры.
По выводу
document.location.replace("{$base_dir}img/co/"+qty_ell.value)
Выводиться файл палитры естественно в новом окне.
Так вот задача не выводить в новом окне или в сплывающем, а вывести в этом месте в центральной части страницы продукта
перед {if $PS_STOCK_MANAGEMENT} но с размерами width="100" height="100"
Может создать HOOK и вставить в это место затем как-то вывести картинку в него?
Или как..

Если в этом месте поставить
<img src="{$base_dir}img/co/24.jpg" width="200" height="200" />
То все как и хотелось.
Но как теперь вместо жесткого 24.jpg поставить значение из скрипта
qty_ell.value
Или наоборот как поставить такую-же типа
<img src="{$base_dir}img/co/24.jpg" width="200" height="200" />
в ява скрипт что-бы вевести.
Спасибо.

ЦитироватьТак вот задача не выводить в новом окне или в сплывающем, а вывести в этом месте в центральной части страницы продукта
перед {if $PS_STOCK_MANAGEMENT} но с размерами width="100" height="100"

Создаете блок в шаблоне в нужном месте, в нем изображение с размерами 100х100, устанавливаете у блока dispaly:none.
При клике меняете видимость блока,  и файл изображения:
{$base_dir}img/co/"+qty_ell.value

Выводить все сразу в шаблоне, скрывать блок, в javascript менять видимостть и источник изображения.
Вот такая схема работает всегда и во всех браузерах.

Спасибо. Приблизительно так и решил.
Поставил
<img id="img_colorr" src="{$base_dir}img/co/0.jpg" width="200" height="200"  />
В JavaScript прописал
var img1 = document.getElementById('img_colorr');
img1.src = "{$base_dir}img/co/"+qty_ell.value;
И все стало на свои места.

Осталось проверить наличие файла, пробовал делать так  в скрипте....
String fileName = "{$base_dir}img/co/"+qty_ell.value;
if ((new File(fileName)).exists()) {
    // существует
} else {
    // не существует
}
но почему-то не работает..
Может подскажите.
Спасибо.

С jQuery проще и без перезагрузки
$.ajax({
    url:'http://mysite.ru/image.jpg',
    type:'HEAD',
    error: function()
    {
        //file not exists
    },
    success: function()
    {
        //file exists
    }
});

Всем спасибо за ответы!
Сделал через ajax...
$.ajax({
    url:src,
    type:'HEAD',
    error: function()
    {
    $('.img_colorr').hide();
    },
    success: function()
    {
       $('.img_colorr').show();
    }
});
Вопрос закрыт!
Еще раз спасибо!