Produktempfehlungen auf der Produktseite anzeigen

In diesem Tutorial erfährst du, wie du im Debut-Theme Produktempfehlungen zu deiner Produktseite hinzufügen kannst. Mehr Informationen über Produktempfehlungen erhältst du unter Produktempfehlungen auf Produktseiten anzeigen.

Schritt 1: Abschnitt product-recommendations.liquid erstellen

  1. Klicke im Verzeichnis Abschnitte auf Neuen Abschnitt hinzufügen.

  2. Benenne den neuen Abschnitt product-recommendations und klicke auf Abschnitt erstellen.

  3. Ersetze den gesamten Inhalt durch den unten aufgeführten 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. Klicke auf Speichern.

Wenn der Abschnitt mit der Produktseite gerendert wird, ist recommendations.performed gleich false. Der generierte HTML-Code zeigt dann eine Ladeanimation an:

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

Wenn keine Ladeanimation angezeigt werden soll, verwende stattdessen diesen 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.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>

Wenn der oben aufgeführte Abschnitt mit deiner Produktseite gerendert wird, ist der generierte HTML-Code ein div-Element ohne Inhalt:

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

Wenn der Benutzer ein alternatives Gebietsschema verwendet, ist das Gebietsschema in data-base-url der div-Funktion enthalten. Beispiel: /fr/recommendations/products.

Schritt 2: Abschnitt in die Vorlage product.liquid einschließen

Um Produktempfehlungen am Ende deiner Produktseite anzuzeigen, füge den Abschnitt am Ende der Datei templates/product.liquid ein:

  1. Öffne im Verzeichnis Vorlagen die Datei product.liquid.

  2. Füge den folgenden Code am Ende der Datei hinzu:

{% section 'product-recommendations' %}
  1. Klicke auf Speichern.

Schritt 3: Datei theme.js bearbeiten, um Empfehlungen asynchron zu laden

Du musst Empfehlungen in den leeren Container laden, welcher vom Abschnitt auf der Produktseite erstellt wurde. Verwende JavaScript, um eine HTTP-GET-Anfrage für <base_url>?section_id=<section_id>&product_id=<product_id> zu erstellen.

  1. Öffne im Verzeichnis Assets die Datei theme.js.

  2. Suche nach dieser Codezeile:

sections.register('hero-section', theme.HeroSection);
  1. Füge diesen Code unter dieser Zeile hinzu:
sections.register('product-recommendations', theme.ProductRecommendations);
  1. Füge den folgenden Code am Ende der Datei hinzu:
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. Klicke auf Speichern.

Schritt 4: Datei theme.scss.liquid bearbeiten, um die Ladeanimation zu erstellen (optional)

Wenn du das Snippet verwendest, das im Abschnitt der Produktempfehlungen eine Ladeanimation anzeigt, füge den folgenden Code am Ende der Datei assets/theme.scss.liquid hinzu:

  1. Öffne im Verzeichnis Assets die Datei theme.scss.liquid.

  2. Füge am Ende der Datei diesen Code hinzu:

.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. Klicke auf Speichern.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren