Gratis cadeau laten kiezen vanaf een bestelbedrag

Wil je klanten vanaf een bepaald bestelbedrag een gratis cadeau laten kiezen? Bijvoorbeeld: bij een bestelling vanaf € 50 kiest de klant een tote bag, een proefzakje of een reep. Dat stel je in met een prijsregel op basis van het template Gratis productactie.

Zo werkt het:

1. In de prijsregel stel je het minimumbedrag in en kies je welke producten de klant als cadeau mag kiezen.
2. Haalt de winkelwagen het minimumbedrag, dan staan de cadeaus als aanbod klaar in de winkelwagen. Ze worden niet automatisch toegevoegd.
3. De klant kiest een cadeau in je webshop. De webshop voegt dat product toe aan de winkelwagen en de prijsregel zet de prijs op € 0,00.

De cadeaukeuze komt in je webshop of winkelwagen. Hoe die eruitziet, stem je af met ons of met je websitebouwer. Bouwen wij je webshop, laat dan weten hoe je het wilt hebben, dan zetten we het erin. We laten je ook graag zien hoe andere klanten het doen, zoals Bookies en DiamondsByMe. Bouw je zelf? Onderaan deze pagina bij Voor developers staat hoe het werkt.

Prijsregel toevoegen

Ga in de Afosto-beheeromgeving naar Bestellingen > Prijsregels en klik rechtsboven op Toevoegen. Kies Begin met een template. Meer over prijsregels in het algemeen lees je in Kortingen en prijsregels.

Selecteer het template Gratis productactie.

Periode en naam

Bovenaan staat Prijsregel actief al aan. Wil je de actie alleen in een bepaalde periode laten lopen? Vul dan een Ingangsdatum en een Vervaldatum in. Laat de vervaldatum leeg als de actie blijft doorlopen.

Geef de prijsregel daarna een duidelijke naam, bijvoorbeeld "Kies je gratis cadeau vanaf € 50". Klanten zien deze naam in hun winkelwagen of checkout, en op de bestelling staat hij als omschrijving bij het gratis product. Verkoop je in meer talen, dan voeg je via Vertalingen de naam per taal toe.

Als klant: koopt producten vanaf een bedrag

Het template heeft de conditie Koopt producten al toegevoegd. Stel hem zo in:

• Laat Selectie van producten op Alle producten staan.
• Kies Aankoopbedrag in plaats van Aantal producten.
• Kies bij Valuta voor Euro (€).
• Vul bij Minimum het bedrag in vanaf wanneer de klant een cadeau mag kiezen, bijvoorbeeld 50,00.
• Laat Maximum (t/m) leeg.

In de samenvatting rechts zie je dat het bedrag over het subtotaal van de bestelling gaat.

Dan krijgt klant: gratis producten

Onder Dan krijgt klant staat het blok Gratis producten. Zoek via Zoek een product de producten die de klant als cadeau mag kiezen en voeg ze een voor een toe. Bij Aantal gratis stel je in hoeveel stuks van dat product gratis zijn. Voor een cadeau is dat meestal 1.

Heeft een cadeau varianten, zoals een proefzakje in drie smaken? Elke variant is een eigen product met een eigen SKU. Voeg dan elke variant apart toe. De klant kiest zo bijvoorbeeld uit proefzakje chocolade, vanille of aardbei.

De Extra instellingen kun je voor een cadeau-actie uit laten staan. Klik op Toevoegen. De prijsregel staat nu in het overzicht en is direct actief.

Het cadeau op de bestelling

Kiest de klant een cadeau, dan komt het product in de winkelwagen met 100% korting. Op de bestelling staat het cadeau als regel van € 0,00, met de oorspronkelijke prijs doorgestreept en de naam van de prijsregel als omschrijving. Zo zie je in het magazijn ook welk cadeau er mee moet.

Hier moet je op letten

We hebben deze opzet getest. Een paar dingen regelt de webshop. Bouwen wij je webshop, dan nemen we dit mee. Werk je met een andere websitebouwer, stuur deze pagina dan door.

De prijsregel beperkt het aantal cadeaus niet. Bied je drie cadeaus aan, dan zijn ze alle drie gratis als ze alle drie in de winkelwagen komen. Mag de klant er maar één kiezen, dan toont de webshop één keuzelijst en vervangt hij het cadeau als de klant een ander kiest.

Het cadeau telt mee voor het minimumbedrag. In onze test lag een winkelwagen met € 49,42 aan producten onder de grens van € 50, maar met een cadeau van € 3,45 erbij kwam hij erboven. Daarom kijkt de webshop naar het bedrag zonder cadeau.

Zakt de bestelling onder het minimumbedrag, dan vervalt de korting. Het cadeau blijft dan in de winkelwagen staan tegen de normale prijs. Daarom haalt de webshop het cadeau eruit zodra het bedrag zonder cadeau onder het minimum zakt.

Eén stuk per cadeau is gratis. Met Aantal gratis op 1 kost een tweede stuk van hetzelfde cadeau de normale prijs. Daarom staat het aantal van een cadeau in de webshop vast op 1.

De prijsregel ziet niet of een product als cadeau gekozen is. Staat een cadeauproduct in de winkelwagen en haalt de bestelling het minimumbedrag, dan is één stuk gratis, ook als de klant het als gewoon product kocht.

Voor developers

Bouw je je webshop met de storefront-client @afosto/storefront? Het aanbod staat in cart.incentives. Hieronder lees je wat je daar wel en niet uit haalt, met een volledig voorbeeld voor "kies er één". We hebben het voorbeeld getest met versie 4.0.5 van de client, zonder andere kortingen in de winkelwagen.

