Jump to content
aleksey_z

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

Recommended Posts

Добрый день.


 


Prestashop 1.6.1.1, шаблон Warehouse 3.6.2


 


Возможно ли реализовать в фронт-офисе - карточка товара - выбор цвета товара в такой форме (при наведении курсора на вариант цвета: post-1122210-0-54174000-1445853935_thumb.jpg


 


Ссылка


 


Спасибо.


Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

.pop-up:hover {

    display: block;
}
 
Можно отображать изменяя прозрачность, если так нравится
.pop-up {
    opacity: 0;
}
.pop-up:hover {
    opacity: 1;
}

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

 

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

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

.pop-up:hover {

    display: block;
}
 
Можно отображать изменяя прозрачность, если так нравится
.pop-up {
    opacity: 0;
}
.pop-up:hover {
    opacity: 1;
}

 

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

Edited by aleksey_z (see edit history)

Share this post


Link to post
Share on other sites

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

Edited by Kerm (see edit history)

Share this post


Link to post
Share on other sites

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

Добрый день.

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

Share this post


Link to post
Share on other sites

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

 

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

 

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

Edited by Kerm (see edit history)

Share this post


Link to post
Share on other sites

Добрый день.

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

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

Share this post


Link to post
Share on other sites

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

 

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

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

 

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

 

Спасибо.

Share this post


Link to post
Share on other sites

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

 

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

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

 

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

 

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

 

Сперва вносим правки в темплейт 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, но я так понял, пока у Вас с этим возникнет много сложностей...
  • Like 1

Share this post


Link to post
Share on other sites

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

 

Сперва вносим правки в темплейт 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%

Share this post


Link to post
Share on other sites

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

 

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 by AlexNDR.mac (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

Т.е. первые три кода из Вашего сообщения, до 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 by aleksey_z (see edit history)

Share this post


Link to post
Share on other sites

Т.е. первые три кода из Вашего сообщения, до 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 разница небольшая, шаблоны она не затрагивает

  • Like 1

Share this post


Link to post
Share on other sites

Добрый день.

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

 

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

 

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

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

Ага.

Да, по 

<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 рх, и потом добавлять?

Share this post


Link to post
Share on other sites

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

 

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

 

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

 

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

 

 

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

Edited by aleksey_z (see edit history)

Share this post


Link to post
Share on other sites

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

border: 1px solid black;
  • Like 1

Share this post


Link to post
Share on other sites

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

 

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

Спасибо.

Ссылка

Edited by aleksey_z (see edit history)

Share this post


Link to post
Share on other sites

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

 

 

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

 

Спасибо.

Share this post


Link to post
Share on other sites

Переделал.
Открываем файл product.tpl и поиском ищем коммент: "<!-- attributes -->"
Ниже будет "<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 by AlexNDR.mac (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

Привет.

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

 

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

 

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

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

 

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

Привет.

После последних корректировок все красиво работает, но наслоились как-то друг на друга маленькие квадратики цветов на странице товара. post-1122210-0-83328700-1458992300_thumb.png

post-1122210-0-13727000-1458992302_thumb.pngpost-1122210-0-48697100-1458992528_thumb.png

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

 

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

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

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

 

И если включен модуль ShortCode, то всплывающее окошко, которое выглядит ДО его включения так, post-1122210-0-35661900-1458992529_thumb.png

почему-то начинает выглядеть так. post-1122210-0-28788300-1458992304_thumb.png

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

Edited by aleksey_z (see edit history)

Share this post


Link to post
Share on other sites

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

#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>

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

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

post-1122210-0-55127900-1459411985_thumb.pngpost-1122210-0-52718100-1459411986_thumb.png

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

 

Спасибо.

Edited by aleksey_z (see edit history)

Share this post


Link to post
Share on other sites

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

 

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

{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 (они же не изменялись? работают и с первым кодом)

 

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

post-1122210-0-39203800-1459419212_thumb.png

 

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

Edited by aleksey_z (see edit history)

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More