Zelfstudie over het verlengen van beoordelingen

Navigeer naar Cursor > Settings > Cursor Settings > Tools & MCP en controleer of de gereedschapset commerce-extensibility zonder fouten is ingeschakeld. Als er fouten optreden, schakelt u de gereedschapset in en uit.

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

Documentatie uitschakelen in Cursor-context:

• Navigeer naar Cursor > Settings > Cursor Settings > Indexing & Docs en verwijder de vermelde documentatie.

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

Code genereren voor een extensie voor productbeoordelingen:

• Selecteer de modus Agent in het chatvenster Cursor.
• Voer de volgende vraag in:

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

Beantwoord de vragen van de agent precies om het te helpen de beste code produceren.

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

Gebruik de volgende voorbeeldtekst om de vragen van de agent aan opstellings willekeurig gevormde classificatiegegevens te beantwoorden:

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.

De agent maakt een requirements.md -bestand dat als bron van waarheid voor de implementatie fungeert.

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

Controleer het requirements.md -bestand en verifieer het plan.

Als alles correct kijkt, instrueer de agent om zich aan Fase 2 te bewegen - de Planning van de Architectuur.

Controleer het architectuurplan.

Geef de agent de opdracht om door te gaan met het genereren van code.

De agent produceert de noodzakelijke code en verstrekt een gedetailleerde samenvatting met uw volgende stappen.

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

Vraag de agent om u te helpen de code plaatselijk testen.

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

Volg de instructies van de agent en bevestig dat de API lokaal werkt.

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

Na het verifiëren van de geproduceerde code, stel de uitbreiding op gebruikend de volgende herinnering:

Deploy the ratings API.

De agent voert een pre-plaatsingsklaar beoordeling uit alvorens op te stellen.

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

Wanneer u met de beoordelingsresultaten vertrouwd bent, instrueer de agent om met plaatsing te werk te gaan.

De agent gebruikt toolkit MCP om, automatisch te verifiëren en op te stellen.

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

Navigeer naar de map storefront :

cd storefront

Open de opslagmap in een nieuw cursorvenster.

Alternatief, als u de ​ geïnstalleerde Curseur CLI ​ hebt, open het venster door het volgende bevel in uw terminal te gebruiken:

cursor .

Start de lokale ontwikkelingsserver:

npm run start

Navigeer in een browser naar een productpagina:

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

Bekijk de pagina met productdetails van de boilerplate storefront (PDP) en noteer het gebrek aan visuele productclassificaties.

Gebruik de volgende herinnering met uw 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

De agent beoordeelt de taakingewikkeldheid en roept een gefaseerde werkschema aan. Tijdens Fase 1 (Vereisten het Verzamelen), leidt de agent tot een document van vereisten en vraagt het verduidelijken van vragen zoals:

• Waar op de PDP moeten classificaties worden weergegeven?
• Moet dit een nieuw standalone blok, of een groefaanpassing binnen de bestaande PDP drop-in component zijn?
• Wat zou de reserve moeten zijn als API niet beschikbaar is of geen gegevens terugkeert?
• Moeten classificaties ook worden weergegeven op de PLP (productaanbieding) of alleen op de PDP?
• Zijn er ontwerpspecificaties of -modellen?

Beantwoord deze vragen op basis van uw projectvereisten. De agent werkt het vereiste document bij en merkt de fase als volledig.

Tijdens Fase 2 (de Planning van de Architectuur), onderzoekt de agent documentatie en uw codebase alvorens een architectuur voor te stellen. Verwacht dat de agent:

• Zoek in Commerce documentatie naar PDP drop-in containers, groeven, en gebeurtenislading.
• Scan de map blocks en de map scripts/initializers/ naar bestaande PDP-gerelateerde code.
• Verken de definities van TypeScript voor beschikbare containers en groefcontextvormen.

De agent stelt dan architectuuropties zoals voor:

