Hvordan bruke order bump med Vipps/Klarna

Ettersom det i utgangspunktet ikke er mulig å bruke order bump med Vipps/Klarna, må vi være litt kreative for å finne en god løsning. 

Måten vi kan få til dette på er å lage 2 ulike offers i Kajabi. Det ene offeret inneholder ett produkt og det andre inneholder både produktet og innholdet fra order bumpen. Begge disse offerene legger du inn som ulike produkter i Edpay. 

Det vi ønsker skal skje er at betalingsknappene endres når kunden trykker på "order bump". Først skal vi vise knappen hvor man betaler for ett produkt, og når order bump er aktivt vil knappen endres til det andre offeret som inkluderer 2 produkter.

Dette kan vi gjøre ved å legge inn følgende kodesnutt i "Footer Tracking Code" (Settings -> Checkout settings). Har du annen kode her fra før, kan du lime inn dette under eksisterende kode:

<script> // Order bump with Klarna and Vipps v2
  $(document).ready(function (){
    $("#vipps1").prependTo(".checkout-panel__btn-wrapper");
    $("#vipps2").prependTo(".checkout-panel__btn-wrapper");
    $("#klarna1").prependTo(".checkout-panel__btn-wrapper");
    $("#klarna2").prependTo(".checkout-panel__btn-wrapper");
    $("#vipps1").show();
    $("#klarna1").show();
  });

$("#checkout_offer_include_order_bump").click(function(){
    if($("#checkout_offer_include_order_bump").is(':checked')){
        $("#vipps2").show();
        $("#klarna2").show();
        $("#vipps1").hide();
        $("#klarna1").hide();
    }else{
        $("#vipps2").hide();
        $("#klarna2").hide();
        $("#vipps1").show();
        $("#klarna1").show();
    }});
</script>

 
Deretter finner du frem linkene til hvert produkt i Edpay. 

Når du har disse endrer du LINK1 og LINK2 i kodesnuttene under. LINK1 er produktet uten order bump og LINK2 er produktet som inkluderer order bump. 

For Vipps:

<div id="vipps1" style="display: none;">
    <a id="vipps-knapp1" class="vipps-knapp" href="LINK1">
    <img src="https://app.edpay.no/buttons/vipps_betal.png" style="max-width: 309px; border-radius: 4px;"/></a>
</div>
<div id="vipps2" style="display: none;">
    <a id="vipps-knapp2" class="vipps-knapp" href="LINK2">
    <img src="https://app.edpay.no/buttons/vipps_betal.png" style="max-width: 309px; border-radius: 4px;" /></a>
</div>

For Klarna

<div id="klarna1" style="display: none;">
    <a id="klarna-knapp1" class="vipps-knapp" href="LINK1">
    <img src="https://app.edpay.no/buttons/klarna_checkout.png" style="max-width: 309px; border-radius: 4px;"/></a>
</div>
<div id="klarna2" style="display: none;">
    <a id="klarna-knapp2" class="vipps-knapp" href="LINK2">
    <img src="https://app.edpay.no/buttons/klarna_checkout.png" style="max-width: 309px; border-radius: 4px;" /></a>
</div>

Når du har gjort det kan du lime inn kodesnutten(e) under "Source code" under "Checkout description":  

Når kunden nå trykker på order bump på checkoutsiden din, vil Vipps-/Klarna knappene endre seg til offeret som inkluderer order bump 🥳 

Hvis noe var uklart må du ikke nøle med å sende en epost til [email protected]! 😊