Använd Footnote i en Catalyst-butik

Footnote-märkningar fungerar i Catalyst, BigCommerce butiksplattform byggd på Next.js, från version 1.4. Stödet för Catalyst är i beta. Vi har testat märkningsskriptet på en standardinstallation av Catalyst 1.12, men ännu inte på en butiks egen Catalyst-version. Om något på den här sidan inte stämmer med det du ser, hör gärna av dig.

Kontrollera din Catalyst-version

Märkningar kräver Catalyst core 1.4 eller senare. Catalyst laddar skript från Script Manager via sin hanterare för cookiesamtycke från version 1.3, och i 1.4 kom placeringen i head och body som Footnotes skript behöver. Versionen står i core/package.json, under namnet @bigcommerce/catalyst-core.

En Catalyst-uppdatering från BigCommerce når bara din butik när utvecklaren slår ihop den med er kopia, så en äldre butik ligger kvar på sin gamla version tills någon uppdaterar den.

Behåll samtyckeshanteraren i rotlayouten

Catalyst laddar skript från Script Manager via komponenten <ConsentManager> i core/app/[locale]/layout.tsx. Om den tas bort eller byts ut laddas aldrig Footnotes skript, och inga märkningar visas. Footnote kan inte se detta från BigCommerce, så Inställningar visar fortfarande butiken som täckt.

Låt skriptet ligga kvar som Essential

Footnote lägger till ett skript i Script Manager, med namnet Footnote AI image labels och samtyckeskategorin ”Essential”. Catalysts cookiebanner behandlar skript i kategorin ”Essential” som nödvändiga, så skriptet laddas innan kunden har gjort ett val och även efter att kunden har avböjt cookies. Det sätter inga cookies och samlar inte in något om kunderna.

Om någon ändrar kategorin till ”Functional”, ”Analytics” eller ”Targeting” slutar kunder som avböjer cookies att se märkningar. Ändra tillbaka till ”Essential” i Script Manager.

Behåll produktbilderna på BigCommerce CDN

Footnote hittar en märkt bild via dess adress på BigCommerce CDN, som innehåller produktens och bildens nummer, till exempel cdn11.bigcommerce.com/s-abc123/images/stencil/384w/products/157/551/. En standardinstallation av Catalyst visar produktbilder direkt från den adressen, så det fungerar utan ändringar. Bilder som går via Next.js bildoptimering (/_next/image?url=...) fungerar också, eftersom Footnote läser den ursprungliga adressen inuti dem.

Märkningar försvinner när en bildadress inte längre innehåller BigCommerce-sökvägen. Det händer med en egen bildladdare som skriver om adressen, en bildproxy eller en annan bildtjänst framför CDN:et, eller med bilder som placerats med Makeswift.

Tillåt Footnote i en egen Content Security Policy

En standardinstallation av Catalyst begränsar inte varifrån skript laddas. Om utvecklaren har lagt till regler för script-src eller connect-src, tillåt https://footnote.pouchapps.com i båda. Märkningsskriptet laddas därifrån och hämtar dina märkningsinställningar därifrån.

Räkna med upp till en timme för ändringar

Catalyst cachar listan över skript i Script Manager i upp till en timme. När du har installerat Footnote, eller ändrat något i dina märkningar, kan det dröja så länge innan butiken hinner ikapp. Med Stencil syns samma ändringar inom ungefär en minut.

En utvecklare kan få ändringar att synas snabbare på två sätt:

Driftsätt butiken på nytt. En ny driftsättning hämtar listan över skript igen. Det är den enklaste lösningen efter att du installerat Footnote.
Sänk DEFAULT_REVALIDATE_TARGET. Inställningen anges i sekunder och är 3600 som standard. Den styr hur länge Catalyst cachar det mesta av sin data från BigCommerce, inte bara skript, så ett lägre värde ger fler anrop till BigCommerce. Sänk den för att testa, och låt den inte ligga kvar på ett lågt värde.

Kontrollera att märkningar visas

Öppna Inställningar i Footnote och kontrollera att din Catalyst-butik står som täckt. Essentials gäller bara din standardbutiksfront. Pro gäller alla butiksfronter.
Markera en bild som AI-genererad och slå på Visa märkningar under Inställningar.
Vänta upp till en timme, eller be utvecklaren driftsätta på nytt.
Öppna produktsidan i ett privat webbläsarfönster. Om en cookiebanner visas, avböj. Märkningen ska sitta i det hörn du valde på fliken Märke. I Catalyst visas den en kort stund efter sidan, när sidan har laddat klart sina skript.

För att kontrollera i webbläsaren öppnar du utvecklarkonsolen på valfri sida i butiken och kör document.documentElement.dataset.footnote. Om den returnerar "1" körs Footnotes skript där.

Åtgärda en saknad märkning

Om kontrollen i konsolen inte returnerar "1" kör butiken inte Footnotes skript. Kontrollera detta i tur och ordning:

Vänta tills timmen har gått, eller driftsätt på nytt.
Inställningar listar butiken som täckt.
Catalyst core har version 1.4 eller senare.
<ConsentManager> finns kvar i core/app/[locale]/layout.tsx.
Skriptet har kategorin ”Essential” i Script Manager.
En eventuell egen Content Security Policy tillåter https://footnote.pouchapps.com.

Om den returnerar "1" men bilden saknar märkning körs skriptet men har inte matchat bilden:

Kontrollera att bilden är markerad som AI-genererad eller AI-redigerad i Footnote.
Högerklicka på bilden, kopiera bildadressen och kontrollera att den innehåller /products/ följt av två nummer. Om den inte gör det kommer bilden inte från BigCommerce CDN i en form som Footnote kan matcha.
Kontrollera på fliken Märke att Kategorier och sökresultat är påslaget. Catalyst-sidor saknar en markör som talar om för Footnote att en sida är en produktsida, så det reglaget gäller även produktsidor i Catalyst.

Om du fortfarande sitter fast, mejla footnote@pouchapps.com med butikens adress, en produktsida som borde visa en märkning, din Catalyst-version och resultatet av kontrollen i konsolen. Supportsidan listar skälen till att en märkning kan saknas i alla typer av butiker.