DokumentationHandelAdobe Commerce Optimizer Användarhandbok

[Endast SaaS]{class="badge positive" title="Gäller endast Adobe Commerce as a Cloud Service- och Adobe Commerce Optimizer projekt (SaaS-infrastruktur som hanteras av Adobe)."}

Konfigurera din butik

Last update: Mon Oct 13 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Utvecklare

I den här guiden får du hjälp med att konfigurera en butiksadress för din Adobe Commerce Optimizer-instans med Adobe Edge Delivery Services. Din butik innehåller standardkod, exempelinnehåll och stöd för produktinformationssidor och produktidentifiering (sökning och filtrering).

Beräknad tid för slutförande: 30-45 minuter

Förutsättningar

  • GitHub-konto som kan skapa databaser och är konfigurerat för lokal utveckling (github.com)
  • Adobe Commerce Optimizerinstans med exempeldata och konfigurerade katalogvyer och principer

Nödvändiga instansdata

Innan du börjar samlar du in följande information från din Adobe Commerce Optimizer-instans:

  • Klient-ID (kallas även instans-ID)
  • GraphQL-slutpunkt för din instans
  • Katalogvy-ID för den globala katalogvyn
  • Source-språk för katalogvyn
    • Standardvärdet för exempeldata är en_US
NOTE
Kunder som har tillgång till testversionen hittar GraphQL-slutpunkten i det välkomstmeddelande som togs emot när din instans skapades. Testinstanser är förkonfigurerade med exempeldata, katalogvyer och principer.

Konfigurera steg

  1. Skapa ditt storefront-projekt-Använd verktyget Site Creator för att skapa ett nytt storefront-projekt med mallkod, exempelinnehåll och en konfigurationsfil.

  2. Anpassa butikskonfigurationen-Uppdatera config.json-filen i databasen för att ansluta till Adobe Commerce Optimizer-instansen.

  3. Verifiera installationen (10 minuter)

    • Förhandsgranska webbplatsen för butiken
    • Testa produktinformationssidor och sökfunktioner

Skapa ett butiksprojekt

Med verktyget Site Creator kan du skapa ett helt butiksprojekt med följande komponenter:

  • Plats: Startsida för butiken med standardinnehåll
  • Kod: Databas med mallkällfiler
  • Innehåll: Dokumentförfattarmiljö med webbplatsinnehållsfiler
  • Commerce Config: config.json-fil för instansspecifik konfiguration

Steg 1: Generera ditt projekt

  1. Öppna verktyget Webbplatsskapare

    Site Creator tool {width="700" modal="regular"}

  2. Välj Skapa ny plats (kod och innehåll).

  3. Slutför platskonfigurationen:

    • GitHub-organisation/användarnamn: Ange ditt GitHub-användarnamn eller -organisationsnamn
    • Platsnamn: Välj ett beskrivande namn för butiken
    • Commerce GraphQL Endpoint (valfritt): Ange GraphQL-slutpunkten för din Adobe Commerce Optimizer-instans

  4. Klicka på Skapa plats om du vill skapa GitHub-databasen med standardkoden för lagerfront.

    När databasen har skapats uppdateras Site Creator och du uppmanas att installera appen Code Sync.

Steg 2: Installera appen Code Sync

  1. Klicka på Install AEM Code Sync App för att öppna installationsprogrammet för kodsynkronisering på en ny flik.

  2. Konfigurera appen Kodsynkronisering:

    • Välj din GitHub-organisation och klicka sedan på Configure.
    • Klicka på Only select repositories i kodsynkroniseringsgränssnittet.
    • Klicka på menyn Select repositories och välj sedan lagringskoddatabasen som du skapade.
    • Klicka på Save för att registrera databasen.

  3. Gå tillbaka till webbläsarfönstret där Site Creator är öppet och klicka på Create Site.

    Webbplatsskaparen kopierar det främre mallinnehållet till dokumentförfattarmiljön. Den här processen tar 1-2 minuter.

Steg 3: Spara projektlänkar

  1. Granska länkarna till ditt butiksprojekt i delen Platsinformation:

    Storefront setup complete {width="700" modal="regular"}

    Använd de här länkarna för att hantera kod, innehåll och konfiguration för butiken.

  2. Kopiera och spara länkarna för framtida referens: Klicka på **Copy.

Konfigurera din butik

Uppdatera din butikskonfiguration för att ansluta till din Adobe Commerce Optimizer-instans.

  1. Öppna konfigurationshanteraren med länken som du sparade tidigare:

    https://da.live/sheet#/<username or org>/<repo name>/config.json

  2. Leta reda på avsnittet cs (katalogtjänst) i konfigurationen.

  3. Ersätt platshållarvärdena med värdena för instansen. Se Krav.

    code language-json 
    "cs": {
   "AC-View-ID": "{catalogViewId}",
   "AC-Environment-ID": "{tenantId}",
   "AC-Source-Locale": "en_US"
}

  4. Spara konfigurationsfilen.

NOTE
Det kan ta några minuter att sprida konfigurationsändringarna. Om du inte ser data direkt, vänta 2-3 minuter innan du felsöker.

Verifiera installationen

Testa din butik för att kontrollera att den är korrekt ansluten till din Adobe Commerce Optimizer-instans.

