Självstudiekurs om klassificeringstillägg

Navigera till Cursor > Settings > Cursor Settings > Tools & MCP och kontrollera att commerce-extensibility-verktygsuppsättningen är aktiverad utan fel. Om du ser fel kan du slå av och på verktygslådan.

{width="600" modal="regular"}

Inaktivera all dokumentation i markörens sammanhang:

• Navigera till Cursor > Settings > Cursor Settings > Indexing & Docs och ta bort all dokumentation som visas.

{width="600" modal="regular"}

Generera kod för ett produktklassificeringstillägg:

• Välj Agent-läge i markörchattfönstret.
• Ange följande uppmaning:

Implement an Adobe Commerce as a Cloud Service extension to handle Product Ratings.

Implement a REST API to handle GET ratings requests.

GET requests will have to support the following query parameters:

sku -> product SKU

Svara på agentens frågor så att den kan generera den bästa koden.

{width="600" modal="regular"} {width="600" modal="regular"}

Använd följande exempeltext för att besvara agentens frågor för att ställa in slumpmässiga klassificeringsdata:

Yes, this headless extension is for Adobe Commerce as a Cloud Service storefront,
but we do not need any authentication for the GET API because guest users should be able to use it on the storefront.

This extension is called directly from the storefront, no async invocation, such as events or webhooks, is required.

Start with just the GET API for now, we will implement other CRUD operations at a later time.

We do not need a DB or storage mechanism right now, just return random ratings data between 1 and 5 and a ratings count between 1 and 1000.

The API should only return the average rating for the product and the total number of ratings.
We do not need to add tests right now.

Agenten skapar en requirements.md-fil som fungerar som källa för sanningen för implementeringen.

{width="600" modal="regular"}

Granska filen requirements.md och verifiera planen.

Om allt ser korrekt ut instruerar du agenten att gå till Fas 2 - Arkitekturplanering.

Se arkitekturplanen.

Instruera agenten att fortsätta med kodgenerering.

Agenten genererar den nödvändiga koden och ger en detaljerad sammanfattning med nästa steg.

{width="600" modal="regular"} {width="600" modal="regular"} {width="600" modal="regular"}

Be agenten att hjälpa dig att testa koden lokalt.

Test the ratings API locally on a dev server using cURL.

Följ agentens instruktioner och bekräfta att API:t fungerar lokalt.

{width="600" modal="regular"} {width="600" modal="regular"}

När du har verifierat den genererade koden distribuerar du tillägget med följande uppmaning:

Deploy the ratings API.

Agenten utför en bedömning av beredskapen inför driftsättningen innan den distribueras.

{width="600" modal="regular"}

När du är säker på utvärderingsresultaten instruerar du agenten att fortsätta med distributionen.

Agenten använder MCP-verktygen för att verifiera, bygga och driftsätta automatiskt.

{width="600" modal="regular"}

Navigera till mappen storefront:

cd storefront

Öppna mappen storefront i ett nytt markörfönster.

Om du har Cursor CLI installerat kan du öppna fönstret med följande kommando i terminalen:

cursor .

Starta den lokala utvecklingsservern:

npm run start

Navigera till en produktsida i en webbläsare:

http://localhost:3000/products/llama-plush-shortie/adb336

Observera informationssidan (PDP) för framsidan av standardbutiksprodukter och notera att det inte finns några visuella produktbetyg.

Använd följande uppmaning till din agent:

Integrate the ratings API into the PDP to show star ratings and a review count for products. Here's the service contract: @RATINGS_API_CONTRACT.md

Agenten utvärderar uppgiftens komplexitet och anropar ett fasat arbetsflöde. Under fas 1 (kravinsamling) skapar agenten ett kravdokument och frågar om klargörande frågor som:

• Var på PDP ska omdömen visas?
• Bör detta vara ett nytt fristående block eller en platsanpassning inuti den befintliga PDP-instickskomponenten?
• Vad är reservvärdet om API:t inte är tillgängligt eller inte returnerar några data?
• Ska graderingar även visas på PLP (produktlista) eller endast PDP?
• Finns det några designspecifikationer eller dummies?

Svara på de här frågorna baserat på dina projektbehov. Agenten uppdaterar kravdokumentet och markerar fasen som slutförd.

