Modifica o eliminazione di un Buy Button o di un carrello incorporato

Attenzione

Questo è un tutorial avanzato e non è supportato da Shopify. Richiede la conoscenza di linguaggi di web design come HTML, CSS, Javascript e Liquid. Se hai bisogno di aiuto, puoi rivolgerti a un Partner di Shopify.

I Buy Button e i carrelli vengono generati dai frammenti di codice copiati dal pannello di controllo Shopify e incollati nell’origine HTML della tua pagina web. Questi frammenti di codice sono detti codice di incorporamento. Se vuoi modificare l’aspetto o il comportamento di un pulsante o di un carrello, devi modificare il codice di incorporamento associato.

Nota

Queste istruzioni si applicano al codice di incorporamento dei Buy Button generato dopo il 26 settembre 2016. Se vuoi modificare codice di incorporamento generato prima di questa data, devi seguire le istruzioni relative al codice legacy. Puoi anche ricreare il tuo codice di incorporamento usando il canale di vendita Buy Button.

Se hai dubbi sulla versione del tuo codice di incorporamento, controlla se inizia con <script data-shopify-buy-ui>. In caso affermativo, hai la versione più recente. Se invece inizia con <div data-emebd_type=... o un altro tipo di tag <div>, hai la versione legacy.

Elimina un Buy Button, una collezione incorporata o un carrello incorporato

Procedura:

1. Apri l’origine HTML della pagina web che contiene il Buy Button, la collezione incorporata o il carrello incorporato.
2. Elimina dal codice sorgente HTML l’intero codice di incorporamento, che inizia con <script data-shopify-buy-ui> e finisce con </script>. Nel caso di un Buy Button, il codice di incorporamento ha un aspetto simile a questo:

<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      var script = document.createElement('script');
      script.async = true;
      script.src = scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = ShopifyBuyInit;
    }

    function ShopifyBuyInit() {
      var client = ShopifyBuy.buildClient({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>

1. Salva le modifiche.

Il Buy Button, la collezione incorporata o il carrello incorporato non saranno più visualizzati nella tua pagina web.

Modifica un Buy Button

Per modificare l’aspetto o le impostazioni di un Buy Button esistente, devi modificare il codice di incorporamento aggiunto all’origine HTML.

Ogni Buy Button è costituito da componenti a sé stanti nel codice di incorporamento. Ad esempio, se aggiungi un prodotto con un carrello alla tua pagina web, il codice di incorporamento genererà un componente product, un componente cart e un componente toggle del carrello:

Se vuoi che l'elemento "prodotto" apra una finestra modale con i dettagli del prodotto, il codice di incorporamento genererà un componente modal e un componente modalProduct:

Il frammento di codice che segue ha componenti separati per product e cart:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

Questi componenti sono configurati separatamente tramite gli oggetti di configurazione nel codice di incorporamento. Puoi modificare l’aspetto o il comportamento dei Buy Button modificando gli oggetti di configurazione nel codice di incorporamento.

Suggerimento

In JavaScript, un oggetto è un insieme di coppie chiave-valore, nel formato {key: value}. Immaginalo come un foglio di calcolo: la chiave è come il nome di una colonna e il valore è come il contenuto di una cella.

Ogni componente ha diversi attributi che puoi modificare. Per un elenco completo delle opzioni modificabili, vedi la nostra documentazione per gli sviluppatori. Se vuoi configurare un’opzione non ancora presente nel codice di incorporamento, devi aggiungere la chiave corretta all’oggetto appropriato (vedi l’esempio).

Modifica lo stile di un componente

Ogni componente ha un oggetto di configurazione styles nidificato, che puoi modificare o aggiungere per cambiare l’aspetto del componente. La formattazione degli stili è simile a quella dei fogli di stile CSS. Ogni chiave di primo livello nell’oggetto styles rappresenta un elemento nel componente, ad esempio il titolo o il pulsante. All’interno dell’oggetto, ogni chiave è una proprietà CSS (ad esempio, 'background-color' o 'border') e il valore è un valore CSS.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

È possibile aggiungere a styles qualsiasi proprietà CSS valida. Tieni presente che i nomi delle proprietà con trattini devono essere racchiusi tra apici.

Per ulteriori informazioni sulla personalizzazione CSS, vedi la documentazione per gli sviluppatori.

Esempio: sostituisci il link al carrello con una finestra modale con i dettagli del prodotto

In questo esempio si modifica il codice di incorporamento corrente per mostrare al cliente, invece del carrello, una finestra modale con i dettagli del prodotto:

1. Apri l’origine HTML della pagina contenente il codice di incorporamento del prodotto che desideri modificare.
2. Trova l’oggetto di configurazione product.
3. Individua la chiave buttonDestination nell’oggetto:

options: {
      product: {
        buttonDestination: 'cart'
      }
}

1. Cambia il valore della chiave in 'modal' (assicurati di includere gli apici):

options: {
      product: {
        buttonDestination: 'modal'
      }
}

1. Salva le modifiche.

Esempio: cambia il layout del codice di incorporamento del prodotto

In questo esempio si modifica il layout del codice di incorporamento del prodotto in modo che l’immagine sia visualizzata di lato anziché in alto:

1. Apri l’origine HTML della pagina contenente il codice di incorporamento del prodotto che desideri modificare.
2. Trova l’oggetto di configurazione product.
3. Aggiungi la chiave layout e imposta il valore su 'horizontal':

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

<aside class="note">
<h4>Nota</h4>
<p>When you add the <code>&#39;horizontal&#39;</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p>
</aside>

1. Salva le modifiche.

Modifica del carrello del tuo sito web

Se vuoi cambiare l’aspetto o il comportamento del carrello del tuo sito web, devi modificare l'oggetto di configurazione cart nel codice di incorporamento.

Procedura:

1. Apri l’origine HTML della pagina contenente il carrello che desideri modificare.
2. Trova l’oggetto di configurazione cart nel codice di incorporamento:

options: {
      cart: {
        startOpen: false
      }
}

1. Modifica o aggiungi la proprietà che desideri cambiare. Per un elenco completo delle proprietà configurabili, vedi la documentazione per gli sviluppatori.
2. Salva le modifiche.

Modifica una collezione incorporata

La modifica di una collezione incorporata avviene in modo simile alla modifica di un prodotto o del carrello. Per modificare le proprietà dei prodotti all’interno della collezione (ad esempio, il layout di un prodotto), devi individuare l’oggetto di configurazione product e modificarlo così come faresti per un prodotto incorporato. Per modificare le proprietà della collezione in sé (ad esempio, il testo del pulsante Pagina successiva), modifica invece la chiave productSet.

Alcune proprietà, come il testo di un componente, sono configurate attraverso oggetti nidificati, ossia oggetti che si trovano all’interno di altri oggetti. Ad esempio, il testo del pulsante Pagina successiva è situato all’interno dell’oggetto text del componente productSet:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}