DocumentazioneCommerceGuida Adobe Commerce Optimizer

[Solo SaaS]{class="badge positive" title="Applicabile solo ai progetti as a Cloud Service e Adobe Commerce Optimizer di Adobe Commerce (infrastruttura SaaS gestita da Adobe)."}

Configurare la vetrina

Last update: Mon Oct 13 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • Sviluppatore

Questa guida illustra come configurare una vetrina per l'istanza Adobe Commerce Optimizer tramite Adobe Edge Delivery Services. La vetrina include codice standard, contenuti di esempio e supporto per le pagine dei dettagli del prodotto e l’individuazione del prodotto (ricerca e filtro).

Tempo stimato per il completamento: 30-45 minuti

Prerequisiti

  • Account GitHub che può creare archivi ed è configurato per lo sviluppo locale (github.com)
  • Adobe Commerce Optimizeristanza con dati di esempio e viste e criteri di catalogo configurati

Dati istanza richiesti

Prima di iniziare, raccogliere le seguenti informazioni dall'istanza Adobe Commerce Optimizer:

NOTE
I clienti con accesso di prova possono trovare l’endpoint GraphQL nell’e-mail di benvenuto ricevuta al momento della creazione dell’istanza. Le istanze di prova sono preconfigurate con dati di esempio, visualizzazioni di catalogo e criteri.

Passaggi di configurazione

  1. Crea il progetto vetrina-Utilizza lo strumento Site Creator per creare un nuovo progetto vetrina con codice standard, contenuto di esempio e un file di configurazione.

  2. Personalizzare la configurazione della vetrina-Aggiornare il file config.json nel repository per connettersi all'istanza Adobe Commerce Optimizer.

  3. Verifica la configurazione (10 minuti)

    • Anteprima del sito vetrina
    • Verificare le pagine dei dettagli del prodotto e la funzionalità di ricerca

Crea il progetto storefront

Lo strumento Site Creator (Creazione sito) crea un progetto completo di vetrina con i seguenti componenti:

  • Sito: pagina di destinazione della vetrina con contenuto standard
  • Codice: archivio con file di origine standard
  • Contenuto: ambiente di authoring dei documenti con file di contenuto del sito
  • Configurazione Commerce: file config.json per la configurazione specifica dell'istanza

Passaggio 1: generare il progetto

  1. Apri lo strumento Creatore sito

    Site Creator tool {width="700" modal="regular"}

  2. Selezionare Crea nuovo sito (codice e contenuto).

  3. Completa la configurazione del sito:

    • Organizzazione/nome utente GitHub: immetti il nome utente o il nome dell'organizzazione GitHub
    • Nome sito: scegli un nome descrittivo per la vetrina
    • Endpoint Commerce GraphQL (facoltativo): immettere l'endpoint GraphQL per l'istanza Adobe Commerce Optimizer

  4. Fai clic su Crea sito per creare l'archivio GitHub con il codice boilerplate della vetrina.

    Quando l’archivio viene creato, Site Creator si aggiorna e richiede di installare l’app Code Sync.

Passaggio 2: installare l’app Code Sync

  1. Fare clic su Install AEM Code Sync App per aprire il programma di installazione di Sincronizzazione codice in una nuova scheda.

  2. Configura l'app di sincronizzazione codice:

    • Seleziona la tua organizzazione GitHub, quindi fai clic su Configure.
    • Nell'interfaccia di Sincronizzazione codice fare clic su Only select repositories.
    • Fare clic sul menu Select repositories, quindi scegliere l'archivio del codice storefront creato.
    • Fare clic su Save per registrare l'archivio.

  3. Tornare alla finestra del browser in cui è aperto il creatore del sito e fare clic su Crea sito.

    Il creatore del sito copia il contenuto della vetrina nell’ambiente di authoring del documento. Questo processo richiede 1-2 minuti.

Passaggio 3: salvare i collegamenti del progetto

  1. Nella sezione Dettagli sito, controlla i collegamenti del progetto vetrina:

    Storefront setup complete {width="700" modal="regular"}

    Utilizza questi collegamenti per gestire il codice, il contenuto e la configurazione della vetrina.

  2. Copiare e salvare questi collegamenti per riferimento futuro: fare clic su **Copy.

Configurare la vetrina

Aggiorna la configurazione della vetrina per connetterti all'istanza Adobe Commerce Optimizer.

  1. Apri Gestione configurazione utilizzando il collegamento salvato in precedenza:

    https://da.live/sheet#/<username or org>/<repo name>/config.json

  2. Individua la sezione cs (Catalog Service) nella configurazione.

  3. Sostituisci i valori segnaposto con i valori della tua istanza. Consulta Prerequisiti.

    code language-json 
    "cs": {
   "AC-View-ID": "{catalogViewId}",
   "AC-Environment-ID": "{tenantId}",
   "AC-Source-Locale": "en_US"
}

  4. Salva il file di configurazione.

NOTE
La propagazione delle modifiche alla configurazione potrebbe richiedere alcuni minuti. Se i dati non vengono visualizzati immediatamente, attendere 2-3 minuti prima della risoluzione dei problemi.

Verifica la configurazione

Verificare che la vetrina sia connessa correttamente all'istanza Adobe Commerce Optimizer.

Passaggio 1: visualizza la home page della vetrina

  1. Passa all’URL dell’anteprima live:

    https://main--{SITE}--{ORG}.aem.live

    Sostituisci {ORG} e {SITE} con il nome dell'organizzazione GitHub e del sito.

  2. Criteri di successo: dovresti visualizzare la home page della vetrina con contenuti standard.

    ACO storefront site with boilerplate {width="700" modal="regular"}

Passaggio 2: verifica delle pagine dei dettagli del prodotto

Visualizza la pagina dei dettagli del prodotto predefinita per verificare che i dati del prodotto siano caricati correttamente.

  1. Passa a una pagina di prodotto di esempio:
    https://main--{SITE}--{ORG}.aem.live/products/placeholder/{sku}

    Utilizza qualsiasi SKU presente nei dati di esempio, ad esempio:
    https://main--{SITE}--{ORG}.aem.live/products/placeholder/aur-flu-tir-std-2017

    Per la vetrina predefinita, è possibile utilizzare il valore placeholder nella route per visualizzare il prodotto. Quando inizi a personalizzare la vetrina, puoi personalizzare il codice della vetrina per impostare il percorso della pagina dei dettagli del prodotto in base ai percorsi definiti nel catalogo.

    note tip
    TIP
    Visualizza gli SKU disponibili dalla pagina Sincronizzazione dati nella tua istanza di Adobe Commerce Optimizer.

  2. Criteri di successo: la pagina deve essere visualizzata:

    • Nome, descrizione e prezzo del prodotto
    • Immagini del prodotto
    • Funzionalità Aggiungi al carrello
    • Dati recuperati dall'istanza Adobe Commerce Optimizer

    Default product detail page showing a product from the sample data {width="700" modal="regular"}

Passaggio 3: verificare la funzionalità di ricerca predefinita

Verifica le funzioni predefinite del prodotto, incluse le funzioni di ricerca e filtro.

  1. Nella home page della vetrina, fai clic sull’icona della lente di ingrandimento nell’intestazione.

  2. Digitare la stringa di ricerca tires e premere Invio.

  3. Criteri di successo: dovresti vedere:

    • Pagina dei risultati di ricerca con prodotti pneumatici
    • Opzioni di filtro nella barra laterale
    • Elenco prodotti con immagini e prezzi

    View search results page {width="675" modal="regular"}

  4. Fare clic su un prodotto pneumatico per visualizzarne la pagina dei dettagli.

    View product details page {width="675" modal="regular"}

Risoluzione dei problemi

