Productaanbevelingen op de productpagina tonen

In deze tutorial wordt beschreven hoe je productaanbevelingen aan je productpagina kunt toevoegen in het thema Debut. Zie Productaanbevelingen op productpagina's weergeven voor meer informatie over hoe productaanbevelingen werken.

Stap 1: maak een product-recommendations.liquid aan

Desktop
  1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
  2. Zoek het thema dat je wilt bewerken, klik op de knop om het actiemenu te openen en klik vervolgens op Code bewerken.
  3. In het menu Secties, klik je op Voeg een nieuwe sectie toe.
  4. De naam van de nieuwe sectie product-recommendations en klik op Sectie aanmaken.
  5. Vervang alle content door de onderstaande code:
{% 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. Klik op Opslaan.

Wanneer de sectie met de productpagina wordt weergegeven, wordt recommendations.performed weergegeven false en wordt er een laadanimatie weergegeven in de gegenereerde HTML:

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

Gebruik deze code als je geen laadanimatie wilt laten zien:

{% 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>

Wanneer het bovenstaande gedeelte wordt weergegeven met je productpagina, wordt de gegenereerde HTML een div-element zonder content:

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

Als de gebruiker alternatieve landinstellingen gebruikt, worden de landinstellingen opgenomen in de data-base-url van de div. Bijvoorbeeld /fr/recommendations/products.

iPhone
  1. Tik in de Shopify-app op de knop .
  2. Tik in het gedeelte Verkoopkanalen op webshop.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken, klik op de knop om het actiemenu te openen en klik vervolgens op Code bewerken.
  5. In het menu Secties, klik je op Voeg een nieuwe sectie toe.
  6. De naam van de nieuwe sectie product-recommendations en klik op Sectie aanmaken.
  7. Vervang alle content door de onderstaande code:
{% 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. Klik op Opslaan.

Wanneer de sectie met de productpagina wordt weergegeven, wordt recommendations.performed weergegeven false en wordt er een laadanimatie weergegeven in de gegenereerde HTML:

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

Gebruik deze code als je geen laadanimatie wilt laten zien:

{% 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>

Wanneer het bovenstaande gedeelte wordt weergegeven met je productpagina, wordt de gegenereerde HTML een div-element zonder content:

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

Als de gebruiker alternatieve landinstellingen gebruikt, worden de landinstellingen opgenomen in de data-base-url van de div. Bijvoorbeeld /fr/recommendations/products.

Android
  1. Tik in de Shopify-app op de knop .
  2. Tik in het gedeelte Verkoopkanalen op webshop.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken, klik op de knop om het actiemenu te openen en klik vervolgens op Code bewerken.
  5. In het menu Secties, klik je op Voeg een nieuwe sectie toe.
  6. De naam van de nieuwe sectie product-recommendations en klik op Sectie aanmaken.
  7. Vervang alle content door de onderstaande code:
{% 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. Klik op Opslaan.

Wanneer de sectie met de productpagina wordt weergegeven, wordt recommendations.performed weergegeven false en wordt er een laadanimatie weergegeven in de gegenereerde HTML:

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

Gebruik deze code als je geen laadanimatie wilt laten zien:

{% 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>

Wanneer het bovenstaande gedeelte wordt weergegeven met je productpagina, wordt de gegenereerde HTML een div-element zonder content:

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

Als de gebruiker alternatieve landinstellingen gebruikt, worden de landinstellingen opgenomen in de data-base-url van de div. Bijvoorbeeld /fr/recommendations/products.

Stap 2: De sectie opnemen in je product.liquid-template

Om productaanbevelingen onderaan je productpagina weer te geven, voeg je de sectie onderaan je templates/product.liquid-bestand toe:

  1. Open het product.liquid-bestand in de directory Templates.
  2. Voeg de volgende code toe aan het eind van het bestand:
{% section 'product-recommendations' %}
  1. Klik op Opslaan.

Stap 3: je theme.js-bestand bewerken om de aanbevelingen asynchroon te laden

Je moet aanbevelingen laden in de lege container die de sectie op de productpagina heeft gemaakt. Gebruik JavaScript om een HTTP-GET-aanvraag in te <base_url>?section_id=<section_id>&product_id=<product_id>.

  1. Open in het theme.js-bestand in de directory Activa.
  2. Zoek deze coderegel:
sections.register('hero-section', theme.HeroSection);
  1. Voeg onder die regel deze code toe:
sections.register('product-recommendations', theme.ProductRecommendations);
  1. Voeg de volgende code toe aan het eind van het bestand:
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. Klik op Opslaan.

Stap 4: je theme.scss.liquid-bestand bewerken om de laadanimatie aan te maken (optioneel)

Als je het fragment hebt gebruikt waarmee een laadanimatie wordt uitgevoerd in het gedeelte met productaanbevelingen, voeg je de volgende code onderaan je assets/theme.scss.liquid-bestand toe:

  1. Open in het theme.scss.liquid-bestand in de directory Activa.
  2. Voeg deze code toe aan het eind van het bestand:
.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. Klik op Opslaan.
Zat het antwoord dat je zocht er niet bij? Wij helpen je graag verder.