Visa produktrekommendationer på produktsidan
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
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.
Från Shopify-appen klickar du på Butik.
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.
Från Shopify-appen klickar du på Butik.
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>
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:
Ö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.