Страница избранного доступна во всех магазинах по адресу /favorites
.
Чтобы отредактировать содержимое страницы, добавьте в папку templates
файл favorite.liquid
. Массив товаров будет доступен в Liquid-переменной products
.
В избранные можно добавлять только товары, выбранные варианты не сохраняются.
Список товаров сохраняется в аккаунте пользователя.
Если пользователь авторизуется с разных устройств, список будет одинаковый.
Для оптимизации список кэшируется на 15 секунд, поэтому, если быстро добавлять товары с разных устройств или разлогиниваться, счётчик может показывать старые значения.
Кнопка для добавления товара. После добавления товара по умолчанию получает класс favorites-added
. В качестве значения необходимо передать ID товара.
<button data-ui-favorites-add="{{ product.id }}">
Добавить товар в избранное
</button>
Кнопка для удаления товара. После удаления товара по умолчанию получает класс favorites-not-added
. В качестве значения необходимо передать ID товара.
<button data-ui-favorites-delete="{{ product.id }}">
Удалить из избранных
</button>
Кнопка-переключатель при нажатии на которую, товар добавляется/удаляется из избранного. В зависимости от состояния кнопка получает классы favorites-added
или favorites-not-added
. В качестве значения необходимо передать ID товара.
<button data-ui-favorites-trigger="{{ product.id }}">
<!-- Здесь может быть иконка или текст кнопки -->
</button>
Если при добавлении/удалении необходимо менять текст кнопки, то внутри должен быть дочерний элемент с атрибутами data-ui-favorites-trigger-added-text
и data-ui-favorites-trigger-not-added-text
:
<button data-ui-favorites-trigger="{{ product.id }}">
<span
data-ui-favorites-trigger-added-text="В избранном"
data-ui-favorites-trigger-not-added-text="Добавить в избранное"
></span>
</button>
Кнопка для удаления всех избранных товаров
<button data-ui-favorites-clear>
Очистить
</button>
Ссылка для перехода на страницу избранного. Если ни одного товара не добавлено, то получает класс favorites-empty
. Это может быть удобно для того, чтобы красить ссылку после добавления товаров.
<a href="/favorites" data-ui-favorites-counter-btn>
Избранное
</a>
Счётчик товаров добавленных в избранное
<span data-ui-favorites-counter></span>
Получить текущее состояние избранного
var favoritesState = FavoritesProducts.getFavoritesProducts();
console.log(favoritesState);
Добавить товар в избранное
/**
* @param {number} item ID товара
*/
FavoritesProducts.add({
item: 123456
});
Удалить товар из избранного
/**
* @param {number} item ID товара
*/
FavoritesProducts.remove({
item: 123456
});
Очистить избранное
FavoritesProducts.remove();
Обновить состояние
FavoritesProducts.update();
Пример подписки на событие
EventBus.subscribe('add_item:insales:favorites_products', function (data) {
console.log('Товар добавлен в избранное', data);
});