Przycisk Wishelia dla Twojego sklepu

Pełna instrukcja dla agenta AI: platforma sklepu, instalacja, rzeczywiste dane produktu, aktualizacja wariantów, dostępność i testy.

1. Jesteś agentem AI wdrażającym Wishelia w moim sklepie. Najpierw sprawdź repozytorium, rzeczywistą platformę (Shopify/Liquid, WooCommerce/PHP, React/Next, Vue/Nuxt lub inną), szablony produktów i istniejące przyciski. Nie wymyślaj struktury projektu.

2. Kupujący klika przycisk, otwiera Wishelia w nowej karcie, sprawdza produkt, wybiera lub tworzy listę życzeń i potwierdza zapis. Lista gościa nie wymaga rejestracji. Kliknięcie w sklepie NIE oznacza zapisu: nie pokazuj fałszywego stanu Dodano.

3. Umieść przycisk obok działań produktu, bez zagnieżdżania w innym linku/przycisku i bez wysyłania formularza koszyka. Zachowaj zakupy, płatności, analitykę, warianty i nawigację mobilną.

4. Dołącz oficjalny CSS i skrypt defer raz we wspólnym szablonie, nie dla każdej karty. Respektuj CSP bez unsafe-inline. Nie dodawaj zależności, kluczy API ani wywołań prywatnego API Wishelia.

5. Podłącz rzeczywiste dane konkretnego produktu: publiczny absolutny URL HTTPS, nazwę, zdjęcie, krótki tekst, cenę liczbową i kod ISO waluty. Pomijaj nieznane pola opcjonalne. Każda karta w katalogu ma używać własnego produktu.

6. Po zmianie koloru/rozmiaru aktualizuj URL/ID wariantu, cenę i zdjęcie. Używaj danych liczbowych platformy, nie parseFloat dla formatowanych cen. Wywołuj window.WisheliaSave.mount(document) po aktualizacji i wstawieniu kart przez AJAX/SPA, gdy skrypt jest załadowany. Powtórzenia nie mogą dublować ikon ani obsługi.

7. Zbuduj awaryjny href przez URL/URLSearchParams z /save na wybranej oficjalnej domenie i parametrem url. Koduj raz, zachowaj parametry wariantu, bezpiecznie escapuj atrybuty HTML. Nie używaj niebezpiecznego innerHTML i nie przekazuj tokenów, sesji, haseł, emaila klienta, koszyka ani historii przeglądania.

8. Użyj wybranego wyglądu z przykładu. Skrypt dodaje oryginalną ikonę PNG Wishelia z /integrations/wishelia-symbol.png; nie SVG ani emoji. Wariant icon wymaga dostępnej nazwy. Zapewnij Tab/Enter, widoczny fokus, kontrast i 48px normal,32px mini na komputerze i minimum44px na ekranie dotykowym oraz brak poziomego przewijania strony.

9. Przetestuj produkt i kategorię z wieloma produktami, trzy warianty,320/390px i komputer, klawiaturę/czytnik, zmianę wariantu, ponowny mount, błędny URL, brak JS, region i walutę. localhost, prywatne IP i javascript: nie mogą być URL produktu. Nie kupuj i nie zapisuj niczego na cudzej liście podczas testów.

10. Dane są wskazówką: Wishelia odczytuje stronę, a klient potwierdza wynik. Nie obchodź zabezpieczeń URL. Opisz zmienione pliki, mapowanie pól, aktualizację wariantów, testy i ograniczenia. Zostaw komentarze w kodzie; publikuj zgodnie z procesem akceptacji mojego projektu.

REGION: PL
DOMAIN: https://wishelia.pl
CURRENCY: PLN
VARIANT: primary
SIZE: normal
BRAND_ICON: https://wishelia.pl/integrations/wishelia-symbol.png

HTML:
<!-- Style przycisku. Dołącz raz w <head> strony lub szablonu sklepu. -->
<link rel="stylesheet" href="https://wishelia.pl/integrations/wishelia-save.css">
<!-- Logika przycisku. defer uruchamia skrypt po odczytaniu HTML; dołącz raz. -->
<script src="https://wishelia.pl/integrations/wishelia-save.js" defer></script>

