Улучшаем вывод атрибутов в карточке товара Vamshop

Продолжаю рассказывать о модификациях Vamshop первого поколения, направленных, помимо функциональности и на улучшение сео-показателей вашего интернет-магазина. Модификация, которую я буду описывать сегодня, улучшает так называемое юзабилити вашей карточки товара. А по-русски говоря, удобство для посетителя. У многих из нас, в наших магазинах встречаются товары, у которых довольно много дополнительных опций (атрибутов). Порой, посетитель может теряться в обилии этих опций, не очень понимая, что они все означают. И в итоге идёт туда, где ему попроще. Или может оказаться необходимым просто дать какую то справочную информацию по каждой опции.

Справка по атрибутам в карточке товара

Я расскажу, что и как тут можно предпринять, на примере своего собственного магазина «Самоделкин». Если вы зайдёте сюда, то увидите, что у товара Кольцо «Летнее небо», есть опция «Размер», а рядом с выпадающим списком, где можно выбрать этот самый размер, есть кружочек с вопросиком. Наведя курсор на этот вопросик, вы увидите подсказку по опции. В данном случае, подсказка просто уведомляет, что подробнее о том, как узнать размер кольца, можно почитать на странице ниже. Кроме того, подсказка кликабельна и посетитель, кликнув по ней, автоматически откроет в нижней части страницы вкладку, где действительно расположен текст, который рассказывает, как узнать свой размер кольца. Но на самом деле, такие подсказки можно делать для каждой опции товара и если текст подсказки достаточно короткий, то можно ограничиться и тем, что при нажатии на кружок, выводится текст подсказки. В общем, сфера применения достаточно широка и можно много придумать, ну а я же расскажу вам как это делается.

Модифицируем вывод атрибута в карточке товара vamshop

Откройте админку вашего магазина, далее перейдите в меню Каталог => Атрибуты — Названия. Там у вас есть список опций, которые вы создавали для своего товара. Когда вы хотите создать подсказку для определённой опции, вы ищете в этом списке эту опцию и смотрите, какой у неё ID. В моём случае, опция «Размер кольца» имеет ID=1. Далее, я открываю файл /templates/vamshop1/module/product_options/multi_options.html и ищу там код, который отвечает за вывод опции «Размер кольца» в карточке товара. У меня эта опция выводится выпадающим списком. Поэтому я ищу этот фрагмент кода:

<!-- select -->
<p>
<strong>{$options_data.NAME}:</strong>
<select name="id[{$options_data.ID}]">
{foreach key=key_data item=item_data from=$options_data.DATA}
<option value="{$item_data.ID}">{$item_data.TEXT}   {if $item_data.MODEL}({$item_data.MODEL}){/if} {if $item_data.PRICE_PLAIN != 0}({$item_data.PREFIX}{$item_data.PRICE}){/if}</option>
{/foreach}
</select>
</p>
<!-- /select -->

И перед закрывающим тегом < / р > добавляю этот код:

{if $options_data.ID == '1'}
<a rel="nofollow" href="{$PRODUCTS_LINK}#razmer" textpodskazka="Если вы не знаете своего размера, внизу этой странички можно почитать о том, как правильно выбрать размер кольца" class="podskazka"  data-toggle="tab"><img class="quest" src="{$tpl_path}images/help.png" border="0" title="Как выбрать размер кольца" /></a>
{/if}

Конечный код именно в вашем случае может отличаться от моего варианта, в зависимости от задач, которые вы перед собой поставите. Ну а я расскажу, что к чему в моём варианте. Итак:

{if $options_data.ID == '1'}
...
{/if}

Это условие, которое выводит весь остальной код, обёрнутый в него, лишь для опции, ID которой = 1. То есть, в данном случае, для опции «Размер кольца».

Что же там выводится. В моём варианте это ссылка

href="{$PRODUCTS_LINK}#razmer"

Благодаря ей, клик по кружку со знаком вопроса открывает на странице соответствующую вкладку, где размещён текст о том, как узнать свой размер кольца (Откуда там берётся этот текст — отдельная тема для статьи. Сейчас нам это не важно)

textpodskazka="Если вы не знаете своего размера, внизу этой странички можно почитать о том, как правильно выбрать размер кольца" class="podskazka"  data-toggle="tab"

Данный фрагмент кода отвечает за тот текст, который выводится при наведении курсора на значок вопроса. За сам текст и формирование всплывающего окошка с этим текстом.

Ну и собственно код,

<img class="quest" src="{$tpl_path}images/help.png" border="0" title="Как выбрать размер кольца" />

идущий непосредственно перед закрывающим тегом < / а > — картинка этого самого кружка со знаком вопроса.

Теперь вам остаётся только прописать CSS стили в своём файле /templates/vamshop1/stylesheet.css

У меня это следующий код:

.podskazka{
display:inline;position:relative;
}
.podskazka:hover:after{
background:#FFF8DC;
border-radius:5px;
bottom:26px;
color:#000;
content:attr(textpodskazka);
left:-10%;
padding:5px 15px;
position:absolute;
z-index:98;
width:240px;
border:2px #444 solid;
margin-left:-136px;
}
.podskazka:hover:before{
border:solid;
border-color:#444 transparent;
border-width:6px 6px 0 6px;
bottom:20px;
content:"";
left:-10%;
position:absolute;
z-index:99;
margin-left:-3px;
}

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

content:attr(textpodskazka);

и

content:"";

Их наличие обязательно для того, чтобы всё работало.

Разумеется можно было бы проработать это решение до мелочей, сделав его более изящным — добавить текстовые метки в языковые файлы движка и т.п. Но, при написании этого руководства в мои задачи входило показать лишь принцип, по которому можно делать такую справку возле каждого атрибута товара. По приведённому примеру, вы можете сделать аналогичные справки для каждого из атрибутов ваших товаров. Просто помните, что это требуется прописывать для каждого ID атрибута отдельно. Кстати, похожим образом можно выводить образцы цвета товара, если у вас есть один товар, но в разных расцветках и для выбора покупателем нужного цвета, вы используете атрибуты. Но это уже тема для отдельного урока, который я скоро напишу.

---