Winefront instellen

Installeer Node Version Manager (NVM).

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

Installeer Node.js en NPM. Voor meer informatie, zie Node.js.

nvm install 22

npm install -g npm

Controleer de installatie.

npm -v

Login aan uw rekening GitHub.

Navigeer aan de aem-boilerplate-handelbewaarplaats GitHub.

Selecteer Gebruik dit malplaatje, en selecteer dan creeer een nieuwe bewaarplaats van het drop-down menu.

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

De configuratiepagina van de repository wordt weergegeven.

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

Vul het configuratieformulier met de volgende gegevens in:

• malplaatje van de Bewaarplaats - hlxsites/aem-boilerplate-commerce (gebrek).
• Eigenaar - Uw organisatie of (vereiste) rekening.
• Naam van de Bewaarplaats - een unieke naam voor uw nieuwe (vereiste) repo.
• Beschrijving - een korte beschrijving van uw (facultatieve) reactie.
• Openbaar of Privé - Adobe adviseert openbaar (gebrek).

Selecteer creeer bewaarplaats.

Na enkele minuten wordt de nieuwe opslagplaats geopend.

Negeer om het even welke berichten van het trekkingsverzoek die in het GitHub gebruikersinterface worden getoond.

Kloont de opslagplaats naar uw lokale computer.

git clone https://github.com/{ORG}/{SITE}.git

Als u fouten wanneer het klonen van de bewaarplaats ontmoet, zie het klonen foutenin de documentatie van GitHub problemen oplossen.

Open de repository in uw terminal of IDE.

Maak uw configuratiebestand door het bestand default-fstab.yaml naar fstab.yaml te kopiëren.

cp default-fstab.yaml fstab.yaml

Werk het montagepunt in het storefront configuratiedossier bij om aan uw inhoud URL te richten.

1. Open het { configuratiedossier 0} fstab.yaml.

   code language-yaml
   mountpoints: /: url: https://content.da.live/{org}/{site}/ type: markup folders: /products/: /products/default

2. Vervang de tekenreeksen {ORG} en {SITE} door de waarden voor de gegevensopslagplaats GitHub die u voor uw boilerplate code creeerde.

   De bijgewerkte code moet er bijvoorbeeld zo uitzien.

   code language-yaml
   mountpoints: /: url: https://content.da.live/owner-name/aco-storefront/ type: markup

3. Sla het bestand op.

Maak een nieuwe map tools/sidekick .

mkdir tools/sidekick

Kopieer het demo-sidekick.json -bestand in de hoofdmap naar de tools/sidekick -map en wijzig de naam in config.json .

cp demo-sidekick.json tools/sidekick/config.json

Pas de Sidekick-configuratie voor uw site aan.

Bewerk het tools/sidekick/ -bestand vanuit de map config.json .

{
  "project": "My Project",
  "editUrlLabel": "Document Authoring",
  "editUrlPattern": "https://da.live/edit#/{{org}}/{{site}}{{pathname}}"
}

Werk de url zeer belangrijke waarden met de waarden voor uw bewaarplaats GitHub bij.

• Vervang de {{ORG}} -tekenreeks door de organisatie of gebruikersnaam voor de gegevensopslagruimte.

• Vervang de {{SITE}} -tekenreeks door de naam van de gegevensopslagruimte.

• De variabele pathname wordt gevuld door het systeem.

{
  "project": "My Project",
  "editUrlLabel": "Document Authoring",
  "editUrlPattern": "https://da.live/edit#/aco-storefront/early-adopter{{pathname}}"
}

Sla het bestand op.

Leg de bestanden die u hebt bijgewerkt vast en sla deze op in uw editor of IDE.

git add .

Controleer of u de twee bijgewerkte bestanden vastlegt.

git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
 (use "git restore --staged <file>..." to unstage)
     new file:   fstab1.yaml
     modified:   tools/sidekick/config.json

Leg de wijzigingen vast.

git commit -m "Update storefront boilerplate for Adobe Commerce Optimizer"

Pas de wijzigingen toe.

git push

Open de app van de Synchronisatie van de Code van AEMconfiguratiepagina.

Selecteer vormen, dan met de organisatie voor authentiek verklaren of rekening die de bewaarplaats bevat u creeerde.

Van de vorm, kies slechts uitgezochte bewaarplaatsen, en selecteer dan de bewaarplaats u creeerde.

