Visualizzazione dei consigli sui prodotti sulla pagina del prodotto

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.

Attenzione

I temi vintage non sono disponibili nel Theme Store. Questi temi non dispongono delle funzionalità incluse nei temi dell'Online Store 2.0 di Shopify e i temi vintage gratuiti di Shopify non ricevono aggiornamenti oltre alle correzioni di sicurezza.

Nota

Questa personalizzazione è per i temi Shopify vintage e non si applica ai temi dell'Online Store 2.0.

• Scopri la versione della struttura del tuo tema
• Esplora le opzioni di personalizzazione del tema dell'Online Store 2.0.

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

Desktop

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
3. Nella directory Sezioni, clicca su Aggiungi una nuova sezione.
4. Assegna alla nuova sezione il nome product-recommendations e clicca su Crea sezione.
5. Sostituisci tutto il contenuto con il codice seguente:

{% 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" data-intent="related">
  {% if recommendations.performed %}
    {% if recommendations.products_count > 0 %}
      <div class="section-header text-center">
        {% if recommendations.intent == 'related' %}
          <h2> You may also like</h2>
        {% elsif recommendations.intent == 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
      </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" data-intent="related">
  <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>

Nota

I prodotti consigliati devono essere caricati in modo asincrono utilizzando JavaScript. Li caricherai nel Passaggio 3: modifica del file theme.js per caricare i consigli in modo asincrono.

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

{% 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" data-intent="related">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      {% if recommendations.intent == 'related' %}
          <h2> You may also like</h2>
      {% elsif recommendations.intent == 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
    </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" data-intent="related">

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

iPhone

1. Nell'app di Shopify tocca il pulsante ….
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.
4. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
5. Nella directory Sezioni, clicca su Aggiungi una nuova sezione.
6. Assegna alla nuova sezione il nome product-recommendations e clicca su Crea sezione.
7. Sostituisci tutto il contenuto con il codice seguente:

{% 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" data-intent="related">
  {% if recommendations.performed %}
    {% if recommendations.products_count > 0 %}
      <div class="section-header text-center">
        {% if recommendations.intent == 'related' %}
          <h2> You may also like</h2>
        {% elsif recommendations.intent == 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
      </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" data-intent="related">
  <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>

Nota

I prodotti consigliati devono essere caricati in modo asincrono utilizzando JavaScript. Li caricherai nel Passaggio 3: modifica del file theme.js per caricare i consigli in modo asincrono.

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

{% 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" data-intent="related">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      {% if recommendations.intent == 'related' %}
          <h2> You may also like</h2>
      {% elsif recommendations.intent == 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
    </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" data-intent="related">

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

Android

1. Nell'app di Shopify tocca il pulsante ….
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.
4. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
5. Nella directory Sezioni, clicca su Aggiungi una nuova sezione.
6. Assegna alla nuova sezione il nome product-recommendations e clicca su Crea sezione.
7. Sostituisci tutto il contenuto con il codice seguente:

{% 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" data-intent="related">
  {% if recommendations.performed %}
    {% if recommendations.products_count > 0 %}
      <div class="section-header text-center">
        {% if recommendations.intent == 'related' %}
          <h2> You may also like</h2>
        {% elsif recommendations.intent == 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
      </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" data-intent="related">
  <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>

Nota

I prodotti consigliati devono essere caricati in modo asincrono utilizzando JavaScript. Li caricherai nel Passaggio 3: modifica del file theme.js per caricare i consigli in modo asincrono.

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

{% 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" data-intent="related">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      {% if recommendations.intent == 'related' %}
          <h2> You may also like</h2>
      {% elsif recommendations.intent == 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
    </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" data-intent="related">

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 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.