Кнопка Wishelia для вашого магазину

Готова інструкція для AI-агента: визначення платформи магазину, підключення кнопки, реальні дані товару, оновлення варіантів, доступність і перевірки.

1. Ти AI-агент розробника інтернет-магазину. Інтегруй кнопку Wishelia у мій магазин. Спочатку оглянь репозиторій, визнач платформу (Shopify/Liquid, WooCommerce/PHP, React/Next, Vue/Nuxt або іншу), місце рендерингу картки/сторінки товару та існуючі компоненти кнопок. Не вигадуй структуру проєкту.

2. Мета: покупець сам натискає кнопку, відкриває Wishelia у новій вкладці з даними товару, перевіряє їх, обирає або створює вішлист і підтверджує додавання. Гостьовий вішлист можливий без обов’язкової реєстрації. Сам клік у магазині НЕ означає, що товар уже збережений; не показуй фальшивий стан «Додано».

3. Розмісти кнопку поруч із діями товару, але не всередині іншого посилання чи кнопки і не як submit кошика. Збережи роботу купівлі, оплати, аналітики, вибору варіантів і мобільної навігації. Не змінюй їх заради інтеграції.

4. Візьми код нижче за основу, підключи CSS та defer-скрипт з обраного офіційного домену один раз у спільному шаблоні. Не додавай дубль скрипту в кожну картку. Дотримуйся CSP магазину; не послаблюй її до unsafe-inline. Не додавай зовнішні бібліотеки, токени, API-ключі чи клієнтські виклики приватного API Wishelia.

5. Замінюй усі example-значення реальними даними поточного товару з платформи: абсолютний HTTPS URL, назва, публічне фото, короткий текст, актуальна числова ціна та ISO-валюта. Для каталогу кожна кнопка повинна отримувати дані власного товару, а не першого на сторінці. Якщо значення невідоме — пропускай необов’язковий атрибут, не вигадуй ціну чи фото.

6. Для варіантів товару оновлюй URL/variant-ID, фото й ціну після вибору кольору/розміру. Використовуй числові дані платформи, не parseFloat для локалізованих рядків на кшталт «1 299,00 ₴». Потім викликай window.WisheliaSave.mount(document), коли скрипт уже завантажено. Так само монтуй нові картки після AJAX/SPA-навігації. Виклик повторюваний: не повинно бути дубльованих іконок чи обробників.

7. href — резервний шлях без JavaScript. Побудуй його через URL та URLSearchParams із /save на обраному офіційному домені та параметром url. Правильно кодуй URL товару один раз, збережи його змістовні variant-параметри, екрануй HTML-атрибути засобами платформи. Не вставляй дані товару через небезпечний innerHTML. Не передавай session/access_token, паролі, email покупця, вміст кошика чи історію переглядів.

8. Застосуй вибраний варіант із прикладу. Використовуй оригінальну PNG-іконку Wishelia з /integrations/wishelia-symbol.png; не замінюй її SVG чи emoji. Для icon-only збережи зрозуміле текстове доступне ім’я. Забезпеч керування Tab/Enter, видимий фокус, контраст і 48 px для normal, 32 px для mini на ПК та щонайменше 44 px на сенсорному екрані. У вузьких блоках текст переноситься без горизонтального прокручування всієї сторінки.

9. Перевір: сторінку товару й категорію з кількома різними товарами; відповідність кожної кнопки своєму URL; усі три варіанти; мобільні 320/390 px і ПК; клавіатуру та скринрідер; зміну варіанта; повторний mount; відсутній/невалідний URL; JS, що не завантажився; правильний регіон і валюту. localhost, приватні IP та javascript:-адреси не мають відкриватися як товар. Не роби реальні покупки й не додавай товари до чужих вішлистів для тесту.

10. Не обіцяй, що передана ціна чи фото остаточні: Wishelia парсить та перевіряє сторінку, а покупець підтверджує результат. Якщо кнопка неактивна, перевір публічний URL і атрибути; не обходь перевірки безпеки.

11. У фіналі переліч змінені файли, місце кнопки, зіставлення полів платформи з атрибутами, спосіб оновлення варіантів, виконані перевірки та невирішені обмеження. Залиши короткі коментарі в інтеграційному коді. Публікуй зміни магазину лише за погодженим у моєму проєкті процесом.

REGION: UA
DOMAIN: https://wishelia.com.ua
CURRENCY: UAH
VARIANT: primary
SIZE: normal
BRAND_ICON: https://wishelia.com.ua/integrations/wishelia-symbol.png

