Visa produktrekommendationer på produktsidan

Den här sidan skrevs ut den Jun 10, 2023. Besök https://help.shopify.com/sv/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations för den aktuella versionen.

Denna handledning beskriver hur du lägger till produktrekommendationer på din produktsida i temat Debut. Se Visa produktrekommendationer på produktsidor för mer information om hur produktrekommendationer fungerar.

OBS! I de senaste versionerna av följande Shopify-teman ingår produktrekommendationer som standard:

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

Om du använder en äldre version av ett av dessa teman kan du visa produktrekommendationer när du har uppdaterat ditt tema istället för att anpassa koden.

På den här sidan

Steg 1: Skapa ett product-recommendations.liquid-avsnitt

  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.

  1. Från Shopify-appen klickar du på Butik.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera teman.

  4. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.

  1. Från Shopify-appen klickar du på Butik.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera teman.

  4. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.

  1. I katalogen Avsnitt klickar du på Lägg till ett nytt avsnitt.

  2. Döp det nya avsnittet till product-recommendations och klicka på Skapa avsnitt.

  3. Ersätt allt innehåll med koden nedan:

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

När avsnittet återges med produktsidan kommer recommendations.performed visas som false och genererad HTML kommer att visa en laddande animering:

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

OBS! De rekommenderade produkterna måste laddas asynkront med hjälp av JavaScript. Du laddar dem i Steg 3: Redigera din theme.js-fil för att ladda rekommendationerna asynkront.

Använd den här koden istället om du inte vill visa en laddande animering:

{% 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 ovanstående avsnitt återges med din produktsida kommer genererad HTML visas som ett div-element utan innehåll:

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

Om användaren använder en alternativ plats ingår platsen i data-base-url för div. Till exempel /fr/recommendations/products.

Steg 2: Inkludera avsnittet i din product.liquid-mall

Inkludera avsnittet längst ned i din templates/product.liquid-fil för att visa produktrekommendationer längst ned på din produktsida:

  1. Öppna filen product.liquid i katalogen Mallar.

  2. Lägg till följande kod längst ner i filen:

{% section 'product-recommendations' %}
  1. Klicka på Spara.

Steg 3: Redigera din theme.js-fil för att ladda rekommendationerna asynkront

Du måste ladda rekommendationer i den tomma behållaren som avsnittet skapade på produktsidan. Använd JavaScript för att göra en HTTP GET-förfrågan för <base_url>?section_id=<section_id>&product_id=<product_id>.

  1. Öppna filen theme.js i katalogen Tillgångar.

  2. Leta efter den här kodraden:

sections.register('hero-section', theme.HeroSection);
  1. Lägg till den här koden under den raden: 
sections.register('product-recommendations', theme.ProductRecommendations);
  1. Lägg till följande kod längst ner 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. Klicka på Spara.

Steg 4: Redigera din theme.scss.liquid-fil för att skapa den laddande animeringen (valfritt)

Om du använde fragmentet som visar en laddande animering i avsnittet produktrekommendationer lägger du till följande kod längst ned i din assets/theme.scss.liquid-fil:

  1. Öppna filen theme.scss.liquid i katalogen Tillgångar.

  2. Lägg till den här koden längst ner 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. Klicka på Spara.

Är du redo att börja sälja med Shopify?

Prova gratis