Productaanbevelingen op de productpagina tonen
In deze tutorial wordt beschreven hoe je productaanbevelingen aan je productpagina kunt toevoegen in het thema Debut. Zie Productaanbevelingen op productpagina's weergeven voor meer informatie over hoe productaanbevelingen werken.
Op deze pagina
Stap 1: maak een product-recommendations.liquid
aan
Desktop
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- In het menu Secties, klik je op Voeg een nieuwe sectie toe.
- De naam van de nieuwe sectie
product-recommendations
en klik op Sectie aanmaken. - Vervang alle content door de onderstaande code:
{% 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>
- Klik op Opslaan.
Wanneer de sectie met de productpagina wordt weergegeven, wordt recommendations.performed
weergegeven false
en wordt er een laadanimatie weergegeven in de gegenereerde HTML:
<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>
Gebruik deze code als je geen laadanimatie wilt laten zien:
{% 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>
Wanneer het bovenstaande gedeelte wordt weergegeven met je productpagina, wordt de gegenereerde HTML een div
-element zonder content:
<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">
Als de gebruiker alternatieve landinstellingen gebruikt, worden de landinstellingen opgenomen in de data-base-url
van de div. Bijvoorbeeld /fr/recommendations/products
.
iPhone
- Tik in de Shopify-app op de knop ….
- Tik in het gedeelte Verkoopkanalen op webshop.
- Tik op Thema's beheren.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- In het menu Secties, klik je op Voeg een nieuwe sectie toe.
- De naam van de nieuwe sectie
product-recommendations
en klik op Sectie aanmaken. - Vervang alle content door de onderstaande code:
{% 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>
- Klik op Opslaan.
Wanneer de sectie met de productpagina wordt weergegeven, wordt recommendations.performed
weergegeven false
en wordt er een laadanimatie weergegeven in de gegenereerde HTML:
<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>
Gebruik deze code als je geen laadanimatie wilt laten zien:
{% 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>
Wanneer het bovenstaande gedeelte wordt weergegeven met je productpagina, wordt de gegenereerde HTML een div
-element zonder content:
<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">
Als de gebruiker alternatieve landinstellingen gebruikt, worden de landinstellingen opgenomen in de data-base-url
van de div. Bijvoorbeeld /fr/recommendations/products
.
Android
- Tik in de Shopify-app op de knop ….
- Tik in het gedeelte Verkoopkanalen op webshop.
- Tik op Thema's beheren.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- In het menu Secties, klik je op Voeg een nieuwe sectie toe.
- De naam van de nieuwe sectie
product-recommendations
en klik op Sectie aanmaken. - Vervang alle content door de onderstaande code:
{% 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>
- Klik op Opslaan.
Wanneer de sectie met de productpagina wordt weergegeven, wordt recommendations.performed
weergegeven false
en wordt er een laadanimatie weergegeven in de gegenereerde HTML:
<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>
Gebruik deze code als je geen laadanimatie wilt laten zien:
{% 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>
Wanneer het bovenstaande gedeelte wordt weergegeven met je productpagina, wordt de gegenereerde HTML een div
-element zonder content:
<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">
Als de gebruiker alternatieve landinstellingen gebruikt, worden de landinstellingen opgenomen in de data-base-url
van de div. Bijvoorbeeld /fr/recommendations/products
.
Stap 2: De sectie opnemen in je product.liquid
-template
Om productaanbevelingen onderaan je productpagina weer te geven, voeg je de sectie onderaan je templates/product.liquid
-bestand toe:
- Open het product.liquid-bestand in de directory Templates.
- Voeg de volgende code toe aan het eind van het bestand:
{% section 'product-recommendations' %}
- Klik op Opslaan.
Stap 3: je theme.js
-bestand bewerken om de aanbevelingen asynchroon te laden
Je moet aanbevelingen laden in de lege container die de sectie op de productpagina heeft gemaakt. Gebruik JavaScript om een HTTP-GET-aanvraag in te <base_url>?section_id=<section_id>&product_id=<product_id>
.
- Open in het theme.js-bestand in de directory Activa.
- Zoek deze coderegel:
sections.register('hero-section', theme.HeroSection);
- Voeg onder die regel deze code toe:
sections.register('product-recommendations', theme.ProductRecommendations);
- Voeg de volgende code toe aan het eind van het bestand:
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;
})();
- Klik op Opslaan.
Stap 4: je theme.scss.liquid
-bestand bewerken om de laadanimatie aan te maken (optioneel)
Als je het fragment hebt gebruikt waarmee een laadanimatie wordt uitgevoerd in het gedeelte met productaanbevelingen, voeg je de volgende code onderaan je assets/theme.scss.liquid
-bestand toe:
- Open in het theme.scss.liquid-bestand in de directory Activa.
- Voeg deze code toe aan het eind van het bestand:
.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);
}
}
- Klik op Opslaan.