Visa produktrekommendationer på produktsidan

Den här sidan skrevs ut den Dec 04, 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.

På den här sidan

Steg 1: Skapa ett product-recommendations.liquid-avsnitt
Steg 2: Inkludera avsnittet i din product.liquid-mall
Steg 3: Redigera din theme.js-fil för att ladda rekommendationerna asynkront
Steg 4: Redigera din theme.scss.liquid-fil för att skapa den laddande animeringen (valfritt)

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

Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
I katalogen Avsnitt klickar du på Lägg till ett nytt avsnitt.
Döp det nya avsnittet till product-recommendations och klicka på Skapa avsnitt.
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>

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>

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.

Från Shopify-appen trycker du på knappen ….
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
I katalogen Avsnitt klickar du på Lägg till ett nytt avsnitt.
Döp det nya avsnittet till product-recommendations och klicka på Skapa avsnitt.
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>

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>

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.

Från Shopify-appen trycker du på knappen ….
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
I katalogen Avsnitt klickar du på Lägg till ett nytt avsnitt.
Döp det nya avsnittet till product-recommendations och klicka på Skapa avsnitt.
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>

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>

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:

Öppna filen product.liquid i katalogen Mallar.
Lägg till följande kod längst ner i filen:

{% section 'product-recommendations' %}

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

Öppna filen theme.js i katalogen Tillgångar.
Leta efter den här kodraden:

sections.register('hero-section', theme.HeroSection);

Lägg till den här koden under den raden:

sections.register('product-recommendations', theme.ProductRecommendations);

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;
})();

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:

Öppna filen theme.scss.liquid i katalogen Tillgångar.
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);
  }
}

Klicka på Spara.

Visa produktrekommendationer på produktsidan

På den här sidan

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

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

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

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

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

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

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

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

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