Designers

This section contains information likely to be of use to designers.

If you haven't already, I strongly recommend that you read the Site Administrator's guide first, particularly the section that refers to Bootstrap versions. BookyFlow has its own template files.

These are different to (WordPress) themes and (Joomla) templates. These BookyFlow template files are sets of templates, each of which is designed to work with Bootstrap 2, Bootstrap 3 and Bootstrap 5.

Bootstrap Versions

When working with BookyFlow template files you need to be aware of which version of Bootstrap your particular installation is BookyFlow configured to work with. When you know that, you'll know which BookyFlow Template Set is being used by BookyFlow to generate output.

Fontawesome

BookyFlow relies on the Fontawesome icon set for displaying icons, therefore it's necessary that the CMS's template/theme provides a link to the Fontawesome icon set.

The BookyFlow Leohtian (Bootstrap 3) Theme (WordPress) and Template (Joomla) uses the Fontawesome 4.7 icon set.

Sunbearu (Bootstrap 5) uses Fontawesome 6.1.1

The different icon sets use different names, as an example see the property star for the BS3 template set, compared to the BS5 template set

https://github.com/WoollyinWalesIT/bookyflow/blob/master/assets/templates/bootstrap3/frontend/sh ow_property_star.html

https://github.com/WoollyinWalesIT/bookyflow/blob/master/assets/templates/bootstrap5/frontend/sh ow_property_star.html

One uses "fa... and the other users "fas...

It may be that you decide that you prefer the layout of one BookyFlow template from the Bootstrap 5 template set, or want to use a Bootstrap 5 only plugin and use it in a BookyFlow installation that's configured to use its Bootstrap 3 template set.

For many Bootstrap 5 only plugins, the only major difference is that they don't contain a Bootstrap 3 template set. It is, therefore, possible for you to use a BS5 plugin on a BS3 site by using the template override feature and dropping the existing BS5 templates into an override directory in the child theme/template plugin_name subdirectory. If you choose to do that, please be aware that you will then need to modify those template files so that they use the older Fontawesome 4.7 icons, and not the Fontawesome 6 icons.

Online links :

FA 4.7 https://fontawesome.com/v4/icons/

FA 6.1 https://fontawesome.com/v6/search?m=free

Search Widgets

Documentation about the BookyFlow Search Widget plugin has been removed from this area of the documentation. The plugin has been superseded by the Search Form Elements plugin which we believe is much more flexible. We will leave the Search Widget plugin in the plugin manager for now, but you are not encouraged to use it. Instead, use the Search Form Elements plugin, and install the Search Form Elements Guide and Search Form Elements Forms plugins for information on how to use Search Form Elements.

Shortcodes

To use Shortcodes you will need to install a special plugin. If you are using Joomla, install the \"bookyflow_asamodule_mambot\" plugin, and Wordpress users will need to install the \"bookyflow_shortcodes\". Both are available at the bottom of the page in the BookyFlow Plugin Manager.

NB : Joomla users - If you install the BookyFlow ASAModule Mambot plugin through the BookyFlow plugin manager you may need to visit Extensions > Manage > Discover to force Joomla to properly install that plugin. If you do, please remember to enable the plugin afterwards in the plugin list.

NB: WordPress users - Once you have installed the BookyFlow Shortcodes plugin, remember to activate it afterwards in the WordPress plugins page.

Different systems will have different plugins installed, therefore it's not practical to include a list of shortcodes in this document. To see a definitive list of shortcodes available to your installation, visit the Administrator > BookyFlow > Developer tools > Shortcodes page in your BookyFlow installation.

####### Usage example

How can you show properties with specific features?

In this tutorial I will show you how to add a page in Wordpress where a list of properties with a specific feature is shown. The process is the same in Joomla but the shortcode syntax is slightly different. To see the syntax, go to Administrator > BookyFlow > Tools > Shortcodes to see the available shortcodes.

{width="4.0980391513560805in" height="1.5675in"}

Basic shortcode structure

If you use the \"Search\" box on the top right you can quickly find a shortcode, if you already know the task you want to add to the page.

The search shortcode example is a little confusing because it tries to show you all possible options, many of which might not be compatible with each other. This is what it gives you :

