Всплывающий вывод цвета. Возможно ли?

aleksey_z · October 26, 2015

Добрый день.

Prestashop 1.6.1.1, шаблон Warehouse 3.6.2

Возможно ли реализовать в фронт-офисе - карточка товара - выбор цвета товара в такой форме (при наведении курсора на вариант цвета:

Ссылка

Спасибо.

AlexNDR.mac · October 26, 2015

Возможно, на сайте примере сделано при помощи ява-скрипта.

aleksey_z · October 26, 2015

А как, не подскажите?

AlexNDR.mac · October 26, 2015

Я бы не использовал Java для этого, проще создать стиль для этого pop-up блока с параметром display: none;

И обрабатывать событие через

.pop-up:hover {

display: block;

}

Можно отображать изменяя прозрачность, если так нравится

.pop-up {

opacity: 0;

}

.pop-up:hover {

opacity: 1;

}

aleksey_z · October 27, 2015

Спасибо Вам большое за внимание и примеры, но скорее всего, сам я это не сделаю. Сайтом начал заниматься 2 мес назад. Я не программист и языков, на кот. написан и работает сайт не знаю. Искал сразу рабочий конструктор. Если лезу в содержание файлов, то только по примеру с форумов, иногда - интуитивно понимая, что нужно изменить. Если это сложно, то тогда наверное эти хотелки в сторону.

Просто увидел этот прикол на сайте, понравилось, и главное - информативно: навёл курсор на маленький квадратик или кружок - всплыл пример цвета/фактуры (кот. можно рассмотреть реально), если подходит - то нажал на этот маленький квадратик или кружок, что-бы сделать выбор. Думал, может есть модуль какой-то готовый.

aleksey_z · October 28, 2015

проще создать стиль для этого pop-up блока с параметром display: none;

И обрабатывать событие через

.pop-up:hover {

display: block;

}

Можно отображать изменяя прозрачность, если так нравится

.pop-up {

opacity: 0;

}

.pop-up:hover {

opacity: 1;

}

Может кто помочь с реализацией такой фичи, или это очень сложно?

Edited October 28, 2015 by aleksey_z (see edit history)

AlexNDR.mac · October 29, 2015

Это не сложно. Где-то есть исходники шаблона?

aleksey_z · October 30, 2015

Добрый день.
ВНИМАНИЕ. НА ЭТОМ ФОРУМЕ ЗАПРЕЩЕНО ДАВАТЬ ССЫЛКИ НА ПЛАТНЫЕ МОДУЛИ ИЛИ ПРИКРЕПЛЯТЬ ИХ К СООБЩЕНИЮ.
Или это не то?

Edited November 12, 2015 by Kerm (see edit history)

AlexNDR.mac · October 30, 2015

То что надо. Поставлю шаблон и посмотрю код.

aleksey_z · October 30, 2015

Спасибо.

aleksey_z · November 11, 2015

То что надо. Поставлю шаблон и посмотрю код.

Добрый день.

Есть шанс сделать такое?

Kerm · November 12, 2015

Могу реализовать подобное на Вашем сайте, на любой версии престашопа, за дорого.

Назначение цвета к каждому атрибуту с последующим выбором атрибута по клику на цвет, реализуется при помощи прикрутки к сайту дополнительного импорта фоток комбинаций.

Вот пример: http://shoploragrig.ru/ot-8-do-30-den/10168-cafilarta-8-lg.html

Edited November 12, 2015 by Kerm (see edit history)

AlexNDR.mac · November 12, 2015

Добрый день.

Есть шанс сделать такое?

Шаблон поставил, сделаю. Немного дел навалилось, постараюсь через несколько дней закончить.

aleksey_z · November 12, 2015

Спасибо, линк посмотрел.

Сейчас реализация такая, средствами самой Престы:

в карточке товара, при клике на квадратик/образец цвета/фактуры (вставлены маленькие реальные картинки отделки), откр-ся картинка товара соответствующего цвета + влияние на цену.

Тестовый сайт

На сайте примере в 1 посте, эти образцы цвета представлены тоже небольшими кружками в описании, при наведении всплывает большее окно с цветом.

У Престы есть модуль, который выводит всплывающие подсказки (видел текстовые). Вот такое бы с цветом/фактурой.

aleksey_z · November 12, 2015

Шаблон поставил, сделаю. Немного дел навалилось, постараюсь через несколько дней закончить.

Спешки абсолютно нет ни какой. Подожду.

Спасибо.

Kerm · November 12, 2015

Спасибо, линк посмотрел.

Сейчас реализация такая, средствами самой Престы:

в карточке товара, при клике на квадратик/образец цвета/фактуры (вставлены маленькие реальные картинки отделки), откр-ся картинка товара соответствующего цвета + влияние на цену.

Тестовый сайт

На сайте примере в 1 посте, эти образцы цвета представлены тоже небольшими кружками в описании, при наведении всплывает большее окно с цветом.

У Престы есть модуль, который выводит всплывающие подсказки (видел текстовые). Вот такое бы с цветом/фактурой.

Это все конечно хорошо, но что если у товара больше одной дополнительной фотографии?

aleksey_z · November 12, 2015

В моём случае больше одной и не нужно. Цвет или фактуру отделки точно не передать и 10-ю картинками (+мониторы у всех разные и т.д.).

Заказчик стремится приехать - увидеть/пощупать в живую.

А вот вывести картинку цвета или фактуры укрупнено, чтоб заказчик мог отличить дуб от ореха, это интереснее. Плюс необычная всплывалка.

Kerm · November 13, 2015

Ну подгрузите картинку большего размера, в стилях задайте уменьшенные размеры, а при наведении в стилях задайте блоку в котором картинку лежит position:relative, а картинке position:absolute и реальные размеры картинки, будет Вам увеличение при наведении...

aleksey_z · November 13, 2015

Доброго дня, Kerm

Спасибо за объяснение, но для меня это темный лес. Логику того, что должно происходить я понимаю, но не более. Описать это в файлах - никогда. Мой опыт с css на данный момент - корректировка отступов в одном файле по подсказке форумчанина.

AlexNDR.mac · November 17, 2015

Добрался я до шаблона.

Сперва вносим правки в темплейт product.tpl

<ul id="color_to_pick_list" class="clearfix">
	{assign var="default_colorpicker" value=""}
		{foreach from=$group.attributes key=id_attribute item=group_attribute}
			{assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
				<li{if $group.default == $id_attribute} class="selected popup"{/if} class="popup">
					<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'}" {if $img_color_exists}style="background: url({$img_col_dir}{$id_attribute|intval}.jpg) repeat;"{/if}>
						<span id="color_{$id_attribute|intval}" class="color_pick"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"{/if} {if $img_color_exists}style="background: url({$img_col_dir}{$id_attribute|intval}.jpg);"{/if}>
						</span>
					</a>
				</li>
			{if ($group.default == $id_attribute)}
				{$default_colorpicker = $id_attribute}
			{/if}
		{/foreach}
</ul>

Что, относительно исходного кода добавилось:

Добавляем класс 'popup':

<li{if $group.default == $id_attribute} class="selected popup"{/if} class="popup">

и делаем вставку для отображения увеличенной палитры цвета:

<span id="color_{$id_attribute|intval}" class="color_pick"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"{/if} {if $img_color_exists}style="background: url({$img_col_dir}{$id_attribute|intval}.jpg);"{/if}></span>

После этого добавляем пару строк в CSS файл - product.css

li.popup {
  position: relative;
}
span.color_pick { 
  position: absolute;
  visibility: hidden;
  opacity: 0;
  width: 100px;
  height: 100px;
}
.color_pick:hover, .color_pick:hover span { 
  visibility: visible;
  opacity: 1;
  top: -105px;
  left: -37px; /* width (span.color_pick)/2 - width (color_pick)/2 = 100/2 - 23/2 */
  -moz-transition: 0.6s ease-in-out;
  -o-transition: opacity 0.6s ease-in-out;
  -webkit-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
  z-index:1;
}

Конечно, лучше создать правило для SCSS, но я так понял, пока у Вас с этим возникнет много сложностей...

aleksey_z · November 17, 2015

Добрался я до шаблона.

Сперва вносим правки в темплейт product.tpl

<ul id="color_to_pick_list" class="clearfix">
	{assign var="default_colorpicker" value=""}
		{foreach from=$group.attributes key=id_attribute item=group_attribute}
			{assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
				<li{if $group.default == $id_attribute} class="selected popup"{/if} class="popup">
					<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'}" {if $img_color_exists}style="background: url({$img_col_dir}{$id_attribute|intval}.jpg) repeat;"{/if}>
						<span id="color_{$id_attribute|intval}" class="color_pick"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"{/if} {if $img_color_exists}style="background: url({$img_col_dir}{$id_attribute|intval}.jpg);"{/if}>
						</span>
					</a>
				</li>
			{if ($group.default == $id_attribute)}
				{$default_colorpicker = $id_attribute}
			{/if}
		{/foreach}
</ul>

Что, относительно исходного кода добавилось:

Добавляем класс 'popup':

<li{if $group.default == $id_attribute} class="selected popup"{/if} class="popup">

и делаем вставку для отображения увеличенной палитры цвета:

<span id="color_{$id_attribute|intval}" class="color_pick"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"{/if} {if $img_color_exists}style="background: url({$img_col_dir}{$id_attribute|intval}.jpg);"{/if}></span>

После этого добавляем пару строк в CSS файл - product.css

li.popup {
  position: relative;
}
span.color_pick { 
  position: absolute;
  visibility: hidden;
  opacity: 0;
  width: 100px;
  height: 100px;
}
.color_pick:hover, .color_pick:hover span { 
  visibility: visible;
  opacity: 1;
  top: -105px;
  left: -37px; /* width (span.color_pick)/2 - width (color_pick)/2 = 100/2 - 23/2 */
  -moz-transition: 0.6s ease-in-out;
  -o-transition: opacity 0.6s ease-in-out;
  -webkit-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
  z-index:1;
}

Конечно, лучше создать правило для SCSS, но я так понял, пока у Вас с этим возникнет много сложностей...

Упс. Спасибо. Я думаю у меня и с этим возникнут вопросы:

1. "Сперва вносим правки в темплейт product.tpl" - файл product.tpl в теме Warhouse.

2. "Добавляем класс 'popup':" - это не знаю где

3. "и делаем вставку для отображения увеличенной палитры цвета:" - это тоже не знаю где

4. "После этого добавляем пару строк в CSS файл - product.css" - файл в теме Warhouse.

5. "Конечно, лучше создать правило для SCSS, но я так понял, пока у Вас с этим возникнет много сложностей..." - 100%

AlexNDR.mac · November 17, 2015

Упс. Спасибо. Я думаю у меня и с этим возникнут вопросы:

1. "Сперва вносим правки в темплейт product.tpl" - файл product.tpl в теме Warhouse.

2. "Добавляем класс 'popup':" - это не знаю где

3. "и делаем вставку для отображения увеличенной палитры цвета:" - это тоже не знаю где

4. "После этого добавляем пару строк в CSS файл - product.css" - файл в теме Warhouse.

5. "Конечно, лучше создать правило для SCSS, но я так понял, пока у Вас с этим возникнет много сложностей..." - 100%

Делаем так:

1. Открываем .../themes/warehouse/product.tpl

2. Переходим на строку №350.

3. Весь блок, который начинается вот так:

<ul id="color_to_pick_list" class="clearfix"> .... </ul>

заменяем на тот, что я предложил.

4. Открываем .../themes/warehouse/css/product.css

и в конце файла добавляем новые стили.

5. Сохраняем файлы, перезагружаем страницу и проверяем. Кеш, конечно же, нужно очистить перед этим. Это все.

Edited November 17, 2015 by AlexNDR.mac (see edit history)

aleksey_z · November 17, 2015

Т.е. первые три кода из Вашего сообщения, до CSS, я вставляю в /themes/warehouse/product.tpl начиная с строки №350 в приведенном порядке.

Остальной код в низ файла /themes/warehouse/css/product.css

P.S. Извиняюсь, я внимательно рассмотрел код, вопрос снят.

Доберусь, буду пробовать. Вы на какой Престе пробовали? У меня два тест сайта на 1.6.1.1 и 1.6.1.2. Чистовой сайт на 1.6.1.2.

Edited November 17, 2015 by aleksey_z (see edit history)

AlexNDR.mac · November 17, 2015

Т.е. первые три кода из Вашего сообщения, до CSS, я вставляю в /themes/warehouse/product.tpl начиная с строки №350 в приведенном порядке.

Остальной код в низ файла /themes/warehouse/css/product.css

P.S. Извиняюсь, я внимательно рассмотрел код, вопрос снят.

Доберусь, буду пробовать. Вы на какой Престе пробовали? У меня два тест сайта на 1.6.1.1 и 1.6.1.2. Чистовой сайт на 1.6.1.2.

Пробовал на 1.6.1.2. Если посмотреть на гитхабе историю изменений, то между 1.6.1.1 и 1.6.1.2 разница небольшая, шаблоны она не затрагивает

aleksey_z · November 19, 2015

Добрый день.

Добавил/заменил код в файлах.

Работает, прикольно, всплывает картинка цвета. Огромное спасибо.

Но всплывающая картинка состоит из 9-ти образцов цвета (выглядит как видео-стена).

А так, чтобы увеличивалась исходная картинка, можно сделать.

Ссылка, что получилось

Образцы картинок цвета скачивал с оф. сайта производителя. Они квадратные, 36х36 рх.

AlexNDR.mac · November 19, 2015

Почему исходная картинка меньше фрейма popup?

Если создать новый цвет в престе и загрузить текстуру, то она не будет 36х36 пикс.

Текстура должна быть не менее 100х100 пикс, раз мы уж в коде такой размер задали. Поэтому, чтобы не добавлять inline стили в темплейт - делаем текстуры 100х100 пикс. При желании можно увеличить popup до любого размера.

У меня новая текстура после добавления в престу имеет размер 240х240 пикс...

AlexNDR.mac · November 19, 2015

Строка с ссылкой на текстуру на сайте производителя не в том месте!

То, что вы скачали (36х36 пикс) - это не текстура, а пиктограмма текстуры.

Вот как выглядит в коде ссылка на текструру:

<img src="http://ca2.monitoraudiocdn.com/finishes/_c240x240/Ebony.jpg?mtime=20140917115520" alt="Ebony Real Wood Veneer" class="finish__swatch">

aleksey_z · November 19, 2015

Ага.

Да, по

<img src="http://ca2.monitoraudiocdn.com/finishes/_c240x240/Ebony.jpg?mtime=20140917115520" alt="Ebony Real Wood Veneer" class="finish__swatch">

откр-ся картинка 240х240 рх

Т.е. мне нужно заменить в Атрибутах-Цвет картинки цвета/текстуры 36х36 рх, на картинки размером от 100 рх и выше?

240х240 подойдут, или уменьшать до 100х100 рх, и потом добавлять?

aleksey_z · November 19, 2015

Да, переделал в ФШ картинки под размер 100х100 рх, теперь правильно выводятся!

Довольно прикольно получилось, и цвет отделки теперь более понятен.

Выглядит теперь так

Большое Вам спасибо.

P.S. А сложно добавить обрамление в 1 рх, как в самой теме/шаблоне, а то на белом фоне сайта, белого цвета не видно, сливается.

Edited November 19, 2015 by aleksey_z (see edit history)

AlexNDR.mac · November 23, 2015

В стиль span.color_pick добавляем рамку по-вкусу...

border: 1px solid black;

aleksey_z · November 23, 2015

А если не black (цвет), то указываем цвет в HEX?

Добавил, как в посте - на сайте цвет сайта, то что нужно.

Спасибо.

Ссылка

Edited November 23, 2015 by aleksey_z (see edit history)

aleksey_z · January 30, 2016

AlexNDR.mac, доброго дня.

Всё прекрасно работало, до обновления темы. (Обновления Престы не затрагивало всплывающее окошко цвета). После обновления темы, я в новых файлах темы внес вышеприведенные изменения, но не работает, не всплывает цвет. Как можно поправить?

Спасибо.

AlexNDR.mac · March 10, 2016

Переделал.
Открываем файл product.tpl и поиском ищем коммент: ""
Ниже будет "<ul id="color_to_pick_list" class="clearfix">"
Весь этот тэг заменяем на вот этот, отредактированный:

<ul id="color_to_pick_list" class="clearfix">
    {assign var="default_colorpicker" value=""}
    {foreach from=$group.attributes key=id_attribute item=group_attribute}
        {assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
        <li{if $group.default == $id_attribute} class="selected"{/if}> 
            <a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}"
            data-toggle="popover"
            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} 
                data-content="<img width='200px' height='200px' style='background:{$colors.$id_attribute.value|escape:'html':'UTF-8'}' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' />" 
                style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"
            {else}
                data-content="<img width='200px' height='200px' src='{$img_col_dir}{$id_attribute|intval}.jpg'/>" 
                style="background: url({$img_col_dir}{$id_attribute|intval}.jpg) repeat;"
            {/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}">
            {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}
            </a>
        </li>
        {if ($group.default == $id_attribute)}
            {$default_colorpicker = $id_attribute}
        {/if}
    {/foreach}
</ul>

Далее...

в папке шаблона есть скрипты, нам нужен product.js "../warehouse/js/product.js"

В конце этого файла, ставим курсор, нажимаем ENTER и вставляем вот такой скрипт:

$(function () {
    $('[data-toggle="popover"]').popover({
        html: true,
        trigger: 'focus, hover',
        container: 'body',
        placement: 'top',
        content: function(){return $(this).data('data-content');}
    })
});

И последнее, добавляем стили в product.css

/**
 * Popover layout
 */

.popover {
  position: absolute;
  width: 200px;
  background-color: #fff;
  padding: 5px;
  margin-top: -5px;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
}
.popover-title {
  text-align: center;
}

И еще в этом же файле нужно закомментировать "overflow: hidden;" (строка 434: #attributes .attribute_list ul li):

#attributes .attribute_list ul li {
      margin-right: 10px;
      /*overflow: hidden;*/ }

Это все, теперь работать будет на всех версиях.

Edited March 22, 2016 by AlexNDR.mac (see edit history)

aleksey_z · March 10, 2016

Ух, не увидел пост.

Завтра буду пробовать, спасибо.

aleksey_z · March 11, 2016

Привет.

Обновил шаблон до 3.7.3

Затем внес правки. Работает, здорово получилось, очень прикольно, как в оригинале.

Картинки структуры отделки/цвета д.б. > или = 200*200 рх ?

И после каждого апгрейда шаблона, я добавляю в файлы этот код? (я записываю себе шпаргалку по изменяемым файлам)

Спасибо огромное!

AlexNDR.mac · March 11, 2016

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

aleksey_z · March 11, 2016

Понял. Еще раз большое спасибо.

aleksey_z · March 26, 2016

Привет.

После последних корректировок все красиво работает, но наслоились как-то друг на друга маленькие квадратики цветов на странице товара.

Может нужно отменить это:

И еще в этом же файле нужно закомментировать "overflow: hidden;" (строка 434: #attributes .attribute_list ul li):
#attributes .attribute_list ul li {
margin-right: 10px;
/*overflow: hidden;*/ }

Или это не относится к квадратикам?

И если включен модуль ShortCode, то всплывающее окошко, которое выглядит ДО его включения так,

почему-то начинает выглядеть так.

Тоже ничего, но почему ShortCode изменяет стиль рамки?

Edited March 26, 2016 by aleksey_z (see edit history)

aleksey_z · March 31, 2016

Попробовал раскомментировать это

#attributes .attribute_list ul li {
margin-right: 10px;

/*overflow: hidden;*/ }

не помогло.

Вот скрины с чистового сайта, где добавлен первый код из поста 33, до переделки логики:

Sent 23 March 2016 - 12:20 AM

привет. я исправил логику в темплейте, там были ошибки

(что-то сильно не правильное? я на чистовом сайте пока не исправлял)

его содержимое (1-го кода):

<ul id="color_to_pick_list" class="clearfix">
	{assign var="default_colorpicker" value=""}
        {foreach from=$group.attributes key=id_attribute item=group_attribute}
	   {assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
	   <li{if $group.default == $id_attribute} class="tooltip selected"{/if} class="tooltip"> 
	   <a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}"
	   data-toggle="popover"
	   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} 
	      data-content="<img width='200px' height='200px' style='background:{$colors.$id_attribute.value|escape:'html':'UTF-8'}' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' />" 
	      style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"
	   {/if} 
	      title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" 
	   {if $img_color_exists}
	      data-content="<img src='{$img_col_dir}{$id_attribute|intval}.jpg'/>" 
	      style="background: url({$img_col_dir}{$id_attribute|intval}.jpg) repeat;"
	   {/if}>
           </a>
        /li>
        {if ($group.default == $id_attribute)}
          {$default_colorpicker = $id_attribute}
        {/if}
    	{/foreach}