Under fas 2 (arkitekturplanering) undersöker agenten dokumentation och din kodbas innan han föreslår en arkitektur. Förvänta dig att agenten ska:

• Sök i Commerce-dokumentationen efter PDP-insticksbehållare, fack och händelsenyttolaster.
• Sök igenom katalogen blocks och mappen scripts/initializers/ efter befintlig PDP-relaterad kod.
• Utforska TypeScript-definitioner för tillgängliga behållare och platskontextformer.

Agenten presenterar sedan arkitekturalternativ som:

• Alternativ A: Anpassa en befintlig PDP-insticksplats för att mata in klassificeringar nära produkttiteln - en lättare touch som är uppgraderingsvänlig.
• Alternativ B: Skapa ett nytt fristående product-ratings -block som hämtar från API:t oberoende av varandra - flexiblare och frikopplat.
• Alternativ C: Skapa ett nytt block som även lyssnar på PDP-släppningshändelser för produktens SKU - en hybridmetod.

Planen innehåller även information om API-integrering, prestandaöverväganden (lazy loading, caching), säkerhet (indatasanitifiering) och en testmetod.

Granska arkitekturplanen och instruera agenten att fortsätta.

Under fas 3 (implementeringsmetod) ber agenten dig välja mellan:

• Alternativ A: Granska en detaljerad implementeringsplan före kodgenerering (se alla filer, mönster och kodstrukturen först).
• Alternativ B: Fortsätt direkt till kodgenerering.

Välj önskat tillvägagångssätt.

Under fas 4 (implementering) genererar agenten kod baserat på den valda arkitekturen. Beroende på hur man arbetar använder agenten flera specialkunskaper:

• Innehållsmodellering: Om ett nytt block behövs utformar agenten en designvänlig innehållsstruktur, till exempel en konfigurationstabell med API-slutpunkts-URL:en.
• Blockutveckling: Agenten skapar blockfiler enligt Edge Delivery Services konventioner, inklusive JavaScript-dekorationsfunktioner, CSS-format med omfång, ARIA-etiketter för tillgänglighet samt inläsning och felhantering.
• Anpassning av insticksprogram: Om arkitekturen använder anpassning av kortplats importerar agenten rätt behållare, använder en verifierad kortplats nära produkttiteln och prenumererar på produktdatahändelser för aktuell SKU.

Se koden som genereras och ställ frågor eller omdirigera agenten efter behov. Agenten skapar en sammanfattning av produktionsberedskapen när kodgenereringen är klar.

Under fas 4.5 (testning) erbjuder agenten att testa implementeringen. Om du godkänner det:

• Skapar en lokal testsida med rätt skript och format.
• Startar en utvecklingsserver.
• Kör webbläsarbaserad verifiering för visuell återgivning, interaktivitet, responsivt beteende, tillgänglighet och prestanda.
• Skapar en strukturerad testrapport med resultaten.

Följ med i webbläsaren för att bekräfta beteendet och rapportera eventuella problem.

Observera ändringarna i kodbasen och se efter om produktsidan innehåller uppdateringar.

Du bör se följande ändringar i utvecklingsmiljön och webbläsaren:

• En produktklassificeringskomponent skapas automatiskt.
• Komponenten är integrerad i PDP med in-platser eller som ett fristående block, beroende på vald arkitektur.
• Stjärnor visas med rätt fyllningsproportioner baserat på klassificeringsvärden från ditt API.

{width="600" modal="regular"}

Innan du startar: Spara följande modellbild och klistra in den i chatten med din storefront-agent.

{width="600" modal="regular"}

Följ de här stegen för att skapa klassificeringsdistributionen modal med hjälp av referensbilden som vägledning:

• Uppdatera API:t för att returnera ytterligare data som representerar klassificeringsdistributionen.
• Uppdatera API-kontraktet.
• Uppdatera kontraktet i butikskodbasen.
• Be storefront-agenten att använda referensbilden och det uppdaterade API-kontraktet för att lägga till klassificeringsdistributionen på PDP-sidan.

Observera följande ändringar i kodbasen och se efter om produktsidan innehåller uppdateringar:

• Hur agenten tolkar den visuella dummyn
• Om lämplig HTML-struktur används för tillgänglighet
• Så här hanterar det lägena för placering och interaktion