Visa produktrekommendationer på produktsidan

Varning

Detta är en avancerad handledning och den stöds inte av Shopify. Kunskap om webbdesignspråk som HTML, CSS, JavaScript och Liquid krävs. Om du behöver hjälp kan du anlita en Shopify-partner.

Varning

Vintage-teman är inte tillgängliga i temabutiken. Vintage-teman har inte funktionerna som ingår i Shopifys Online Store 2.0-teman och Shopifys gratis vintage-teman får inte uppdateringar, förutom säkerhetsfixar.

Observera

Denna anpassning är för Shopifys vintageteman och gäller inte teman för Online Store 2.0.

• Hitta temats arkitekturversion
• Utforska temaanpassningar för Online Store 2.0

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.

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

Dator

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.
3. I katalogen Avsnitt klickar du på Lägg till ett nytt avsnitt.
4. Döp det nya avsnittet till product-recommendations och klicka på Skapa avsnitt.
5. 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>

Observera

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.

iPhone

1. Från Shopify-appen trycker du på knappen ….
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.
5. I katalogen Avsnitt klickar du på Lägg till ett nytt avsnitt.
6. Döp det nya avsnittet till product-recommendations och klicka på Skapa avsnitt.
7. 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>

Observera

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.

Android

1. Från Shopify-appen trycker du på knappen ….
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.
5. I katalogen Avsnitt klickar du på Lägg till ett nytt avsnitt.
6. Döp det nya avsnittet till product-recommendations och klicka på Skapa avsnitt.
7. 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>

Observera

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.