Vis produktanbefalinger på produktsiden
Denne siden ble skrevet ut den Apr 23, 2024. Gå til https://help.shopify.com/nb/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations for nyeste versjon.
Advarsel
Eldre temaer er ikke tilgjengelige i Theme Store. Disse temaene har ikke funksjonene som er inkludert i Shopifys Online Store 2.0-temaer , og Shopifys gratis eldre temaer mottar ikke oppdateringer ut over sikkerhetsrettelser.
Merk
Denne tilpasningen er for eldre Shopify-temaer, og gjelder ikke for Nettbutikk 2.0-temaer.
Denne opplæringen beskriver hvordan du legger til produktanbefalinger på produktsiden i Debut -temaet. For å finne ut mer om hvordan produktanbefalinger fungerer, kan du se Vise produktanbefalinger på produktsider .
Trinn 1: Opprett en product-recommendations.liquid
-seksjon
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
Klikk på Legg til en ny seksjon i Seksjoner -katalogen.
Navngi den nye seksjonen product-recommendations
, og klikk på Opprett seksjon .
Erstatt alt innholdet med koden under:
{% 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>
Klikk på Lagre .
Når seksjonen gjengis med produktsiden, vil recommendations.performed
være false
, og den genererte HTML-koden vil vise en innlastingsanimasjon:
<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>
Hvis du ikke vil vise en innlastingsanimasjon, bruker du i stedet denne koden:
{% 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 seksjonen ovenfor gjengis med produktsiden, vil den genererte HTML-koden være et div
-element uten innhold:
<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" >
Hvis brukeren bruker en alternativ locale, vil localen være inkludert i div-ens data-base-url
. For eksempel /fr/recommendations/products
.
Trykk på … -knappen fra Shopify-appen .
I Salgskanaler -seksjonen trykker du på Nettbutikk .
Trykk på Administrer temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
Klikk på Legg til en ny seksjon i Seksjoner -katalogen.
Navngi den nye seksjonen product-recommendations
, og klikk på Opprett seksjon .
Erstatt alt innholdet med koden under:
{% 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>
Klikk på Lagre .
Når seksjonen gjengis med produktsiden, vil recommendations.performed
være false
, og den genererte HTML-koden vil vise en innlastingsanimasjon:
<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>
Hvis du ikke vil vise en innlastingsanimasjon, bruker du i stedet denne koden:
{% 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 seksjonen ovenfor gjengis med produktsiden, vil den genererte HTML-koden være et div
-element uten innhold:
<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" >
Hvis brukeren bruker en alternativ locale, vil localen være inkludert i div-ens data-base-url
. For eksempel /fr/recommendations/products
.
Trykk på … -knappen fra Shopify-appen .
I Salgskanaler -seksjonen trykker du på Nettbutikk .
Trykk på Administrer temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
Klikk på Legg til en ny seksjon i Seksjoner -katalogen.
Navngi den nye seksjonen product-recommendations
, og klikk på Opprett seksjon .
Erstatt alt innholdet med koden under:
{% 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>
Klikk på Lagre .
Når seksjonen gjengis med produktsiden, vil recommendations.performed
være false
, og den genererte HTML-koden vil vise en innlastingsanimasjon:
<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>
Hvis du ikke vil vise en innlastingsanimasjon, bruker du i stedet denne koden:
{% 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 seksjonen ovenfor gjengis med produktsiden, vil den genererte HTML-koden være et div
-element uten innhold:
<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" >
Hvis brukeren bruker en alternativ locale, vil localen være inkludert i div-ens data-base-url
. For eksempel /fr/recommendations/products
.
Trinn 2: Inkluder seksjonen i product.liquid
-malen Hvis du vil vise produktanbefalinger nederst på produktsiden, inkluderer du seksjonen nederst i templates/product.liquid
-filen:
Åpne product.liquid -filen i Maler -katalogen.
Lim følgende kode nederst i filen:
{% section 'product-recommendations' %}
Klikk på Lagre .
Trinn 3: Rediger theme.js
-filen for å laste anbefalingene asynkront Du må laste inn anbefalinger i den tomme beholderen som seksjonen gjengir på produktsiden. Bruk JavaScript til å gjøre en HTTP GET-forespørsel til <base_url>?section_id=<section_id>&product_id=<product_id>
.
Åpne theme.js -filen i Materiell -katalogen.
Finn denne kodelinjen:
sections . register ( ' hero-section ' , theme . HeroSection );
Under denne linjen legger du til denne koden:
sections . register ( ' product-recommendations ' , theme . ProductRecommendations );
Lim følgende kode nederst 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 ;
})();
Klikk på Lagre .
Trinn 4: Rediger theme.scss.liquid
-filen for å opprette innlastingsanimasjonen (valgfritt) Hvis du har brukt kodebiten som viser en innlastingsanimasjon i seksjonen med produktanbefalinger, legger du til følgende kode nederst i assets/theme.scss.liquid
-filen:
Åpne theme.scss.liquid -filen i Materiell -katalogen.
Nederst i filen legger du til følgende kode:
.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 );
}
}
Klikk på Lagre .