e-commerce

Inleiding #

Zo ziet de hoofdpagina van de ioi e‑commerce er meestal uit:

Verschillende pagina’s vormen de e‑commerce #

1. Eerst de pagina’s die er rechtstreeks mee verbonden zijn:

• Shop: Hier zie je je productselectie.
• Item: Hier kan de klant gedetailleerde informatie over een artikel bekijken. Producten kunnen aan het winkelmandje worden toegevoegd, mits de gebruiker is ingelogd.
• Cart: Hier kan de klant zijn winkelmand bekijken en een bestelling plaatsen. Alleen ingelogde gebruikers hebben toegang tot deze pagina.

1. Vervolgens verschillende documentpagina’s met directe toegang:

• Open orders: Toont de lopende bestellingen van de klant
• Closed orders: Toont de afgesloten bestellingen van de klant
• Deliveries: Toont de leveringen van de klant
• Invoices: Toont de facturen van de klant

→ Alle bijbehorende snelkoppelingen vind je in de Workspace:

Hoe je je e‑commerce instelt (vereenvoudigde versie) #

1. Categorie en artikel aanmaken

• Ga naar ioi E-commerce Category en maak er een aan.
• Ga naar ioi Item en maak een artikel met deze parameters:
  • Een ingestelde e‑commercecategorie
  • Vink Not available for sale uit
  • Vink Public aan
  • Zet de status op Active (wit)

1. Fabrikantencatalogus aanmaken

• Ga naar ioi Manufacturer Catalog en maak een fabrikantencatalogus met deze parameters:
  • Een ingestelde e‑commercecategorie
  • Vink Shop unavailable uit
  • Vink Enabled aan
• Ga naar ioi E-Commerce Settings en klik op Update shop: je hebt nu een basis e‑commerce.

Een e‑commercecategorie aanmaken #

Je moet eerst de categorieën die je op je toekomstige websites wilt tonen aanmaken (of importeren) in ioi E-commerce Category.

→ Dit zijn de categorieën die aan je klanten zullen worden aangeboden:

Voorbeelden van boomstructuur:

Categorieën kunnen veel uitgebreider worden aangepast. Zie {link volgt} voor meer informatie over categorieaanpassing en hun velden.

De volgende stap is het importeren van de artikelinformatie die je op je site wilt verkopen.

Artikelen en fabrikantencatalogus aanmaken #

De artikelen die je op voorraad hebt (ioi Item) en de artikelen die je aanbiedt vanuit een fabrikantencatalogus (ioi Manufacturer Catalog) worden in je e‑commerce getoond.

Je kunt ze handmatig aanmaken, maar het wordt aangeraden om de ingebouwde importtool te gebruiken. Je kunt ze in bulk importeren vanuit een Excel- of CSV-bestand.

Om dit hulpmiddel te gebruiken, koppel je eerst de kolommen in je Excelbestand aan de beschikbare velden van de fabrikantencatalogus en selecteer je de gewenste opties.

Klik daarna op deze knop om de import te starten:

Voor Items en Catalogs heet het veld voor tags gewoon tags en verschijnt dit als Formatted Tags in het document. Voor het juiste formaat zie de volgende sectie.

In de meeste gevallen komen de categorieën en tags van de fabrikant niet overeen met die in je eigen database.

→ Gebruik ioi Shop Tag Conversion [#Tag import and creation] en ioi Shop Category Conversion [#ioi Shop category conversion] om automatisch te converteren naar het juiste formaat.

E‑commerce bijwerken #

→ Ga naar ioi E-Commerce Settings en klik op Update e-commerce.

Wanneer een klant de e‑commercepagina laadt, worden alleen prijzen en vertalingen opnieuw berekend. Prijzen zijn afhankelijk van klantkortingen en voordelen, en vertalingen van de gekozen taal. Artikelspecifieke info wordt realtime opgehaald.

Categorieën, tags en artikelreferenties worden vooraf berekend, dus zonder berekening blijft de shop leeg.

→ Start de berekening via de knop Update e-commerce in ioi E-Commerce Settings voor de hele shop, of via Precalculate whole category in een specifieke ioi E-commerce Category om enkel die categorie te herberekenen.

Een extra vooraf berekende dataset is de zoeklijst in elke taal. Die wordt berekend telkens wanneer de hoofdcategorie ioi E-commerce Category (All categories) wordt herberekend, ongeacht welke knop je gebruikt.

E‑commerce uitschakelen #

Met de knop voor uitschakelen in ioi E-Commerce Settings worden alle e‑commercepagina’s doorgestuurd naar de app zelf (/login), waardoor de shop onzichtbaar en onbruikbaar wordt.

E‑commerce aanpassen (HTML, CSS en JS) #

Elke e‑commercewebpagina vind je in de lijst met webpagina’s; de HTML, JS en CSS zijn volledig aanpasbaar. Je vindt ze in de workspace of in de sectie webpagina’s van de Website-module.

Om te voorkomen dat je wijzigingen bij updates worden overschreven, vink eerst stop syncing aan in ioi E-Commerce Settings. Je krijgt geen nieuwe functies voor deze pagina’s meer, maar je aanpassingen blijven behouden.

Vertalingen #

Elk woord in de e‑commerce kan vertaald worden.

De doeltaal is de taal van de ingelogde gebruiker en de gekozen taal voor de gastgebruiker.

De ingebouwde vertaal­lijst in database en applicatie wordt gebruikt voor algemene woorden, zodat de meeste knoppen correct worden vertaald.

Voor artikelen, catalogi of categoriebeschrijvingen wordt de specifieke vertaling gebruikt als die beschikbaar is; anders valt het systeem terug op de Engelse beschrijving.

Mockup‑afbeelding #

Als je een artikel publiceert zonder afbeelding, wordt er een mockup‑afbeelding gebruikt. Indien mogelijk is dit het logo van je bedrijf, afkomstig uit één van de volgende bronnen in deze volgorde:

• ioi Company (hoofd) / klein logo
• ioi Company (hoofd) / groot logo
• Navbar Settings / Application logo
• Website Settings / Branding image
• Standaardafbeelding voor ioi Manufacturer Catalog (zoals zichtbaar in de lijst)

Public ID #

Het artikel‑ID dat aan je klanten wordt getoond, is het ID in het veld Public ID. Als dit leeg is, wordt het gevuld met het hoofd‑ID. Zo bepaal je zelf wat je aan klanten wilt tonen.

Voorbeeld: Een deel van de informatie uit het hoofd‑ID weghouden voor de klant.

→ De Public ID wordt ook gebruikt om soortgelijke artikelen te vinden die alleen verschillen in bijvoorbeeld maat of kleur.

Artikelen met opties (maat, kleur) #

Je kunt artikelen of catalogi instellen met opties. Maak of importeer eenvoudig een artikel voor elke beschikbare combinatie en gebruik tags om hun opties te specificeren.

Om deze artikelen of catalogi te koppelen, moeten ze hetzelfde Template delen:

Een Template is een ioi Item met de status Template:

→ Door op een optie te klikken, wordt de pagina direct bijgewerkt met de gegevens van het bijbehorende artikel.

Tags #

Tags worden gebruikt om je product te definiëren, het voor klanten makkelijker vindbaar te maken en varianten van hetzelfde product te onderscheiden. Ze bestaan uit een tag subject en een tag value.

Voorbeeld: Color en Blue. Voor artikelen en catalogi heet het veld simpelweg tags en verschijnt het als Formatted Tags in het document. Dit veld is bepalend.

De tabel in ioi Item is alleen bedoeld om handmatig tags toe te voegen. Leeg laten heeft geen effect. Bij wijzigingen wordt de aanpassing overgenomen in het veld Formatted Tags.

Voorbeeld tag aanmaken #

Voorbeeld tags op een artikelpagina #

Ook bekend als artikelen met opties.

Tags importeren en aanmaken #

Bij het importeren van catalogi moet in ioi Manufacturer de optie new reference disabled zijn aangevinkt om tags te kunnen importeren.

Tags moeten het formaat subject=value hebben, gescheiden door een CAR(10), Excel‑regeleinde of gelijkwaardig.

Standaard worden ontbrekende tags automatisch aangemaakt.

ioi Shop Tag Conversion #

Met deze conversies worden tags automatisch omgezet.

Voorbeeld:

Een tag met waarde BLEU NUIT/JAUNE FLUO en onderwerp Color wordt omgezet naar MidnightBlue‑Yellow.

Voor kleur‑tags is dit nuttig omdat je via CSS‑kleuren zoals MidnightBlue of Yellow tags als kleur kunt tonen. Met een koppelteken tussen twee kleuren verschijnt een tweekleuren‑tag.

Met het veld Tag subject wordt de doel‑tag automatisch aangemaakt als deze ontbreekt bij het maken van de conversie.

Het veld Manufacturer beperkt de conversie tot een specifieke fabrikant.

Categorieën aanpassen #

Hier vind je de beschikbare velden en opties voor een E-shop Category.

Nieuwe categorie #

• De identificatie is alleen voor intern gebruik en wordt niet aan klanten getoond (behalve soms in de URL).

• De optie is_group bepaalt of een categorie een groep is met subcategorieën, of een “end category”.

• Met het veld parent category maak je de hiërarchie door aan te geven welke categorie onder welke oudercategorie valt.

• De weergegeven afbeelding is waar je een afbeelding voor deze categorie kiest.

• De uitgebreide beschrijving is enkel voor intern gebruik.
• Met de afbeeldingskeuze kun je een afbeelding selecteren voor je categorie.
• Met enabled en published uitgeschakeld kan een artikel deze categorie niet meer gebruiken of wordt deze uit de klantweergave verwijderd.

Als is_group is aangevinkt, verschijnt de optie Do not display child items.

→ Dit zorgt ervoor (indien toegestaan in ioi E-Commerce Settings) dat artikelen uit alle subcategorieën getoond worden in plaats van enkel de subcategorieën.

Voor “end categories” (niet‑groepen) is er een extra veld: tag category en de associated tag.

→ Tagcategorieën zijn speciale kruiscategorieën die, net als groepcategorieën, niet direct door artikelen worden gebruikt. Ze tonen alle artikelen met de gekoppelde tags uit alle categorieën met dezelfde ouder.

Voorbeeld: Een mountainbike met de shopcategorie Mountain Bikes en de tag Feature=High Visibility wordt zowel in Mountain Bikes als in High Visibility getoond. Een andere fiets uit een andere categorie met dezelfde tag verschijnt ook in High Visibility.

• Het tabblad Translation bevat vertalingen in vier extra talen.

• Het tabblad Preloaded is alleen voor informatie en debugging. Het bevat de JSON‑gegevens die bepalen wat er getoond wordt voor deze categorie. Deze gegevens worden automatisch gegenereerd bij Precalculate whole category.

ioi Shop Category Conversion #

Met deze conversies worden categorieën automatisch omgezet van bron naar doel om het importeren te vergemakkelijken.

Het veld Manufacturer beperkt de conversie tot één fabrikant.

→ Je kunt ook specifieke tags toevoegen die automatisch aan artikelen of catalogi worden toegevoegd bij deze conversie. Meerdere tags scheid je met een regeleinde.

Artikelpagina aanpassen #

Je kunt extra informatie boven de memo op de artikelpagina tonen.

In ioi E-Commerce Settings, tab Item Page, voeg je de veldnamen toe (custom of standaard) die je wilt tonen. Je kunt ook een titel en standaardwaarde instellen.

Winkelmandpagina aanpassen #

Je kunt extra informatie opvragen wanneer de klant bestelt.

In ioi E-Commerce Settings, tab CartPage, voeg je de veldnamen toe die je wilt opvragen. → Deze moeten behoren tot custom doctypes van het geselecteerde doctype. Je kunt ook titel, standaardwaarde, placeholder instellen of het veld verbergen (in combinatie met een standaardwaarde).

De door de klant ingevulde waarde wordt automatisch geplaatst in het doelveld van het document gekoppeld aan klant en bestelling.

Tags aanpassen #

Soms wil je de volgorde en weergave van tags aanpassen.

Dit kan in het document ioi Tag Subjects.

Hier kun je de volgorde van onderwerpen wijzigen in de boomstructuur (shoppagina) of in opties (artikelpagina). Onderwerpen worden gesorteerd van klein naar groot, kleinste bovenaan. De weergaveoptie bepaalt hoe tags getoond worden (momenteel alleen op artikelpagina’s).

Je kunt kiezen uit standaardlijst, keuzelijst, vierkanten of gekleurde vierkanten (in dat geval moeten de waarden CSS‑kleuren zijn. Voorbeeld: LightGreen).