Vis produktanbefalinger på produktsiden

Denne vejledning beskriver, hvordan du kan føje produktanbefalinger til produktsiderne i dit Debut-tema. Du kan få mere at vide om, hvordan produktanbefalinger fungerer, under Viser produktanbefalinger på produktsider.

Bemærk: De nyeste versioner af følgende Shopify-temaer omfatter produktanbefalinger som standard:

  • Boundless
  • Brooklyn
  • Debut
  • Minimal
  • Narrative
  • Simple
  • Venture

Hvis du bruger en ældre version af et af disse temaer, kan du vise produktanbefalinger, når du har opdateret dit tema i stedet for at skulle tilpasse temaets kode.

Trin 1: Opret et product-recommendations.liquid-afsnit

  1. Klik på Opret et nyt afsnit i mappen Afsnit.

  2. Navngiv det nye product-recommendations-afsnit, og klik på Opret afsnit.

  3. Erstat alt indholdet med nedenstående kode:

{% 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 på Gem.

Når afsnittet gengives med produktsiden, vil recommendations.performed være false. Dette medfører, at den generede HTML vil vise en indlæsningsanimation:

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

Bemærk: De anbefalede produkter skal indlæses asynkront ved hjælp af JavaScript. Du indlæser dem i Trin 3: Rediger din theme.js-fil for at indlæse anbefalingerne asynkront.

Hvis du ikke vil vise en indlæsningsanimation, skal du bruge denne kode i stedet:

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

Når ovenstående afsnit gengives sammen med din produktside, vil den generede HTML være et div-element uden indhold:

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

Hvis brugeren anvender en alternativ landestandard, inkluderes landestandarden i div'ens data-base-url. For eksempel: /fr/recommendations/products.

Trin 2: Medtag afsnittet i din product.liquid-skabelon

Hvis du vil vise produktanbefalinger nederst på produktsiden, skal du medtage afsnittet i bunden af templates/product.liquid-filen:

  1. Åbn filen product.liquid i mappen Skabeloner.

  2. Tilføj følgende kode nederst i filen:

{% section 'product-recommendations' %}
  1. Klik på Gem.

Trin 3: Rediger din theme.js-fil for at indlæse anbefalingerne asynkront

Du skal indlæse anbefalingerne i den tomme container, som dette afsnit har oprettet på produktsiden. Brug JavaScript til at lave en HTTP GET-anmodning til <base_url>?section_id=<section_id>&product_id=<product_id>.

  1. Åbn filen theme.js i mappen Aktiver.

  2. Find denne kodelinje:

sections.register('hero-section', theme.HeroSection);
  1. Tilføj denne kode under linjen:
sections.register('product-recommendations', theme.ProductRecommendations);
  1. Tilføj følgende kode nederst i filen:
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 på Gem.

Trin 4: Rediger din theme.scss.liquid-fil for at oprette indlæsningsanimationen (valgfrit)

Hvis du brugte det kodestykke, der viser en indlæsningsanimation i dit afsnit med produktanbefalinger, skal du tilføje følgende kode i bunden af din assets/theme.scss.liquid-fil:

  1. Åbn filen theme.scss.liquid i mappen Aktiver.

  2. Tilføj denne kode nederst i filen:

.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 på Gem.

Er du klar til at begynde at sælge med Shopify?

Prøv det gratis