Динамические страницы и изменения вариантов#

SDK отслеживает целевые элементы, добавленные после загрузки страницы. Выбранным товаром по-прежнему управляет ваша витрина, которая должна синхронизировать атрибуты целевого элемента с этим выбором.

Однократная загрузка и обновление целевого элемента#

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

Для автоматически создаваемых кнопок укажите текущий код товара на целевом контейнере. Для кнопок, созданных вручную, также сбрасывайте прежнее состояние SDK, как показано в руководстве для собственного интернет-магазина.

Сброс кнопки, созданной вручную#

Следующий пример соответствует существующему контракту интеграции собственного интернет-магазина. Вызывайте его из своего обработчика выбора после определения кода выбранного товара.

function setSelectedProduct(button, productCode) {
  button.dataset.active = 'false';
  button.style.visibility = 'hidden';
  delete button.dataset.rvProductCode;
  delete button.dataset.rvProductType;
  delete button.dataset.rvProductId;
  delete button.dataset.rvProductIds;
  const code = typeof productCode === 'string' ? productCode.trim() : '';
  if (code) button.dataset.productCode = code;
  else delete button.dataset.productCode;
  button.disabled = !code;
}

Подключение к фактическому жизненному циклу платформы#

Универсального события смены варианта для всех платформ электронной торговли нет. Руководство Shopify определяет событие, которое должна отправлять ваша тема; добавление одного слушателя не подключает тему. Используйте обработчик, описанный в документации вашей темы или приложения.

Для React / Next.js и Vue / Nuxt следуйте инструкциям по клиентскому жизненному циклу и очистке из руководства для соответствующего фреймворка.

Проверка на устаревший выбор#

Переключитесь между подходящим товаром, другим подходящим товаром и товаром без сопоставления. После смены выбора Viewer ни в коем случае не должен повторно открывать прежний товар. Повторите проверку с быстрым просмотром и переходом назад в браузере.