Hollands Spoor

Websites, themes, plugins and integrations

Categorie: Plugins

  • WooCB

    WooCB

    Met Woocommerce kun je met betrekkelijk weinig moeite een online boekwinkel beginnen. Je kunt het Centraal Boekhuis in Culemborg vervolgens de bestellingen laten afhandelen. Als je het helemaal goed doet, bestiert die boekwinkel dan zichzelf: klanten bezoeken je webwinkel, ze betalen via je payment-provider, bestellingen gaan naar CB en CB stuurt de boeken naar je klanten.

    In de praktijk is er in iedere winkel toch altijd wat te doen, ook in een online winkel. Maar je komt een heel eind met de WooCB integratie van Hollands Spoor.

    WooCB koppelt het voorraad- en ordersysteem van Woocommerce met het order-afhandelsysteem van het Centraal Boekhuis. Dat gaat als volgt:

    Als een bezoeker in een Woocommerce webwinkel een bestelling plaatst, wordt die bestelling na betaling onmiddellijk door WooCB doorgenomen. Een bestelling kan meer dan één product bevatten en niet alle bestelde producten bevinden zich noodzakelijkerwijze als fysiek boek bij het CB. Zeker niet als je naast boeken ook nog andere zaken verkoopt of boeken die je via een ander kanaal levert. Daarom licht WooCB alleen die order-items er uit die het Centraal Boekhuis fysiek kan afhandelen. Van deze order-items maakt WooCB een bestelbericht en stuurt dat naar CB. De Woocommerce order-status wordt naar ‘In behandeling’ gezet en de bestelde titels krijgen een aantekening dat de bestelling ervan naar CB is gestuurd.

    Vrij kort hierna stuurt CB een bericht terug, een zogenaamd .ONT-bericht waarin CB meldt dat de order is ontvangen en dat aan de vorm niets mankeert dat uitvoering ervan in de weg staat. Ze melden kortom dat ze er mee aan de slag zullen gaan.

    Er kan echter ook wél iets aan die vorm mankeren, bijvoorbeeld dat een postcode van de klant bij CB nog onbekend is. Bij ontvangst van een dergelijk ONT-bericht zet WooCB de status van de bestelling onmiddellijk op ‘On hold’. Menselijk ingrijpen is dan geboden want CB zal deze order niet uitvoeren zonder correctie van de bestelling.

    Woocommerce maakt het mogelijk om bij het veranderen van de bestelstatus een mail naar de klant te sturen. Daardoor kan de klant er dus ook van op de hoogte worden gebracht dat CB de order CB zal afhandelen.

    Het Centraal Boekhuis zal de bestelde titels vervolgens verzamelen en versturen naar het adres dat WooCB aan het bestelbericht heeft meegegeven. Als dit versturen gelukt is, stuurt CB weer een bericht naar de webwinkel dat WooCB zal ophalen, het zogenaamde .UIT-bericht. Hiermee kan de Woocommerce bestelstatus naar ‘Afgehandeld’ gaan en er kan door de Webwinkel een opgewekte mail naar de klant worden gestuurd. WooCB vist ook de trackingcode van PostNL (of een andere bezorger) uit het UIT-bericht; die kan mee in de klantmail .

    Als er iets mis gaat bij het uitvoeren van de bestelling stuurt CB ook een bericht: het NUIT-bericht meldt bijvoorbeeld dat een bestelde titel in herdruk is en daardoor niet leverbaar. Een dergelijk bericht zal de status van de order op ‘On hold’ zetten en het aan menselijk ingrijpen overlaten om er achter te komen of de klant haar geld terug wil of wil wachten op de hernieuwde verschijning van de titel.

    Om dit soort ongewenste NUIT-berichten te voorkomen, voorziet WooCB in de mogelijkheid om de voorraad bij het Centraal Boekhuis te synchroniseren met die van de webwinkel. WooCB kan dagelijks Voorraadstand berichten ophalen en daarmee de voorraad aanpassen waar Woocommerce vanuit gaat. Op die manier kan Woocommerce voorkomen dat producten worden verkocht die bij CB zijn uitverkocht.

    Om ervoor te zorgen dat de online boekwinkel een actueel aanbod biedt, leest WooCB desgewenst ook de ONIX berichten in die door CB regelmatig worden klaargezet. Als in die berichten titels voorkomen die nog niet voorkomen in de Woocommerce webwinkel, dan kan WooCB desgewenst die Woocommerce producten geautomatiseerd aanmaken: titel, auteur, samenvatting, prijs en omslagafbeelding worden uit het ONIX bestand gehaald en gebruikt om een Woocommerce product aan te maken. Op die manier is het winkelaanbod automatisch up-to-date.

    Ook als een boek niet langer leverbaar is, wordt dit in het ONIX bestand gemeld. Op die manier kan WooCB er ook met behulp van ONIX bestanden voor zorgen dat de kans op mislukte bestellingen minimaal is.

    WooCB staat overigens ook toe dat een bestelling eboeken bevat. Ook die kan WooCB afhandelen maar op een andere manier: als de eboeken betaald zijn, kan gelijk een link bij eBoekhuis worden opgehaald waarmee de klant het eboek kan downloaden. Die link kan onmiddellijk naar de klant worden gestuurd. Woocommerce stuurt deze downloadlinks standaard mee met de bevestigingsmail van de klantbestelling.

    Van het gehele bestelproces bij betaalprovider, webwinkel en het Centraal Boekhuis worden aantekeningen bijhouden. Deze aantekeningen staan de winkelmanager ter beschikking in de bestelnotities van de Woocommerce bestelpagina’s.

  • Resales Online

    Resales Online

    Igesz Real Estates is een makelaardij in het zuiden van Spanje. Voor hun WordPress website verzorgden wij een koppeling met Resales Online. Resales Online is een in Spanje gevestigd bedrijf dat een omvangrijke database onderhoudt met actuele gegevens over het onroerend goed in Spanje. Een dagelijkse gegevensstroom die van Resales Online naar de website van Igesz Real Estates loopt, zorgt ervoor dat het huizenaanbod op de website steeds wordt bijgewerkt.

    Igesz Real Estates richt zich vooral op de zuid Spaanse markt, het aanbod dat via de website wordt ontsloten schommelt daardoor rond de 10.000 onroerendgoed-objecten. Iedere dag komen daar huizen bij en verdwijnen er ook weer verkochte objecten. Hieronder staat een kort overzicht van de koppeling die we hebben ontwikkeld.

    Dit overzicht laat verschillende onderdelen van het proces zien. Klik op de knop ‘Verder’ voor een volgend onderdeel.

    Overdag wordt de database van Resales Online aangevuld. Makelaars in heel spanje voeren gedurende de dag gegevens in van huizen en nieuwbouwprojecten die te koop worden aangeboden of die uit de verkoop verdwijnen.

    ’s Nachts stelt Resales Online een XML feed beschikbaar die op vaste tijd door de website van Igesz Real Estates wordt ingelezen.

    Omdat het een omvangrijke gegevensstroom is, verdelen we deze voor de verwerking in kleinere, handzame stukken. De kans op time-outs of geheugenproblemen van de server wordt hierdoor minimaal gehouden.

    De kleinere gegevensblokken worden daarna verwerkt door de WordPress plugin die we hiervoor schreven. De website maakt gebruik van het veelgebruikte ‘Houzez’ thema en daardoor moeten de gegevens uit de XML-feed voor WordPress én Houzez geschikt worden gemaakt.

    Houzez gebruikt verschillende data-soorten voor de verschillende eigenschappen van het aangeboden onroerendgoed. Sommige gegevens worden opgeslagen als WordPress category of als tag, sommige details staan in WordPress postmeta’s. De plugin zorgt ervoor dat alles op de juiste plek terecht komt.

    Ondertussen kan WordPress samen met het Houzez-thema het huizen-aanbod voor webbezoekers beschikbaar maken.

    De volgende dag begint alles opnieuw. De website blijft tijdens dit alles altijd bereikbaar.

    Door de koppeling met Resales Online kan Igesz altijd een actueel overzicht bieden zonder dat dit veel onderhoudswerk aan de website met zich meebrengt.

    Hollands Spoor <XML> category tag post post_meta
  • Accordeons

    Accordeons

    Voor de Vertalersvakschool in Amsterdam en Antwerpen maakten we een website met een eigengemaakte verticale Accordeon.

    Naast deze publieke website bouwden we ook een besloten studenten omgeving met behulp van Learndash. Terwijl docenten hiervoor online cursussen schreven bleek de behoefte te bestaan aan een generieke horizontale accordeon.

    Op dat moment bestond daarvoor nog niet een standaardblock in de Gurenberg core zodat cursus-makers hun toevlucht namen tot een accordeon-block uit een of andere omvangrijke block-bibliotheek. Wij gebruiken bij voorkeur zo min mogelijk van dit soort bibliotheken omdat ze de editor compliceren met grote hoeveelheden ongebruikte knoppen en mogelijkheden, omdat ze een nieuwe afhankelijkheid van 3rd party software introduceren en omdat ze vaak voor extra overhead in de website zorgen.

    Daarom bouwden we onze eigen standalone accordeon. Deze is verkrijgbaar via de WordPress plugin repository: https://wordpress.org/plugins/good-accordion/.

    Moet u deze plugin downloaden? Misschien niet want met de release van WordPress 6.9 is er een accordeon block toegevoegd aan de Gutenberg core-blocks. Die werkt tamelijk goed maar toch laten we onze accordeon voorloping in de plugin-repository staan omdat die van ons een paar belangrijke voordelen heeft:

    • Geanimeerd openen en sluiten van Accordeon tabs
    • Er zijn minder child-blocks nodig
    • Als een accordeon-tab sluit bij het openen van een andere accordeon-tab, dan kan de zojuist geopende tab geheel of gedeeltelijk uit beeld verdwijnen ( als de gesloten tab boven de geopende tab staat ). De scrollpositie van onze accordeon wordt aangepast als deze uit beeld dreigt te verdwijnen.
    • Betere semantiek in HTML: er is keuze tussen <div> tags of <details> en <summary> tags.

    Misschien toch maar downloaden?

    Hier is het beloofde voorbeeld:

    Description

    Features

    Installation

    Use

    Customize

  • Asanoha, seigaiha en meer.

    Asanoha, seigaiha en meer.

    Ik had achtergronden nodig met behangpatronen die je naadloos naast elkaar kunt plakken zoals bijvoorbeeld deze:

    Er genoeg voorbeelden te vinden als je zoekt op iets als ‘seamless pattern images’. Als de licentie het toestaat, kun je ze als achtergrond gebruiken van bijvoorbeeld een Gutenberg Groupblock of Coverblock. (In de instellingsdialogen voor de achtergrond van deze blokken kun je aangeven dat de afbeelding niet moet worden opgerekt maar als tegels vullend naast elkaar gelegd, resulterend in daartoe strekkende CSS background-size en background-repeat regels).

    Dit soort patronen wil je naar eigen smaak aanpassen: kleur, lijndikte, vorm, omvang van het herhaalde basiselement, etc. Je kunt natuurlijk ook zelf iets tekenen/maken in bijvoorbeeld Illustrator of Inkscape (die laatste heeft de voorkeur ivm de opvattingen over geestelijk eigendom die Adobe zijn gebruikers laat onderschrijven). Er zijn ook online generatoren te vinden die dit soort patronen voortbrengen (voeg de woorden ‘online generator’ toe bij het zoeken).

    Hoe dan ook zou het beter zijn als je deze functionaliteit binnen de WordPress blockeditor hebt. Dan hoef je niet steeds te schakelen tussen de generator en WordPress en je hoeft niet steeds patronen te down- en uploaden ( en daarbij eventueel nog exporteren naar een bruikbaar formaat). Hiermee zou je bovendien de gebruiker die dit allemaal te omslachtig vindt van dienst kunnen zijn als deze nieuwe of aangepaste patronen nodig heeft.

    Wat dus eigenlijk wenselijk is, is zo’n online svg-patroongenerator, maar dan als onderdeel van de Gutenberg editor.

    We bouwden zo een generator en om te beginnen volgen hier wat voorbeelden van wat het voort kan brengen:

    Patronen en voorinstellingen

    Asanoha

    Dark Night

    Black River

    Star Blazer

    Soup

    Beach

    Red

    Blue

    Gump

    Free

    Crates

    Metalic

    Anatomy

    Fragile

    Ant

    Diamond

    Cardinal

    Leaves

    Polka

    Candy

    Rings

    Elegant

    Horrible 70

    Awefull 80

    Store

    Seigaiha

    Pink

    Pink Gradiënt

    Lime

    Classic 2

    Geometrisch

    Nr.1

    Nr. 2

    Nr. 3

    Nr. 4

    Bouw van de generator

    Om dit te bereiken doorliep ik een aantal stappen waarbij ik om te beginnen uitging van onderstaand achtergrond-patroon:

    Met dit patroon in gedachten doorliep ik de volgende acht stappen:

    1. SVG Maken
    2. JSON maken
    3. JSON doorgeven aan Block Editor
    4. Extra functies toevoegen
    5. Inspector Controls toevoegen aan de block-editor
    6. Renderer maken met template, parameters en functie-resultaten
    7. Voorinstellingen
    8. SVG in de achtergrond van het blok plaatsen

    Ten slotte maakte ik wat extra patronen met verschillende voorinstellingen van de parameters. Aan het eind staat daarvan een overzicht.

    1. SVG Maken

    2. JSON aanmaken

    3. JSON doorgeven aan Block Editor

    4. Functies toevoegen om te rekenen met parameters

    5. Inspector Controls toevoegen aan de Block-editor

    6. Renderer maken voor template, parameters en functieresultaten

    7. Voorinstellingen

    8. SVG in een block plaatsen