19.04.2019      180      0
 

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

Продолжаю рассказывать о модификациях Vamshop первого поколения, направленных, помимо функциональности и на улучшение сео-показателей вашего…


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

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

Улучшаем опции товара в vamshop

Улучшаем опции товара в vamshop

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

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

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

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

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

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

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

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

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

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

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

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

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

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

и

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

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


Алексей
Об авторе: Алексей

Меня зовут Алексей, мне 39 лет, и вот уже десять лет как одним из моих многочисленных увлечений стало создание и продвижение сайтов. Подчёркиваю, что это именно хобби, а не основная моя работа. Тем не менее, я никогда не упускал возможности заработать на своих увлечениях. На страницах этого сайта, вы найдёте как множество моих наработок в сфере сайтостроения, так и полезную информацию о продвижении готовых сайтов. Если вы любознательны и любите узнавать новое, мои рекомендации помогут вам освоиться в непростом деле создания сайтов и их продвижения. Ну а если вы слишком далеки от html, css и прочих web-штучек, вы всегда можете воспользоваться моими услугами как вебразработчика, так и сеошника. Желаю Вам с пользой провести время на моём сайте!

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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