Caso di utilizzo end-to-end per Storefront e Catalog Administrator

Interfaccia utente Adobe Commerce Optimizer: configura le visualizzazioni e i criteri del catalogo per gestire la configurazione operativa complessa del catalogo per il caso d'uso Carvelo.

Commerce Storefront - Eseguire il rendering della vetrina utilizzando i dati del catalogo di esempio caricati nell'istanza Adobe Commerce Optimizer e nei file di configurazione Commerce Storefront, fstab.yaml e config.json.

Creare un nuovo criterio denominato Categorie di parti Celport per consentire a Celport di vendere solo parti di freni e sospensioni.

Crea una nuova vista catalogo per la vetrina Celport.

Questa visualizzazione catalogo utilizza i criteri appena creati Categorie di parti Celport e i Marchi East Coast Inc esistenti per garantire che Celport possa vendere solo i marchi Bolt e Cruz come parte dell'accordo con East Coast Inc. La visualizzazione catalogo Celport utilizza il listino prezzi east_coast_inc per supportare i programmi di prezzo dei prodotti in linea con gli accordi di licenza dei marchi.

Aggiorna la configurazione della vetrina commerce per utilizzare i dati della vista del catalogo Celport creata.

Nella barra a sinistra, espandi la sezione Store setup e fai clic su Policies.

Fare clic su Create Policy.

Viene visualizzata una nuova pagina per aggiungere i dettagli del criterio.

Aggiungi i dettagli richiesti:

Nome = Categorie Di Parti Celport

Fare clic su Add Filter.

Viene visualizzata una finestra di dialogo per aggiungere i dettagli del filtro.

Aggiungi i dettagli del filtro:

• Attributo = categoria_parte
• Operatore = IN
• Valore Source = STATICO
• Valore = freni
• Valore = sospensione

Per ulteriori informazioni sulla differenza tra un'origine di valore STATIC e TRIGGER, vedere tipi di origine di valore.

Nella finestra di dialogo Filter details, fare clic su Save.

Per abilitare il filtro appena creato, fare clic sui punti azione (…) e selezionare Abilita.

Fare clic su Save.

Torna all’elenco dei criteri facendo clic sulla freccia indietro.

Il nuovo criterio Categorie di parti Celport verrà visualizzato nell'elenco.

Nella barra a sinistra, espandi la sezione Store setup e fai clic su Catalog views.

Osserva le viste catalogo esistenti: Arkbridge, Kingsbluff e Global.

Fare clic su Add catalog view.

Inserisci i dettagli della vista catalogo:

• Nome = Celport
• Origini catalogo = en-US
• Criteri (usa elenco a discesa) = Marchi East Coast Inc; Categorie parte Celport; Marchio; Modello

Fare clic su Add per creare la visualizzazione del catalogo.

La pagina Visualizzazioni catalogo viene aggiornata per visualizzare la nuova visualizzazione catalogo.

Ottieni l’ID della vista catalogo Celport.

Fai clic sull'icona delle informazioni per la visualizzazione del catalogo Celport nella pagina Visualizzazioni catalogo.

Copia e salva l’ID della vista catalogo. Questo ID è necessario quando aggiorni la configurazione della vetrina per inviare i dati al nuovo catalogo Celport.

Verificare che il passaggio sia stato completato correttamente:

• Il nome della vista catalogo è "Celport"
• La vista Catalogo mostra 4 criteri associati
• Viene visualizzato l’ID della vista Catalogo che può essere copiato
• L’origine del catalogo mostra "en-US"

Nell’ambiente di sviluppo locale, apri la cartella in cui hai clonato l’archivio GitHub con i file di configurazione boilerplate della vetrina.

Nella directory principale della cartella, aprire il file config.json.

{
 "public": {
   "default": {
   "commerce-core-endpoint": "https://www.aemshop.net/graphql",
   "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/Fwus6kdpvYCmeEdcCX7PZg/graphql",
   "headers": {
      "cs": {
         "ac-view-id": "9ced53d7-35a6-40c5-830e-8288c00985ad",
         "ac-price-book-id": "west_coast_inc",
         "ac-source-locale": "en-US"
        }
      },
      "analytics": {
         "base-currency-code": "USD",
         "environment": "Production",
         "store-id": 1,
         "store-name": "ACO Demo",
         "store-url": "https://www.aemshop.net",
         "store-view-id": 1,
         "store-view-name": "Default Store View",
         "website-id": 1,
         "website-name": "Main Website"
       }
    }
   }
}

