De extensie Commerce is de standaard TYPO3 extensie voor het opzetten van een webshop.

Transcriptie

1 Status van dit document - Draft Deze handleiding is net als de extensie Commerce constant in ontwikkeling en bevindt zich nog in een vroeg stadium. Hierdoor is het mogelijk dat bepaalde delen van de functionaliteit nog niet belicht worden omdat deze nieuw is of dat sommige woorden op het scherm afwijken van de handleiding. Hiervoor bieden wij u bij voorbaat onze excuses aan. Toch hopen wij dat u samen met ons profiteert van de mogelijkheid om nu al van de nieuwste functionaliteit in het krachtige Commerce pakket gebruik te maken. Commerce (de webshop) De extensie Commerce is de standaard TYPO3 extensie voor het opzetten van een webshop. ➋ ➊ ➌ Een complete Commerce-opstelling bestaat minimaal uit: 1. een apart blok in het backend menu 2. een aantal pagina's die door de admin of door Netcreators zijn aangemaakt 3. een set speciale systeemmappen (automatisch aangelegd) Pagina 1

2 Producten, artikelen en categorieën Wat zijn producten en artikelen? Voordat we echt aan de slag gaan eerst even iets over producten en artikelen. We verkopen alleen artikelen. Een product is een verzameling van één of meer producten. Voorbeeld: Het product T-shirt Bob Marley We kunnen meerdere artikelen T-shirt Bob Marley onderscheiden. T-shirts in verschillende maten, kleuren en kwaliteiten. Aan ons de keus of we bij het kenmerk korte / lange mouwen voor elk een ander artikel of een ander product aanmaken. Als voor de producten, per product slechts 1 artikel onderscheiden kan worden, kan dit bij de installatie van de extensie met een parameter aangegeven worden. Bij het opslaan van een product, tijdens het aanleggen, wordt dan direct ook een artikel aangemaakt. Hiërarchie Het bestand met artikelen wordt hiërarchisch opgebouwd. Het eerste niveau is de categorie. De categorieën op zich kunnen ook weer hiërarchisch gestructureerd worden. Daarna komt het product en tenslotte de artikelen. Categorieën Op het hoogste niveau zien we slechts twee categorieën. In dit voorbeeld Productcatalogus en SYSTEM. De categorie SYSTEM wordt niet verder onderverdeeld. De categorie Productcatalogus is het hoogste niveau van de producten/artikelen. Onder de Productcatalogus komen dan de hoofdcategorieën die op hun beurt eventueel ook weer worden opgedeeld in subcategorieën. Daarnaast kennen we ook categorieën voor de sturing van de output. Met bijvoorbeeld de categorie homepage kunnen we bepaalde producten/artikelen op de homepagina tonen met uitsluiting van de rest. Virtuele producten en artikelen. Bij installatie worden 2 virtuele producten aangemaakt. Deze virtuele producten en artikelen vinden we onder de categorie SYSTEM. Dat zijn PAYMENT (betaalwijze) en DELIVERY Pagina 2

3 (levering). Als artikelen bij PAYMENT vinden we dan invoice (factuur/rekening), prepayment (vooruitbetaling), creditcard en cashondelivery (rembours). Bij het product DELIVERY is er ook alvast een artikel afleverwijze (sysdelivery) geïnstalleerd. Eén van de voordelen is dat we een afleverwijze ook een prijs kunnen geven (porto/transportkosten/handlingskosten). Eigenschappen Heel belangrijk binnen Commerce zijn eigenschappen (eigenschappen). Elk product heeft zijn specifieke eigenschappen, zoals maat, kleur of materiaal. Door van te voren via het menupunt systeemgegevens de juiste eigenschappen in te vullen kunnen we veel tijd besparen bij het aanmaken van artikelen. In het volgende hoofdstuk zullen wij zien hoe we nieuwe eigenschappen kunnen maken en hoe we deze koppelen aan producten. Er zijn ook nog speciale eigenschappen die door het systeem aan elk product worden toegekend. Dit zijn de prijs, de leverancier (per artikel) en de fabrikant (per product). Leveranciers en fabrikanten kunnen via de betreffende knoppen worden ingevoerd bij het menupunt systeemgegevens. Pagina 3