</ul>

Это ещё без всяких рамок на цвете и на картинке фактуры.

Здесь квадратики выбора цвета/отделки выглядят нормально/красиво, без смещения.

Что нужно подправить в коде с измененной логикой, чтобы квадратики выбора цвета/отделки стали нормальными?

Спасибо.

Edited March 31, 2016 by aleksey_z (see edit history)

aleksey_z · March 31, 2016

В общем сравнение и ковыряния в коде привели к следующему:

если привести следующую строку, из уже исправленной логики кода в темплейте

{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 $img_color_exists}
     <alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" />

то квадратики выбора цвета/отделки становятся нормальными, т.е. без наложений. Я не силён в кодах, это правильно, будет нормально работать?

Весь код для файла product.tpl теперь выглядит так:

<ul id="color_to_pick_list" class="clearfix">
	{assign var="default_colorpicker" value=""}
	{foreach from=$group.attributes key=id_attribute item=group_attribute}
		{assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
		<li{if $group.default == $id_attribute} class="selected"{/if}> 
		<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}"
		data-toggle="popover"
		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} 
		        data-content="<img width='200px' height='200px' style='background:{$colors.$id_attribute.value|escape:'html':'UTF-8'}; border: 1px solid lightgrey;' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' />" 
                	style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"
		{else}
			data-content="<img src='{$img_col_dir}{$id_attribute|intval}.jpg' style='border: 1px solid lightgrey;'/>" 
			style="background: url({$img_col_dir}{$id_attribute|intval}.jpg) repeat;"
		{/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}">
		{if $img_color_exists}
			<alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" />
		{/if}
		</a>
	        </li>
	        {if ($group.default == $id_attribute)}
		       {$default_colorpicker = $id_attribute}
	        {/if}
	{/foreach}