Nel valore commerce-endpoint, sostituisci l'ID tenant nell'URL con l'URL per l'istanza Adobe Commerce Optimizer.

Puoi trovare l’ID tenant nell’URL per l’interfaccia utente di Commerce Optimizer. Ad esempio, nell'URL seguente, l'ID tenant è XDevkG9W6UbwgQmPn995r3.

https://experience.adobe.com/#/@commerceprojectbeacon/in:XDevkG9W6UbwgQmPn995r3/commerce-optimizer-studio/catalog

Sostituisci il valore ac-view-id con l'ID della vista catalogo Celport copiato in precedenza.

Sostituire il valore ac-price-book-id con "east_coast_inc".

Dopo aver apportato queste modifiche, il file config.json dovrebbe essere simile al seguente, con i segnaposto ACO-tenant-id e celport-catalog-view-id sostituiti dai valori:

{
  "public": {
     "default": {
     "commerce-core-endpoint": "https://www.aemshop.net/graphql",
     "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/{{ACO-tenant-id}}/graphql",
     "headers": {
         "cs": {
             "ac-view-id": "{{celport-catalog-view-id}}",
             "ac-price-book-id": "east_coast_inc",
             "ac-source-locale": "en-US"
           }
         },
         "analytics": {
             "base-currency-code": "USD",
             "environment": "Production",
             "store-id": 1,
             "store-name": "ACO Demo",
             "store-url": "https://www.aemshop.net",
             "store-view-id": 1,
             "store-view-name": "Default Store View",
             "website-id": 1,
             "website-name": "Main Website"
          }
      }
  }
}

Salva il file.

Quando si salvano le modifiche, si aggiorna la configurazione del catalogo in modo da utilizzare la vista del catalogo Carvelo configurata per vendere solo parti del freno e della sospensione.

Avvia la vetrina per visualizzare l’esperienza del catalogo specifica per Celport creata dalla configurazione della vetrina.

1. Dalla finestra del terminale nell’IDE, avvia l’anteprima della vetrina locale.

   code language-shell
   npm start

   Il browser si apre all'anteprima di sviluppo locale in http://localhost:3000.

   Se il comando non riesce o se il browser non si apre, esaminare le istruzioni per lo sviluppo locale nell'argomento relativo alla configurazione di Storefront.

Nel browser, cercare brakes e premere Invio.

La vetrina si aggiorna per visualizzare la pagina dell'elenco dei prodotti con le parti dei freni.

Fare clic sull'immagine di una parte del freno per visualizzare i dettagli del prodotto con le informazioni sul prezzo e annotare le informazioni sul prezzo del prodotto.

Cerca tires, che è un'altra categoria di parte disponibile nei dati del caso d'uso nell'istanza Adobe Commerce Optimizer.

Non viene restituito alcun risultato. Questo perché la vista catalogo Celport è stata configurata per vendere solo parti di freni e sospensioni.

Prova ad aggiornare il file di configurazione della vetrina (config.json).

1. Modificare i valori ac-view-id e ac-price-book.

Ad esempio, è possibile modificare l'ID della vista catalogo in vista catalogo Kingsbluff e l'ID del listino prezzi in east_coast_inc. È possibile visualizzare le categorie di parti disponibili per Kingsbluff consultando il criterio Categorie di parti Kingsbluff.

1. Salva il file.

   Quando si salva il file, l'anteprima della vetrina locale viene aggiornata automaticamente.

2. Visualizzate l'anteprima delle modifiche nel browser utilizzando la funzione di ricerca per trovare le parti dei pneumatici.

   Osservare i diversi tipi di parti disponibili e i prezzi assegnati alla vista del catalogo Kingsbluff.

Questi esperimenti dimostrano la flessibilità di Adobe Commerce Optimizer: puoi passare rapidamente da una visualizzazione di catalogo all’altra e impostare listini prezzi personalizzati per diversi tipi di pubblico senza duplicare i dati del catalogo.