Productaanbevelingen op de productpagina tonen

Deze pagina is afgedrukt op Apr 26, 2024. Ga voor de huidige versie naar https://help.shopify.com/nl/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations.

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.

Op deze pagina

Stap 1: maak een product-recommendations.liquid aan
Stap 2: De sectie opnemen in je product.liquid-template
Stap 3: je theme.js-bestand bewerken om de aanbevelingen asynchroon te laden
Stap 4: je theme.scss.liquid-bestand bewerken om de laadanimatie aan te maken (optioneel)

Stap 1: maak een `product-recommendations.liquid` aan

Ga in het Shopify-beheercentrum naar webshop > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
In het menu Secties, klik je op Voeg een nieuwe sectie toe.
De naam van de nieuwe sectie product-recommendations en klik op Sectie aanmaken.
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>

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.

Tik in de Shopify-app op de knop ….
Tik in het gedeelte Verkoopkanalen op webshop.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
In het menu Secties, klik je op Voeg een nieuwe sectie toe.
De naam van de nieuwe sectie product-recommendations en klik op Sectie aanmaken.
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>

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.

Tik in de Shopify-app op de knop ….
Tik in het gedeelte Verkoopkanalen op webshop.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
In het menu Secties, klik je op Voeg een nieuwe sectie toe.
De naam van de nieuwe sectie product-recommendations en klik op Sectie aanmaken.
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>

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:

Open het product.liquid-bestand in de directory Templates.
Voeg de volgende code toe aan het eind van het bestand:

{% section 'product-recommendations' %}

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

Open in het theme.js-bestand in de directory Activa.
Zoek deze coderegel:

sections.register('hero-section', theme.HeroSection);

Voeg onder die regel deze code toe:

sections.register('product-recommendations', theme.ProductRecommendations);

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;
})();

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:

Open in het theme.scss.liquid-bestand in de directory Activa.
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);
  }
}

Klik op Opslaan.

Productaanbevelingen op de productpagina tonen

Op deze pagina

Stap 1: maak een product-recommendations.liquid aan

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

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

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

Klaar om te beginnen met verkopen met Shopify?

Stap 1: maak een `product-recommendations.liquid` aan

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

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

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