Selecteer installeer om de app van de Synchronisatie van de Code van AEM aan uw bewaarplaats toe te voegen.

Er wordt een bericht weergegeven dat de app is geïnstalleerd.

Open het hulpmiddel van de plaatsschepper

De opslagplaats configureren:

• Selecteer Use Existing Repository .
• Voer Organization/Username in voor uw storefront boilerplate-project.
• Voer de Repository Name in.

De invoer, voorproef, en publiceert de inhoud aan het milieu van de Auteur van het Document door te selecteren leidt plaats.

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

Nadat de site is gemaakt, kunt u de koppelingen in de secties Edit content en View Site gebruiken om de demo-storefront te verkennen.

De belangrijkste koppelingen naar uw inhoud en site volgen de volgende indelingen:

• omslag van de wortelinhoud— https://da.live/#/{ORG}/{SITE}
• voorproef van de Plaats— https://main--{SITE}--{ORG}.aem.page/
• de productie van de Plaats:— https:/main--{SITE}--{ORG}.ae.live/

Open de koppeling naar de hoofdinhoudsmap om de inhoud weer te geven.

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

Geef uw site weer door naar https://main--{SITE}--{ORG}.aem.live te navigeren.

Vervang {ORG} en {SITE} door de organisatie en naam van de opslagplaats voor vaste gegevens.

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

Als de pagina een 404 retourneert, controleert u het volgende:

• het montagepoint in uw fstab.yaml dossier richt aan de correcte inhoud URL: https://content.da.live/{ORG}/{SITE}/
• u hebt de app van de Synchronisatie van de Code gevormd om met uw bewaarplaats te verbinden GitHub.
• u hebt de inhoud aan het milieu van de Auteur van het Document gepubliceerd gebruikend het de kloonhulpmiddel van de demo inhoud.

De voorbeeldcatalogusgegevens weergeven die afkomstig zijn van de standaardinstantie van Commerce Optimizer.

1. Klik in de winkelkoptekst op het vergrootglas dat u wilt zoeken naar tires .

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

2. De pers gaat binnen om de pagina van onderzoeksresultaten te bekijken.

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

   De onderdelen van de pagina met zoekresultaten worden gedefinieerd door het inhoudsdocument van search . De gegevens van de zoekresultaten worden gevuld op basis van de storefront-configuratie in config.json .

3. Bekijk de pagina met productdetails door een bandenproduct op de pagina te selecteren.

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

   De onderdelen van de pagina met productdetails worden gedefinieerd door het default -inhoudsdocument in de map product .

In uw winde, checkout uw belangrijkste tak, en stel het aan laatste terug begaat op de verre tak.

git checkout main
git reset --hard origin/main

Installeer de vereiste afhankelijkheden.

npm install

Start de lokale ontwikkelingsserver.

npm start

De eerste pagina van de tekstbouwsteenwinkel moet zichtbaar zijn in uw browser op http://localhost:3000 .

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

Werk in uw IDE de storefront configuratie bij om met de Adobe Commerce Optimizer instantie te verbinden die Adobe voor u heeft voorzien.

1. Open het config.json -bestand.

2. Werk de volgende waarden bij met behulp van het eindpunt voor de instantie Adobe Commerce Optimizer :

   • commerce-endpoint - Vervang de bestaande waarde door de URL van het eindpunt.

     code language-json
     "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/{tenantId}/graphql"

   • ac-environment-id - Vervang de bestaande waarde met huurderidentiteitskaart van uw eindpunt URL.

     code language-json
     "ac-environment-id": "{tenantId}"

3. Sla het bestand op.

   Als uw lokale voorvertoning correct werkt, worden de updates toegepast op uw lokale winkel.

Controleer de site om de resultaten van de configuratiewijziging te bekijken.

1. Navigeer in de browser naar http://localhost:3000 en vernieuw de pagina.

2. Klik in de winkelkoptekst op het vergrootglas dat u wilt zoeken naar tires .

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

3. Pers gaat binnen om de pagina van de Resultaten van het Onderzoek te tonen.

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

   De zoekopdracht levert geen resultaten op omdat de headerwaarden in het configuratiebestand van de winkel zijn gebaseerd op de standaardinstantie. Nu de configuratie naar de voor u ingerichte Adobe Commerce Optimizer -instantie wijst, zijn deze waarden ongeldig.