Brug Footnote på en Catalyst-webshop

Footnote-mærkninger virker på Catalyst, BigCommerces webshop bygget på Next.js, fra version 1.4. Understøttelsen af Catalyst er i beta. Vi har testet mærkningsscriptet på en standardinstallation af Catalyst 1.12, men endnu ikke på en butiks egen Catalyst-version. Hvis noget på denne side ikke passer med det, du ser, så sig til.

Tjek din Catalyst-version

Mærkningerne kræver Catalyst core 1.4 eller nyere. Fra version 1.3 indlæser Catalyst scripts fra Script Manager via sin cookie-samtykkestyring, og version 1.4 tilføjede den placering i head og body, som Footnotes script bygger på. Versionen står i core/package.json under navnet @bigcommerce/catalyst-core.

En Catalyst-opdatering fra BigCommerce når først frem til din webshop, når din udvikler fletter den ind i jeres kopi. En ældre webshop bliver derfor på sin gamle version, indtil nogen opdaterer den.

Behold samtykkestyringen i rodlayoutet

Catalyst indlæser scripts fra Script Manager via komponenten <ConsentManager> i core/app/[locale]/layout.tsx. Hvis den fjernes eller udskiftes, indlæses Footnotes script aldrig, og der vises ingen mærkninger. Footnote kan ikke se det fra BigCommerce, så Indstillinger viser stadig webshoppen som dækket.

Lad scriptet stå på »Essential«

Footnote tilføjer ét script i Script Manager, kaldet Footnote AI image labels, med samtykkekategorien »Essential« (nødvendig). Catalysts cookiebanner behandler »Essential«-scripts som nødvendige, så scriptet indlæses, før kunden vælger, og efter at kunden har afvist cookies. Det sætter ingen cookies og indsamler intet om kunderne.

Hvis nogen ændrer kategorien til »Functional«, »Analytics« eller »Targeting«, holder kunder, der afviser cookies, op med at se mærkningerne. Sæt den tilbage til »Essential« i Script Manager.

Behold produktbillederne på BigCommerces CDN

Footnote finder et mærket billede ud fra dets adresse på BigCommerces CDN, som indeholder produkt- og billednumrene, f.eks. cdn11.bigcommerce.com/s-abc123/images/stencil/384w/products/157/551/. Catalyst viser som standard produktbilleder direkte fra den adresse, så det virker uden ændringer. Billeder, der går gennem billedoptimeringen i Next.js (/_next/image?url=...), virker også, fordi Footnote læser den oprindelige adresse inde i dem.

Mærkningerne forsvinder, når en billedadresse ikke længere indeholder BigCommerce-stien. Det sker med en tilpasset image loader, der omskriver adressen, med en billedproxy eller en anden billedtjeneste foran CDN’et, eller med billeder, der er placeret med Makeswift.

Tillad Footnote i en tilpasset Content Security Policy

Catalyst begrænser som standard ikke, hvor scripts indlæses fra. Hvis din udvikler har tilføjet regler for script-src eller connect-src, skal https://footnote.pouchapps.com tillades i begge. Mærkningsscriptet indlæses derfra og henter dine mærkningsindstillinger derfra.

Regn med op til en time, før ændringer vises

Catalyst cacher listen over scripts fra Script Manager i op til en time. Når du har installeret Footnote eller ændret noget ved dine mærkninger, kan der gå så længe, før webshoppen er opdateret. På Stencil vises de samme ændringer inden for cirka et minut.

En udvikler kan få ændringer vist hurtigere på to måder:

Udrul webshoppen igen. En ny udrulning henter listen over scripts igen. Det er den nemmeste løsning efter installation af Footnote.
Sænk DEFAULT_REVALIDATE_TARGET. Indstillingen er i sekunder og står som standard på 3600. Den styrer, hvor længe Catalyst cacher det meste af sine data fra BigCommerce, ikke kun scripts, så et lavere tal giver flere forespørgsler til BigCommerce. Sænk den, mens du tester, og lad den ikke blive stående lavt.

Tjek, at mærkningerne vises

Åbn Indstillinger i Footnote, og tjek, at din Catalyst-webshop står som dækket. Essentials dækker kun din standardwebshop. Pro dækker alle webshops.
Markér ét billede som AI-genereret, og slå »Vis mærkninger« til under Indstillinger.
Vent op til en time, eller bed din udvikler om at udrulle igen.
Åbn produktsiden i et privat browservindue. Hvis der vises et cookiebanner, så afvis. Mærkningen skal sidde i det hjørne, du valgte på fanen Mærke. På Catalyst vises den et øjeblik efter siden, når siden er færdig med at indlæse sine scripts.

Vil du tjekke det i browseren, så åbn udviklerkonsollen på en vilkårlig side i webshoppen og kør document.documentElement.dataset.footnote. Returnerer den "1", kører Footnotes script der.

Ret en manglende mærkning

Hvis konsoltjekket ikke returnerer "1", kører webshoppen ikke Footnotes script. Tjek disse punkter i rækkefølge:

Vent, til timen er gået, eller udrul igen.
Indstillinger viser webshoppen som dækket.
Catalyst core er version 1.4 eller nyere.
<ConsentManager> findes stadig i core/app/[locale]/layout.tsx.
Scriptet står på »Essential« i Script Manager.
En eventuel tilpasset Content Security Policy tillader https://footnote.pouchapps.com.

Hvis den returnerer "1", men billedet ingen mærkning har, kører scriptet, men det har ikke genkendt billedet:

Tjek, at billedet er markeret AI-genereret eller AI-redigeret i Footnote.
Højreklik på billedet, kopiér dets adresse, og tjek, at den indeholder /products/ efterfulgt af to tal. Gør den ikke det, kommer billedet ikke fra BigCommerces CDN i en form, Footnote kan genkende.
Tjek på fanen Mærke, at Kategorier og søgeresultater er slået til. Catalyst-sider bærer ingen markering, der fortæller Footnote, at en side er en produktside, så den kontakt dækker også Catalysts produktsider.

Sidder du stadig fast, så skriv til footnote@pouchapps.com med adressen på din webshop, en produktside, der burde vise en mærkning, din Catalyst-version og resultatet af konsoltjekket. Supportsiden viser de grunde, der kan få en mærkning til at mangle på enhver webshop.