Berend Quest’s eShop voor WordPress Installatiegids
Nederlandse vertaling van de winkelwagen meegeleverd!!
Als ik het kan, kan jij het ook!
Copyright Behoudens de in of krachtens de Auteurswet van 1912 gestelde uitzonderingen mag niets uit deze uitgave worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand, of openbaar gemaakt, in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen of op een andere manier, zonder voorafgaande schriftelijke toestemming van de auteur.
Disclaimer In deze gids wordt het proces beschreven om van eShop voor WordPress een werkende installatie te maken. Dat betekent niet dat alle aspecten van eShop of WordPress worden beschreven of uitgewerkt of behandelt. Voor specifieke, niet in deze gids opgenomen vragen en/of worstelingen kun je contact opnemen met Berend Quest.
Versie 1.1 Deze installatiegids is versie 1.1 Nieuwe versies worden u automatisch (en gratis) toegestuurd zolang dit versie 1.xx betreft.
2
Voorwoord Na meer dan 10 jaar leiding te hebben gegeven aan een ICT bedrijf weet Berend Quest het zeker: hij doet liever iets anders. Maar dat is niet het enige dat hij zeker weet. Een andere zekerheid is dat techneuten over het algemeen fantastische, loyale, intelligente en lieve wezens zijn maar wel met een gebrek: bij communiceren denkt een techneut aan iets anders dan waar jij aan ik aan denken. Wij, gewone stervelingen denken bij communicatie vooral aan de boodschap die we willen overbrengen. Wij vragen ons af hoe we die boodschap kunnen verpakken, aankleden en met voorbeelden omkleden, opdat de ander onze boodschap maar begrijpt. Techneuten hebben hele ander gedachten bij het begrip ‘communicatie’. Een techneut vraagt zich bij het begrip communicatie af hoe hij een boodschap van A naar B krijgt. Waarbij hij zo min mogelijk processorcapaciteit wil gebruiken. En geheugen. Want dat kost energie. En levert warmte op. En warmte, dat wil je niet.
3
Inhoud Copyright .........................................................2 Disclaimer ........................................................2 Versie ..............................................................2 Voorwoord .......................................................3 Inhoud .............................................................4 Inleiding ...........................................................6 Een Installatiegids+..........................................7 Hoe werkt deze gids? ......................................8 Voor je begint ..................................................10 Voor het beeld .................................................12 Stap 1: De eShop Plugin..................................14 HELP!! .............................................................15 Stap 2: eShop activeren...................................16 (Tussenstap) eShop: wat is wat? .....................18 Stap 3: De configuratie van eShop ..................20 Stap 3A: Algemene instellingen .......................22 Stap 3B: Merchants Gateways........................26 Stap 3C: Sales Tax ..........................................30 Stap 3D: Discounts ..........................................31 Stap 3E: Downloads ........................................32 Stap 3F: Special Pages ...................................33 Stap 3F-a: De pagina ‘Winkel’..........................34 Stap 3G: eShop Base ......................................36 Stap 4: Een product aanmaken........................38 Stap 4a: Het product in de winkel ....................40
4
Een 1e blik op de winkelpagina ....................... 42 Stap 5: 1e Testfase ......................................... 44 Stap 5A: 1e Testfase iDeal .............................. 46 Stap 5b: Meer tests ......................................... 54 Stap 6: iDeal for Real! ..................................... 55 Stap 7: iDeal activeren .................................... 59 Checklist.......................................................... 60 Stap 8: Van Engels naar Nederlands............... 61 Stap 8A: De Taalmodule ................................. 62 Stap 8B: Standaard e-mails ............................. 64 Stap 9: Widgets ............................................... 68 Stap 9A: eShop Products Widget .................... 70 Stap 9B: eShop Payments Widget................... 71 Stap 9C: eShop Winkelmandje ........................ 72 Stap 10: Opzetten winkel................................. 74 Extra Oplossingen ........................................... 79 1: Handmatige installatie eShop ...................... 80 2: De grootte van het downloadbestand .......... 81 3: iDeal tests werken niet! ............................... 82 4: Een certificaat waarschuwing? .................... 83 Contactgegevens ............................................ 87
5
Inleiding Toen ik besloot mijn boekjes online te gaan verkopen wist ik het zeker: WordPress biedt zoveel mogelijkheden en er zijn zoveel plugins dat een webshop via WordPress te realiseren moet zijn. En het kan ook, en het kan ook heel goed. Ik heb er wel even naar moeten zoeken, want ook voor een webshop kun je kiezen uit veel verschillende oplossingen. En veel oplossingen zijn gewoon bagger. Veel te ingewikkeld, beslist niet om aan te zien en storingsgevoelig. ‘ICT oplossingen’ die je vooral meer problemen opleveren noem ik, ook al zijn ze gratis, vooral duur. Uiteindelijk gebruik ik nu tot grote tevredenheid eShop (van Quirm) voor WordPress. De installatie en het opzetten van eShop is niet heel erg ingewikkeld, ik ben alleen nog niet een goed te volgen installatiegids tegengekomen. Dus besloot ik die zelf te schrijven. Volg deze gids en je hebt in korte tijd een goed werkende webwinkel aan je WordPress installatie gekoppeld. Schrik daarbij niet van de vele pagina’s want ik heb nog al wat afbeeldingen gebruikt. Succes! En je weet, ik kan het, dus jij kan het ook.
6
Een Installatiegids+ Naast deze installatiegids zijn er ook een aantal bestandjes meegeleverd. Deze bestanden maken jouw eShop installatie nog iets aantrekkelijker en eenvoudiger. De volgende bestanden worden meegeleverd: 1.
eshop-languages.php Dit is een plugin om de Nederlandse vertaling aan de gang te krijgen
2.
eshop-nl_NL.mo Dit is het bestand met de feitelijke vertaling
3.
eshop-nl_NL.po Dit is het taalbestandje dat je eventueel verder kunt gebruiken om zelf meer vertalingen aan te brengen of veranderingen door te voeren in de huidige vertalingen.
4.
eShop_installeren_kan_iedereen.txt Een tekstbestand van dit boekje. Handig om even uit te printen en naast je te hebben. Geen plaatjes, geen dure print. Gewoon, alleen de tekst zonder opmaak.
7
Hoe werkt deze gids? Deze gids werkt als volgt: 1.
Geen paniek!! Hoeft niet, nergens voor nodig. Ik kan het, dus jij kan het ook. Je IQ ligt boven de 80, je gebruikt niet voor het eerst een computer en je kunt lezen. Dus. Vooral geen paniek, het gaat goed komen.
2.
RTFM!! Staat voor ‘Read The Fucking Manual!!’ Doe dat dan ook. Niet meteen gaan blazen, mij gaan mailen en eShop of dit boekje publiekelijk af gaan fakkelen. Lees eerst eens op je gemak wat er staat. En kom je er niet uit bedenk dan dat je met stroop veel meer vliegen vangt dan met azijn.
3.
Voor je begint In voor je begint geef ik je op een briefje wat er nodig is om een eShop installatie werkend te krijgen. Ik durf bijna te garanderen dat iedereen de eShop installatie met behulp van deze gids succesvol kan voltooien. Lukt je dat niet dan mag je contact opnemen met mij via een e-mail en dan zal ik naar de installatie kijken. Als ik naar jou installatie kijk en zie dat je niet aan de voorwaarden hebt voldaan die staan vermeld in ‘Voor je begint’ raak ik zwaar geïrriteerd.
8
4.
Als dit, dan dat De installatiegids geeft de meest voor de hand liggende installatieroute om de eShop werkend te krijgen. Waar mogelijk, waar mij bekend en waar te voorzien geef ik alternatieve routes. Dus: doe dit, werkt het niet, doe dan dat.
5.
Plaatjes In deze installatiegids worden veel plaatjes gebruikt. Plaatjes vullen de gaatjes.
6.
Linken Ik gebruik linken naar andere websites. Daar vind je namelijk de informatie die je nodig hebt, of je moet je er aanmelden om gebruik te kunnen maken van bijvoorbeeld een betaalservice. Veel linken zijn informatief, maar soms zul je een website moeten bezoeken om de installatie te kunnen afronden. Als er dus staat ‘ga naar …’ Dan moet je daar dus even heen. Ook jij.
9
Voor je begint De volgende zaken dien je op orde te hebben voor je de eShop installatie gaat uitvoeren:
WordPress 3.1 of hoger Je hebt een WordPress installatie vanaf 3.1 Je vindt de versie informatie op je dashboard van WordPress. Je hoeft overigens niet perse een Nederlandstalige installatie te gebruiken.
10
Je hebt een eigen installatie van WordPress Op je eigen domein, met je eigen hostingruimte en je eigen toeganggegevens. Jij bent de ‘administrator’ van WordPress.
WordPress is ‘schoon’ Er zijn duizenden ‘plugins’ voor WordPress. Veel zijn goed, maar er is ook veel bende op de markt die de werking van WordPress installaties geen goed doen. Lukt het niet en krijg je vreemde effecten die niet in dit boekje genoemd worden? Kijk dan eens naar de plugins die je gebruikt. Zet er eens een paar uit (zie ook deze pagina).
Wil je Paypal betalingen Open een rekening via Paypal. Open een business account!
Wil je iDEAL betalingen Ga naar de website van iDEAL en kies daar de iDEAL website van je eigen bank. Volg de instructies om iDeal Lite aan te vragen. Let op: om iDeal te kunnen aanvragen heb je een zakelijke rekening nodig! LET OP! De ING bank durft een duur abonnement te koppelen aan de verkoop van downloads. Dat is niet nodig, de Rabobank (iDeal lite) berekend geen abonnementskosten. Open dus een zakelijke rekening bij de Rabobank.
11
Voor het beeld Wellicht ben je veel bekender met de systemen dan ik denk en weet je wel hoe het werkt. Mooi, sla je dit over. Dit hoofdstukje valt onder de categorie ‘interessante informatie’ en bevat geen essentiële zaken die je nodig hebt om de installatie te voltooien. WordPress is een beetje als een enorm Lego huis. Het is, als je het in elkaar hebt gezet helemaal klaar voor gebruik en je kunt er uren, dagen, zelfs jaren mee spelen. Net als bij Lego kun je uitbreidingen aanschaffen. Niet tegen de woekerprijzen van Lego, meestal helemaal kosteloos. Prachtig. Een nieuwe tuin er aan vast, een stal met paarden, een garage met auto’s en ga zo maar door. Echter, anders dan bij Lego worden al die uitbreidingen niet door Lego zelf gemaakt, maar kan iedereen die dat wil zelf met uitbreidingen komen. Je snapt natuurlijk dat er dan veel rotzooi op de markt komt. Blokjes die niet goed passen, kleuren die niet mooi zijn. Steentjes die breken enz. Dat is lastig en het is dus belangrijk dat je een beetje uitkijkt met wat je allemaal aan jouw installatie van WordPress vastkoppelt. Het mooie, nee het fantastische is en blijft dat je dat ene pakketje (dat Lego huis) waarmee je begon uit kan breiden tot een compleet dorp met van alles er op en er aan.
12
Je eigen winkelcentrum bijvoorbeeld. WordPress is niet heilig, er zijn ook andere mooie systemen. De webshop oplossing van eShop is ook niet heilig, er zijn er meer die goed zijn. Wat ik wel durf te stellen is dat WordPress met eShop een prima combinatie is die het uitbreiden van WordPress met een webwinkel goed bereikbaar maakt. Voor iedereen. Ook de niet technici onder ons. Dus ook voor jou.
13
Stap 1: De eShop Plugin Als eerste zal de eShop plugin aan jouw bestaande WordPress installatie moeten worden gekoppeld. Dat doe je als volgt: 1.
Login op WordPress.
2.
Ga in het linker menu naar ‘Plugins’
3.
Klik boven in de menubalk op ‘Plugins installeren’
4.
Typ in het zoekveld: eShop, klik op ‘Plugins zoeken’
5.
Controleer of je eShop 6.2.8 (of hoger) ziet van Rich Pedley.
6.
Klik op ‘Nu installeren’
Dat was de installatie van de eShop plugin. Mooi hè? Was dat alles? Nee, we gaan verder op pagina 16.
14
HELP!! Maar, maar., maar, hij installeert eShop niet?!! Oh, in dat geval ga je naar Extra Oplossingen 1: Handmatige installatie eShop. Want ja, het blijven computers hè.
Netwerkinstallatie! Gebruik je een netwerk versie van WordPress dan installeer je eShop per website en niet een ‘netwerkinstallatie’. Netwerk versie? Dat is wanneer je een installatie van WordPress gebruikt die meer dan één website kan beheren.
15
Stap 2: eShop activeren Goed, de installatie is gelukt, nu moet de plugin binnen WordPress ‘geactiveerd’ worden. Dat is simpel en lukt altijd. Ga naar je dashboard van WordPress, klik links op ‘Plugins’ en zoek in het rijtje van je plugins naar ‘eShop’ en klik daarna op ‘Activeren’.
Als je bovenin de melding ‘Plugin geactiveerd ziet, dan is de installatie en activering van eShop gelukt.
We zijn nu goed op weg. We gaan door met het opzetten van de winkel in stap 3.
16
17
(TussenStap) eShop: wat is wat? In je dashboard van WordPress vind je nu op 5 plekken (ja, techneuten hè) eShop onderdelen. 1.
Onder Weergave In het onderdeel weergave kun je de ‘looks’ van eShop aanpassen naar je eigen wensen. Heel leuk, maar wij blijven er af.
2.
Onder Plugins Hier zie je de knop ‘eShop Uninstall’, laten we ook lekker zitten.
3.
Onder Instellingen In het onderdeel ‘Instellingen’ van WordPress vind je ook een knop ‘eShop’. Hier worden de betalingsmethode en andere technische zaken geregeld. Hier gaan we zo mee beginnen.
4.
eShop zelf Dan is er nog de knop eShop zelf. Hier beheer je de verkopen, producten etc.
5.
Algemeen overzicht. Yeah, right. Leuk. Mooi. Fijn.
6.
Wat we niet hebben laten zien, maar er ook nog is, zijn een aantal pagina’s die eShop heeft aangemaakt. Lekker afblijven. Is prima zoals het is.
18
19
Stap 3: De configuratie van eShop eShop moet worden geconfigureerd. Dat doe je door in het linkermenu van je WordPress dashboard ‘Instellingen’ en dan ‘eShop’ te kiezen. Dat is dus de knop nummer 3 van de afbeelding op pagina 19. Nu krijg je een pagina voor je met een aantal tabbladen. Dit zijn: 1.
General De algemene instellingen van eShop.
2.
Merchant Gateways Onder dit tabblad vind je de betaalwijzen zoals Paypal en iDEAL.
3.
Sales Tax Om de BTW in te stellen.
4.
Discounts Voor het instellen van kortingen (Staffels).
5.
Downloads Voor het instellen van de downloads bij bijvoorbeeld verkoop van software, muziek of eBooks.
6.
Special Pages De standaard pagina’s die nodig zijn heeft eShop al aangemaakt, maar als je meer wilt, of alles zelf wilt doen kun je dat hier instellen.
20
7.
eShop Base Een aantal standaarden die eShop gebruikt voor de hele webshop.
In de volgende hoofdstukken lopen we de schermen stuk voor stuk even door.
Let op! Ook hier geldt: we gaan de webshop werkend maken, dat wil niet zeggen dat er geen dingen zijn die je zelf anders zou willen of ook wilt aanpassen. Maar, wacht er mee tot de basis draait en verander dan zaken stap voor stap zodat je in geval van ‘faal’ weet wat je terug moet zetten om de boel weer werkend te krijgen. Ga altijd als volgt te werk wanneer je meer zaken wilt configureren of aanpassen: 1.
Aanpassen
2.
Testen
3.
Eventueel herstellen, of verbeteren.
21
Stap 3a: Algemene Instellingen Bij de algemene instellingen kun je de volgende onderdelen uitvouwen (op de balken klikken om uit te vouwen) om te bewerken:
Er zijn gerust een hele hoop velden die ik nu en hier kan gaan verklaren, maar dat is niet de bedoeling. De shop moet werken, we beperken ons dus tot de noodzakelijke instellingen.
22
O ja, en vergeet nou niet om telkens op ‘Save Changes’ te klikken hè. De volgende velden MOET je invullen om de shop werkend te krijgen:
Business details Het e-mail adres die de webshop gebruikt als afzender. Jouw e-mailadres dus.
Product Options Hoef je nu niets mee.
Product Details
Out of Stock message: verander je in ‘Momenteel niet leverbaar’ Of wat jij wilt.
Symbol Maak je het euro teken van: € (Alt ingedrukt en dan 0128)
Use add to cart image or button? Zet op ‘image’.
Display Options Alles op ‘no’
Cart Options Zet op 15
23
Checkout Options
Hide additional info: ‘Yes’
Hide the shopping adress: ‘Yes’
Minimal checkout Form: ‘Yes’
Add Required checkbox: ‘No’
Text for required checkbox: ‘Verplicht’
Page id: leeg laten
Allow users: ‘No’
Change Sign up: leeg laten.
Allow zero cost: ‘No’
Opties aan de rechterzijde Ja, aan de rechterzijde staan ook nog wat opties.
Zet de status op ‘Testing’,
zet de Sale op ‘Yes’ en
geef een Cron Email Adres op (het jouwe).
Als laatste de ‘Cacheability. Die moet je dus op ‘Yes’ zetten om uit te zetten. Logisch hè? Maar wel doen, anders werkt het niet! Dus: op YES!
Hiermee zijn de algemene instellingen voorlopig klaar.
24
25
Stap 3B: Merchant Gateways Ha, leuk. Betalen, betalen. Want dat willen we bereiken. We gaan de betaalmodules configureren. Voor nu, dat is. We zijn tenslotte de instellingen aan het nalopen In deze installatiegids worden alleen de volgende betaalmodules behandeld: 1.
Paypal Het meest gebruikte online betaalsysteem ter wereld, ook prima te koppelen aan je eigen bankrekeningen.
2.
iDEAL lite Het meest gebruikte online betaalsysteem van Nederland.
Andere betaalmogelijkheden zal ik bij voldoende belangstelling aan de gids toevoegen. Verzoeken kunnen naar
[email protected] Vervolg op pagina 28.
26
27
Paypal Om Paypal te activeren vink je eerst maar eens aan dat je betalingen via Paypal wenst te accepteren. Vervolgens geef je het e-mail adres waarmee je inlogt op je Paypal account en een 2e e-mail adres (van jou) voor als je eerste e-mail adres een keer dienst weigert. Is dat alles? Ja, voor nu wel.
iDeal Lite Nou, lijkt me logisch. Even aanvinken dat je iDeal betalingen wilt ontvangen. Gaan we nu even een 1e, ruwe testomgeving opzetten.
Aquirer Vul in: Simulator
Hash Key Vul in: Password
Merchant ID Vul in: 123456789
Sub ID Leeglaten
Test Mode Vul in: true
Email address Vul in: jouw email adres
28
Description Vul in: betaling via iDeal De rechterzijde Ja, ook hier weer een rechterzijde met opties en die moet je goed zetten anders werkt eShop niet.
Business location: Netherlands
Currency Mode: Zet op Euros
Ok, voor dit moment en voor deze fase staan de betaalmodules goed.
29
Stap 3C: Sales Tax Tax? Kut man, dat is iets met belastingen en zo!! Ja, daar doen we dus niet aan. Gewoon overslaan. Yes!!.
30
Stap 3D: Discounts Hahahaha, eerst maar eens wat verkopen! Vind je zelf ook niet? Korting. Kom op zeg. Je hebt een webshop, geen marktkraam. Ofwel: komt later nog wel eens.
31
Stap 3E: Downloads Als je downloads gaat aanbieden via de webwinkel (en dat ga je, want dat gaan we testen) zijn hier wat zaken te regelen.
eShop downloads
Zet de download attempts op ‘3’ en het
Hide Download all op ‘Yes’
eShop downloads only Zet op ‘Yes’. We gaan de hele winkel namelijk testen met de verkoop van een download.
eShop emails Zet deze op ‘No’.
32
Stap 3F: Special Pages Huh? Speciale pagina’s? Ja, en die heb je nodig. Sterker nog, je krijgt geen iDeal aan de gang wanneer deze speciale pagina’s er niet zij n of niet goed werken. Betekent uiteraard niet dat je nu wat moet doen. eShop maakt alle noodzakelijke pagina’s voor je aan. Er is maar 1 pagina die we zelf aanmaken, die noemen we: winkel. (Dat doen we even op de volgende pagina.)
33
Stap 3F-a: De pagina ‘Winkel’ De reden dat we deze pagina even maken is omdat we dan een plek hebben om het eerste product op te plaatsen en een pagina om naar terug te verwijzen als de klant afgerekend heeft. Ga in het linkermenu naar: ‘Pagina’s’ Je ziet dat er een aantal nieuwe pagina’s bijgekomen zijn, mooi laten staan. Klik op ‘Nieuwe pagina’. Voer een titel in: Winkel Huh?? Zie je dat, onder de pagina? Allemaal nieuwe dingen? Ja, komt zo. Sla deze pagina op en publiceer hem. Ga terug naar ‘Pagina’s’ en houd de muis boven de link ‘bewerken’ van de pagina ‘Winkel’. Onder in je scherm zie je nu het ID van die pagina. Schrijf dat op. Of onthoud het.
34
Ok, gaan we terug naar het onderdeel Instellingen, klikken we op eShop, gaan we naar het tabblad ‘Special Pages’ , klikken we op de balk ‘Continue Shopping Link’ en vullen we het Pagina ID nummer in.
Op mijn afbeelding is dat 606. Daarna de wijzigingen opslaan. Klaar, voor nu.
35
Stap 3G: eShop Base
De eShop Base is het laatste tabblad en heeft een paar algemene instellingen. Lopen we even doorheen.
36
Brand Dat is je soort business. Je branche, je merk of whatever. Dus bijvoorbeeld ‘Boeken’, ‘Kleding’ of ‘Elektronica’.
Condition Verkoop je nieuw of gebruikte spullen? Hoe is de conditie? Nieuw? Gebruikt? Gereviseerd? 2e Hands? Jij mag het zeggen.
Expiry in days Hoelang blijft een product geldig? Bij mij tot ik het weghaal. Dus de maximale tijd. 730 Dagen.
Product Type Bij boeken zou dit kunnen zijn: kookboeken, bij kleding: spijkerbroeken en bij elektronica: telefoons. Het is een specificatie van Brand.
Payments accepted Hier vul je in: Paypal, iDeal.
De ‘reset’ knop laten we natuurlijk met rust….
Mooi, hebben we de algemene instellingen gehad. Moeten we maar eens een productje doen niet? Een drukje mag ook wel even hoor, of koffie. Je bent al een heel eind op weg nu!
37
Stap 4: Een product aanmaken Ga naar de sectie ‘eShop’ (nummer 4 op dit plaatje) van je WordPress Dashboard. Klik hier het onderdeel ‘Downloads’ aan. Je ziet nu de pagina waar de downloads die jij verkoopt komen te staan. Je kunt ze hier ook uploaden. Verkoop je bijvoorbeeld een eBook dan kun je die hier in het systeem plaatsen. MAAR! Het eShop systeem heeft een narigheidje. Het neemt de maximale grootte die je kunt uploaden uit je webserver configuratie over. Dus, zoals onderstaand plaatje laat zien: voor mij is dat maar 1,46 MB.
38
Is dat erg? Nee, daar is een (voorlopige) oplossing voor die ik hier op deze pagina beschrijf. Voor nu gebruiken we even een heel klein bestandje. Kies bijvoorbeeld een plaatje. Het uploaden gaat als volgt: 1.
Geef het bestand (dat wordt dus je product) een naam. Bijvoorbeeld ‘Testproduct’. Vul die naam in bij ‘Title’.
2.
Kies een bestand op je computer. Kies een kleine afbeelding.
3.
Overwrite file if Exists: ‘No’
4.
Klik op ‘Upload file’
Gefeliciteerd, je eerste product is geplaatst. Je ziet nu iets dat lijkt op het volgende plaatje.
39
Stap 4A: Het product in de winkel Eigenlijk heb je nu nog geen product, je hebt een download waar je een product van kan maken. Dus, dat gaan we doen. Ga naar de pagina ‘Winkel’, laat het tekstveld gewoon leeg en scroll naar onderen tot je ziet waar je de product gegevens kunt invullen. Neem onderstaande gegevens gewoon over:
40
SKU Dat is het unieke product identificatienummer. Mag je zelf bedenken. Houd het vooral simpel en overzichtelijk! LET OP!! iDeal kent een maximum van 10 tekens voor een SKU. De SKU op de afbeelding is dus te lang.
Description De naam van het product, of de omschrijving.
Product Options We gaan er even van uit dat dit een boekje is in PDF formaat. Als download koppel je ‘Testproduct’.
Shipping Rate: ‘No’
Vink aan ‘Product in sale’ en ‘Stock Available’ Doe je dat niet dan kunnen klanten het ook niet kopen.
Sla de wijzigingen op.
Woepie!! Jazeker. Je eerste product staat online en we gaan, na de volgende bladzijde, de eerste bestel en betaaltesten uitvoeren! Klik op ‘wijzigingen bekijken’ van de pagina ‘Winkel’ en zie dat je nu een pagina hebt die Winkel heet, een testproduct te koop aanbiedt en een winkelwagentje heeft. Top! Of niet soms!?
41
Een 1e blik op de winkelpagina De opmaak is uiteraard voor iedereen anders, maar de Winkel pagina heeft nu ongeveer de volgende inhoud:
42
Zoals je ziet is er een product, met een productnummer, een prijs en kun je het product in je ‘winkelmandje’ stoppen. Alles is nog in het Engels, maar daar gaan we later nog wat aan doen.
43
Stap 5: 1e testfase We gaan nu de winkel eens aan een eerste test onderwerpen. De testen die we gaan uitvoeren vertellen je of het eShop systeem goed werkt. Later gaan we naar de 2e testfase, dat zijn de tests die moeten worden uitgevoerd op de iDeal testwebsite. De volgende tests worden in stap 5 behandeld: 1.
eShop - iDeal
2.
Meerdere artikelen
Als jij niets veranderd hebt staat het eShop systeem in ‘Testmodus’. Dat zie je als je klikt op ‘Instellingen’, ‘eShop’. Zie je dat niet dan kun je dat aan de rechterkant in dat zelfde scherm aanpassen.
44
De instellingen voor de testmodus moeten dus staan zoals hier boven wordt weergegeven.
Moet Paypal niet getest worden? Dat hoeft niet, je kunt Paypal activeren zonder tests. Indien je Paypal wil testen dien je een Sandbox account aan te maken en de test via dit account uit te voeren.
45
Stap 5A: 1e testfase iDeal De gegevens zoals die moeten ingevoerd voor iDeal in eShop (Instellingen, eShop, Merchant Gateway) zien er als volgt uit:
Laten we eens kijken wat er gebeurd als we een testaankoop doen
46
en met iDeal willen betalen. Eerst ga je naar de winkelpagina:
Vervolgens klik je op ‘Add to Cart’ en ga je naar het volgende scherm.
47
De bestelling klopt, je wilt gaan afrekenen dus je klikt op ‘Proceed to Checkout’. (zie afbeelding volgende pagina) Op deze pagina zie je nogmaals de inhoud van je mandje, een formulier om je klantgegevens in te vullen en kun je de betaalwijze kiezen. Zie dat je maar weinig gegevens hoeft in te voeren, dat komt omdat we (voor nu) eShop alleen hebben ingericht voor de verkoop van downloads. Dat betekent automatisch dat je geen verzendadres nodig hebt. Vul een voor- en achternaam in, geef een geldig e-mail adres (van jou) en kies ‘iDeal’ als betaalmethode. Klik daarna op ‘Proceed to Confirmation’.
48
49
eShop vraagt je nu om de ingevoerde gegevens te bevestigen. Klopt je e-mailadres? Let op het regeltje boven de knop, staat de betaalwijze op iDeal?
Klik dan op ‘Proceed to Checkout’.
50
Het scherm dat je nu ziet vertelt je dat de order wordt verwerkt. Wat je tevens ziet is dat je kunt klikken wanneer je niet automatisch wordt doorgeschakeld naar iDeal. Wat ook in het scherm staat is de volgende boodschap:
Je zult dus zelf moeten klikken op ‘Proceed to iDeal’ om verder te gaan. Als je doorgeklikt heb kom je op de simulator van iDeal. Je ziet het volgende scherm: Zie je een waarschuwing? Klik hier.
Je kunt nu zelf kiezen welke status je een aankoop wil geven: Succes, geannuleerd of een fout. De verschillende testen komen straks ook in de 2e serie iDeal tests aan bod. iDeal controleert of alle statussen goed worden afgehandeld. Dus, 3x bestellen en alle 3 de opties een keer aanklikken. (Lees verder op pagina 52)
51
Wanneer je bestelling succesvol is afgerond word je automatisch teruggebracht naar de ‘bedankt’ pagina van jouw website. Deze pagina is een van de standaard pagina’s van eShop.
Inderdaad, in het Engels. Daar komen we nog op terug. Ook heb ik als klant een e-mail (zie afbeelding pagina 53) met de bevestiging gekregen dat mijn bestelling is binnengekomen, dat de betaling is verwerkt en, niet onbelangrijk, een link naar de downloadpagina en een code om toegang tot de download te krijgen. Op pagina 54 zie je het voorbeeld van die pagina waar je als klant door het invullen van je e-mailadres + de code die je kreeg de download kunt ophalen. Gaaf, toch? En allemaal door het systeem zelf geregeld.
52
53
Stap 5B: Meer tests Wanneer je alle drie de tests met iDeal gedaan hebt is het verstandig om het hele proces nog eens te herhalen, maar dan met bijvoorbeeld 3 boekjes in je mandje en probeer ook eens het mandje halverwege het proces bij te werken, gegevens niet in te vullen etc. Er zal niets fout gaan, maar het is ook goed om te weten wat jouw klanten tegen kunnen komen.
54
Stap 6: iDeal for real! Wanneer de aanvraag bij iDeal loopt krijg je op enig moment bericht via e-mail dat je kunt inloggen op de testomgeving van iDeal. In die testomgeving (waarop je inlogt met dezelfde gegevens als op je werkelijke iDeal account) moet je een aantal stappen zetten. 1.
Ga naar aanmelden Klik in het linkermenu op ‘Aanmeden’ en kies het tabblad ‘Integratie’. Laat de sleutel staan en zet ‘Bevestiging via’ op E-mail. (Zie afbeelding).
55
2.
Klik op ‘Verzenden’ Hiermee worden de instellingen opgeslagen. Kopieer de sleutel, of schrijf deze over. Je hebt hem hierna nodig!
3.
Ga naar het tabblad ‘Aanmelding’ en schrijf je Acceptant ID op een briefje, of kopieer het..
4.
Login op WordPress dashboard. Ga naar ‘Instellingen’, ‘eShop’, ‘Merchant Gateways’ en open iDeal. Voer hier nu de juiste gegevens uit de iDeal testwebsite in. Gebruik het juiste email adres dat bij iDeal bekend is!! Sla de wijzigingen op.
5.
Artikel Om de testfase iDeal te doorlopen zul je in iDeal een artikel moeten aanmaken. Je kunt het artikel gebruiken dat je reeds in eShop hebt aan-
56
gemaakt maar maak de verkoopprijs € 1,- . Ga vervolgens naar de testsite van iDeal, klik in het linkermenu op ‘Artikelen’ en maak een artikel aan. Je scherm toont dan ongeveer dit:
6.
Geldigheid en prijs Zorg dat het artikel geldig is en dat de prijs klopt (van € 1 tot € 1,). Het ‘waarom’ is niet heel erg belangrijk nu, ik zeg: gewoon doen! Dan gaan we nu echt testen.
7.
Wat en hoe gaat iDeal testen? iDeal wil graag weten of alle reacties op betalingsverzoeken
57
correct zijn. Dus, of een betaling nu goed gaat, fout gaat er geen saldo is of wat dan ook, de reactie van jouw winkel naar de klant moet de juiste zijn. 8.
De 7 tests van iDeal iDeal heeft 7 tests die moeten worden uitgevoerd, 1 daarvan doet het systeem zelf, blijven er zes over die jij moet uitvoeren. Dat gaat simpel. Je begint met een betaling van € 1,- en iedere test doe je er een euro bij tot alle vinkjes van alle tests groen zijn. Heb je problemen met de tests? Klik dan hier.
9.
Als alle test zijn uitgevoerd Dan zul je zien dat de tests ook afgevinkt zijn in de echte iDeal omgeving. Wat nu nog rest is het activeren van iDeal en het ’Live’ maken van je eShop.
Het heeft wat voeten in de aarde, maar je bent er nu bijna doorheen!
58
Stap 7: iDeal activeren iDeal moet nu worden geactiveerd. Als je inlogt op de iDeal website dan zul je zien dat ook daar alle tests zijn afgevinkt en dat het wachten is op de contracten. Als het contract dat je is toegezonden door de bank ondertekend is ontvangen zal het binnen een paar dagen zover zijn dat je iDeal kunt gaan gebruiken. Voor je aan de slag kunt moet je nog even wat doen: 1.
Artikelen Voor de artikelen in die je in de webshop gaat verkopen, zorg dat de ID’s kloppen en de prijs correct is.
2.
Sleutel Het iDeal systeem heeft een nieuwe sleutel voor je, vervang dus de testversie met de echte sleutel, zorg dat het systeem op ’Bevestigen per e-mail’ staat en kopieer de sleutel naar eShop. Dashboard WordPress, Instellingen, eShop, Merchant Gateways, iDeal.
3.
Heel belangrijk! Het vakje ‘Test Mode’ (Dashboard WordPress, Instellingen, eShop, Merchant Gateways, iDeal) moet worden leeggemaakt. Anders werkt iDeal niet.
59
Checklist Wanneer je alleen downloads gaat aanbieden in je winkel dan is eShop nu bijna klaar voor gebruik. Het is misschien nog niet zo ingericht als jij uiteindelijk wilt, maar het werkt. Voor de zekerheid lopen we nog wat zaken na: 1.
Configuratie eShop is geconfigureerd zoals hiervoor is beschreven.
2.
iDeal Is getest, contract opgestuurd en je hebt de activatiemail ontvangen. De artikelen die je wilt verkopen zijn in iDeal ingevoerd en gelijk aan die binnen eShop
3.
Paypal Je hebt een business account en je hebt (voor de zekerheid) even deze aanwijzingen (Engels) gelezen.
4.
Artikelen Je hebt een winkelpagina gemaakt en tenminste 1 artikel beschikbaar gesteld.
5.
Handjes thuis Je hebt geen instellingen veranderd die tot nu toe niet behandeld zijn.
Ok, dan is alles wat hierna komt extra. Check na iedere volgende stap die je doet of alles nog werkt!
60
Stap 8: Van Engels naar Nederlands? In dit gedeelte worden de stappen uitgelegd om een wat meer klantvriendelijke winkel te krijgen. Met klantvriendelijk wordt bedoeld dat bezoekers in de eigen taal worden aangesproken. Een winkel in het Nederlands, met Nederlandstalige formulieren en e-mails geeft de klant meer vertrouwen. 1.
eShop, de winkel en het winkelmandje eShop is een Engelstalig systeem. Er zijn op de website van Quirm vertalingen beschikbaar maar die zijn, zoals zo vaak, eigenlijk heel slecht. Letterlijke vertalingen, dat werkt niet. Zelf heb ik bij dit boekje een vertaling meegeleverd die alleen aan de voorzijde (dus wat de klant ziet) er voor zorgt dat de zaken in het Nederlands worden afgehandeld.
2.
Standaard e-mails De standaard e-mails die de afhandeling doen van de bestellingen en betalingen kun je eenvoudig aanpassen. In dit deel wordt getoond hoe je dit doet.
61
Stap 8A: De Taalmodule De makers van eShop hebben bedacht dat het toch wel handig zou zijn als zij een aparte taalmodule zouden schrijven. Een taalmodule voorkomt dat je bij iedere update alles opnieuw moet vertalen. De taalmodule van eShop is met dit boekje meegeleverd. Het bestand heet ‘eshop-languages.php’. Daarnaast is een bestand met de vertaling meegeleverd, deze heet ‘eshop-nl_NL.mo’. De volgende stappen moet je uitvoeren om de vertaling werkend te krijgen: 1.
Bestanden uploaden Je hebt WordPress op je eigen domein geïnstalleerd dat betekent dat je kunt FTP-en. (Je weet niet wat dat is? Lees deze uitleg.) De twee bestanden (eshop-languages.php en eshopnl_NL.mo) plaats je in een nieuwe map namelijk: [wp-content/plugins/eshop-languages/]
2.
Plugin activeren
62
Ga naar je WordPress dashboard, klik op ‘Plugins’ en activeer de nieuwe plugin ‘eShop Languages Plugin’. Je vindt de plugin onder de eShop plugin zelf. 3.
De pagina ‘Winkel’ (Ik ga er van uit dat je die pagina niet hebt verwijderd.) Ga naar je WordPress website en kijk op de pagina ‘Winkel’. Als het goed is zie je nu, wanneer je de pagina een keer vernieuwd, een Nederlandstalige winkel.
4.
Hij is nog altijd in het Engels? Ok, geen paniek. Probeer het bestandje ‘eshop-nl_NL.mo’ dat je net hebt geplaatst te hernoemen naar: ‘eshop-nl.mo’.
5.
Nog altijd Engels? Dan heb je zeer waarschijnlijk geen Nederlandstalige WordPress installatie. Geeft niks. Open het bestandje ‘wpconfig.php’ dat helemaal in de basismap (of hoofdmap, of root) van WordPress staat en kijk hoe daar de taal staat aangegeven. Het gaat om deze regel: [define ('WPLANG', 'nl_NL');] Als er geen nl_NL staat maar iets anders dan hernoem je het .mo bestandje met de taal die daar staat aangegeven. Bijvoorbeeld: ‘eshop-en_EN.mo’
6.
Nog niet goed? Zie je nog steeds geen Nederlands? Lijkt me sterk. Controleer stap 1 tot en met stap 5. Heel nauwkeurig. En start je browser voor de zekerheid eens opnieuw op.
63
Stap 8B: Standaard e-mails Wanneer een klant iets koopt in jouw eShop dan ontvangt hij emails. Bijvoorbeeld een e-mail omdat het gelukt is en met de downloadlink. In eShop is een hele sectie met standaard e-mails, je hebt er maar een paar nodig, zeker wanneer je alleen Paypal en iDeal gebruikt als betaalmethode. Ook de e-mails zijn Engelstalig, en daar gaan we, stap voor stap iets aan doen. 1.
Ga naar je WordPress dashboard, klik links op eShop (de nummer 4 op deze afbeelding!) en klik op ‘Emails’ Je ziet nu de e-mail templates die je kunt gebruiken. In deze gids passen we alleen de eerste twee e-mails aan, meer is er niet nodig. Uiteraard kun je activeren en vertalen zoveel als je zelf wilt of nodig vindt.
64
2.
Automatic default email klik op de ‘Automatic default email’ en je ziet de e-mail die klanten ontvangen wanneer zij een aankoop hebben gedaan. De mijne, na aanpassing, ziet je op de afbeelding.
65
Pas de e-mail aan naar je eigen wensen aan maar let wel op dat je de items tussen {} (zoals bijvoorbeeld {Firstname} niet verandert!! Dit zijn namelijk stukjes code en daar blijf je beter vanaf. 3.
Wat je deed met de ‘Automatic default email’ doe je ook met de ‘AdminOrder Form Email’. Ik heb deze aangepast om naar klanten te versturen als zij de downloadlink niet ontvangen hebben omdat er iets mis ging bij iDeal (dat gebeurt namelijk wel eens). Rechts zie je mijn voorbeeld.
Als je deze twee formulieren aangepast hebt hoeven jouw klanten geen Engels meer te kunnen begrijpen om jouw webwinkel en de berichten uit jouw webwinkel te begrijpen.
66
67
Stap 9: Widgets Widgets zijn kleine handige venstertjes die je binnen WordPress op allerlei plaatsen tevoorschijn kunt toveren. In zijbalken en bijvoorbeeld boven- en/of onder in je blog. Waar je een widget kunt plaatsen hangt een beetje van het WordPress thema af dat je gebruikt. In deze gids gaan we er van uit dat je de widgets in de zijbalk kunt plaatsen. Om de widgets te beheren ga je naar je WordPress dashboard, klik je op Weergave, daarna op Widgets en sleep je de gewenste widget naar de plek waar je hem hebben wilt. Wanneer een widget eenmaal op de plaats van bestemming staat kun je deze vaak nog naar eigen wens aanpassen. Rechts zie je een schermafbeelding van de eShop Widgets die ik in mijn website gebruik. (er is nog een zoekfunctie voor producten, maar die gebruik ik niet en spreekt voor zich) Van boven naar beneden: 1.
eShop Products Toont producten naar keuze
2.
eShop Payments Toont geaccepteerde betaalwijzen
3.
eShop Cart (improved) Toont het winkelmandje
68
69
Stap 9A: eShop Products Widget Deze widget laat op de door jou gewenste plek een selectie van één of meer van jouw producten zien. Zoals je rechts ziet kun je de widget op een aantal manieren configureren. De bezoekers van de website zien een Nederlandse tekst. De widget zoals hij hier is geconfigureerd toont maximaal 2 producten die ‘in verkoop’ zijn. De widget toont de producten als tekst, niet als plaatje.
70
Stap 9B: eShop Payments Widget Deze simpele widget toont de betaalmethodes die jij geactiveerd hebt in eShop.
Behalve een titel hoef je voor deze widget niets in te stellen.
71
Stap 9C: eShop Winkelmandje Widget Ook een leuke widget. Dit is een widget die een winkelmandje voor de klant tevoorschijn tovert op het moment dat hij iets aan het winkelmandje heeft toegevoegd. Pure magie!! Dus: een bezoeker van de website ziet geen winkelmandje, tot hij iets bestelt en dus klant wordt. Dan verschijnt in de zijbalk ineens de inhoud van het mandje. Om het mandje alleen te tonen als er wat in zit moet je de widget wel configureren zoals ik dat gedaan heb. Hoeft niet natuurlijk hè. Ik kan me voorstellen dat jij het juist belangrijk vindt dat iemand ALTIJD een mandje ziet. Zo van, hé!! Het mandje is nog leeg! Gaat er is gauw wat in doen! Maar dat is een persoonlijke keuze.
72
73
Stap 10: Opzetten winkel Ok, de installatie is klaar, de betalingen werken en je kunt aan de zijkant van jouw WordPress website zien dat je iets verkoopt, wat je verkoopt en hoe je kunt betalen. Dan wordt het nu tijd om je te realiseren dat je overal en op iedere pagina artikelen kunt aanbieden, dat je die bijvoorbeeld in een overzicht kunt zetten op je pagina ‘Winkel’, dat je deze aan je menu kunt toevoegen en dat je ook in individuele blogposts een artikel te koop kunt zetten. Daarnaast zijn er werkelijk nog heel veel andere mogelijkheden zoals kortingscodes, staffelkortingen, verzendkosten per regio, belastingen, productopties (bijvoorbeeld kleuren of maten) enzovoort enzovoort. Ook kun je zelf de ‘looks’van je winkelpagina’s aanpassen, andere knoppen bedenken en meer, meer meer. Dat zijn dus veel vragen, uitdagingen en uurtjes in het verschiet. Maar goed, je komt er vast en zeker uit. Dit is je immers ook gelukt! Ik wens je goede zaken! En nou, hup! Verkopen! Je moet die euro’s die je hebt uitgegeven aan dit boekje immers terug verdienen.
74
75
76
77
78
Extra Oplossingen Op de volgende pagina’s vind je extra oplossingen, dat zijn oplossingen waarnaar verwezen wordt als de standaard oplossing niet werkt of problemen geeft.
79
1: Handmatige installatie eShop Als het je niet lukt om eShop automatisch te installeren zul je dat handmatig moeten doen. Dat doe je als volgt 1.
Download de eShop plugin hier.
2.
Pak het pakketje uit en upload de bestanden via FTP naar de map: /wp-content/plugins/eshop/
3.
Ga naar je WordPress dashboard, klik op ‘Plugins’, zoek eShop en klik op ‘activeren’.
4.
Ga hier verder.
80
2: Het downloadbestand Wanneer de webserver waarop jouw WordPress installatie draait slechts kleine bestandjes toestaat om te uploaden, dan kun je een probleem hebben met een mooi eBook vol foto’s met een grootte van bijvoorbeeld een 25 MB. Als dat problemen geeft kun je daar wel omheen werken. Dat doe je als volgt: 1.
Je upload via eShop een heel klein bestandje die je de naam geeft van jouw downloadbestand. (jouw eBook, MP3, etc.)
2.
Via FTP overschrijf je dit bestand met het juiste, veel te grote bestand. Dit doe je in de map: /wp-content/eshop-downloads/
3.
Daarmee is het probleem getackeld. De makers van eShop geven aan dit probleem op te willen lossen, maar voorlopig werkt dit prima.
Ga terug naar waar je was.
81
3: iDeal Tests werken niet! Maak je niet druk, er iets aan te doen. Als je probleem is dat alleen de eerste test van iDeal, de overboeking van 1 Euro goed is gegaan en het systeem bij iedere volgende poging blijft melden dat ‘de betaling al voltooid is’ dan doe je het volgende: 1.
Controleer of de cacheability (hier besproken) goed staat.
2.
Controleer of de iDeal ‘Test Mode’ leeg is, maak hem anders leeg. Je vindt hem hier.
3.
Sluit je browser en probeer het opnieuw
4.
Controleer jouw iDeal testgegevens (Accpetant ID en Hashkey).
5.
Zorg dat je heel helder hebt dat je de gegevens van de TEST website van iDeal hebt ingevoerd, niet van de gewone website.
82
4: Certificaat waarschuwing? Wanneer je iDeal in eShop aan de eerste tests onderwerpt kan het zijn dat jouw browser een waarschuwing geeft dat het certificaat van die website niet meer geldig is. In dit geval hoef je daar niet druk over te maken.
83
84
85
86
Contactgegevens Berend Quest Burgwerd Twitter: @berendquest Facebook: berend.quest Google+: Berend Quest Web: berendquest.nl E-mail:
[email protected]
87
‘ALS BEREND QUEST DE WERELD ZOU BEGRIJPEN, DAN PAS HAD IK EEN ROTLEVEN!’ eShop voor WordPress is een prachtige manier om van je WordPress installatie een echte, goed werkende webwinkel te maken inclusief iDeal en Paypal betalingen. Geen externe contracten, gewoon met je Paypal rekening en iDeal via de eigen bank. Moet je wel weten hoe je eShop werkend krijgt. Daarvoor koop je dit boekje. Kopen? Ja kopen. Maar je kunt gerust eerst proberen of je er zelf uitkomt, want heel erg moeilijk is het niet. Lukt het je niet, dan helpt dit boekje je om eShop wel werkend te krijgen. En dat is nog altijd een stuk voordeliger dan het inhuren van een ICT specialist en werkt beter dan ‘die handige buurjongen’!
88