</ul>

ну и далее правки в остальных файлах, указанных в посте 33 (они же не изменялись? работают и с первым кодом)

Какой вариант более правильный, и какой из них оставлять на чистовом сайте?

И как может влиять включение модуля ShortCode на стиль всплывающего окна цвета?

Edited March 31, 2016 by aleksey_z (see edit history)

rusbolik · April 26, 2017

Спасибо большое ОООО великий AlexNDR.mac. поставил настроил и работает

Подскажи пожалуйста. как сиё чудо привязать к цветам в blocklayered?

AlexNDR.mac · April 27, 2017

Спасибо большое ОООО великий AlexNDR.mac. поставил настроил и работает

Подскажи пожалуйста. как сиё чудо привязать к цветам в blocklayered?

Смотреть этот блок и по аналогии сделать. Можно все это дело вынести в отдельный темплейт и использовать его как плагин в нужных местах хоть по всему сайту.

rusbolik · April 28, 2017

Смотреть этот блок и по аналогии сделать. Можно все это дело вынести в отдельный темплейт и использовать его как плагин в нужных местах хоть по всему сайту.

стесняюсь спросить, каким образом. я не силен в этом кодировании

AlexNDR.mac · April 29, 2017

Не готов сходу код написать, это смотреть надо. Но принцип тот же... все по аналогии.

rusbolik · November 19, 2019

Подскажите, на PS 1.7.6.0 WH 4.2 также делать?

Всплывающий вывод цвета. Возможно ли?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment