Deze pagina is afgedrukt op Mar 19, 2024. Ga voor de huidige versie naar https://help.shopify.com/nl/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations.
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.
Ga in het Shopify-beheercentrum naar Onlinewinkel > 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:
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:
Gebruik deze code als je geen laadanimatie wilt laten zien:
Wanneer het bovenstaande gedeelte wordt weergegeven met je productpagina, wordt de gegenereerde HTML een div-element zonder content:
Als de gebruiker alternatieve landinstellingen gebruikt, worden de landinstellingen opgenomen in de data-base-url van de div. Bijvoorbeeld /fr/recommendations/products.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
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:
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:
Gebruik deze code als je geen laadanimatie wilt laten zien:
Wanneer het bovenstaande gedeelte wordt weergegeven met je productpagina, wordt de gegenereerde HTML een div-element zonder content:
Als de gebruiker alternatieve landinstellingen gebruikt, worden de landinstellingen opgenomen in de data-base-url van de div. Bijvoorbeeld /fr/recommendations/products.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
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:
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:
Gebruik deze code als je geen laadanimatie wilt laten zien:
Wanneer het bovenstaande gedeelte wordt weergegeven met je productpagina, wordt de gegenereerde HTML een div-element zonder content:
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:
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:
Voeg onder die regel deze code toe:
Voeg de volgende code toe aan het eind van het bestand:
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.