Se si verificano problemi durante l'installazione, utilizzare la console del controllo pagina Web per verificare la presenza di errori. Prova anche a cancellare la cache del browser o a utilizzare un altro browser.

Per verificare i problemi comuni, attenersi alle istruzioni riportate di seguito.

Problemi comuni

Problema
Sintomi
Soluzione
L'installazione della sincronizzazione codice non riesce
Impossibile completare la configurazione di Sincronizzazione codice
  • Assicurati di avere accesso come amministratore all’organizzazione GitHub.
  • Prova a utilizzare un archivio personale invece di un’organizzazione.
  • Controlla le autorizzazioni GitHub e riprova.
Impossibile caricare il sito
404 o errori di connessione
  • Verifica il formato URL del sito: https://main--{SITE}--{ORG}.aem.live
  • Controlla che l'app di sincronizzazione codice sia installata correttamente.
  • Verifica che l’archivio sia pubblico o configurato correttamente.
Nessun dato prodotto visualizzato
Le pagine dei prodotti mostrano segnaposto o errori
  • Verifica i valori di configurazione in config.json
  • Nell'istanza Adobe Commerce Optimizer, controllare la pagina Sincronizzazione dati per verificare che i prodotti di esempio siano stati caricati. Se non sono disponibili prodotti, ricaricare i dati di esempio o aggiungere un prodotto utilizzando Data Ingestion API. Attendere alcuni minuti per la propagazione delle modifiche alla configurazione.
  • Prova a recuperare i dettagli del prodotto utilizzando la query prodotti del servizio di merchandising utilizzando le stesse intestazioni configurate nel file config.json. Se è possibile recuperare i dati, è probabile che si tratti di un problema di configurazione della vista catalogo o di un errore di indice.
La ricerca non restituisce alcun risultato
Pagina risultati ricerca vuota
  • Verificare che sia possibile recuperare i risultati della ricerca prodotti utilizzando la query productSearch di Merchandising Services utilizzando le stesse intestazioni configurate nel file config.json. Se è possibile recuperare i dati, è probabile che si tratti di un problema di configurazione della vista catalogo o di un errore di indice.
  • Verificare che l'ID della vista catalogo nel file config.json corrisponda all'ID della vista catalogo in Adobe Commerce Optimizer.
  • In Adobe Commerce Optimizer, verifica la configurazione dei criteri, delle impostazioni locali e dei listini prezzi utilizzati nella configurazione dell’intestazione della vetrina.
  • Verificare che le impostazioni dei metadati dell'attributo siano impostate correttamente per la ricerca.

Elenco di controllo per la convalida

Prima di procedere con i passaggi successivi, assicurati che la vetrina funzioni correttamente verificando quanto segue:

Elenco di controllo I valori di configurazione corrispondono alle impostazioni dell'istanza

La home page della vetrina viene caricata senza errori

Elenco di controllo Almeno una pagina dei dettagli del prodotto visualizza informazioni complete

La funzionalità di ricerca restituisce risultati rilevanti

Elenco di controllo Le immagini di prodotto sono state caricate correttamente

Elenco di controllo I valori di configurazione corrispondono alle impostazioni dell'istanza

Ottieni aiuto

Se i problemi persistono:

Passaggi successivi

Dopo aver configurato e verificato la vetrina, puoi:

  1. Installa Sidekick - Estensione browser per la modifica, la visualizzazione in anteprima e la pubblicazione di contenuti direttamente dal sito Web

  2. Configura un ambiente di sviluppo locale - Crea un ambiente locale per personalizzare il codice e il contenuto della vetrina

Scopri ed esplora

Related Articles
Per ulteriori informazioni sull'aggiornamento del contenuto del sito e sull'integrazione con i componenti front-end e i dati back-end di Commerce, consulta la documentazione di Adobe Commerce Storefront.
recommendation-more-help
781d83dd-7e7a-4d27-809a-ebf216b88dc1