Elements
The core building block of the Bloembraaden CMS (Content Management System) is an Element. It has many common properties like a title, slug, create and update dates, an excerpt and a text. Most also have a template you can choose and an online-offline switch.
For example an image, is an Image element. It has an image-specific property in addition to the standard properties: the image itself (represented by an upload field).
How it works
The designer provides templates where several Elements are represented, according to the needs of the site owner.
The site owner or editor can create actual Elements, fill their properties, and link them together.
Editor
In the root of each site the designer can specify an editor_config.json that limits options that the site owner / editor sees. Otherwise they will see all options listed below.
Page
A regular website page with standard properties like a title, slug, excerpt, content (text), template, css class.
To a Page you can link Properties, Variant, other Pages, Image, Embed, File and Comment. This way you can build, within the designed (and chosen) template, the page with images, video's, downloads, product-variants and even allow comments.
A Page also has a ‘Date published’, which can be used for ordering pages, and to have the page published automatically on a certain date and time, if you set it to the future. Currently Serie and Product also have this property, but none of the other elements do.
Image
An Image has properties like a title, slug, excerpt, description, css class and of course the image itself. Bloembraaden accepts jpg, png, gif and webp for uploading, but will always serve webp (with jpg fallback). Bloembraaden automatically creates sizes for you using sensible compression. The site editor can adjust the compression between 3 levels after the fact.
A design may or may not have a template for the Image element. If it does the Image can possibly be displayed on its own. Usually Images are only part of other Elements.
An Image can link to: Variant, Product, Page and Embed. In most designs these are ‘reverse’ links, the Image is usually displayed on the Element you choose here. Except the last: Comment, if you let visitors comment on your Images.
Embed
Use Embed to display videos on your website. Bloembraaden allows to embed anything, but mostly designs are specifically for embedding YouTube or Vimeo, probably you only have to past the ‘embed’ url in the embed_code standard property to make it work.
Besides the embed_code this element has properties such as title, slug, excerpt, description, css class. It can be linked to Variant, Product, Page and Image. The Image may be used as placeholder for the video, depending on the design. Comments are also possible.
File
Downloadable files, like pdf’s. Supports standard properties like title, slug, excerpt, description, css class. The slug is used as filename for the downloaded file as well.
Files can be linked to Variant, Product, Page and Image. The last one can be used to display an icon next to the filename or an image button to download the file.
Brand
A Brand is a page with a specific position in the e-commerce part of Bloembraaden. A Brand is the parent of all other e-commerce Elements. You can design it like a Page and the site owner can manage it like one. As an extra, it has standard children: its Series.
It can be linked to Image, Embed and File. Comments are also possible.
Serie
A Serie is the child of a Brand. It behaves like a Page, only you must assign which Brand is its parent. It has standard children: its Products.
It can be linked to Image, Embed and File. Comments are also possible.
Product
A Product is the child of a Serie. It behaves like a Page, only you must assign which Serie is its parent (and so, the Brand is automatically updated as well). It has standard children: its Variants.
It can be linked to Image, Embed and File. Comments are also possible.
Variant
The Variant is the core e-commerce Element. It belongs to a Product (and thus a Serie and a Brand). It has a couple of specific standard properties, in addition to the regular Element properties.
- MPN
- SKU
- Price_from (not displayed when empty)
- Price: the actual price of the item, used while ordering.
- Message: depending on the design a short message can be displayed, for example ‘Limited availability‘.
- In stock toggle: effect depends on design, for example the in-cart button is disabled.
- For sale toggle: effect depends on design, for example a ‘Notify me via e-mail’ form is displayed when for sale is off.
- VAT: the VAT category (you can provide those in the general settings).
It can be linked to Properties, Page, Image, Embed and File. Comments are also possible.
Note in the design (template), you can also access the Product, so for instance if you have instruction video’s or pdf manuals, you can reference those of the parent product.
The Properties is where you describe the Variant for the purpose of filtering and categorising, depending on the design.
Property
A Page and a Variant can have properties, e.g. a color, a tag / category, dimensions, etc. Properties are linked via their property_value. Counter to all other Elements the same Property can be linked multiple times to another Element using different (or even the same...) property_values.
More info on properties.
Special Elements
In addition to the standard linkable Elements that are very similar to each other but catered to their specific roles, there are three special elements that work differently.
Menu
Depending on the design, there may be several menus on your website. Each Menu consists of Menu_items. There is one large, searchable, list of Menu_items, so your menu’s can easily reuse items from other menu’s.
Depending on the design, menu’s may have infinite depth. You can keep adding child-items to child-items, if you feel like it.
A Menu_item has a title (display text), content and css class and a json field where you supply the slug it must point to. The content property is seldom used, but can be leveraged to be a title-text or informative hover, if you so design it.
Menu’s can not be linked to anything, they will be summoned by the template by name, for displaying in the design.
Property_value
Properties are only linked to other Elements via their Property_value, e.g. Stitching will be linked to a pair of pants by the Property_value ‘yellow’. But so can ‘curtains’ be linked to a Doll house, by ‘yellow’. The design should account for this.
While adding properties, you will type the values and choose from existing ones, or add a value to a specific Property. But this value can always be added to another Property as well. Note that each Property must be specifically added to the website beforehand.
More info on properties
Comment
If your design and template supports it, visitors can place Comments on certain Elements. Comments support text and a rating component that can have any range defined in your design. As such they can be used as reviews as well.
Comments can Comment on other Comments (one level only).
When a Comment (or review) is submitted, it is not put online. Asynchronously an e-mail will be send to the site owner or other specified e-mail address with a link to approve the Comment. Only after approval will it appear on the website. Note this only works if the design supports the online / offline switch for the Bloembraaden Element.
The site owner can edit the Comment, and link it to another Element as well, if they so please. Bloembraaden does not prohibit anything about the Comments, except directly creating them from the admin interface. Obviously that would violate the concept of the comment...