HTML:
<!-- Стилі кнопки. Підключіть один раз у <head> сторінки або шаблону магазину. -->
<link rel="stylesheet" href="https://wishelia.com.ua/integrations/wishelia-save.css">
<!-- Логіка кнопки. defer запускає її після розбору HTML; підключіть один раз. -->
<script src="https://wishelia.com.ua/integrations/wishelia-save.js" defer></script>

<!--
data-wishelia-save — позначає елемент для інтеграції; значення не потрібне.
data-wishelia-market — UA: Україна, PL: Польща, US: англомовна версія.
data-wishelia-variant — primary: з іконкою та заливкою; outline: контурна; icon: лише іконка.
data-wishelia-size — normal: 48 px; mini: 32 px на ПК, 44 px на сенсорних екранах.
data-wishelia-url — повна публічна адреса САМЕ ЦЬОГО товару, не магазину чи кошика.
data-wishelia-title — реальна назва товару (до 200 символів).
data-wishelia-currency — UAH: гривня; PLN: злотий; USD: долар США; EUR: євро; GBP: фунт стерлінгів.
href — посилання без JavaScript: /save відкриває додавання, параметр url містить закодовану адресу товару.
target відкриває нову вкладку; rel і referrerpolicy ізолюють її та не передають Referer.
Текст посилання — назва для покупця і скринрідера; у режимі icon він прихований візуально.
-->
<a data-wishelia-save
   class="wishelia-save-button wishelia-save-button--primary"
   data-wishelia-market="UA"
   data-wishelia-variant="primary"
   data-wishelia-size="normal"
   data-wishelia-url="https://your-store.example/product/mug"
   data-wishelia-title="Керамічна чашка"
   data-wishelia-currency="UAH"
   href="https://wishelia.com.ua/save?url=https%3A%2F%2Fyour-store.example%2Fproduct%2Fmug"
   target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer"><img data-wishelia-icon src="https://wishelia.com.ua/integrations/wishelia-symbol.png" width="28" height="28" alt="" aria-hidden="true"><span data-wishelia-label>Додати у Wishelia</span></a>

<!--
Повний приклад із необов’язковими полями: замініть ним попередній тег <a>, не додавайте другу кнопку.
Публічний абсолютний URL фото товару, без токенів чи закритих адрес.
Короткий опис товару до 500 символів, без HTML і персональних даних.
Числова ціна від 0 до 999999999. Десятковий роздільник — крапка, без пробілів і символу валюти.
-->
<a data-wishelia-save
   class="wishelia-save-button wishelia-save-button--primary"
   data-wishelia-market="UA"
   data-wishelia-variant="primary"
   data-wishelia-size="normal"
   data-wishelia-url="https://your-store.example/product/mug"
   data-wishelia-title="Керамічна чашка"
   data-wishelia-currency="UAH"
   data-wishelia-image="https://your-store.example/images/mug.jpg"
   data-wishelia-description="Керамічна чашка, 350 мл"
   data-wishelia-price="499.00"
   href="https://wishelia.com.ua/save?url=https%3A%2F%2Fyour-store.example%2Fproduct%2Fmug"
   target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer"><img data-wishelia-icon src="https://wishelia.com.ua/integrations/wishelia-symbol.png" width="28" height="28" alt="" aria-hidden="true"><span data-wishelia-label>Додати у Wishelia</span></a>

За бажанням передайте фото, короткий опис, ціну й валюту. Wishelia перевірить сторінку товару; покупець зможе відредагувати результат.

<!--
Повний приклад із необов’язковими полями: замініть ним попередній тег <a>, не додавайте другу кнопку.
Публічний абсолютний URL фото товару, без токенів чи закритих адрес.
Короткий опис товару до 500 символів, без HTML і персональних даних.
Числова ціна від 0 до 999999999. Десятковий роздільник — крапка, без пробілів і символу валюти.
-->
<a data-wishelia-save
   class="wishelia-save-button wishelia-save-button--primary"
   data-wishelia-market="UA"
   data-wishelia-variant="primary"
   data-wishelia-size="normal"
   data-wishelia-url="https://your-store.example/product/mug"
   data-wishelia-title="Керамічна чашка"
   data-wishelia-currency="UAH"
   data-wishelia-image="https://your-store.example/images/mug.jpg"
   data-wishelia-description="Керамічна чашка, 350 мл"
   data-wishelia-price="499.00"
   href="https://wishelia.com.ua/save?url=https%3A%2F%2Fyour-store.example%2Fproduct%2Fmug"
   target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer"><img data-wishelia-icon src="https://wishelia.com.ua/integrations/wishelia-symbol.png" width="28" height="28" alt="" aria-hidden="true"><span data-wishelia-label>Додати у Wishelia</span></a>

Якщо ваш магазин підвантажує нові товари без перезавантаження, викликайте WisheliaSave.mount(document) після їх появи.