Акция Киберзима
Акция Киберзима
Скидки до 40%, улучшение тарифов
и бесплатные месяцы подписки
Получить Получить
Реклама
ООО Инсейлс Рус ИНН 7714843760 erid: 2RanymdZKYt

Избранное

Страница избранного доступна во всех магазинах по адресу /favorites.

Чтобы отредактировать содержимое страницы, добавьте в папку templates файл favorite.liquid. Массив товаров будет доступен в Liquid-переменной products.

В избранные можно добавлять только товары, выбранные варианты не сохраняются.

Список товаров сохраняется в аккаунте пользователя.

Если пользователь авторизуется с разных устройств, список будет одинаковый.

Для оптимизации список кэшируется на 15 секунд, поэтому, если быстро добавлять товары с разных устройств или разлогиниваться, счётчик может показывать старые значения.

  1. Назначение атрибутов
  2. Методы класса FavoritesProducts
  3. События

Назначение атрибутов

data-ui-favorites-add

Кнопка для добавления товара. После добавления товара по умолчанию получает класс favorites-added. В качестве значения необходимо передать ID товара.

<button data-ui-favorites-add="{{ product.id }}">
  Добавить товар в избранное
</button>

data-ui-favorites-delete

Кнопка для удаления товара. После удаления товара по умолчанию получает класс favorites-not-added. В качестве значения необходимо передать ID товара.

<button data-ui-favorites-delete="{{ product.id }}">
  Удалить из избранных
</button>

data-ui-favorites-trigger

Кнопка-переключатель при нажатии на которую, товар добавляется/удаляется из избранного. В зависимости от состояния кнопка получает классы 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>

data-ui-favorites-clear

Кнопка для удаления всех избранных товаров

<button data-ui-favorites-clear>
  Очистить
</button>

data-ui-favorites-counter-btn

Ссылка для перехода на страницу избранного. Если ни одного товара не добавлено, то получает класс favorites-empty. Это может быть удобно для того, чтобы красить ссылку после добавления товаров.

<a href="/favorites" data-ui-favorites-counter-btn>
 Избранное
</a>

data-ui-favorites-counter

Счётчик товаров добавленных в избранное

<span data-ui-favorites-counter></span>

Методы класса FavoritesProducts

getFavoritesProducts

Получить текущее состояние избранного

var favoritesState = FavoritesProducts.getFavoritesProducts();
console.log(favoritesState);

add

Добавить товар в избранное

/**
 * @param {number} item ID товара
 */
FavoritesProducts.add({
  item: 123456
});

remove

Удалить товар из избранного

/**
 * @param {number} item ID товара
 */
FavoritesProducts.remove({
  item: 123456
});

clear

Очистить избранное

FavoritesProducts.remove();

update

Обновить состояние

FavoritesProducts.update();

События

Событие
Описание
before:insales:favorites_products
Срабатывает перед любым взаимодействием с компонентом избранного
always:insales:favorites_products
Срабатывает после любого взаимодействия с компонентом избранного
update_items:insales:favorites_products
Список избранного обновлен
add_item:insales:favorites_products
Товар добавлен в избранное
remove_item:insales:favorites_product
Товар удален из избранного
overload:insales:favorites_products
Достигнуто максимальное количество избранных товаров

Пример подписки на событие

EventBus.subscribe('add_item:insales:favorites_products', function (data) {
  console.log('Товар добавлен в избранное', data);
}); 

Оставить оценку

Оценка успешно отправлена.
Она будет проверена администратором перед публикацией.
Перед публикацией все оценки проходят модерацию

Оценки: 0

Остались вопросы?
Отправь тикет в техподдержку!
Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales
Всё для продаж уже внутри!
Нажимая кнопку «Зарегистрироваться», я принимаю Пользовательское соглашение и Политику конфиденциальности
Недавно просмотренные статьи
Продолжая пользоваться сайтом,
вы соглашаетесь с использованием cookie