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

  1. In het menu Secties, klik je op Voeg een nieuwe sectie toe.

  2. De naam van de nieuwe sectie product-recommendations en klik op Sectie aanmaken.

  3. Vervang alle content door de onderstaande code:

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

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

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

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

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

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis