Hiranthi's weblog

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. <a title="Zie ook Winkelwagen in een Lightbox variant" href="http://hiranthi.nl/tutorials/winkelwagen-lightbox/">Winkelmandje</a></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:

#<a title="Zie ook Shopp: iDEAL werkt ineens niet meer" href="http://hiranthi.nl/wordpress/shopp-ideal-werkt-niet-meer/">shopp</a> ul#<a title="Zie ook Shopp en iDEAL via banken" href="http://hiranthi.nl/wordpress/shopp-en-ideal-via-banken/">shopp</a>-steps { width:100%; display:block; float:left; clear:both; margin:0 0 40px; }
#<a title="Zie ook Shopp: iDEAL werkt ineens niet meer - 2" href="http://hiranthi.nl/wordpress/shopp-ideal-werkt-ineens-niet-meer-2/">shopp</a> ul#<a title="Zie ook Bankoverschrijving met Shopp - 2" href="http://hiranthi.nl/wordpress/bankoverschrijving-met-shopp-2/">shopp</a>-steps li { display:block; float:left; padding:5px 10px 10px; font-weight:bold; line-height:1.2em; vertical-align:middle; }
#<a title="Zie ook Productenwidget met thumbnails" href="http://hiranthi.nl/tutorials/productenwidget-met-thumbnails/">shopp</a> ul#<a title="Zie ook Paginatitel (meta) wijzigen voor Shopp pagina's" href="http://hiranthi.nl/tutorials/paginatitel-meta-wijzigen-shopp-paginas/">shopp</a>-steps li.past-step { color:#444; }
#<a title="Zie ook Product slider voor je webshop" href="http://hiranthi.nl/tutorials/product-slider-webshop/">shopp</a> ul#<a title="Zie ook Nieuwe versie van de Shopp Wishlist uitgebracht" href="http://hiranthi.nl/freebies/nieuwe-versie-shopp-wishlist-uitgebracht/">shopp</a>-steps li.future-step {}
#<a title="Zie ook AssurePay betalingsmethode voor Shopp" href="http://hiranthi.nl/freebies/assurepay-betalingsmethode-voor-shopp/">shopp</a> ul#<a title="Zie ook WordCampNL 2010" href="http://hiranthi.nl/wordpress/wordcampnl-2010/">shopp</a>-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).

Print PDF

Ben je op zoek naar een makkelijke manier om je Shopp™ webshop uit te breiden? Dan is Shopplugin.nl voor jou het juiste adres!

Shopplugin.nl geeft jou de mogelijkheid om snel functionaliteiten aan je webshop toe te voegen. Of het nu voor het uitbreiden van je webwinkel is, of om je workflow te vereenvoudigen: het is allemaal mogelijk!

Bekijk snel de webshop – uiteraard ook gebaseerd op Shopp – om te zien wat we jou te bieden hebben!