Asistent AI de cumpărături pe Shopify sau WooCommerce: ghid

Poți pune un asistent AI de cumpărături într-un magazin Shopify sau WooCommerce într-o după-amiază. Cea mai mare parte din muncă e copy-paste. Singurul pas care cere puțin cod, conectarea butonului „Adaugă în coș” din chat la coșul tău real, înseamnă câteva rânduri pe care le poți copia din acest ghid. Pașii urmează documentația AskMerra și se aplică și pentru Magento 2 sau pentru magazinele construite la comandă.

Înainte să începi

Ai nevoie de patru lucruri:

• Un cont AskMerra și un magazin. Introduci domeniul site-ului când creezi magazinul, pentru că widgetul rulează doar acolo.
• Datele produselor, ca fișier de export sau ca URL de feed.
• Acces la fișierele temei, la un plugin pentru header/footer sau la Google Tag Manager.
• Cheia publică a site-ului (începe cu pk_live_), afișată în panou, la Instalare.

Pasul 1: importă catalogul

AskMerra recomandă doar produse care sunt în catalogul tău, așa că un catalog complet și actualizat e cel mai important lucru pe care îl aduci. Astăzi există trei moduri de a aduce produsele:

• Încărcare de fișier (CSV, JSON sau XML): cel mai rapid mod de a începe. Fișierele pot avea până la 25 MB, iar separatorii și codificarea fișierelor CSV sunt detectate automat.
• URL de feed: dacă publici deja un feed de produse, de exemplu pentru Google Shopping, AskMerra îl resincronizează automat la fiecare 1 până la 6 ore, în funcție de plan. Un feed XML din Google Merchant Center funcționează așa cum e.
• Push API: pentru platforme construite la comandă și ERP-uri care au nevoie de stoc și prețuri în timp real.

De unde vin datele pe fiecare platformă

Pe Shopify, instalează o aplicație de feed Google Shopping și adaugă URL-ul feedului ei sau încarcă un export CSV. Pe WooCommerce, folosește un plugin de feed de produse sau un export CSV. Pe Magento 2, folosește o extensie de feed sau Push API. Aplicațiile native pentru Shopify și Magento, cu sincronizare automată, sunt în plan. Până apar, feedul și API-urile acoperă aceleași nevoi.

Maparea și îmbogățirea

După încărcare, AskMerra îți sugerează cum se potrivesc coloanele tale cu câmpurile lui (id, nume, preț, preț redus, disponibilitate, categorii, brand și așa mai departe). Verifică maparea înainte de import. Coloanele pe care le mapezi la attribute:<name>, de exemplu attribute:skin_type, devin atribute de produs căutabile.

Apoi fiecare produs este îmbogățit: AI-ul extrage utilizări, tipuri de ten sau păr, probleme, ingrediente cheie sau specificații și pașii din rutină, iar rezultatul este indexat pentru căutarea semantică. Modificările ulterioare de preț și stoc se aplică imediat și nu declanșează din nou îmbogățirea. Produsele care lipsesc dintr-o nouă sincronizare completă sunt dezactivate, niciodată șterse.

Trimiterea produselor din backend

Dacă sincronizezi din propriul sistem, trimite loturi de până la 500 de produse, autentificate cu cheia secretă:

curl -X POST "https://api.askmerra.com/v1/catalog/products:batchUpsert" \
  -H "Authorization: Bearer $ASKMERRA_SECRET_KEY" \
  -H "Content-Type: application/json" \
  -d '{"products":[{"external_id":"LUM-SE-01","name":"Hydra Glow Serum 30 ml","price":39,"in_stock":true}]}'

Trimite întotdeauna produsul complet: un upsert înlocuiește ce e stocat, așa că se golesc câmpurile pe care nu le trimiți.

Pasul 2: adaugă un singur tag script

Copiază codul din panou, de la Instalare, și lipește-l chiar înainte de eticheta de închidere </body> pe fiecare pagină unde vrei să apară asistentul:

<script src="https://cdn.askmerra.com/v1/widget.js" data-site-key="pk_live_…" async></script>

Scriptul are aproximativ 27 KB comprimat cu gzip. Așteaptă să se încarce pagina și să fie liber browserul, apoi afișează doar butonul de lansare. Chatul este afișat într-un Shadow DOM, așa că CSS-ul temei tale nu-l poate strica, iar CSS-ul lui nu ajunge în tema ta.

Shopify

Mergi la Online Store → Themes → Edit code, deschide layout/theme.liquid și lipește codul înainte de </body>.

WooCommerce și WordPress

Adaugă codul cu un plugin pentru header/footer, cum ar fi WPCode, în secțiunea de footer. Dacă preferi să lucrezi în cod, pune-l în footer.php din tema copil, înainte de wp_footer().

Google Tag Manager

