Hollands Spoor

Plugged in

Category: Plugins

  • WooCB

    WooCB

    Using WooCommerce, you can start an online bookstore with relatively little effort. You can then have the Centraal Boekhuis in Culemborg handle your client-orders. If everything is set up properly, that bookstore can practically run itself: customers visit your webshop, they pay through your payment provider, orders are sent to CB, and CB ships the books to your customers.

    In practice, every store still requires some work, including an online one. But with Hollands Spoor’s WooCB integration, you can get quite far.

    WooCB links the stock and order system of WooCommerce to the Centraal Boekhuis order-fulfillment system. It works as follows:

    Sending orders

    When a visitor places an order in a WooCommerce webshop, WooCB processes that order immediately after payment. An order can contain more than one product, and not all ordered products are necessarily physical books that CB can fulfill, especially if you also sell other items. Therefore it selects only those order items that Centraal Boekhuis can fulfill. WooCB creates an order message for those items and sends it to CB. It sets the WooCommerce orderstatus to Processing, and it adds a note to the ordered titles indicating that CB will do the fulfillment.

    Shortly afterward, CB sends a message back, a so-called .ONT message. It states that it received the order and that no formal issues prevent execution. In short, they indicate they will start processing it.

    However, there cán be formal issues, for example if a customer postcode is unknown to CB. When WooCB receives such an ONT message, it immediately sets the order status to On hold. By now the order needs human intervention, because CB can not process the order without correction.

    WooCommerce makes it possible to send an email to the customer when the order status changes. This means WooCB can inform the customer that CB has started processing the order.

    Follow the order

    Centraal Boekhuis then collects the ordered titles and ships them to the address WooCB included in the order message. Once shipping has succeeded, CB sends another message to the webshop, which WooCB retrieves: the so-called .UIT message. This allows WooCB to set the WooCommerce order status to Completed, and the webshop can send a cheerful email to the customer. WooCB also extracts the PostNL tracking code (or that of another carrier) from the UIT message; and optionally includes it in the customer email.

    If something goes wrong while processing the order, CB also sends a message: the NUIT message may, for example, report that an ordered title is reprinted and therefore unavailable. Such a message sets the order status to On hold and leaves it to human intervention to determine whether the customer wants a refund or wants to wait for the title to become available again.

    To help prevent unwanted NUIT messages, WooCB includes the option to synchronize CB stock levels with those of the webshop. WooCB can retrieve daily stock-level messages and use them to adjust the stock that WooCommerce relies on. This allows WooCommerce to avoid selling products that are sold out at CB.

    Update your bookstore

    To ensure the online bookstore offers an up-to-date catalog, WooCB can also optionally import ONIX messages that CB provides regularly. If those messages contain titles not yet present in the WooCommerce webshop, WooCB can optionally create those WooCommerce products automatically: WooCB uses title, author, summary, price, and cover image provided by the ONIX file to create a WooCommerce product. In this way, the store catalog stays automatically up to date.

    When a book is no longer available, this is also reported in the ONIX file. In this way, WooCB can also use ONIX files to minimize the risk of failed orders.

    WooCB also supports orders that include ebooks. WooCB handles ebooks as well, but in a different way: once the customer paid for an ebook, it retreives a link from eBoekhuis with which he or she can download the ebook. That link is sent to the customer immediately. WooCommerce sends these download links by default in the customer order confirmation email.

    The full order flow across the payment provider, webshop, and Centraal Boekhuis is logged. These logs are available to the store manager as order notes on the WooCommerce order pages and ofcourse in more detail in the Woocommerce logging system

  • Selling houses with WordPress

    Selling houses with WordPress

    Igesz Real Estates is a real estate agency in the south of Spain. For their WordPress website, we built an integration with Resales Online, a Spain based company that maintains a large database with up-to-date information about real estate in Spain. A daily feed from Resales Online to the Igesz Real Estates website ensures that the property listings on the Igesz website are continuously updated.

    Igesz Real Estates mainly focuses on the southern Spanish market, the listings available through the website therefore fluctuate around 10,000 properties. Every day new homes are added and sold properties are removed. Below is a brief overview of the integration we developed.

    This overview shows different parts of the process. Click the “Next” button to view the next part.

    During the day, the Resales Online database is updated. Real estate agents across Spain enter details throughout the day about homes and new-build projects that are listed for sale or removed from sale.

    At night, Resales Online makes an XML feed available, which is imported by the Igesz Real Estates website at a fixed time.

    Because this is a large data stream, we divide it into smaller, manageable chunks for processing. This keeps the risk of server timeouts or memory issues to a minimum.

    These smaller data packets are then processed by the WordPress plugin we wrote for this purpose. The website uses the widely used Houzez theme, so the data from the XML feed must be adapted for both WordPress and Houzez.

    Houzez uses different data types for different property attributes. Some data is stored as WordPress categories or tags, while other details are stored in WordPress post meta fields. The plugin ensures that everything ends up in the right place.

    Meanwhile, WordPress and the Houzez theme can present the property listings to website visitors.

    The next day, the whole process starts again. Throughout all of this, the website always remains available.

    This automation helps Igesz publish accurate listings at a large scale while keeping editorial workload extremely low.

    Hollands Spoor <XML> category tag post post_meta
  • Flying around

    Flying around

    To show some geolocations from all over the world on a dynamic map, I used the OpenLayers library which is quite impressive in its speed and ease of use.

    OpenLayers can use maptiles from many different sources. You can even create your own tiles and serve them yourself. (I undertook this mapcreating- and serving-endeavor in a different project that needed a map of just a small part of the world. More on that in a later post). But creating tiles showing the entire world on a decent zoomlevel and serving them, requires way too much processing and storage power for just a small regular application like this. Therefore, in this project I used the tiles of Open Street Map.

    I wanted to show the travel-destinations of a group of people and enable the user to select these destinations one by one. I also wanted an animation to give a geographic impression of them. In the right-hand column you can start this ‘application’ to give you a better idea of its workings. For a full screen version you can visit https://travels.hollands-spoor.com. I replaced the personal information in the original application with the place of birth of some famous writers from all over the world.

    Wrap it with a toolbar

    In the bottom of the screen I made a little toolbarlike row of buttons. To make it swipeable, I used the Swiper.js slider software. I have been using it for a few years now and once in a while I re-examine its alternatives but I think it is still a good choice: https://swiperjs.com/.

    Because it was used in a WordPress website, I wrapped the map with these dependencies in a Gutenberg-block. I did not add any settings for the blockeditor yet. Someone who can think of a future use might add them, or hire me to do so.

    The data and assets for this application are provided by WordPress posts. For my use, it just gets them by a simple query on regular posts. I pass the arguments for this query through a filter so you can adjust them to get custom post types or introduce some taxonomy like category to select these posts.

    The website I built this for already used Advanced Custom Fields so I just added some fields. For the text in the popups, for Latitude and Longitude and for an optional marker. In my Github I have an ACF-export for these fields, but it won’t be much work to get them from somewhere else.


    If you want to build an interactive travel map in WordPress, you can try the live demo and explore the source code:

  • Accordions

    Accordions

    For the Amsterdam based Academy for Literary Translation we made a website using a custom-build vertical Accordion.

    Besides this public website we build an online learning environment for students using Learndash. While teachers where building online courses for this environment, the need was felt also for a regular, horizontal accordion.

    At the time such a block did not exist in Gutenberg core so the course-writers started using an accordion from some large block-library. We prefer to use as few of those libraries as possible since they clutter the editing experience, introduce yet another dependency and sometimes add to quite some overhead in resources.

    Therefore we build our own Accordion that you can download via the WordPress plugin repository: https://wordpress.org/plugins/good-accordion/.

    Should you download this plugin? Maybe not, because at the release of WordPress 6.9 an accordion block is added to the Gutenberg collection of core blocks. That one works fine in many cases but we leave ours in the plugin repository because it has some important pro’s:

    • Animated opening and closing.
    • Less child-blocks
    • Opening a panel can cause a previous panel to collapse, the panel you are opening then shifts upwards and can even disappear from view. In our Accordion, the scrollposition is adjusted so the pane that is opening will always remain in view.
    • Better semantics in HTML, you can chose to use <divs> or <details> and <summary>.

    So… maybe you should download it after all.

    Here is the example we promised:

    Description

    Features

    Installation

    Use

    Customize

  • Asanoha, seigaiha and more.

    Asanoha, seigaiha and more.

    I needed backgrounds with wallpaper patterns that you can seamlessly place next to each other, like these for example:

    There are plenty of examples to be found if you search for something like ‘seamless pattern images’. If the license allows it, you can use them as a background for, for example, a Gutenberg Group block or Cover block. (In the settings dialogs for the background of these blocks, you can specify that the image should not be stretched but tiled next to each other, resulting in corresponding CSS background-size and background-repeat rules).

    You might want to customize these kinds of patterns to your own taste: color, line thickness, shape, size of the repeated base element, etc. Of course, you can also draw/create something yourself in, for example, Illustrator or Inkscape (the latter is preferred due to the views on intellectual property that Adobe imposes on its users). There are also online generators available that produce these kinds of patterns (add the words ‘online generator’ when searching).

    In any case, it would be better if you had this functionality within the WordPress block editor. Then you wouldn’t have to keep switching between the generator and WordPress, and you wouldn’t have to keep downloading and uploading patterns (and possibly exporting them to a usable format). This would also serve users who find all of this too cumbersome when they need new or customized patterns.

    What is really desirable, then, is such an online SVG pattern generator, but as part of the Gutenberg editor.

    We build this SVG pattern generator and to start I will show you some examples of what you can make it generate:

    Patterns and Presets

    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

    Building the generator

    To achieve this, I went through several steps, starting with the background pattern below:

    With this pattern in mind, I went through the following eight steps:

    1. Creating the SVG
    2. Creating JSON
    3. Passing JSON to the block editor
    4. Adding Functions that work with parameters
    5. Adding Inspector Controls to the Block Editor
    6. Creating a Renderer for Template, Parameters, and Function Results
    7. Presets
    8. Insert the SVG as a block background image

    Finally, I created some additional patterns with different presets for the parameters. You have seen some of these in the Patterns and Presets section above.

    1. Create SVG

    2. Create JSON

    3. Pass JSON to the Block Editor

    4. Adding Functions

    5. Add Inspector Controls to the Block-editor

    6. Render template, parameters and functions

    7. Presets

    8. An SVG as a background