<!--
data-wishelia-save oznacza element integracji; nie wymaga wartości.
data-wishelia-market: UA = Ukraina, PL = Polska, US = wersja angielska.
data-wishelia-variant: primary = wypełniony z ikoną, outline = obrys, icon = sama ikona.
data-wishelia-size — normal: 48px; mini: 32px na komputerze,44px na ekranie dotykowym.
data-wishelia-url to pełny publiczny URL TEGO produktu, nie sklepu ani koszyka.
data-wishelia-title to rzeczywista nazwa produktu, do 200 znaków.
data-wishelia-currency: UAH = hrywna; PLN = złoty; USD = dolar amerykański; EUR = euro; GBP = funt brytyjski.
href działa bez JavaScript: /save otwiera dodawanie, a url zawiera zakodowany adres produktu.
target otwiera nową kartę; rel i referrerpolicy izolują ją i wyłączają nagłówek Referer.
Tekst linku opisuje działanie także czytnikom ekranu; wariant icon ukrywa go wizualnie.
-->
<a data-wishelia-save
   class="wishelia-save-button wishelia-save-button--primary"
   data-wishelia-market="PL"
   data-wishelia-variant="primary"
   data-wishelia-size="normal"
   data-wishelia-url="https://your-store.example/product/mug"
   data-wishelia-title="Kubek ceramiczny"
   data-wishelia-currency="PLN"
   href="https://wishelia.pl/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.pl/integrations/wishelia-symbol.png" width="28" height="28" alt="" aria-hidden="true"><span data-wishelia-label>Dodaj do Wishelia</span></a>

<!--
Pełny przykład z polami opcjonalnymi: zastąp nim poprzedni <a>, nie dodawaj drugiego przycisku.
Publiczny absolutny URL zdjęcia produktu, bez prywatnych adresów i tokenów.
Opis tekstowy do 500 znaków, bez HTML i danych osobowych.
Cena liczbowa od 0 do 999999999. Separator dziesiętny: kropka; bez spacji i symbolu waluty.
-->
<a data-wishelia-save
   class="wishelia-save-button wishelia-save-button--primary"
   data-wishelia-market="PL"
   data-wishelia-variant="primary"
   data-wishelia-size="normal"
   data-wishelia-url="https://your-store.example/product/mug"
   data-wishelia-title="Kubek ceramiczny"
   data-wishelia-currency="PLN"
   data-wishelia-image="https://your-store.example/images/mug.jpg"
   data-wishelia-description="Kubek ceramiczny, 350 ml"
   data-wishelia-price="499.00"
   href="https://wishelia.pl/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.pl/integrations/wishelia-symbol.png" width="28" height="28" alt="" aria-hidden="true"><span data-wishelia-label>Dodaj do Wishelia</span></a>

Możesz też przekazać zdjęcie, krótki opis, cenę i walutę. Wishelia odczyta stronę produktu; kupujący może edytować wynik.

<!--
Pełny przykład z polami opcjonalnymi: zastąp nim poprzedni <a>, nie dodawaj drugiego przycisku.
Publiczny absolutny URL zdjęcia produktu, bez prywatnych adresów i tokenów.
Opis tekstowy do 500 znaków, bez HTML i danych osobowych.
Cena liczbowa od 0 do 999999999. Separator dziesiętny: kropka; bez spacji i symbolu waluty.
-->
<a data-wishelia-save
   class="wishelia-save-button wishelia-save-button--primary"
   data-wishelia-market="PL"
   data-wishelia-variant="primary"
   data-wishelia-size="normal"
   data-wishelia-url="https://your-store.example/product/mug"
   data-wishelia-title="Kubek ceramiczny"
   data-wishelia-currency="PLN"
   data-wishelia-image="https://your-store.example/images/mug.jpg"
   data-wishelia-description="Kubek ceramiczny, 350 ml"
   data-wishelia-price="499.00"
   href="https://wishelia.pl/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.pl/integrations/wishelia-symbol.png" width="28" height="28" alt="" aria-hidden="true"><span data-wishelia-label>Dodaj do Wishelia</span></a>

Jeśli sklep ładuje nowe produkty bez odświeżania strony, wywołaj WisheliaSave.mount(document) po ich pojawieniu się.