Vis produktanbefalinger på produktsiden
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 på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk 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.