[bookyflow task=\"search\" params=&country=GB&region=1111&town=Torquay&feature_uids=32&room_type=2&pty pe=1&priceranges=100-200&guestnumber=1&stars=4&arrivalDate=2020/09/04&depar tureDate=2020/09/05&cat_id=1]

Find the feature ID

What we need to do is modify this shortcode to pick out just what we want so, next let\'s find the property feature we want to list properties by. In this article I want to list properties that have Cycle Paths nearby, so let\'s go to Admin > BookyFlow > Settings > Property Features.

{width="4.120624453193351in" height="2.2560411198600177in"}

Here you can see that the property feature\'s ID is 24, so we now know that we can modify the search shortcode in the page to this :

[bookyflow task=search params=&feature_uids=24]

Let\'s create a new Wordpress page and add the shortcode :

{width="6.500425415573053in" height="2.26in"}

Publish the page.

Add it to the menu

Now we need to go to Appearance > Menus

Click the Checkbox next to \"Cycle paths nearby\" and click Add to menu. Now you can click Save Menu.

{width="6.498192257217847in" height="2.68in"}

How it looks

As you can see in this screenshot the \"SRP Standard\" has the Cycle Paths feature therefore it\'s shown in the property list.

{width="4.119047462817148in" height="3.5320833333333335in"}

Summary

This quick article is designed to show you how easy it is to list properties based on their features. There\'s plenty else you can do with the \"search\" shortcode, for example

  • [bookyflow task=search params=&country=GB] List properties in X country. If you aren\'t sure what country code a property has, go to the Admin area, control panel and in the property list Search box enter the property\'s name, there you will see the country code of the property.

  • [bookyflow task=search params=&ptype=1] List properties by property type id. To find those IDs go to Admin > BookyFlow > Settings > Property types

  • [bookyflow task=search params=&cat_id=1] Property Categories are listed in Admin > BookyFlow > Settings > Property Categories

  • [bookyflow task=search params=&region=1111] Region IDs are a little harder to find. Go to Admin > BookyFlow > Settings > List Regions and again use the Search box on the right to find the region you want, for example \"valen\" will return Valenciana. Click Edit and then look in your browser\'s address bar, you will see something like http://www.domain.com/wp-admin/admin.php?page=bookyflow%2Fbookyflow.php&jr_wp_sour ce=admin&option=com_bookyflow&task=edit_region&id=994 Here you can see the region\'s ID is 994 so you can list all properties in the Valencia region by making the shortcode [bookyflow task=\"search\" params=\"&region=994\"]

You can also combine search parameters, so to list properties from category 1 in region 1111 just make the parameters params=&cat_id=1&region=1111

Shortcodes in Joomla Modules

A recent ticket prompted me to write this quick article because I\'d forgotten the details and had to relearn them myself.

Introduction

BookyFlow Shortcodes are a relatively new (4 or 5 years) addition to BookyFlow, however the technology underpinning them is a lot older. In fact Shortcodes are an evolution of a feature called \"Asamodule\" which is used to pull discrete sections of BookyFlow output into a Joomla page.

In recent years I\'ve found BookyFlow Shortcodes so easy to work with that Asamodule itself has been largely forgotten, mainly because the Shortcode term is better understood by both Joomla and Wordpress users. Shortcodes make it so that I can write one set of code that produces X output, and you get the same results in both Wordpress and Joomla, so when a Joomla user asked how to use the new Search Widget plugin with Asamodule I immediately asked \"Why not do it as a Shortcode?\" to which they replied \"How?\"

I tried it locally to make sure I wasn\'t handing out bad advice and it turns out that I\'d forgotten a key ingredient of the recipe. The shortcode wasn\'t being rendered by the Joomla content modules. I had to have a dig on the \'net to refresh my memory.

A search term I used, which I expected results from and didn\'t get any was \"Joomla plugin in module\" so I\'m going to put this here in case anybody else tries the same search as I did.

How to run a Joomla Plugin in a Joomla Module

Once you know, you\'ll kick yourself. It\'s ludicrously simple.

To start with, I tested a shortcode in an article and attached that article to a menu, just to make sure it looked right.

{bookyflow search_widget &search_widget=vertical_dates_sleeps}

The equivalent Wordpress shortcode would be [bookyflow task=\"search_widget\" params=&search_widget=vertical_dates_sleeps]

Next I created a Joomla Module, and set the type to Custom.

I entered the same shortcode in the module\'s wysiwyg editor area, set the module position and then in the Options tab (Module/Menu assignment/Options/Advanced/Permissions) I needed to set the Prepare Content setting to Yes. Once you do that the module\'s content is passed through the Joomla content plugins, which is what we want.

Save the module, and that should be all you need to do. The shortcode content should appear in the module.

Shortcodes can use different template files

From BookyFlow 10.6

Shortcodes can now define custom templates. Example : {bookyflow XXXXX XXSOMEARGSXXXXX&basic_module_output.html=basic_module_output_circular.html}

If basic_module_output_circular.html exists in the override directory, it will be used instead. Allows individual shortcodes to be highly customised without needing to modify any code.

I\'ve used this quite a lot in the new Quickstart, it allowed me to create customised versions of some BookyFlow template files and upload them to the override directory (in the case of the Quickstart that\'s /templates/cassiopeia_sunbearu/html/com_bookyflow).

To see what I mean, once you have installed the new Quickstart, take a look in Admin > Content

> Site Modules and click on \"Home Widgets - Circular images\". This is a custom module with a BookyFlow shortcode that demonstrates this functionality.

Just remember, when you create a custom module with a BookyFlow shortcode, always set the Options tab > Prepare Content switch to Yes/On.

Including script content from one page in another BookyFlow template file

Consider this scenario :

You have the property list ( the result of a search, or the default page when BookyFlow is visited and the user isn\'t logged in ), and you want to include the property features list that you normally in the property details, in the property list panel for each property

In this image we see the property features in the property details page.

{width="4.9375in" height="3.4166666666666665in"}

I want to show this same information in the list properties, list view page, like this

{width="6.463838582677165in" height="3.2767705599300085in"}

####### How can we achieve it?

When you install BookyFlow you will discover that it supports \"Shortcodes\", in the Mambo days they were called Mambots, in Joomla today they\'re called Content Plugins but in my view the word \"plugin\" is overused and confusing so I prefer the Wordpress term of Shortcode.

Virtually any individual BookyFlow script ( prefixed j0600Nxxxxx.class.php ) can be called through a shortcode, and the BookyFlow admin area shortcodes page shows you the shortcodes you can use. The following is an extreme example of the shortcodes, most of them are much simpler than this, but it gives you an idea of what you can expect to see.

{width="6.2222101924759405in" height="1.8170833333333334in"}

The code to include the property features in an article looks like this

{width="6.3893372703412075in" height="0.5024989063867017in"}

Normally these shortcodes are used in Joomla or Wordpress content articles to include information without having to modify any PHP scripts, but there\'s another way that they can be used.

You can use very similar code in the list_properties.html template file to call the same \"show_property_features\" content in that template :

{width="6.475545713035871in" height="1.048124453193351in"}

In this example the {UID} refers to the property uid as passed to the list_properties.html template from the calling script. When the section is rendered it will produce content like

which is parsed by the template class to eventually produce the output in the second image in this section ( property features in the property list).

####### More detail (cos, ya need it)

The first thing you need to be aware of is that with this code there\'s a danger of recursion. If you put one of these bookyflow_script shortcode elements into a template that will eventually include the same shortcode, you will end up with a situation where the template tries to render itself and before you know it the server\'s gotten very upset with you and will probably crash. So, do not include a call like {bookyflow_script viewproperty N} in anything, as this template includes lots of other templates to build up the final result.

Next, the {UID} mentioned in the previous example is a special case. Most of the time you can use just N in a template. What do I mean? Let me show you.

{width="6.491590113735783in" height="3.859583333333333in"}

The above image is an example of a completely custom composite_property_details_notabs.html template. It\'s constructed entirely of these bookyflow_script shortcodes and html/bootstrap3 markup. The output isn\'t particularly pretty, it\'s not designed to be, instead it\'s an example of what you can achieve without making any script customisations whatsoever.

The \"PROPERTY_UID=N\" part of the shortcode argument replaces the \"property_uid=10\" that you see in the shortcodes description page in the administrator area. So long as the template you are modifying is designed to be used when viewing a specific property (I.E when property_uid=X is in the url ) then you can use \"N\". Otherwise you need to include the real property uid in the shortcode definition, such as the UID part as demonstrated in the first example in this article.

What\'s the difference between {bookyflow and {bookyflow_script ...?

Note: the { and [ braces can both be used in Joomla. In WordPress you\'d use [. If you\'re a WP user, just transpose { for [ in the rest of this post.

TLDR;

{bookyflow... is for CMS content, such as within WordPress articles or Joomla modules or articles, whereas {bookyflow_script... is for BookyFlow own content, typically BookyFlow template files.

Content plugins

BookyFlow has two plugins that will parse content generated by the CMS.

In Joomla that\'s \"BookyFlow ASAModule Mambot\", and in WordPress it\'s \"BookyFlow Shortcodes\".

These two plugins are custom for Joomla or WordPress but they behave in fundamentally the same way. They\'ll look for {bookyflow blahblah} shortcodes in CMS content and if they see it, they\'ll send the contents of the shortcode to BookyFlow to parse and produce output, which the plugins will then hand back to the CMS to display.

After a while of using these shortcodes I realised that I could do something similar in BookyFlow template files, meaning that I could just write a similar shortcode into a BookyFlow template file and BookyFlow would call itself and produce the same output, just as if it had been called by \"BookyFlow asamodule mambot\" or \"BookyFlow Shortcodes\". This saves a ton of work and simplifies things when you want to mix\'n\'match layout.

For a practical example see the Bootstrap 5 version of the property_details.html template file, which uses this feature (the older corresponding Bootstrap 3 and Bootstrap 2 templates don't).

####### Setting the property uid

Determining how to set the property is a little complicated, and it\'s talked about under \"Including script content from one page in another BookyFlow template file\" however all you need to know is, if you\'re adding the shortcode to the property_details.html template use

PROPERTY_UID=N

and in every other BookyFlow template file, if the Property uid has already been determined by a calling script (e.g. the show property header script) use

&property_uid={PROPERTY_UID} https://github.com/WoollyinWalesIT/bookyflow/blob/master/assets/templates/bootstrap5/frontend/list

_properties.html

If you\'re using the shortcode in an article or module then you\'ll need to know beforehand what the property uid is and add that to the shortcode.

So, a shortcode in property_header.html looks like

{bookyflow_script show_property_slideshow &property_uid={PROPERTY_UID}&image_size=large&slideshow.html=slideshow_baguettebox. html}

whereas in property_details.html it looks like

{bookyflow_script show_property_slideshow PROPERTY_UID=N&image_size=large&slideshow.html=slideshow_baguettebox.html}

and in a CMS\'s article it would look something like

{bookyflow show_property_slideshow &property_uid=10&image_size=large&slideshow.html=slideshow_baguettebox.html}

Joomla Modules and WordPress shortcodes in BookyFlow template files

There may come a time when you will decide that you want to include a Joomla module (for example the login form) or a WordPress shortcode in a BookyFlow template file.

From BookyFlow 10.5.4 you will be able to do that. The feature was developed because the BookyFlow Messaging System needs to import the CMS's configured login forms into its own BookyFlow templates.

####### Joomla example

Let's say, for example, you want to include the Joomla login form in a BookyFlow template file. The way you would do that is to first create a module in the Joomla module manager, something like this :

{width="6.517291119860017in" height="1.1146872265966754in"}

At the end of that row, you can see the module's ID. In the BookyFlow template file I can put this :

Admittedly this is a slightly silly example, but it serves its purpose. Putting that code into the list tariffs template, as you can see the Joomla breadcrumbs module is now included.

{width="6.439998906386702in" height="0.96in"}

####### WordPress example

In WordPress the syntax is a bit different. It looks like

The 'default_wordpress_loginform' shortcode is a custom shortcode included in the BookyFlow WP plugin, it's a vehicle for creating a shortcode for the WP login form, strangely WP doesn't have a native one.

You should be able to do this with any WordPress shortcode, not just the login form.

Changing the FAQs

BookyFlow includes popups in the administrator and property manager pages that provide information and guidance that can help site administrators and property managers to do their jobs.

{width="3.3502198162729657in" height="2.376561679790026in"}

If you want to remove the output completely from the property manager area, edit top.html and remove the code {_BOOKYFLOW_FAQ}

To change the contents of the FAQ questions and answers, the best way is to use the administrator area feature \"Translate language file strings\".

Find the language string you want to modify by using your browser\'s search feature

{width="3.7728937007874017in" height="0.9956244531933508in"}

Then click on that string to bring up a popup. You can then edit the string directly here and the change will be reflected in the FAQ.

{width="3.7120417760279967in" height="1.5303116797900262in"}

If you want to add or remove items from the FAQs you will need to edit j07060faq_manager_questions.class.php ( or for site admins, edit j07070faq_admin_questions.class.php ).

The script should be simple enough to understand. Let\'s take a look at the first question :

The first part _BOOKYFLOW_FAQ_MANAGER_CATEGORY_PROPERTY defines which category the Question and Answer set will be in. In this case, it\'s \"Properties\".

The second and third parts, define the question and answer.

JCH Optimize

JCH Optimize is a Joomla extension that\'s proving popular for caching things like javascript files.

To use BookyFlow with JCH Optimize, you will need to ensure that JCH doesn\'t try to cache the BookyFlow slideshow scripts, so you will need to make your settings look like this :

{width="6.442288932633421in" height="4.418748906386702in"}

Email Templates

The Email Templates feature allows Property Managers to individually tailor email templates to suit their own circumstances. From the Email Templates screen you will see a number of templates that you can modify.

{width="6.4375in" height="3.6798370516185477in"}

When you click on the Edit button you can modify that specific template. Customising emails Emails in BookyFlow can be edited just like articles or property descriptions, assuming that the html editor is enabled in the site configuration->misc tab.

To allow more html tags to be used when editing the emails, you have to add the tags in the "Allowed tags" field in site configuration->input filtering tab Available output*. Email output is replaced automatically with the booking data when sending the email. So everything between [ ] is output that will be replaced. It should always be between [ ] and with CAPS, for example [ARRIVAL] will be replaced when sending the email with the arrival date of this booking.

{width="6.4375in" height="4.238233814523185in"}

Contract details output [ARRIVAL] = arrival date [DEPARTURE] = departure date

[BOOKING_NUMBER] = booking number [TOTAL] = booking grand total [DEPOSIT] = deposit required

[BALANCE] = difference between grand total and deposit required

[SPECIAL_REQUIREMENTS] = special requirements filled in by guest when making the booking

[ROOMS] = selected rooms

[TARIFFS] = tariffs used on this booking [EXTRAS] = optional extras selected by guest

[LINK_TO_PROPERTY] = link to property details [NUMBER_OF_GUESTS] = number of each guest type [BOOKING_CREATION_DATE] = date when the booking was made Guest details

[FIRSTNAME] [SURNAME] [HOUSE] [STREET] [TOWN] [REGION] [COUNTRY] [POSTCODE] [LANDLINE] [MOBILE] [EMAIL]

[CUSTOM_FIELDS]

Property details output

[PROPERTY_NAME] = property name where the booking has been made [PROPERTY_STREET] = property street

[PROPERTY_TOWN] = property town [PROPERTY_REGION] = property region [PROPERTY_COUNTRY] = property country [PROPERTY_POSTCODE] = property postcode

[PROPERTY_TEL] = property phone number saved in property details

[PROPERTY_FAX] = property fax saved in property details [PROPERTY_EMAIL] = property email

Other output

[PAYMENT_LINK] = link that can be used by a guest to pay later for an approved booking. [POLICIES_AND_DISCLAIMERS] = property policies and disclaimers saved in property details [INVOICE] = booking invoice printout (not the full invoice)

[QR_OFFICE] = qr code image for office use (at reception)

[QR_DIRECTIONS] = qr code that can be used by guests to get driving directions to property

*some output may not be applicable to all emails.

####### Global email templates

Email templates are quite special. They are designed to allow property managers to customise the emails that are sent to guests, so the manager's customisations are saved in the xxx_bookyflow_custom_text table. This is the same table that their language customisations are saved in when they use the frontend translations feature.

{width="2.78125in" height="1.59375in"}

This means that they can have different emails for different languages, and different properties can have different email layouts.

"How does that help me to have custom global email templates" you ask?

Each customised and translated email template is property specific, so when a record is saved, it's saved against it's property uid, in this screenshot it's property 5, for emails that are sent in the English language.

{width="6.195123578302712in" height="0.4971073928258968in"}

Translations that are saved in the xxx_bookyflow_custom_text table are either specific to individual properties or, if the property uid is 0, then it's a global string. If you use the administrator > BookyFlow > Translations > Label editing feature you may see some constants* that you have already saved, in this table.

A neat little trick in BookyFlow is you can make email customisations global. Log into a property in the frontend as a property manager, and make a note of the property uid (unique id). Edit and save the email template (remember to switch your active language in the CMS if you are saving different email templates for different languages). Once you've done that, using PHPmyadmin or whatever tool you prefer to use, you can then search the xxx_bookyflow_custom_text table for constants that start _EMAIL_TEXT, find the one that's associated with the property uid you noted earlier, and change the property uid in the table record to 0 (zero).

Once you have done that then you've now created a global email template. Property managers can still have their own custom email templates if they want, too.

Because this change is saved in the database, it's update safe.

* They're not really constants. Back in the day originally labels were PHP constants, but they're not any more. Nevertheless, the table column name still says "constant"