Steg 1: Visa din startsida för butiken

  1. Navigera till webbadressen för direktförhandsvisning:

    https://main--{SITE}--{ORG}.aem.live

    Ersätt {ORG} och {SITE} med din GitHub-organisation och ditt webbplatsnamn.

  2. Villkor för lyckade: Du bör se butikens startsida med mallinnehåll.

    ACO storefront site with boilerplate {width="700" modal="regular"}

Steg 2: Testa produktinformationssidor

Visa standardinformationssidan för att kontrollera att produktdata läses in korrekt.

  1. Navigera till en exempelproduktsida:
    https://main--{SITE}--{ORG}.aem.live/products/placeholder/{sku}

    Använd valfri SKU från exempeldata, till exempel:
    https://main--{SITE}--{ORG}.aem.live/products/placeholder/aur-flu-tir-std-2017

    För standardbutiken kan du använda värdet placeholder i vägen för att visa produkten. När du börjar anpassa din butik kan du anpassa storefront-koden för att ange sökvägen till produktinformationssidan baserat på de produktvägar som definierats i din katalog.

    note tip
    TIP
    Visa tillgängliga SKU:er från sidan Datasynkronisering i din Adobe Commerce Optimizer-instans.

  2. Slutförandevillkor: Sidan ska visas:

    • Produktnamn, beskrivning och prissättning
    • Produktbilder
    • Lägg till i kundvagnen
    • Data har hämtats från din Adobe Commerce Optimizer-instans

    Default product detail page showing a product from the sample data {width="700" modal="regular"}

Steg 3: Testa standardsökfunktionen

Testa standardfunktionerna, inklusive sökning och filtrering.

  1. På butikens startsida klickar du på förstoringsglaset i sidhuvudet.

  2. Skriv söksträngen tires och tryck på Retur.

  3. Slutförandevillkor: Du bör se:

    • Sökresultatsida med däckprodukter
    • Filtreringsalternativ i sidofältet
    • Produktlistor med bilder och priser

    View search results page {width="675" modal="regular"}

  4. Klicka på en däckprodukt för att visa detaljsidan.

    View product details page {width="675" modal="regular"}

Felsökning

Om du stöter på problem under installationen kan du söka efter fel med hjälp av webbsidans konsol. Försök även rensa webbläsarens cache eller använda en annan webbläsare.

Använd följande vägledning för att kontrollera vanliga problem:

Vanliga problem

Problem
Symtom
Lösning
Installationen av kodsynkronisering misslyckas
Det gick inte att slutföra kodsynkroniseringsinstallationen
  • Se till att du har administratörsåtkomst till din GitHub-organisation.
  • Försök använda en personlig databas istället för en organisation.
  • Kontrollera GitHub-behörigheter och försök igen.
Webbplatsen läses inte in
404 eller anslutningsfel
  • Verifiera URL-formatet för din plats: https://main--{SITE}--{ORG}.aem.live
  • Kontrollera att appen Code Sync är korrekt installerad.
  • Se till att databasen är offentlig eller korrekt konfigurerad.
Inga produktdata visas
På produktsidor visas platshållare eller fel
  • Verifiera dina konfigurationsvärden i config.json
  • Kontrollera sidan Datasynkronisering i instansen Adobe Commerce Optimizer för att bekräfta att exempelprodukterna har lästs in. Om inga produkter är tillgängliga läser du in exempeldata igen eller lägger till en produkt med API:t för datainmatning. Vänta några minuter tills konfigurationsändringarna har spridits.
  • Försök att hämta produktinformationen med hjälp av Merchandising Service-frågan products med samma huvuden som konfigurerats i filen config.json. Om du kan hämta data är det troligen ett problem med katalogvykonfigurationen eller ett indexfel.
Sökningen returnerar inga resultat
Tom sökresultatsida
  • Kontrollera att du kan hämta produktsökresultaten med Merchandising Services productSearch-frågan med samma huvuden som konfigurerats i filen config.json. Om du kan hämta data är det troligen ett problem med katalogvykonfigurationen eller ett indexfel.
  • Bekräfta att katalogvyns ID i filen config.json matchar katalogvyns ID i Adobe Commerce Optimizer.
  • Kontrollera konfigurationen av de principer, språk och prisböcker som du använde i rubrikkonfigurationen för storefront i Adobe Commerce Optimizer.
  • Kontrollera att inställningarna för attributmetadata har angetts korrekt för sökning.

Checklista för validering

Innan du fortsätter till nästa steg kontrollerar du att din storefront fungerar som den ska genom att verifiera följande:

Checklista Konfigurationsvärden matchar instansinställningarna

Checklista Startsidan för Storefront läses in utan fel

Checklista Minst en produktinformationssida visar fullständig information

Checklista Sökfunktionen returnerar relevanta resultat

Checklista Produktbilder läses in korrekt

Checklista Konfigurationsvärden matchar instansinställningarna

Få hjälp

Om problemen kvarstår:

Nästa steg

När du har konfigurerat och verifierat din butik kan du:

  1. Installera Sidekick - webbläsartillägg för redigering, förhandsgranskning och publicering av innehåll direkt från webbplatsen

  2. Konfigurera en lokal utvecklingsmiljö - Skapa en lokal miljö för att anpassa din butikskod och ditt innehåll

Utforska och lär dig mer

Related Articles
Läs dokumentationen för Adobe Commerce Storefront om du vill veta mer om hur du uppdaterar webbplatsinnehåll och integrerar med komponenterna i Commerce Front och backend-data.
recommendation-more-help
0ad5182d-636b-481c-8a84-a8b57bf89887