shopify wishlist

Список желаний Shopify

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

Версия: 2.3.0 - Совместима с Интернет-магазином 2.0.

Предыдущие версии:

• v2.1.0 (Интернет-магазин 1.0)
• v2.0.0
• v1.0.0

Установка

Чтобы начать использовать Shopify Wishlist , вам необходимо скопировать некоторые файлы из этого репозитория в код вашей темы Shopify.

Примечание . Эта настройка предполагает наличие фрагмента для отображения карточки товара.

Файлы для копирования:

Файл репо	Местоположение темы Shopify
button-wishlist.liquid	snippets/
icon-heart.liquid	snippets/
wishlist-template.liquid	sections/
product-card-template.liquid	sections/
page.wishlist.json	templates/
product.card.json	templates/
Wishlist.js	assets/

1. Поместите фрагмент button-wishlist.liquid в существующий фрагмент карточки товара или в шаблон product.liquid
   • {%- render 'button-wishlist', product: product -%}
   • Это позволит клиентам добавлять/удалять товары в/из списка желаний.
2. Замените фрагмент в разделе product-card-template.liquid существующим фрагментом карточки товара.
   • Тот же фрагмент из шага 1
   • В фрагменте карточки товара может использоваться другое имя переменной продукта. Проверьте это еще раз?
3. Добавьте имя класса элемента карточки продукта в объект selectors в Wishlist.js
   • Пример. Если имя класса вашей карточки продукта — .product-item , переменная selectors будет выглядеть следующим образом:

      const selectors = {
       button: '[button-wishlist]',
       grid: '[grid-wishlist]',
       productCard: '.product-item', // your classname here
     };
     

4. Создайте новую страницу в админке Shopify:
   • Администратор > Интернет-магазин > Страницы > Добавить страницу
   • Установите template новой страницы на page.wishlist
   • На этой странице будут отображаться сохраненные элементы списка желаний клиента.
5. Поместите скрипт в theme.liquid перед закрывающим тегом </head> .
   • <script src="{{ 'Wishlist.js' | asset_url }}" defer="defer"></script>

Вот и все! При просмотре вашего магазина Shopify вы должны увидеть кнопки списка желаний внутри карточек товаров (вероятно, на страницах коллекций) или в шаблоне продукта. Щелчок по кнопке списка желаний добавит/удалит товар из списка желаний клиента и активирует активный стиль кнопки. После добавления элементов в список желаний вы можете просмотреть свой список желаний, перейдя на страницу, созданную на шаге 3.

Демо-магазин Shopify

Примечания

• Этот список желаний использует Javascript и localStorage для сохранения списка желаний клиента в его браузере. LocalStorage не сохранится, если пользователь очистит хранилище браузера или просматривает данные в режиме инкогнито.
• Когда клиенты просматривают продукты и добавляют их в свой список желаний, скрипт автоматически переводит любые кнопки списка желаний в активное состояние, если соответствующий продукт уже включен в список желаний.
• Эти файлы не имеют стиля и структуры, поэтому их можно настроить по мере необходимости. Это предназначено для того, чтобы предоставить вам базовую функциональность списка желаний без излишеств.
• Если вы работаете с неопубликованной темой, вам также потребуется создать новые шаблоны для опубликованной темы. Администратор Shopify позволит вам назначить страницу шаблону только в том случае, если шаблон существует в опубликованной теме.
• Если вы обновляетесь до версии Интернет-магазина 2.0, вам потребуется удалить старые шаблоны списка желаний и карточек товаров .liquid .