Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

59
Webshop zonder webshop ANJA DE CROM, JUG UTRECHT, 14 SEPTEMBER 2015 WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Transcript of Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

Page 1: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Webshop zonder webshop

ANJA DE CROM, JUG UTRECHT, 14 SEPTEMBER 2015

Page 2: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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

Page 3: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Vier soorten bestelformulier1. 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

Page 4: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 5: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

De simpelste: formulier + factuur

+ +

Page 6: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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)

Page 7: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 8: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 9: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 10: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 11: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 12: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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

Page 13: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Zorg dat de Payment plugin aan staat.

Page 14: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 15: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 16: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 17: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Payment geactiveerd? Dan zou je onderaan het lijstje met formuliervelden deze betalingsvelden moeten zien.Klik op “Meerdere producten”

Page 18: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Vul nu bij “Items” de dingen in die je wilt verkopen. De volgorde is: 1. Prijs (getal)2. Verticaal streepje3. Omschrijving

Page 19: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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.

Page 20: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Voeg nu ook een veld “Totaal” toe. Hier hoef je verder niets mee te doen; dat berekent straks automatisch wat er betaald moet worden.

Page 21: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 22: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Bevestigingsmail•Klik op “Eigenschappen” en op “Gebruiker e-mails”•Vul de benodigde informatie in en klik op “Wijzig de e-mail tekst”

Page 23: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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.

Page 24: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

PDF toevoegen

Page 25: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

PDF toevoegen

Page 26: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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

Page 27: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Formulier met ingebouwde iDEAL-functie

+ ++

Page 28: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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

Page 29: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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

Page 30: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 31: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Handleiding (in het Engels):http://www.chillcreations.com/nl/manuals/ccideal-platform/290-adding-ideal-to-rsform-pro

Page 32: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 33: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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

Page 34: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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.

Page 35: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 36: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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.

Page 37: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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!)

Page 38: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Betaling achteraf

+ ++

Page 39: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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

Page 40: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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

12

Page 41: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Maak eerst het inschrijfformulierDit 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.

Page 42: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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:

Page 43: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 44: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Informatie uit het eerste formulier halen

Klik in het factuurformulier op “Eigenschappen” en dan op “Scripts”

Page 45: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 46: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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.

Page 47: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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);

}

Page 48: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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}

Page 49: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Gewone informatie overnemenVoor het overnemen van de naam en de gekozen workshop heb ik een veld van het type “Vrije tekst” gebruikt.

Page 50: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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.

Page 51: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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.

Page 52: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Maak het veld readonlyKlik op “Attributen” en vul bij “Additionele attributen” in:

readonly=“readonly”

Nu kan de klant het bedrag niet meer zelf aanpassen.

Page 53: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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.

Page 54: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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

Page 55: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Betaling achteraf

+ ++

Page 56: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

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.

Page 57: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Page 58: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Aquarelleren

Page 59: Een Joomla-webshop bouwen zonder webshop-extensie, met formulieren

WEBSHOP ZONDER WEBSHOP - ANJA DE CROM 2015

Nog vragen?