Winefront instellen

creeer uw storefront project - gebruik het ​ hulpmiddel van de Maker van de Plaats ​ om een nieuw storefront project met boilerplate code, steekproefinhoud, en een configuratiedossier tot stand te brengen.

pas de storefrontconfiguratie aan - werk het config.json dossier in uw bewaarplaats bij om met uw Adobe Commerce Optimizer instantie te verbinden.

verifieer uw opstelling (10 min)

• Een voorvertoning van uw winkelsite weergeven
• Productdetailpagina's en zoekfunctionaliteit testen

Open het ​ hulpmiddel van de Maker van de Plaats ​

{width="700" modal="regular"}

Selecteer creeer Nieuwe Plaats (Code & Inhoud).

Voltooi de siteconfiguratie:

• GitHub Organisatie/Gebruikersnaam: Ga uw GitHub gebruikersbenaming of organisatienaam in
• Naam van de Plaats: Kies een beschrijvende naam voor uw storefront
• Commerce GraphQL Endpoint (facultatief): ga het eindpunt van GraphQL voor uw Adobe Commerce Optimizer instantie in

Klik creeer Plaats om de bewaarplaats GitHub met de storefront boilerplate code tot stand te brengen.

Wanneer de gegevensopslagruimte is gemaakt, wordt de Site Creator bijgewerkt en wordt u gevraagd de app Codesync te installeren.

Klik op Install AEM Code Sync App om het installatieprogramma voor codesynchronisatie te openen op een nieuw tabblad.

Configureer de app Codesync:

• Selecteer uw organisatie GitHub, dan klik Configure.
• Klik in de interface Codesynchronisatie op Only select repositories .
• Klik op het menu Select repositories en kies vervolgens de opslagplaats voor de storefront-code die u hebt gemaakt.
• Klik op Save om uw opslagplaats te registreren.

Terugkeer aan het browser venster waar de Maker van de Plaats open is, en klik creeer Plaats.

De maker van de site kopieert de inhoud van het storefront boilerplate naar de omgeving van de auteur van het document. Dit proces duurt 1 tot 2 minuten.

In de sectie van de Details van de Plaats, herzie de verbindingen voor uw archiefproject:

{width="700" modal="regular"}

Gebruik deze koppelingen om uw winkelcode, inhoud en configuratie te beheren.

Kopieer en sla deze verbindingen voor toekomstige verwijzing op: Klik ** Copy.

Open configuratiebeheer met behulp van de koppeling die u eerder hebt opgeslagen:

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

Zoek de sectie cs (Catalog Service) in de configuratie.

Vervang de waarden van de plaatsaanduiding door de waarden voor de instantie. Zie ​ Eerste vereisten ​.

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

Sla het configuratiebestand op.

Ga naar de URL van uw live voorvertoning:

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

Vervang {ORG} en {SITE} door uw GitHub-organisatie en sitenaam.

criteria van het Succes: U zou de storefront homepage met boilerplate inhoud moeten zien.

{width="700" modal="regular"}

Ga naar een voorbeeldproductpagina:
https://main--{SITE}--{ORG}.aem.live/products/placeholder/{sku}

Gebruik om het even welke SKU van uw steekproefgegevens, bijvoorbeeld:
https://main--{SITE}--{ORG}.aem.live/products/placeholder/aur-flu-tir-std-2017

Voor de standaardwinkel kunt u de placeholder -waarde in de route gebruiken om het product weer te geven. Wanneer u begint met het aanpassen van uw winkel, kunt u de storefront code aanpassen om de weg aan de pagina van het productdetail te plaatsen die op productroutes wordt gebaseerd die in uw catalogus worden bepaald.

criteria van het Succes: De pagina zou moeten tonen:

• Productnaam, beschrijving en prijs
• Productafbeeldingen
• Toevoegen aan tekengebied
• Gegevens opgehaald uit uw Adobe Commerce Optimizer -instantie

{width="700" modal="regular"}

Klik op de startpagina van de winkel op het vergrootglaspictogram in de koptekst.

Typ het onderzoekskoord tires en druk binnengaan.

criteria van het Succes: U zou moeten zien:

• Pagina met zoekresultaten met bandenproducten
• Filteropties in de zijbalk
• Productaanbiedingen met afbeeldingen en prijzen

{width="675" modal="regular"}

Klik op een bandenproduct om de detailpagina weer te geven.

{width="675" modal="regular"}

installeer Sidekick ​ - Browser uitbreiding voor het uitgeven, het previewing, en het publiceren inhoud direct van uw website

opstelling een lokale ontwikkelomgeving ​ - creeer een lokaal milieu om uw storefront code en inhoud aan te passen