Stel, je hebt een website waarop je maar een paar dingen wilt verkopen. Workshops bijvoorbeeld, of je eigen boek, of aandelen voor een crowdfundingsactie of… Dan kun je daarvoor een webshopextensie installeren. Maar dat is voor die vijf workshops of dat ene boek misschien toch wat veel van het goede. Het kan anders: met formulieren.
Met behulp van de extensies RSForm!Pro en cciDEAL kun je zonder webshop toch producten en diensten verkopen via je website. Mét of zonder iDEAL, met directe betaling of betaling achteraf, na ontvangst van de factuur.
Goed om te weten: de manier waarop je voor deze webshop-zonder-webshop met formulieren omgaat kun je ook gebruiken voor andere toepassingen.
Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren
1. Webshop zonder webshop
ANJA DE CROM, JUG UTRECHT, 14 SEPTEMBER 2015
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
2. In welke situatie(s)?
•Als je maar een paar artikelen (of diensten) verkoopt via je website
•Als je je niet wilt verdiepen in een webshop extensie (steile leercurve)
•Als je niet zo’n grote extensie wilt installeren
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
3. Vier soorten bestelformulier
1. Met automatische factuur, betalen met bankoverschrijving
2. Met ingebouwde iDEAL-functie, factuur na betaling
3. Met automatische factuur, betalen achteraf met iDEAL
4. Met door administrator aan te passen factuur
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
6. Dit heb je nodig
•RSForm!Pro (betaalde versie, vanaf € 19)
•RSForm!Pro PDF plugin (downloaden na
aanschaf RSForm!Pro, kost niets extra)
•RSForm!Pro Payment Package (idem)
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
12. Om een lijstje met producten/diensten en de bijbehorende prijzen
te kunnen laten zien heb je betalingsvelden nodig.
Daarvoor gebruik je het Payment Package van RSForm!Pro. Die heb
je natuurlijk al gedownload bij RSForm!Pro
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
13. Zorg dat de Payment plugin aan staat.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
17. Payment geactiveerd?
Dan zou je onderaan het lijstje met
formuliervelden deze betalingsvelden
moeten zien.
Klik op “Meerdere producten”
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
18. Vul nu bij “Items” de dingen
in die je wilt verkopen. De
volgorde is:
1. Prijs (getal)
2. Verticaal streepje
3. Omschrijving
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
19. Bij de tab “Attributen” kun je
kiezen hoe je het wilt laten zien.
Ik heb gekozen voor een verticale
checkbox.
Je kunt ook kiezen voor
radiobuttons of een dropdown
lijst.
Er is ook nog een optie
horizontaal.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
20. Voeg nu ook een veld “Totaal” toe.
Hier hoef je verder niets mee te doen;
dat berekent straks automatisch wat er
betaald moet worden.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
22. Bevestigingsmail
•Klik op “Eigenschappen” en op “Gebruiker e-mails”
•Vul de benodigde informatie in en klik op “Wijzig de
e-mail tekst”
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
23. Bevestigingsmail
•Er opent een popup waarin je
kunt typen
•Als je op de knop “Toggle snel
toevoegen” klikt, zie je al je
formuliervelden (“Caption” is
de titel, “value” is wat de
gebruiker heeft ingevuld). Je
kunt de velden selecteren en in
de mail plakken.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
26. PDF
•Verzin een bestandsnaam en zet je
schrap voor een nostalgisch stukje
html, compleet met tabellen.
•Je kunt hier natuurlijk ook velden uit je
formulier invoegen.
•RSForm!Pro heeft een voorbeeld-PDF:
https://www.rsjoomla.com/support/
documentation/rsform-pro/
plugins-and-modules/
rsform-pro-pdf-plugin.html
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
28. Dit heb je nodig
•RSForm!Pro (betaalde versie, vanaf € 19)
•RSForm!Pro PDF plugin (kun je downloaden na
aanschaf RSForm!Pro, kost niets extra)
•RSForm!Pro Payment Package (idem)
•ccIDEAL
•PLUS: iDEAL-abonnement bij de bank of bij een provider
als Mollie of Targetpay
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
29. Voor je iDEAL in je formulier gaat zetten…
•Zorg dat je account helemaal goed ingesteld is
•Zowel bij je eventuele internetkassa als bij ccIDEAL
•ccIDEAL heeft een tabblad “Integraties” waar je
allerlei plugins kunt installeren met een 1-click-install
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
31. Handleiding (in het Engels):
http://www.chillcreations.com/nl/manuals/ccideal-platform/290-adding-
ideal-to-rsform-pro
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
33. Voeg betalingsmethoden toe
•(Betaling) Paypal, (Betaling) Offline en (Payment)
iDEAL zijn in dit formulier de betalingsmethoden
•Paypal moet altijd toegevoegd worden, want
daar is het betalingssysteem van RSForm!Pro op
gebaseerd; voeg het toe en depubliceer het (als
je het niet wilt gebruiken)
•Voeg ook iDEAL toe en eventueel Offline als je
ook met bankoverschrijving wilt laten betalen
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
34. Voeg het veld ‘Kies betalingsmethode’ toe
•Hiermee laat je de gebruiker een keuze maken
uit de betalingsmethoden die je in het formulier
hebt staan; die voegt RSForm!Pro zelf toe
•Je hoeft dus alleen de naam en het opschrift
(label) van het veld in te vullen
•Ik heb in dit formulier Paypal niet aan staan en
alleen iDEAL toegevoegd, dus ik heb maar één
betalingsmethode, daarom noem ik het veld
iDEAL.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
36. Zo ziet het er dan dus uit: een veld voor Paypal dat niet gepubliceerd is, een
veld voor iDEAL dat ‘Betaling’ heet, en een keuzevakje voor de
betalingsmethode dat maar één keuzemogelijkheid heeft.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
37. Als iDEAL je enige betaalmethode is…
•… dan hoef je de gebruiker dus niet lastig te
vallen met een keuzevakje.
•Klik “Eigenschappen” en dan “CSS en Javascript”
•Typ in het CSS-vak:
<style>.rsform-block-naamvanjeidealveld {
display: none;
}
</style>
•Je iDEAL-blok is dan nog wel gepubliceerd maar
niet meer zichtbaar (bedankt Frits!)
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
39. Dit heb je nodig
•RSForm!Pro (betaalde versie, vanaf € 19)
•RSForm!Pro PDF plugin (kun je downloaden na
aanschaf RSForm!Pro, kost niets extra)
•RSForm!Pro Payment Package (idem)
•ccIDEAL
•PLUS: iDEAL-abonnement bij de bank of bij een provider
als Mollie of Targetpay
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
40. En: twee formulieren!
•Een standaard aanmeldformulier zoals het allereerste
voorbeeld
•Een formulier dat de gegevens uit het eerste formulier
ophaalt en waar een iDEAL-betaalmogelijkheid in zit
1
2
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
41. Maak eerst het inschrijfformulier
Dit is een gewoon inschrijfformulier, met één verschil: in de email en in de PDF
factuur staat een link: “betalen met iDEAL”.
Die link is als volgt opgebouwd:
jouw-website/index.php?option=com_rsform&formId=XXX&submissionId={global:submissionid}
Uitgesplitst:
jouw-website/
index.php?option=com_rsform&formId=XXX
&submissionId={global:submissionid}
Bij XXX vul je straks het ID van het factuurformulier in.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
42. De klant krijgt na invullen een email met een link naar zijn eigen factuurgegevens.
Zo ziet de URL eruit:
Zo ziet het formulier er in de frontend uit:
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
44. Informatie uit het eerste formulier halen
Klik in het factuurformulier op “Eigenschappen”
en dan op “Scripts”
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
46. Dit is niet eng .
Het is een standaard stukje code.
Dit script doet niets anders dan kijken naar de url en daar het ID van het andere
formulier uit halen.
Het ID heb je nodig om ook de andere velden op een supermakkelijke manier uit
het andere formulier te halen.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
47. Kopieer deze code in het eerste script-vakje:
// Get the submission ID from the URL
$submissionId = JRequest::getInt('submissionId');
if ($submissionId) {
// Use the RSForm! Pro helper to retrieve the replacements.
list($replace, $with) = RSFormProHelper::getReplacements($submissionId);
// Replace the placeholders.
$formLayout = str_replace($replace, $with, $formLayout);
}
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
48. Zie je wel, niet eng .
Nu kun je de velden van je formulier gaan vullen met de informatie uit het
eerder ingevulde formulier.
Je zet ze tussen accolades:
•eerst de naam van het veld zodat RSForm weet welk veld je wilt gebruiken;
•en dan de waarde, dus wat de gebruiker heeft ingevuld. Die heet “value”.
Wil je bijvoorbeeld de naam van de gebruiker tevoorschijn toveren, dan gebruik
je daarvoor de toverspreuk:
{Naam:value}
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
49. Gewone informatie overnemen
Voor het overnemen van de naam en de gekozen workshop
heb ik een veld van het type “Vrije tekst” gebruikt.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
50. Prijs: gebruik het veld “Donatie”
De gebruiker kan nu natuurlijk geen product en bedrag
meer kiezen, dat heeft hij in het inschrijfformulier al
gedaan.
Je moet nu het totaalbedrag uit het inschrijfformulier
in dit factuurformulier zien te krijgen, en wel zo dat het
als een bedrag herkend wordt.
Daarvoor kun je een donatieveld gebruiken. Klik erop.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
51. Standaard waarde = {totaalveld:value}
Vul in wat je nodig hebt.
Bij “Standaard waarde” vul je de naam in
van het totaalprijsveld uit het
inschrijfformulier (bij mij “Totaalprijs”),
gevolgd door “:value”.
Nu heb je een veld gemaakt waar
automatisch het factuurbedrag wordt
ingevuld. Maar… de klant kan dit bedrag
aanpassen, want het is een donatieveld.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
52. Maak het veld readonly
Klik op “Attributen” en vul bij “Additionele
attributen” in:
readonly=“readonly”
Nu kan de klant het bedrag niet meer zelf
aanpassen.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
53. Pas de link aan in het eerste formulier
Als je het factuurformulier hebt opgeslagen, heb je een ID dat je kunt invullen in de link
waarmee de klant gaat betalen.
Het ID staat in de rechterkolom, onder FormulierID.
Vul het in op de plaats van XXX in je de bevestigingsmail en de PDF van je inschrijfformulier.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
54. Formulier met aanpasbare factuur
•RSForm!Pro (betaalde versie, vanaf € 19)
•RSForm!Pro PDF plugin (kun je downloaden na
aanschaf RSForm!Pro, kost niets extra)
•RSForm!Pro Payment Package (idem)
En ga je werken met iDEAL, dan heb je ook nodig:
•ccIDEAL
•iDEAL-abonnement bij de bank of bij een provider als Mollie of
Targetpay
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015
56. Gebruik alles uit de andere formulieren…
•Een inschrijfformulier met een link… maar nu niet in de gebruikers email maar
in de admin email
•Om velden te kunnen aanpassen gebruik je nu geen “Vrije tekst” veld maar een
gewoon tekstveld
•Om de klant te laten betalen met iDEAL zul je hetzelfde trucje nog eens moeten
uithalen met een link in de gebruikersemail, naar een derde formulier waarin
de factuurgegevens staan, plus de iDEAL betaalfunctie.
WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015