4 De belangrijkste reden om eigenschappen in te voeren is om de verschillende soorten informatie die bij een product horen ook in de frontend van elkaar te kunnen scheiden, zodat bijvoorbeeld alle eigenschappen consequent kunnen worden vormgegeven of zodat er bijvoorbeeld een extensie kan worden gemaakt om op bepaalde eigenschappen te sorteren of te zoeken. Dit voorbeeld bevat de eigenschappen Auteur(s), Uitvoering en Uitgever. Door de consequente vormgeving weten gebruikers direct waar ze moeten kijken. Pagina 4

5 Het begin In deze handleiding zullen wij een kleine webshop voor een fictieve muziekwinkel opzetten, die professionele opnameapparatuur en platen verkoopt. Na installatie is er alleen nog maar een categorie SYSTEM. Hierboven hebben we al gezien dat deze categorie al een aantal virtuele artikelen voor het systeem bevat. Zelf voegen we nu een categorie Productcatalogus toe. Vervolgens voegen we aan de Productcatalogus alle producten en artikelen toe. Een categorie aanmaken Op de bekende TYPO3 manier (zie Handleiding TYPO3) kunnen we zowel via het contextmenu als via de link Maak nieuw record nieuwe items aanmaken. In bovenstaand voorbeeld ziet u dat wij de categorieën Productcatalogus, Audioapparatuur en Muziekdragers hebben gemaakt. De laatste twee zijn subcategorieën van de eerste. Door een categorie te selecteren (op de naam te klikken) en daarbinnen een subcategorie te maken kunt u de boomstructuur steeds verder uitbreiden. Pagina 5

6 Er is hiervoor geen "beste manier", maar het systeem biedt wel voldoende flexibiliteit om zich aan elke organisatie aan te passen. Producten en artikelen aanmaken Binnen de categorieën kunnen producten worden aangemaakt. Het verdient aanbeveling om zo specifiek mogelijk te zijn bij het kiezen van de producten. De verschillende opties kunnen vervolgens als artikelen worden aangemaakt. In ons voorbeeld hebben wij de subcategorie Fay Lovsky aangemaakt (dat is de naam van de artiest). Daaronder hebben we per album een product gemaakt en per soort muziekdrager (CD of LP) een artikel. In het volgende voorbeeld zullen we een nieuwe album toevoegen. ➋ ➊ Hiervoor klikken we eerst op de naam van de artiest (Fay Lovsky) en vervolgens op het groene plus symbooltje in het kader Producten. Pagina 6

7 ➊ In het volgende scherm vullen we de naam van het product ( Numbers ) in. ➋ ➎ ➌ ➍ Door op het tabblad Artikelen aanmaken te klikken en vervolgens te kiezen voor Nieuwe Pagina 7

8 artikelen kunnen we het gewenste artikel toevoegen. Hiervoor vinken we het vakje Maak een leeg artikel aan en klikken we op Opslaan (Het diskettesymbooltje). Let op: Momenteel werkt het opslaan van nieuwe artikelen alleen wanneer u het meest linkse knopje klikt, maar niet wanneer u bijvoorbeeld opslaan en sluiten klikt. ➊ ➋ Als alles goed is gegaan is het product Numbers in de boomstructuur verschenen met een plusje ervoor. Om het artikel te bewerken klikken we op het plusje, daarna op de naam van het artikel en wijzigen we vervolgens de naam van het artikel (Numbers CD). Nu klikken we nog één keer op opslaan en zien we het resultaat van onze moeite in de boomstructuur. Pagina 8

9 Eigenschappen toevoegen Nu gaan we via het menupunt Systeemgegevens een aantal eigenschappen invoeren, passend bij muziekdragers. ➋ ➌ ➊ Hiervoor klikken we eerst op Systeemgegevens, dan op Eigenschappen en vervolgens op Maak nieuwe Eigenschap ➏ ➍ ➎ In dit voorbeeld maken we een eigenschap voor de totale speelduur van een CD of LP. De Eenheid die hierbij hoort is minuten, afgekort als "min." Denk er tot slot nog even aan dit eigenschap op te slaan door op het diskettesymbooltje te klikken. Pagina 9

