arrow_back Все платформы

Интеграция виджета

WooCommerce

Один PHP-фрагмент в шаблоне карточки товара. URL, фото и категория берутся из товара автоматически.

1. Studio

  1. Откройте Профиль → Виджет и создайте магазин.
  2. Укажите URL сайта и сохраните настройки.
  3. Переведите кредиты на баланс виджета.
  4. Во вкладке WooCommerce скопируйте готовый код (Shop ID и API-ключ уже внутри).

2. Чеклист

  • Создайте магазин во вкладке «Виджет» в Studio и скопируйте Shop ID / API-ключ.
  • Укажите URL сайта магазина (домен нужен для проверки источника запросов).
  • Переведите кредиты на баланс виджета.
  • URL страницы товара и изображения товара — только HTTPS.
  • Сопоставьте тип товара с tops, bottoms или one-pieces.

3. Вставка кода

Добавьте фрагмент в шаблон single product или через хук woocommerce_after_add_to_cart_button в functions.php дочерней темы. Отредактируйте карту slug категорий под свой каталог. 

<?php
/**
 * Pixel Fit — single product template / after add-to-cart hook.
 * Отредактируйте $pf_category_map под свои slug категорий.
 */
if (!is_product()) { return; }

$pf_category_map = [
  't-shirts' => 'tops',
  'futbolki' => 'tops',
  'pants' => 'bottoms',
  'bryuki' => 'bottoms',
  'dresses' => 'one-pieces',
  'platya' => 'one-pieces',
];

$pf_category = 'tops';
$terms = get_the_terms(get_the_ID(), 'product_cat');
if (is_array($terms)) {
  foreach ($terms as $term) {
    if (isset($pf_category_map[$term->slug])) {
      $pf_category = $pf_category_map[$term->slug];
      break;
    }
  }
}
?>
<script src="https://widget.pixel-fit.ru/widget.js"
  data-shop-id="YOUR_SHOP_ID"
  data-api-key="YOUR_API_KEY"
  data-product-url="<?php echo esc_url(get_permalink()); ?>"
  data-image-url="<?php echo esc_url(get_the_post_thumbnail_url(null, 'full') ?: ''); ?>"
  data-category="<?php echo esc_attr($pf_category); ?>"
  data-locale="ru"
  async></script>

4. Категории примерки

  • Верх (tops) — футболки, рубашки, худи, лонгсливы, куртки
  • Низ (bottoms) — брюки, юбки, шорты
  • Цельная вещь (one-pieces) — платья, комбинезоны, комбидресс

5. Проверка

  1. Откройте карточку товара на сайте.
  2. Нажмите «Try On» / кнопку примерки.
  3. Загрузите фото — должна подставиться одежда с этой страницы.
  4. Эталон UX: /demo

6. Если не работает

Кнопка «Примерить» не появляется

Проверьте, что скрипт загружается (CDN widget.pixel-fit.ru), Shop ID и API-ключ верные, на странице нет ошибок в консоли.

Ошибка или пустой товар на примерке

Задайте data-image-url на главное фото товара (HTTPS). Без изображения генерация не запустится.

Домен отклонён

В настройках магазина в Studio укажите тот же домен, с которого открыт виджет (например shop.ru).

Недостаточно кредитов

Переведите кредиты Studio → Виджет на вкладке «Виджет» в профиле.

Плохой результат примерки

Проверьте data-category: платья — one-pieces, брюки — bottoms, иначе по умолчанию используется tops.

Помощь: support@pixel-fit.ru