Visualizzazione dei consigli sui prodotti sulla pagina del prodotto

Questo tutorial descrive la procedura per aggiungere raccomandazioni sui prodotti alla pagina del prodotto nel tema Debut. Per maggiori informazioni sul funzionamento delle raccomandazioni sui prodotti, consulta la pagina Showing product recommendations on product pages (Visualizzazione delle raccomandazioni sui prodotti sulle pagine del prodotto).

Passaggio 1: creazione di una sezione product-recommendations.liquid

Passaggio 2: inclusione della sezione nel modello product.liquid

Per visualizzare i consigli sui prodotti nella parte inferiore della pagina del prodotto, includi la sezione nella parte inferiore del file templates/product.liquid:

  1. Nella directory Modelli apri il file product.liquid.
  2. Aggiungi il seguente codice in fondo al file:
{% section 'product-recommendations' %}
  1. Clicca su Salva.

Passaggio 3: modifica del file theme.js per caricare i consigli in modo asincrono

Devi caricare i consigli nel contenitore vuoto creato dalla sezione sulla pagina del prodotto. Utilizza JavaScript per effettuare una richiesta HTTP GET a <base_url>?section_id=<section_id>&product_id=<product_id>.

  1. Nella directory Assets (Risorse) apri il file theme.js.
  2. Trova questa riga di codice:
sections.register('hero-section', theme.HeroSection);
  1. Sotto quella riga, aggiungi questo codice:
sections.register('product-recommendations', theme.ProductRecommendations);
  1. Aggiungi il seguente codice in fondo al file:
theme.ProductRecommendations = (function() {
  function ProductRecommendations(container) {
    var $container = (this.$container = $(container));
    var baseUrl = $container.data('baseUrl');
    var productId = $container.data('productId');
    var limit = $container.data('limit');
    var intent = $container.data('intent');
    var productRecommendationsUrlAndContainerClass = baseUrl + '?section_id=product-recommendations&limit=' + limit +
      '&product_id=' + productId + '&intent='+ intent +
      ' .product-recommendations';
    $container.parent().load(productRecommendationsUrlAndContainerClass);
  }
  return ProductRecommendations;
})();
  1. Clicca su Salva.

Passaggio 4: modifica del file theme.scss.liquid per creare l'animazione di caricamento (facoltativo)

Se hai utilizzato il frammento che mostra un'animazione di caricamento all'interno della sezione dei consigli sui prodotti, aggiungi il codice seguente nella parte inferiore del file assets/theme.scss.liquid:

  1. Nella directory Assets (Risorse) apri il file theme.scss.liquid.
  2. In fondo al file, aggiungi il codice:
.product-recommendations {
  padding-top: $section-spacing-small;
  padding-bottom: $section-spacing-small;

  @include media-query($medium-up) {
    padding-top: $section-spacing;
    padding-bottom: $section-spacing;
  }
}
.product-recommendations__loading-dots {
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-recommendations__loading-dot {
  animation: dot-keyframes 1.5s infinite ease-in-out;
  background-color: $color-text;
  border-radius: 10px;
  display: inline-block;
  height: 10px;
  width: 10px;
  margin: 0 3px;
  &:nth-child(2) {
    animation-delay: 0.5s;
  }
  &:nth-child(3) {
    animation-delay: 1s;
  }
}
@keyframes dot-keyframes {
  0% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2, 1.2);
  }
  100% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
}
  1. Clicca su Salva.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis