Visa produktrekommendationer på produktsidan
Den här sidan skrevs ut den Mar 29, 2024. 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.
Varning
Vintage-teman är inte tillgängliga i temabutiken. Dessa teman har inte funktionerna som ingår i Shopifys Online Store 2.0-teman och Shopifys gratis Vintage-teman får inte uppdateringar utöver säkerhetsfixar.
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
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 .