Voeg stappen (betaling) toe
Gepost op 19 januari 2010 om 14:00u, door hiranthi | 13 reacties | reageren
loading...
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).
13 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
Mooi hoor!
Dank voor deze tip.
Ik zag trouwens dat je de addwng website in zijn geheel achter SSL hebt gedaan.
Ik krijg DUS eerst een waarschuwing dat ik een certificaat moet accepteren.
Ben je niet bang dat veel mensen afhaken na zo'n mededeling?
Ik had er een SSL certificaat op zitten, maar nog geen tijd gehad om er een nieuwe op te gooien.
OK, dus die waarschuwing krijg je niet altijd wanneer je een SSL beveiligde website bezoekt?
Dat zou persperctief bieden, want dan zou ik mijn hele site achter de SSL kunnen "plempen" en vanaf de http een forward maken.
Nee, die krijg je alleen als er geen geldig SSL certificaat is gekoppeld.
Ik heb zelf een plugin op addwng.nl gezet om alles achter de SSL te hebben, weet zo niet welke (en kan 't nu ook even niet nakijken).
Ik weet niet of het bij jou in de instellingen (van je hostingaccount) kunt instellen, maar ik heb ingesteld dat http en https de map delen.
OK, dank!
Als je de naam van die plugin nog zou kunnen opsnorren zou ik dat waarderen.
Dan hak ik een knoop door.
Dank, goed weekend en groeten!
De plugin die ik gebruik heet Force SSL, door Mr. WordPress. Kan 'm zo niet vinden tussen de plugins op wp.org (wel eentje met dezelfde naam, maar die is ongelooflijk oud).
Thx!
Is idd niets op te vinden.
Ik kijk tzt wel eens, ben inmiddels online met de hele site achter een SSL certificaat.
Dank en goede zondag!
Ik bedacht me net dat die code in een artikel op een andere site heeft gestaan, maar ik zou zo niet meer weten welke site dat ook weer was..
Ik mail je de plugin wel even
Dag Hiranthi,
Hartelijk dank voor deze en alle andere shopp uitleg/tutorials die je hier hebt staan. Ze hebben mij erg veel geholpen.
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 