Voeg stappen (betaling) toe
Gepost op 19 januari om 14:00u, door hiranthi | 4 reacties | reageren
In Nederland ben je, als webshop, verplicht aan te geven hoeveel stappen je klant moet ondernemen voor de aankoop. Dat houdt dus in dat je aan moet geven bij welke stap de klant op dat moment is, welke stappen er al zijn geweest en welke er nog komen gaan.
In Shopp zit dit niet standaard gebakken, maar het is wel makkelijk toe te voegen. Om de stappen toe te voegen moeten custom templates zijn ingeschakeld.
Stappen toevoegen
We hebben de volgende bestanden nodig:
- cart.php
- checkout.php
- confirm.php
- thanks.php (nieuwe template, kan zijn dat je in de Instellingen van Shopp - onder Presentatie - eerst de nieuwe templates moet installeren)
- shopp.css
Eerste stap
Open cart.php en voeg (bovenin) de volgende code toe:
<ul id="shopp-steps">
<li>Stappen:</li>
<li class="current-step">1. Winkelmandje</li>
<li class="future-step">2. Uw gegevens</li>
<li class="future-step">3. Betalen/bevestigen</li>
<li class="future-step">4. Bevestiging</li>
</ul>Tweede stap
Open checkout.php en voeg (bovenin) de volgende code toe:
<ul id="shopp-steps">
<li>Stappen:</li>
<li class="past-step">1. Winkelmandje</li>
<li class="current-step">2. Uw gegevens</li>
<li class="future-step">3. Betalen/bevestigen</li>
<li class="future-step">4. Bevestiging</li>
</ul>Derde stap
De derde stap is de betaling óf de bevestiging. Dit is afhankelijk van de betalingsmethode die is geselecteerd. Gebruik je bijvoorbeeld de bankoverschrijving via Shopp, dan krijgt de bezoeker bij stap 3 de bevestiging. Heb je ook iDEAL geactiveerd en heeft je klant voor die betalingsmethode gekozen, dan krijgt hij/zij hier de betalingsschermen van iDEAL te zien.
Open confirm.php en voeg (bovenin) de volgende code toe:
<ul id="shopp-steps">
<li>Stappen:</li>
<li class="past-step">1. Winkelmandje</li>
<li class="past-step">2. Uw gegevens</li>
<li class="current-step">3. Betalen/bevestigen</li>
<li class="future-step">4. Bevestiging</li>
</ul>Vierde stap
Open thanks.php en voeg (bovenin) de volgende code toe:
<ul id="shopp-steps">
<li>Stappen:</li>
<li class="past-step">1. Winkelmandje</li>
<li class="past-step">2. Uw gegevens</li>
<li class="past-step">3. Betalen/bevestigen</li>
<li class="current-step">4. Bevestiging</li>
</ul>De CSS toevoegen
De weergave van de stappen moet natuurlijk wel een beetje opgeleukt worden. Hiervoor voeg je de volgende CSS toe:
#shopp ul#shopp-steps { width:100%; display:block; float:left; clear:both; margin:0 0 40px; } #shopp ul#shopp-steps li { display:block; float:left; padding:5px 10px 10px; font-weight:bold; line-height:1.2em; vertical-align:middle; } #shopp ul#shopp-steps li.past-step { color:#444; } #shopp ul#shopp-steps li.future-step {} #shopp ul#shopp-steps li.current-step { border-bottom:2px solid #fff000; font-size:1.2em; }
De CSS hierboven is de CSS die ik gebruik in mijn webshop 'Aan de deur wordt niet gekocht' (live webshop).
Navigeer in deze serie
Gerelateerde posts
- 06-11 | Nederlandse custom templates (Shopp)
- 14-10 | Shopp: Custom templates activeren en gebruiken
- 03-06 | Bankoverschrijving met Shopp
- 12-11 | Zoekwoorden maken van je tags
- 28-01 | Paginatitel (meta) wijzigen voor Shopp pagina's
4 reacties op “Voeg stappen (betaling) toe”
Trackbacks/Pingbacks
- Navigatie toevoegen aan je WordPress webshop | WordPress Dimensie
[...] webshop, en Hiranthi laat op een heldere manier zien hoe je dit zou kunnen doen, inclusief opmaak: betalings-navigatie toevoegen aan Shopp. Deel en bookmark [...]
Laat een reactie achter
-
Advertenties
Bedankt voor de blogs over deze plugin! Zag de plugin laatst en ziet er goed uit om te gebruiken voor webshops!
Hey, leuk! Dank je wel voor de post en leuk dat je me hier nog even over mailt!
Thanks! Ik ga het zeker toepassen op onze site!
Graag gedaan
Je had ernaar gevraagd dus leek het me wel vriendelijk om je even te laten weten dat de post erop stond 