Vis produktanbefalinger på produktsiden

Denne side blev udskrevet kl. Jun 10, 2023. Besøg https://help.shopify.com/da/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations for at se den aktuelle version.

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.

På denne side

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

  1. Gå til Webshop > Temaer i Shopify-administrator.

  2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

  1. Tryk på Butik i Shopify-appen.

  2. Tryk på Webshop i afsnittet Salgskanaler.

  3. Tryk på Administrer temaer.

  4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

  1. Tryk på Butik i Shopify-appen.

  2. Tryk på Webshop i afsnittet Salgskanaler.

  3. Tryk på Administrer temaer.

  4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

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

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

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" data-intent="related">

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