Zelfstudie over het verlengen van verzendmethoden

Ga naar ​ pipedream.com ​ en teken omhoog of login.

Klik Nieuw werkschema (of voeg werkschema toe).

Voor de trekker, uitgezochte HTTP / Webhaak.

In de trekkerconfiguratie, plaats de Reactie van HTTP aan keert een douanerespons van uw werkschema terug. Dit staat de stap van de Code toe om de mockJSON reactie te verzenden.

Pipedream toont een uniek eindpunt URL van HTTP, zoals https://123456.m.pipedream.net.

Exemplaar dit URL en gebruik het als Dienst URL wanneer het vormen van de uitbreiding in Commerce Admin.

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

Klik op het pictogram + om een stap toe te voegen.

Kies de code van Node.js van de Looppas (stap van de Code).

vervangt de standaardcode met volgende JavaScript.

export default defineComponent({
async run({ steps, $ }) {
   const event = steps.trigger.event;
   const body = event.body ?? {};
   const headers = event.headers ?? {};
   const apiKey = headers["api-key"] ?? body.api_key ?? "";

   if (!apiKey || String(apiKey).trim() === "") {
      await $.respond({
      immediate: true,
      status: 401,
      headers: { "Content-Type": "application/json" },
      body: { error: "Missing or invalid API-Key header" },
      });
      return;
   }

   const shipment = body.shipment;
   if (!shipment || typeof shipment !== "object") {
      await $.respond({
      immediate: true,
      status: 400,
      headers: { "Content-Type": "application/json" },
      body: { error: "Missing or invalid shipment" },
      });
      return;
   }

   const rates = [
      {
      service_code: "mock_standard",
      service_name: "Mock Standard",
      carrier_friendly_name: "Mock Carrier",
      shipping_amount: { amount: 5.99 },
      shipment_cost: 5.99,
      cost: 5.99,
      },
      {
      service_code: "mock_express",
      service_name: "Mock Express",
      carrier_friendly_name: "Mock Carrier",
      shipping_amount: { amount: 12.99 },
      shipment_cost: 12.99,
      cost: 12.99,
      },
   ];

   await $.respond({
      immediate: true,
      status: 200,
      headers: { "Content-Type": "application/json" },
      body: { rates },
   });
},
});

Klik opstellen.

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

Navigeer aan de montages MCP in uw coderende agent. Ga bijvoorbeeld in Cursor naar Cursor > Settings > Cursor Settings > Tools & MCP . Controleer of de gereedschapsset commerce-extensibility zonder fouten is ingeschakeld. Als er fouten optreden, schakelt u de gereedschapset in en uit.

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

Als u documentatie hebt toegevoegd aan de context van de Cursor, maak het onbruikbaar. Navigeer aan Curseur > Montages > de Montages van de Curseur > Indexeren & Dokken en schrap om het even welke vermelde documentatie.

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

Geef de agent toegang tot de mock rates API specificatie, zodat kan het de cliënt correct uitvoeren. Als u dit nog niet hebt gedaan, download het ​ mock rates API specificatiedossier ​, open het, en voeg het .md dossier aan uw project (bijvoorbeeld docs/mock-rates-api-spec.md) toe, dan verwijzing dat dossier in uw herinnering.

De extensie van de verzendmethode genereren:

• Van het het praatjevenster van de agent, uitgezochte wijze van het Plan, als beschikbaar. Dit verhindert de agent zonder een plan te werk te gaan.
• Voer de volgende vraag in:

Build an Adobe Commerce extension that adds a shipping method at checkout. The rates come from an external mock shipping rates service: the merchant configures the service's URL and API key in Admin, and at checkout the extension asks that service for rates and shows the returned options to the customer.

External service (mock shipping rates API):
- The service endpoint URL is configurable by the merchant (for example https://123456.m.pipedream.net).
- The API is specified in ./docs/mock-rates-api-spec.md.

The merchant must be able to configure the following in the Adobe Commerce Admin UI. Use the Adobe Commerce Admin UI SDK (or equivalent App Builder extensibility options for the Admin) to add a configuration screen where the merchant can set:
- The service URL (where the extension sends rate requests).
- An API key the service expects (any non-empty value for the mock). The API key is sensitive data: it must be stored securely and must never appear in logs, error messages, or in the UI in full (e.g. mask in the UI).
- The warehouse (ship-from) address: name, phone, street, city, state, postal code, country. This is the origin used when requesting rates.

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

Beantwoord de vragen van de agent precies om het te helpen de beste code produceren. Als de agent vraagt welke uitrusting of malplaatje te gebruiken, het aan de ​ kassa van de controleaanzet ​ met het verschepen domein en Admin UI de uitbreiding van SDK zodat zowel de verschepende webhaak als het koopvaardijconfiguratiescherm worden uitgevoerd.

De agent kan een requirements.md (of gelijkwaardig) dossier tot stand brengen dat als bron van waarheid voor de implementatie dient.

Controleer het bestand requirements.md (of equivalent) en controleer het abonnement. Als alles correct kijkt, instrueer de agent om zich aan architectuur planning (of Fase 2) te bewegen. Bevestig dat:

• A verschepen-methodes actie (of gelijkwaardig) behandelt de webhaak van Commerce en roept externe tarief API.
• A verschepen-config (of gelijkwaardig) actie steunt GET (gelezen config, API zeer gemaskeerde sleutel) en SET (sparen dienst URL, API sleutel, pakhuisadres), met veilig opgeslagen config, bijvoorbeeld in Runtime staat.
• Admin UI omvat a Mock die (of gelijkaardig) lusje met gebieden voor de Dienst URL, API sleutel (wachtwoord/gemaskeerd), en pakhuisadres verscheept.

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

Herzie het architectuurplan wanneer de agent het verstrekt.

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

Geef de agent de opdracht om door te gaan met het genereren van code. De agent zou a mock drager aan de het verschepen dragers configuratie moeten toevoegen die Commerce toestaat om de teruggekeerde methodes goed te keuren, en de webhaakmethode plugin.magento.out_of_process_shipping_methods.api.shipping_rate_repository.get_rates te gebruiken (webhaaktype na, vereiste Facultatief).

De agent genereert de vereiste code en geeft een gedetailleerd overzicht van uw volgende stappen (waaronder het installeren van afhankelijkheden, het registreren van de mock-carrier, het configureren van de Commerce-webhaak en het implementeren).

{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 app.

De agent voert een pre-implementatiebeoordeling van gereedheid uit (bijvoorbeeld het controleren van .env op COMMERCE_WEBHOOKS_PUBLIC_KEY , COMMERCE_BASE_URL en OAuth/IMS-variabelen als de Admin UI of Commerce API wordt gebruikt).

{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"}

Register de mock drager in Commerce (stel eens in werking na stel op):

npm run create-shipping-carriers

Zorg ervoor dat uw .env COMMERCE_BASE_URL en een geldige OAuth/IMS-referenties heeft, zodat het script de carrier kan registreren.

vorm de verschepende webhaak in Commerce Admin:

• Ga naar Opslag > Montages > Configuratie > de Diensten van Adobe > Webhooks van Commerce.

• Een webhaak toevoegen:

  • methode Webhaak: plugin.magento.out_of_process_shipping_methods.api.shipping_rate_repository.get_rates
  • het type van Webhaak: na
  • URL: opgesteld verschepen-methodes Webactie URL (van opstellen output of Adobe Developer Console).
  • Vereist: Facultatief - dit staat controle toe om nog te werken als externe API geen tarieven terugkeert.

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

vorm de Admin UI SDK uitbreiding:

• In Commerce Admin, ga naar Opslag > Montages > Configuratie.
• Open {de Diensten van 0} Adobe > Admin UI SDK .
• Plaats toelaten Admin UI SDK aan ja en klik sparen Config als het niet reeds wordt toegelaten.
• Klik vormen uitbreidingen, kies de werkruimte uw app aan wordt opgesteld, dan klik ​​toepassen. U kunt de optie van de Douane ook selecteren en de werkruimtenaam ingaan.
• Selecteer de App Builder -toepassing in de lijst en sla deze op. Als app niet verschijnt, klik verfrist registraties en probeert opnieuw.

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

vorm de Verzendmethode van het Mock in Adobe Commerce Admin UI:

• Open Apps en selecteer uw app.

• Open het Mock die tabel (of gelijkwaardig) verscheept.

• Voer de volgende gegevens in:

  • de Dienst URL: de het werkschema URL van het Pipetream u kopieerde (bijvoorbeeld https://123456.m.pipedream.net).
  • API sleutel: om het even welke niet lege waarde voor het mock, bijvoorbeeld tutorial-key.
  • Warehouse (schip-van) adres: naam, telefoon, straat, stad, staat, postcode, land.

• Klik sparen. De configuratie wordt opgeslagen in Runtime staat en door de verschepen-methodes actie gebruikt.

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

verifieer bij controle: voeg een product aan de kar toe, ga aan controle, en ga een verschepend adres in. U zou de mock die opties verschepen, bijvoorbeeld StandaardMock en Uitdrukkelijke Mock moeten zien.

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