Автор Тема: Вопрос по политре на странице продукта  (Прочитано 113 раз)

07 Февраля 2016, 15:43:12
  • Пользователь
  • **
  • Сообщений: 73
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Всем доброго дня!
На странице продукта при выборе цвета используется следующее
{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()
Ничего не выходит.
У кого какие соображения есть?
07 Февраля 2016, 19:09:49
Ответ #1
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 85953
  • Репутация: +25399/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Код вывода палитры на странице товара
{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}
08 Февраля 2016, 18:28:36
Ответ #2
  • Пользователь
  • **
  • Сообщений: 73
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо за ответ.
Нет так не идет. Может я не правельно объяснил.
На вкладке показано как должно быть.
При выборе иконки цвета в центральной части должно быть увеличенное изображение файла палитры.
Спасибо!
08 Февраля 2016, 20:47:30
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 2169
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
В атрибуте цвет загружаются файлы с изображением цвета (палитра) или квадраты залитые одним цветом. Оба варианта загрузить нельзя.
10 Февраля 2016, 12:54:14
Ответ #4
  • Пользователь
  • **
  • Сообщений: 73
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо всем кто ответил.
Вопрос то состоял в том что-бы не вывести оба варианта, а при выборе квадратика цвета получить его 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>");Но так не выводит..
Спасибо.
10 Февраля 2016, 13:11:22
Ответ #5
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 85953
  • Репутация: +25399/-0
  • Сообщество PrestaShop
    • Просмотр профиля
В стандарной теме функуция определения ид атрибута цвета уже определена в файле /themes/default-bootstrap/js/product.js в colorPickerClick.
$(document).on('click', '.color_pick', function(e){
e.preventDefault();
colorPickerClick($(this));
getProductAttribute();
});
..
Там вы можете добавить свой код.
Для показа выбранного атрибута в всплывающем окне используйте class="fancybox".
Пример можете посмотреть у картинок на странице товара.
10 Февраля 2016, 14:25:23
Ответ #6
  • Пользователь
  • **
  • Сообщений: 73
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо большое.
Вот смотрите..
На странице продукта в месте перед
{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 и вставить в это место затем как-то вывести картинку в него?
Или как..
10 Февраля 2016, 14:47:44
Ответ #7
  • Пользователь
  • **
  • Сообщений: 73
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Если в этом месте поставить
<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" />в ява скрипт что-бы вевести.
Спасибо.
10 Февраля 2016, 14:48:12
Ответ #8
  • Ветеран
  • *****
  • Сообщений: 13147
  • Репутация: +14553/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Цитировать
Так вот задача не выводить в новом окне или в сплывающем, а вывести в этом месте в центральной части страницы продукта
перед {if $PS_STOCK_MANAGEMENT} но с размерами width="100" height="100"
Создаете блок в шаблоне в нужном месте, в нем изображение с размерами 100х100, устанавливаете у блока dispaly:none.
При клике меняете видимость блока,  и файл изображения:
{$base_dir}img/co/"+qty_ell.value
10 Февраля 2016, 14:50:09
Ответ #9
  • Ветеран
  • *****
  • Сообщений: 13147
  • Репутация: +14553/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Выводить все сразу в шаблоне, скрывать блок, в javascript менять видимостть и источник изображения.
Вот такая схема работает всегда и во всех браузерах.
10 Февраля 2016, 15:38:53
Ответ #10
  • Пользователь
  • **
  • Сообщений: 73
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо. Приблизительно так и решил.
Поставил
<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;
И все стало на свои места.
10 Февраля 2016, 16:44:10
Ответ #11
  • Пользователь
  • **
  • Сообщений: 73
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Осталось проверить наличие файла, пробовал делать так  в скрипте....
String fileName = "{$base_dir}img/co/"+qty_ell.value;
if ((new File(fileName)).exists()) {
    // существует
} else {
    // не существует
}
но почему-то не работает..
Может подскажите.
Спасибо.
10 Февраля 2016, 17:36:38
Ответ #12
  • Ветеран
  • *****
  • Сообщений: 13147
  • Репутация: +14553/-0
  • Сообщество PrestaShop
    • Просмотр профиля
С jQuery проще и без перезагрузки
$.ajax({
    url:'http://mysite.ru/image.jpg',
    type:'HEAD',
    error: function()
    {
        //file not exists
    },
    success: function()
    {
        //file exists
    }
});
10 Февраля 2016, 19:32:18
Ответ #13
  • Пользователь
  • **
  • Сообщений: 73
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Всем спасибо за ответы!
Сделал через ajax...
$.ajax({
    url:src,
    type:'HEAD',
    error: function()
    {
    $('.img_colorr').hide();
    },
    success: function()
    {
       $('.img_colorr').show();
    }
});
Вопрос закрыт!
Еще раз спасибо!