Creează un tag Custom HTML care se declanșează pe All Pages. Unele configurații GTM elimină atributele data-*, așa că folosește în schimb obiectul de setări:

<script>
  window.AskMerraSettings = { siteKey: 'pk_live_…' };
</script>
<script src="https://cdn.askmerra.com/v1/widget.js" async></script>

Pe Magento 2, adaugă codul în Content → Design → Configuration → HTML Head → Scripts and Style Sheets. Aplicațiile single-page (React, Vue, Next.js) îl încarcă o singură dată în layoutul rădăcină, iar conversația rămâne deschisă în timpul navigării pe partea de client.

Pasul 3: setează domeniile permise

Cheia site-ului funcționează doar pe domeniile din Setări → Domenii permise. shop.com acoperă și www.shop.com, iar *.shop.com acoperă toate subdomeniile. Adaugă și domeniul de staging, altfel widgetul va refuza să ruleze acolo.

Un avertisment: codul trebuie să conțină cheia site-ului, pk_live_. Nu lipi niciodată o cheie secretă sk_live_ într-o pagină web. Oricum, endpointurile widgetului o resping.

Pasul 4: dă-i asistentului contextul paginii de produs

Pe o pagină de produs, AskMerra poate ști ce produs vede clientul, așa că „E bun pentru ten gras?” funcționează direct. Citește produsul din JSON-LD-ul schema.org al paginii (Product.sku, apoi productID, apoi mpn). Pe WooCommerce se folosește JSON-LD-ul generat de pluginul tău de SEO. Dacă tema ta nu generează niciunul, setează tu produsul:

<script>
  window.AskMerraSettings = { productId: 'LUM-SE-01' };
</script>

Valoarea trebuie să corespundă cu external_id sau sku al produsului din catalogul tău AskMerra.

Pasul 5: conectează „Adaugă în coș”

Cardurile de produs din chat pot afișa un buton „Adaugă în coș”. Activează-l în setările de comportament ale widgetului, apoi tratează evenimentul add_to_cart cu API-ul de coș al platformei tale. Fără un handler, butonul doar deschide pagina produsului.

Pe Shopify, externalId este ID-ul variantei atunci când catalogul vine din Shopify:

AskMerra.on('add_to_cart', async ({ externalId }) => {
  await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items: [{ id: Number(externalId), quantity: 1 }] }),
  });
});

Pe WooCommerce, externalId este ID-ul produsului din WooCommerce:

AskMerra.on('add_to_cart', async ({ externalId }) => {
  const body = new URLSearchParams({ product_id: externalId, quantity: '1' });
  await fetch('/?wc-ajax=add_to_cart', { method: 'POST', body });
  document.body.dispatchEvent(new Event('wc_fragment_refresh'));
});

Scriptul widgetului se încarcă asincron, așa că cel mai sigur loc pentru a înregistra handlerele este callbackul onReady din window.AskMerraSettings. Același API JavaScript îți permite să deschizi chatul din propriul buton „Întreabă un expert” cu AskMerra.sendMessage(), să urmezi selectorul de limbă al site-ului cu AskMerra.setLocale() și să trimiți evenimentele open, product_click și add_to_cart către instrumentele tale de analiză.

Pasul 6: verifică instalarea

Deschide magazinul în browser, apoi mergi în panou, la Instalare. Pagina arată când și unde a fost văzut ultima dată widgetul, inclusiv la instalările prin tag manager. Butonul Verifică acum îți accesează domeniile și raportează dacă a fost găsit codul, dacă e instalată o altă cheie de site sau dacă site-ul nu a putut fi accesat.

Dacă butonul de lansare nu apare, deschide consola browserului. Widgetul afișează un avertisment clar: cheie de site necunoscută, domeniu nepermis sau magazin pus pe pauză. Dacă site-ul tău trimite un antet Content Security Policy, permite https://cdn.askmerra.com în script-src și https://api.askmerra.com în connect-src.

Câteva retușuri finale:

• Ascunde butonul de lansare la finalizarea comenzii cu o regulă de cale precum /checkout*, ca procesul de cumpărare să rămână fără distrageri.
• Pune în playground întrebări reale ale clienților înainte de lansare. Panoul lui de depanare arată ce produse au fost găsite și ce rută a răspuns.
• Modificările de design pe care le publici din panou ajung pe site în aproximativ un minut, fără să schimbi codul.

Creează-ți contul

Ca să parcurgi pașii de mai sus, creează-ți contul. Dacă vrei să vezi mai întâi asistentul pe produsele tale, programează un demo. Referința completă se află în documentația de instalare și în documentația API-ului JavaScript. Dacă încă cântărești ideea, începe cu ce este un asistent AI de cumpărături și vezi prin ce diferă de o casetă de căutare clasică în căutare conversațională vs căutare după cuvinte cheie.