Интеграция верстки полного описания товара
текстовая расшифровка видео урока
Следующим шаблоном который мы интегрируем, будет карточка полного описания товара.
Первым делом, давайте откроем верстку файла донора в редакторе.
![](/images/fef9409c2e6707396042d0d0eb9b6107.jpeg)
Видим, что нужный нам блок обернут в div с классом product.
Копируем всю конструкцию и переходим в движок к шаблону магазина «Полное описание товара».
Удалим демо содержимое шаблона и вставим на его место актуальную для проекта верстку.
Сохраним.
Посмотрим как она отображается на сайте.
![](/images/3837f4e0dd1153483ff2463af40aa9f1.jpeg)
Видим, что всё корректно, теперь ее нужно оживить.
Вернемся к редактированию шаблона.
По ходу чтения верстки первым идет изображение товара.
Мы знаем, что div с классом image регулирует вложенное в него изображение по ширине (width:100%), поэтому в данном случае можно воспользоваться меткой которая ведет к оригинальному изображению
{default_picture_src}.Вставим ее в атрибут src, на место демонстрационной картинки.
Следующей вставляем метку с названием товара. {header}
Далее идет цена. {price}
![](/images/02c5307aa1d5b92758c3fb4d2b49e862.jpeg)
За ценой следует текст информационного сообщения.
В нашем случае он будет одинаковым для всех товаров. Можно вывести его с помощью сниппета.
Перейдем к управлению сниппетами и добавим новый.
Введем текст сообщения.
Описание сниппета.
Наименование метки.
Сохраним.
![](/images/b7d6cda62037e957fadc97f8793f65c6.jpeg)
Берем созданную метку и возвращаемся к шаблону полного описания товара.
Вставляем метку сниппета на место статического текста.
Далее изменяем названия вкладок для информационных блоков.
Вкладка «описание»
«Характеристики»
и вкладка «Условия возврата»
Теперь наполним блоки информацией.
Вместо демонстрационного описания товара вставим метку .
В блок с характеристиками вставим метку {features}.
Условия возврата обычно одинаковы для всех товаров магазина.
Поэтому, данную информацию логично вывести тоже с помощью сниппета.
Давайте создадим его…
Вставим метку сниппета и сохраним изменения.
![](/images/7114bc64398b962da7b0c0e38fe2f623.jpeg)
Посмотрим, что изменилось на витрине.
С помощью меток мы вывели в шаблон карточки товара:
- название товара;
- цену;
- информационное сообщение;
- описание товара;
- характеристики;
- и условия возврата.
![](/images/13f31736e6c18f0af29a13d61cb3a266.jpeg)
Нам осталось интегрировать блок с добавлением товара в корзину.
Вернемся к редактированию шаблона.
Видим, что данный блок содержит только стилизованную верстку, без привязки к действиям.
Для того, чтобы количество покупаемого товара можно было выбрать и отправить его нажатием на кнопку в корзину, нужно обернуть верстку в контейнер формы и доработать ее используя метки из платформы.
Вот такое преобразование верстки получилось в нашем примере:
![](/images/1692966816e88df7828aabae0069979c.jpeg)
Сохраним, перейдем на витрину.
Видим, что количество теперь можно выбрать и всё отлично работает, а вот кнопка «добавить в корзину» из-за модификации верстки частично потеряла стилизацию.
Найдем потерянный класс.
Раньше он привязывался к ссылке. Теперь ссылка у нас - это кнопка button.
Найдем его в файле style.css
Вот он.
![](/images/23be562eb7c2e2df551ad76b4337b0ab.jpeg)
Переназначим его для обновленной верстки.
Сохраняем.
Заливаем обновленную версию на сервер.
Возвращаемся к нашему товару и обновляем страницу.
Итак, кнопка добавить приобрела нужный вид.
Выбираем количество и нажимаем «Добавить в корзину».
Параметры заказа отправлены в корзину. Проверим.
![](/images/e2eb7d6195a2bf40b024ac40e817f12d.jpeg)
Таким образом мы интегрировали шаблон карточки товара и подключили к нему необходимый функционал из платформы.
Видео урок: интеграция верстки полного описания товара