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

  1. Nella directory Sezioni, clicca su Aggiungi una nuova sezione.

  2. Assegna alla nuova sezione il nome product-recommendations e clicca su Crea sezione.

  3. Sostituisci tutto il contenuto con il codice seguente:

{% assign heading = 'You may also like' %}
{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations">
  {% if recommendations.performed %}
    {% if recommendations.products_count > 0 %}
      <div class="section-header text-center">
        <h2>{{ heading }}</h2>
      </div>
      <ul class="grid grid--uniform grid--view-items">
        {% for product in recommendations.products %}
          <li class="grid__item small--one-half medium-up--one-quarter">
            {% include 'product-card-grid', max_height: 250 %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  {% else %}
    <div class="product-recommendations__loading-dots">
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
    </div>
  {% endif %}
</div>
  1. Clicca su Salva.

Quando la sezione viene visualizzata con la pagina del prodotto, recommendations.performed sarà false e l'HTML generato mostrerà un'animazione di caricamento:

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations">
  <div class="product-recommendations__loading-dots">
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
  </div>
</div>

Se non desideri mostrare un'animazione di caricamento, utilizza questo codice:

{% assign heading = 'You may also like' %}
{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      <h2>{{ heading }}</h2>
    </div>
    <ul class="grid grid--uniform grid--view-items">
      {% for product in recommendations.products %}
        <li class="grid__item small--one-half medium-up--one-quarter">
          {% include 'product-card-grid', max_height: 250 %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

Quando la sezione riportata sopra viene visualizzata con la pagina del prodotto, l'HTML generato sarà un elemento div senza contenuto:

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations">

Se l'utente utilizza impostazioni locali alternative, queste sono incluse nell'impostazione data-base-url dell'elemento div. Ad esempio, /fr/recommendations/products.

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 productRecommendationsUrlAndContainerClass = baseUrl + '?section_id=product-recommendations&limit=' + limit +
      '&product_id=' +productId +
      ' .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