Webshop

Responsive CMS artikelen met product informatie en afbeeldingen

In dit artikel beschrijven we de werkwijze van onderstaande punten:

  • Responsive CMS blokken systeem voor pagina indeling
  • Producten laten zien in CMS artikelen
  • Afbeeldingen laten zien in CMS artikelen

Voor meer informatie over het maken van een CMS pagina binnen de Software van Logic4,
zie deze handleiding: CMS items aanmaken

Responsive maken van CMS artikelen

Met behulp van horizontale of verticale blokken ben je nu in staat om content in te delen.
Deze blokken zijn al responsive ingericht en zullen in de meeste gevallen meteen werken.

Het voorbeeld hieronder bevat een indeling van 4 blokken:

  • 1 blok van 100% breedte met daarin
    • Een titel met 100% breedte
    • 2 blokken van elk 50% breedte

De code hiervoor ziet er als volgt uit:

 

 

Desktop

Op de desktop zal dit als volgt worden getoond:

Mobiel

De mobiele weergave ziet er dan als volgt uit:

De blokken

Dit wordt mogelijk gemaakt door 2 nieuwe blokken.
Deze blokken zijn vrijwel identiek, het enige verschil is dat een horizontaal blok de inhoud horizontaal laat zien en een verticaal blok lijnt het verticaal uit.

  • Horizontale blokken
  • Verticale blokken

Horizontale blokken

Horizontale blokken worden geplaatst met de volgende code:

<blok-horizontaal>…</blok-horizontaal>

Alles in dat blok zal gegroepeerd worden en zich schalen naar dat blok.
Standaard zal een blok de volledige breedte van de pagina pakken, maar door het ingeven van een breedte ben je in staat om dit aan te passen.

<blok-horizontaal breedte:50>…</blok-horizontaal>

Meer informatie hierover bij het onderdeel “Attributen”.

Verticale blokken

Verticale blokken worden geplaatst met de volgende code:

<blok-verticaal>…</blok-verticaal>

Alles in dat blok zal gegroepeerd worden en zich schalen naar dat blok.
Standaard zal een blok de volledige breedte van de pagina pakken, maar door het ingeven van een breedte ben je in staat om dit aan te passen.

<blok-verticaal breedte:50>…</blok-verticaal>

Meer informatie hierover bij het onderdeel “Attributen”.

Samen

Met deze attributen ben je dus in staat allerlei verschillende opstellen te maken.

Opstelling van 3 kolommen (33, 33, 33)
Opstelling van 2 kolommen (25, 75)

Opstelling van 2 kolommen (50, 50)

Blok attributen

Het is mogelijk om bepaalde styling toe te voegen aan een blok met behulp van attributen.
Deze styling wordt gemaakt door Logic4 en wij zorgen ervoor dat deze er degelijk uitziet en responsive is.

Een attribuut voeg je op de volgende manier toe:

<blok-verticaal breedte:50>…</blok-verticaal>

Dus achter de naam van het element.

Breedte

Breedte attributen stellen je in staat om zelf in te stellen hoe breed een stuk tekst, afbeelding, of een product moet zijn.

Waarde Resultaat
breedte:100 100% breedte
breedte:80 80% breedte
breedte:75 75% breedte
breedte:70 70% breedte
breedte:66 66% breedte
breedte:60 60% breedte
breedte:50 50% breedte
breedte:40 40% breedte
breedte:33 33% breedte
breedte:30 30% breedte
breedte:25 25% breedte
breedte:20 20% breedte

 

Uitlijning

Uitlijning attributen stellen je in staat om cms content uit te lijnen.

Waarde Resultaat
start:links Uitlijning links
start:rechts Uitlijning rechts
start:midden Uitlijning midden

 

Extra

Hieronder de lijst met “Extra” attributen.
Dit zijn attributen die vormgeving toevoegen die in vaak situationeel zijn.
Het “extra:witruimte” attribuut is bijvoorbeeld handig om een h2 / titel element wat extra ruimte te geven.

Waarde Resultaat
extra:witruimte Extra witruimte boven en onder het blok

 

Plaatsen van een product

We kunnen een artikel plaatsen in een losse CMS pagina door te werken met de volgende tag:

<product>
<productcode>code-hier</productcode>
</product>

Dit artikel zal dan uit de volgende informatie bestaan:

  • Artikelnaam
  • Afbeelding van het artikel
  • Link naar het artikel op de webshop

Let op: Het is niet mogelijk om de prijzen te tonen van de artikelen. Dit zal apart ontwikkeld moeten worden.

Deze producten kunnen dan in een CMS item geplaatst worden of in een groep.

Er wordt wel gecontroleerd of de producten wel gekoppeld en zichtbaar zijn op de webshop alvorens ze getoond worden.
Zijn ze niet gekoppeld of zichtbaar op de shop dan zullen ze uit de body van de CMS worden gefilterd om zo dode links te voorkomen.
Hieronder een voorbeeld van een code en het resultaat:

Afbeeldingen toevoegen

Je bent in staat om een schaalbare, responsive afbeelding toe te voegen in een CMS item met behulp van de volgende code.

<banner>
<afbeelding>link-naar-afbeelding.jpg</afbeelding>
</banner>

Hieronder een stuk voorbeeld code met het resultaat

 

Voorbeelden

Hieronder enkele voorbeelden van CMS paginas die gemaakt zijn met dit systeem:

Heeft u na het lezen van dit artikel nog vragen?

Neem dan contact op met afdeling klantgeluk door een mail te sturen naar help@logic4.nl
Geschreven door
Heeft dit artikel geholpen?
0
1

Over Logic4

Logic4 ontwikkelt en implementeert een alles-in-één oplossing voor bedrijfssoftware en e-commerce. Als enige partij in Nederland bieden we een totaalpakket voor webshop, voorraad, artikelbeheer, kassa, inkoop, orderverwerking, CRM, facturatie, boekhouding, B2B/B2C, managementinformatie en meer. Onze klanten zijn (middel)grote groothandels, vakhandels en retailers. Zij profiteren voor een vast maandelijks bedrag van een volledig geïntegreerde frontoffice en backoffice en continue gratis doorontwikkeling.