Bruk Footnote i en Catalyst-butikk

Footnote-merkinger virker på Catalyst, butikkfronten fra BigCommerce som er bygd på Next.js, fra versjon 1.4. Støtten for Catalyst er i beta. Vi har testet skriptet for merkingene på standard Catalyst 1.12, men ennå ikke på en butikks egen Catalyst-versjon, så si fra hvis noe på denne siden ikke stemmer med det du ser.

Sjekk Catalyst-versjonen din

Merkingene krever Catalyst core 1.4 eller nyere. Catalyst laster skript fra Script Manager gjennom samtykkehåndteringen for informasjonskapsler fra versjon 1.3, og 1.4 la til plasseringen i head og body som skriptet til Footnote trenger. Versjonen står i core/package.json, under navnet @bigcommerce/catalyst-core.

En Catalyst-oppdatering fra BigCommerce når bare butikken din når utvikleren fletter den inn i deres kopi, så en eldre butikk blir værende på den gamle versjonen til noen oppdaterer den.

Behold samtykkehåndteringen i rotoppsettet

Catalyst laster skript fra Script Manager gjennom komponenten <ConsentManager> i core/app/[locale]/layout.tsx. Hvis den fjernes eller byttes ut, lastes aldri skriptet til Footnote, og ingen merkinger vises. Footnote kan ikke se dette fra BigCommerce, så Innstillinger viser fortsatt butikkfronten som dekket.

La skriptet stå som «Essential»

Footnote legger til ett skript i Script Manager, kalt Footnote AI image labels, med samtykkekategorien «Essential». Samtykkebanneret i Catalyst behandler «Essential»-skript som nødvendige, så skriptet lastes før en kunde har valgt, og etter at kunden har avslått informasjonskapsler. Det setter ingen informasjonskapsler og samler ingenting om kundene.

Hvis noen endrer kategorien til «Functional», «Analytics» eller «Targeting», slutter kunder som avslår informasjonskapsler, å se merkingene. Sett den tilbake til «Essential» i Script Manager.

Behold produktbildene på BigCommerce-CDN-en

Footnote finner et merket bilde ut fra CDN-adressen hos BigCommerce, som inneholder produkt- og bildenumrene, for eksempel cdn11.bigcommerce.com/s-abc123/images/stencil/384w/products/157/551/. Standard Catalyst viser produktbilder rett fra den adressen, så dette virker uten endringer. Bilder som går gjennom bildeoptimaliseringen i Next.js (/_next/image?url=...), virker også, fordi Footnote leser den opprinnelige adressen inni dem.

Merkinger forsvinner når en bildeadresse ikke lenger inneholder BigCommerce-stien. Det skjer med en egen bildelaster som skriver om adressen, en bildeproxy eller en annen bildetjeneste foran CDN-en, eller med bilder plassert med Makeswift.

Tillat Footnote i en egen Content Security Policy

Standard Catalyst begrenser ikke hvor skript lastes fra. Hvis utvikleren har lagt til regler for script-src eller connect-src, må du tillate https://footnote.pouchapps.com i begge. Skriptet for merkingene lastes derfra og henter innstillingene for merkingene dine derfra.

Regn med opptil en time før endringer vises

Catalyst mellomlagrer listen over skript fra Script Manager i opptil en time. Etter at du har installert Footnote, eller endret noe ved merkingene, kan det ta så lang tid før butikkfronten henger med. På Stencil vises de samme endringene innen omtrent ett minutt.

En utvikler kan få endringer til å vises raskere på to måter:

Publiser butikkfronten på nytt. En ny publisering henter skriptlisten på nytt. Dette er den enkleste løsningen etter at Footnote er installert.
Senk DEFAULT_REVALIDATE_TARGET. Innstillingen er i sekunder og er 3600 som standard. Den styrer hvor lenge Catalyst mellomlagrer de fleste BigCommerce-dataene sine, ikke bare skript, så et lavere tall gir flere forespørsler til BigCommerce. Senk den for testing, og la den ikke stå lavt.

Sjekk at merkingene vises

Åpne Innstillinger i Footnote, og sjekk at Catalyst-butikkfronten din står oppført som dekket. Essentials dekker bare standard-butikkfronten din. Pro dekker alle butikkfronter.
Marker ett bilde som AI-generert, og slå på «Vis merkinger» i Innstillinger.
Vent i opptil en time, eller be utvikleren publisere på nytt.
Åpne produktsiden i et privat nettleservindu. Hvis et samtykkebanner dukker opp, avslå. Merkingen skal sitte i hjørnet du valgte i fanen Merke. På Catalyst dukker den opp et øyeblikk etter siden, når siden er ferdig med å laste skriptene sine.

For å sjekke fra nettleseren åpner du utviklerkonsollen på en hvilken som helst side i butikkfronten og kjører document.documentElement.dataset.footnote. Hvis den returnerer "1", kjører skriptet til Footnote der.

Rett opp en manglende merking

Hvis konsollsjekken ikke returnerer "1", kjører ikke butikkfronten skriptet til Footnote. Sjekk disse i rekkefølge:

Vent til timen er gått, eller publiser på nytt.
Innstillinger viser butikkfronten som dekket.
Catalyst core er versjon 1.4 eller nyere.
<ConsentManager> står fortsatt i core/app/[locale]/layout.tsx.
Skriptet er satt til «Essential» i Script Manager.
En eventuell egen Content Security Policy tillater https://footnote.pouchapps.com.

Hvis den returnerer "1", men bildet ikke har noen merking, kjører skriptet, men det har ikke funnet bildet:

Sjekk at bildet er markert som AI-generert eller AI-redigert i Footnote.
Høyreklikk på bildet, kopier adressen, og sjekk at den inneholder /products/ etterfulgt av to tall. Hvis ikke, kommer ikke bildet fra BigCommerce-CDN-en i en form Footnote kan kjenne igjen.
I fanen Merke sjekker du at Kategorier og søkeresultater er slått på. Catalyst-sider har ingen markør som forteller Footnote at en side er en produktside, så den bryteren dekker også produktsider i Catalyst.

Står du fortsatt fast, send e-post til footnote@pouchapps.com med adressen til butikkfronten, en produktside som skal vise en merking, Catalyst-versjonen din og resultatet av konsollsjekken. Brukerstøttesiden viser hvorfor en merking kan forsvinne i en hvilken som helst butikkfront.