Wat cart.incentives bevat

Elk aanbod heeft alleen een quantity en een product met sku, label, gtin, slug, mpn, brand, images en filters. Er zit geen prijs in, geen naam of id van de prijsregel en geen minimumbedrag. Dat betekent:

• Wil je "ter waarde van € 3,45" tonen, dan haal je de prijs apart op bij het product.
• Een tekst als "Nog € 7,50 tot je gratis cadeau" kan alleen als je het minimumbedrag zelf in je webshop instelt.
• Lopen er meerdere cadeau-acties tegelijk, dan zie je niet welk cadeau bij welke prijsregel hoort.

Een cadeau dat al in de winkelwagen zit, verdwijnt uit het aanbod. De andere cadeaus blijven staan. Een lege lijst betekent dus dat de winkelwagen het minimumbedrag niet haalt, of dat alle cadeaus al in de winkelwagen zitten. Dat verschil haal je niet uit cart.incentives. Daarvoor heb je de markering en de controle van het bedrag hieronder nodig.

Het cadeau herkennen

Geef bij het toevoegen een markering mee in metaData, bijvoorbeeld { gift: true }. Die lees je terug in item.details[].metaData. De waarde komt terug als tekst: { gift: 'true' }.

Herken het cadeau niet aan de korting in adjustments. Zakt de winkelwagen onder het minimumbedrag, dan verdwijnt die korting, en juist dan moet je het cadeau terugvinden om het te verwijderen. De omschrijving van de korting is bovendien de naam van de prijsregel, en die kan per taal verschillen. Een vaste lijst met cadeau-SKU's in je webshop werkt ook.

Het minimumbedrag controleren

Omdat het cadeau zelf meetelt, vergelijkt je webshop het bedrag zonder cadeau met het minimumbedrag. Zet dat minimumbedrag in de configuratie van je webshop: de API geeft het niet terug. Bedragen zijn in centen.

Vergelijk niet met cart.total, want daar zitten ook de verzendkosten in. In onze test kwam een winkelwagen met € 49,42 aan producten met verzending op € 55,37 uit, en dan zou het cadeau ten onrechte blijven staan.

De keuze opbouwen

• Zit er nog geen cadeau in de winkelwagen? Toon alle cadeaus uit cart.incentives als één keuze, met radioknoppen of een keuzelijst.
• Zit er al een cadeau in? Toon de keuze als "wisselen": het gekozen cadeau uit cart.items plus de cadeaus die nog in cart.incentives staan.
• Wisselt de klant? Verwijder eerst het oude cadeau en voeg daarna het nieuwe toe. Doe je het andersom, dan zijn er even twee cadeaus gratis.
• Verandert de winkelwagen? Controleer daarna het bedrag zonder cadeau en verwijder het cadeau als dat onder het minimum zakt.
• Toon bij het cadeau geen aantal-teller.

const MINIMUM = 5000; // € 50,00 in centen, gelijk aan het minimum in de prijsregel

const isGift = (detail) => detail.metaData?.gift === 'true';

// Het gekozen cadeau, herkend aan de markering
const getGift = (cart) => {
  const item = cart.items.find((cartItem) => cartItem.details.some(isGift));
  if (!item) return null;
  const ids = item.details.filter(isGift).flatMap((detail) => detail.ids);
  return { sku: item.sku, label: item.label, ids };
};

// Het bedrag zonder cadeau, in centen
const getAmountWithoutGift = (cart) =>
  cart.items
    .flatMap((cartItem) => cartItem.details)
    .filter((detail) => !isGift(detail))
    .reduce((sum, detail) => sum + detail.pricing.amount * detail.ids.length, 0);

// De keuze: het gekozen cadeau plus de rest van het aanbod
const getGiftChoice = (cart) => {
  const gift = getGift(cart);
  if (getAmountWithoutGift(cart) < MINIMUM) return { gift, options: [] };
  const offered = cart.incentives.map(({ product }) => ({ sku: product.sku, label: product.label }));
  return { gift, options: gift ? [{ sku: gift.sku, label: gift.label }, ...offered] : offered };
};

// Kiezen of wisselen: eerst het oude cadeau eruit, dan het nieuwe erin
const chooseGift = async (cart, sku) => {
  const gift = getGift(cart);
  if (gift?.sku === sku) return cart;
  if (gift) await client.removeCartItems(gift.ids);
  return client.addCartItems([{ sku, quantity: 1, metaData: { gift: true } }]);
};

// Na elke wijziging in de winkelwagen: onder het minimum gaat het cadeau eruit
const syncGift = async (cart) => {
  const gift = getGift(cart);
  if (gift && getAmountWithoutGift(cart) < MINIMUM) return client.removeCartItems(gift.ids);
  return cart;
};

Roep syncGift(cart) aan na elke wijziging in de winkelwagen, en toon de keuze met getGiftChoice(cart).

Stappen

1. Ga naar Bestellingen > Prijsregels en klik op Toevoegen.

2. Kies Begin met een template en daarna Gratis productactie.

3. Stel eventueel een ingangs- en vervaldatum in en geef de prijsregel een naam die je klant mag zien.

4. Kies bij Koopt producten voor Aankoopbedrag en vul het minimumbedrag in.

5. Voeg bij Gratis producten elk cadeau toe, elke variant apart, met Aantal gratis op 1.

6. Klik op Toevoegen.

7. Spreek met ons of je websitebouwer af hoe de cadeaukeuze in je webshop komt.