• Optie A: pas een bestaande drop-in PDP groef aan injecterende classificaties dichtbij de producttitel - een lichtere aanraking aan die verbetering-vriendelijk is.
• Optie B: creeer een nieuw standalone product-ratings blok dat van API onafhankelijk ophaalt - flexibeler en losgekoppeld.
• Optie C: creeer een nieuw blok dat ook aan drop-in PDP gebeurtenissen voor productSKU luistert - een hybride benadering.

Het plan omvat ook details over API integratie, prestatiesoverwegingen (luie lading, caching), veiligheid (inputontsmetting), en een het testen benadering.

Herzie het architectuurplan en geef de agent op te werk te gaan.

Tijdens Fase 3 (de Benadering van de Implementatie), vraagt de agent u om tussen te kiezen:

• Optie A: herzie een gedetailleerd implementatieplan vóór codegeneratie (zie alle dossiers, patronen, en codestructuur eerst).
• Optie B: ga direct aan codegeneratie te werk.

Selecteer uw voorkeursaanpak.

Tijdens Fase 4 (Implementatie), produceert de agent code die op de gekozen architectuur wordt gebaseerd. Afhankelijk van de benadering, gebruikt de agent verscheidene gespecialiseerde vaardigheden:

• Inhoud modelleren: als een nieuw blok nodig is, ontwerpt de agent een auteursvriendelijke inhoudsstructuur, zoals een configuratielijst met het API eindpunt URL.
• de ontwikkeling van het Blok: de agent leidt tot blokdossiers na Edge Delivery Services overeenkomsten, met inbegrip van de versiefuncties van JavaScript, scoped CSS stijlen, de etiketten van ARIA voor toegankelijkheid, en lading en fout staat behandeling.
• drop-in aanpassing: als de architectuur groefaanpassing gebruikt, voert de agent de correcte container in, gebruikt een geverifieerde groef dichtbij de producttitel, en abonneert aan de gebeurtenissen van productgegevens voor huidige SKU.

Bekijk de code die wordt gegenereerd en stel vragen of richt de agent zo nodig om. De agent produceert een samenvatting van de productiereedheid wanneer de codegeneratie voltooit.

Tijdens Fase 4.5 (het Testen), biedt de agent aan om de implementatie te testen. Als u goedkeurt, de agent:

• Hiermee maakt u een lokale testpagina met de juiste scripts en stijlen.
• Start een ontwikkelingsserver.
• Voert op browser-gebaseerde verificatie voor visuele teruggeven, interactiviteit, ontvankelijk gedrag, toegankelijkheid, en prestaties in werking.
• Genereert een gestructureerd testrapport met de resultaten.

Volg de procedure in de browser om het gedrag te bevestigen en eventuele problemen te melden.

Bekijk de wijzigingen in de codebase en bekijk de productpagina voor updates.

U zou de volgende veranderingen in uw ontwikkelomgeving en browser moeten zien:

• Er wordt automatisch een productrating-component gemaakt.
• De component is geïntegreerd in PDP gebruikend ​ drop-in groeven ​ of als standalone blok, afhankelijk van de gekozen architectuur.
• De sterren worden weergegeven met de juiste vulverhoudingen op basis van de classificatiewaarden van de API.

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

alvorens te beginnen: sparen het volgende modelbeeld en kleef het in het praatje met uw storefront agent.

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

Ga als volgt te werk om de distributie van classificaties te maken met de referentieafbeelding als richtlijn:

• Werk API bij om extra gegevens terug te keren die de classificatiedistributie vertegenwoordigen.
• Werk het API-contract bij.
• Werk het contract bij in de storefront-codebase.
• Vraag de storefront agent om het verwijzingsbeeld en bijgewerkte API contract te gebruiken om de classificatiedistributie aan de PDP pagina toe te voegen.

Bekijk de volgende wijzigingen in de codebase en bekijk de productpagina voor updates:

• Hoe de agent het visuele model interpreteert
• Of de juiste HTML-structuur voor toegankelijkheid wordt gebruikt
• Hoe de positionering en interactiestatus worden verwerkt