10 Eigenschappen koppelen Nadat we een aantal eigenschappen hebben aangemaakt kunnen we deze aan de producten koppelen. ➍ ➊ ➋ ➌ Hiervoor klikken we eerst op de naam van het product, dan op het tabblad Attributen kiezen. Hier kunt u eigenschappen op vijf verschillende manieren aan de producten koppelen: 1. Via het selectievakje Kies (of Meerkeuze in de nieuwe vertaling) kunt u waardelijsten koppelen, zoals een lijst met kleuren of maten. Na de koppeling kunt u via artikelen aanmaken per waarde een artikel genereren. Dus bijvoorbeeld de artikelen M/L/XL bij een T-shirt. Zie ook het hoofdstuk eigenschappen met waardelijsten. 2. Het vakje Zal is bedoeld voor eigenschappen die altijd op de frontend worden weergegeven, ook al zijn deze niet ingevuld. 3. Het vakje Kan is bedoeld voor eigenschappen die alleen op de frontend worden weergegeven wanneer ze ook daadwerkelijk zijn ingevuld. 4. Met het vakje Product is het mogelijk om eigenschappen te kiezen die niet per artikel gelden, maar per product. Pagina 10

11 5. Het vakje Filter eigenschappen ten slotte is bedoeld om vast te leggen op welke eigenschappen kan worden gesorteerd met de zoekfunctie. In ons voorbeeld koppelen we de eigenschappen Aantal nummers en Totale speelduur aan het product Numbers en slaan dit op. ➊ ➋ LET OP: door op het symbooltje van een categorie te klikken en vervolgens op Bewerken is het mogelijk om bepaalde eigenschappen voor een hele categorie te kiezen. Op deze manier is het mogelijk enorm veel tijd te besparen. Pagina 11

12 Waardes voor eigenschappen invoeren Wanneer de eigenschappen eenmaal zijn gekoppeld zoals hierboven beschreven, dan kunnen ze worden bewerkt door binnen een product of artikel op het tabblad Attributen wijzigen te klikken. ➍ ➋ ➊ ➌ In het voorbeeld vullen we het aantal nummers en de speelduur van het album Numbers in en slaan dit weer op door op het diskettesymbooltje te klikken. Pagina 12

13 Eigenschappen met waardelijsten Bepaalde eigenschappen in een webwinkel hebben veelvoorkomende vaste waardes. Indien dit bij u ook het geval is, dan kunt u deze waardes alvast in het systeem zetten, zodat u zichzelf het werk van het invullen kunt besparen. Een voorbeeld is de veelvoorkomende eigenschap kleur, maar het is ook mogelijk om auteurs of materialen die vaker worden gebruikt in een waardelijst te zetten. ➋ ➊ Maak een nieuwe eigenschap aan zoals hiervoor beschreven. Noem deze Kleur. Vink in het tabblad Basisgegevens het vakje Heeft lijst van waardes aan. Klik in de pop-up op OK. Hierdoor wordt de eigenschap direct opgeslagen. Pagina 13

14 ➊ ➋ Wissel naar het tabblad Gerelateerde waarden en klik op Waarde toevoegen. Pagina 14

15 ➋ ➊ Vul de waarde Blauw in en sla de waardelijst op. Pagina 15

16 Nu gaan we de waardelijst koppelen aan een product. Volg hiervoor dezelfde stappen als in het hoofdstuk Eigenschappen koppelen. ➋ ➊ In het tabblad Attributen kiezen ziet u de nieuwe eigenschap Kleur nu ook bij het vakje Kies staan. selecteer hier Kleur en sla de record op. Pagina 16

17 Indien u nu naar het tabblad Artikelen aanmaken en Nieuwe artikelen wisselt ziet u naast de optie op een leeg artikel aan te maken ook direct de mogelijkheid om een blauw of een zwart artikel te maken. ➍ ➊ ➋ ➌ Kies hier voor Alle Artikelen kiezen en sla de record op. Pagina 17

18 Er verschijnen twee nieuwe artikelen. Via het tabblad Attributen wijzigen van de nieuwe artikelen kunt u zien dat er inderdaad bij de eigenschap kleur de juiste waarde is ingevuld. Op deze manier kan een waardelijst in combinatie met het vakje kies u enorm veel tijd bij het invoeren besparen. Pagina 18

19 Commerce Frontend Plugins Overzicht Commerce kent standaard 5 frontend plugins. Indien u met de wizard een nieuw content element toe wilt voegen herkent u de commerce elementen aan het rode commerce driehoekje met de C erin. Voor admins is de belangrijkste plugin de Product Listing plugin. Het gebruik hiervan zullen we in de volgende paragrafen behandelen. De overige plugins (Basket, Checkout, Address Management en Invoice) zijn al door Netcreators geplaatst. Let er wel op dat de pagina's met deze plugins niet veranderd, verplaatst of verwijderd mogen worden. In het bovenstaande voorbeeld heten de betreffende pagina's Producten, Winkelmandje, Afrekenen, Adressenbeheer en Facturen). De benaming in uw installatie kan hiervan afwijken. Met behulp van speciale extensies kunnen plugins worden toegevoegd. In bovenstaand voorbeeld zijn dit: other customers also bought en other products from this category. Pagina 19

20 Categorieën weergeven Met de plugin product listing kunnen we producten en categorieën van Commerce zichtbaar maken op de frontend. Hiervoor maken we eerst een nieuwe pagina aan (zie de standaard redacteuren handleiding). In ons voorbeeld heet deze pagina Boeken. Vervolgens plaatsen we de plugin op de pagina. ➌ ➊ ➋ Maak hiervoor een nieuwe content element en kies het type Commerce: Product Listing. Bij de plugin opties kiest u vervolgens de Teaser view en de naam van een categorie die u op de frontend wilt weergeven. Tenslotte slaat u de instellingen op. Voor dit voorbeeld zetten we twee plugins onder elkaar. Eentje met de categorie Leesladder als selectie en eentje met de Subcategorie Leesladder Avi 2 t/m 5. Pagina 20

21 Op de frontend ziet het resultaat van deze instellingen er als volgt uit: Bovenaan zien we een beschrijving van de categorie en daaronder de producten uit die categorie. U ziet dat de plugin op dit moment maar één niveau weergeeft, dus per subcategorie zult u een aparte plugin neer moeten zetten. Ook dit kan eventueel per installatie verschillen. Pagina 21

22 Specifieke producten weergeven Het is ook mogelijk om in plaats van hele categorieën slechts 1 product weer te geven per keer. ➊ Hiervoor plaatst u ook weer Product Listing plugin op een pagina en vervolgens kiest u bij product het product dat u wilt tonen (in dit geval 0826C). Sla de instellingen op en op de frontend ziet u het resultaat: Pagina 22

23 Speciale functies Met een speciale extensie kunnen naast de informatie over het product ook suggesties worden weergegeven. In ons voorbeeld is de productpagina zo ingesteld dat wanneer een gebruiker een link klikt uit een lijstweergave deze ook suggesties weergeeft: Hiervoor worden de plugins other customers also bought en other products from this category gebruikt. Op de frontend geeft dat het volgende resultaat: Let op: Suggesties worden alleen getoond wanneer de productpagina ook daadwerkelijk wordt aangeroepen. Wanneer er gebruik wordt gemaakt van de mogelijkheid om handmatig een enkel product te tonen, zoals in de vorige paragraaf werken deze plugins om technische redenen niet. Pagina 23

24 Bestelsysteem Testen In de volgende screenshots tonen we in eenvoudige stappen hoe u het bestelsysteem kunt testen: Begin door een aantal bij een artikel in te vullen en op bestel te klikken. Pagina 24

25 Klik vervolgens in het winkelmandje op Afrekenen. Pagina 25

26 Vul een (fictief) adres in. en klik op Verder. Pagina 26

27 Bevestig de bestelling en de leveringsvoorwaarden door nogmaals op Verder te klikken. Pagina 27

28 Nu de bestelling bevestigd is kan deze via de backendmodule Bestellingen worden ingezien. In het volgende hoofdstuk bekijken we hoe dat gaat. Pagina 28

29 Backendmodule Bestellingen Klik op de module bestellingen onder het kopje Commerce. Zorg ervoor dat in het selectievakje rechts bovenaan de optie Bestelgegevens is geselecteerd. Pagina 29

30 Om de bestelling te kunnen zien die wij in het vorige hoofdstuk hebben ingevoerd klikken we op Inkomend. De bovenste bestelling op naam van Netcreators is degene waarin we zijn geïnteresseerd. Klik op het symbooltje voor de bestelling en kies vervolgens de optie Bewerken (het potloodje). Pagina 30

31 In dit scherm zien we de datum en een automatisch gegenereerd uniek nummer voor de order. We kunnen in dit scherm commentaar invullen (als iemand bijvoorbeeld met een opmerking belt). Heel belangrijk is ook de mogelijkheid om de order status aan te passen. Waarschuwing: De betaalwijze dient u hier onder geen beding aan te passen, tenzij er daarvoor speciale instructies zijn voor uw eigen installatie. Pagina 31

32 Op het volgende tabblad zien we de klantgegevens. Hier is het mogelijkheid om te zien of de klant als website gebruiker was ingelogd tijdens het bestellen en zo ja onder welke account. Door op het symbooltje voor de naam van de klant (het adresboekje) te klikken kunt u de gegevens van de klant bewerken. Let op: De adressen worden centraal opgeslagen, dus wanneer u een adres verandert van een geregistreerde gebruiker, dan verandert dat adres bij alle bestellingen van die gebruiker. Pagina 32

33 Op het volgende tabblad afleveradres ziet u in dit geval hetzelfde adres omdat wij dat zo hadden aangegeven tijdens de bestelling. Dit is ook daadwerkelijk dezelfde adresrecord, dus een wijziging hier heeft hetzelfde effect als een wijziging bij de klantgegevens. Het is in dit geval niet mogelijk om achteraf een ander afleveradres aan een bestelling te koppelen. De bestelling zal desgewenst opnieuw moeten worden ingevoerd. Pagina 33

34 Onder het laatste tabblad artikel vindt u het overzicht van de bestelling. Tip: Indien deze optie op uw site is geïnstalleerd kunt u een factuur openen door op de witte tekst Rekening afdrukken te klikken. Pagina 34

35 Overige Opties en Instellingen In de voorbeelden uit de vorige hoofdstukken hebben wij voor de eenvoud een aantal opties overgeslagen. In de volgende screenshots staan aantekeningen om u op weg te helpen met de details van uw Commerce installatie. Mocht een bepaalde optie hier ontbreken, dan is deze wellicht nieuw of nog ongedocumenteerd. In dit vakje kunt u een teasertekst invoeren die op de frontend in de via de plugin Product listing wordt uitgegeven, wanneer de teaserweergave wordt gekozen. Hier is het mogelijk om naast de categorie waarin u het product heeft aangema akt nog meer categorieën te kiezen waarbinnen het product valt. Dit scherm is het algemene tabblad van een product. Pagina 35

36 Bepaal de volgorde van producten binnen de categorie. Hier kiest u de velden die weer moeten worden gegeven in deze lijstweergave. Selecteer meerdere velden met Ctrl en bevestig met de knop Velden instellen. Met dit vinkje worden net als in de gewone lijstweergave extra opties zichtbaar gemaakt, zoals de knoppen om de volgorde van records te bepalen. Dit scherm opent u wanneer u op een categorie klikt. Pagina 36

37 Met deze knoppen kunt u de volgorde van artikelen bepalen. Dit scherm opent u door op een product te klikken en het tabblad Attributen aanmaken te kiezen. Pagina 37