Front-end Config in Mosaic Templates
The front-end configuration provides a centralized location to define and manage various aspects of your user interface, including elements like the header, footer, product listings, and more.
This approach offers several benefits:
- Consistency: Ensures a consistent look and feel across your entire storefront.
- Flexibility: Allows for easy customization of UI elements without modifying core templates.
- Maintainability: Keeps configuration separate from core code, making it easier to manage and update.
Guidelines / Instructions
The front-end configuration is designed to make it easier to change settings in customer themes, with settings that are not (yet) available in Foresee or the client. The configuration is neatly separated by functionality for ease of use. Below are the configuration elements explained:
Config Sections
The settings below are just a small grasp of what is available. For the full config, please look in the Mosaic Templates repository.
Account
Account-related settings.
| Name | Description |
|---|---|
| can_change_personal_settings | Can a user change their personal settings? |
| ordertemplate_with_order_history | Show the order templates with order history |
| ordertemplate_with_categories | Show the order templates categorized by group |
| navigation_items | Navigational items in account navigation |
Basket
Basket-related settings.
| Name | Description |
|---|---|
| show_coupon | Show the coupon field |
| show_action_empty | Show the 'empty basket' button |
| show_action_save | Show the 'park basket' button |
| show_action_add_to_template | Show the 'save as order template' button |
| show_action_as_buttons | Show the buttons as actual .btn |
| show_stock_indication | Show stock indication in basket |
| show_uom | Show UOM in basket |
Checkout
Checkout-related settings.
| Name | Description |
|---|---|
| show_basket_in_steps | Show basket in checkout steps |
| confirmation_step | Index of the confirmation step |
| max_purchased_products | Maximum purchased products list |
| max_confirmation_list_products | Maximum purchased products list in confirmation |
| show_order_history_button | Show the order history button |
| delivery_date_format | The delivery date format |
Footer
Footer-related settings.
| Name | Description |
|---|---|
| disclaimer | List of links used in the footer bottom |
General
General settings.
| Name | Description |
|---|---|
| show_language_flags | Show the flags of the languages in the language switch |
| order_form_uom | Show the UOM inside the order form |
| recaptcha_invisible | Use the invisible reCAPTCHA? |
| fontawesome_types | List of the Font Awesome types that the theme uses: brands, solid, regular, light, duotone |
Header
Header-related settings.
| Name | Description |
|---|---|
| topbar_usps | Use USPs in the topbar |
| multiple_level_menu | Use the multiple level menu |
| multiple_level_submenu | Use the multiple level submenu |
| multiple_level_hover_menu | Use the multiple level hover menu |
| topbar_navigation | List of links in the topbar |
| navigation | List of links in the navigation |
| usps | List of USPs in the topbar |
JS
Settings used in scripts.
| Name | Description |
|---|---|
| datepicker_format | Datepicker format to use in the desired delivery input |
| locale | Locale of the shop |
| useGoogleSessionId | Use the Google Session ID in purchase events |
| useLoaderModalInBasket | Show a loader modal with every action related to the basket |
| currency_code | Code of the current currency |
PDP
PDP-related settings.
| Name | Description |
|---|---|
| show_reviews | Show the product rating |
| show_brands | Show the product brand |
| show_meta_product_code | Show the product code |
| show_sticky_order_form | Use the sticky order form |
| ubrs | List of Unique Buying Reasons |
PLP
PLP-related settings.
| Name | Description |
|---|---|
| show_reviews | Show the product reviews in the product tile |
| show_stock_indication | Show the stock indication of the product |
| show_my_assortment | Show the 'My Assortment' toggle in the filters |
| page_header_before_breadcrumbs | Show the page header before the breadcrumbs |
| show_color_swatches | Show color swatches in the product tile |
Changing the Config
The default configuration is maintained in @cloudsuite/mosaic-templates/templates/config/defaults/.
To change the config:
-
Create a new file inside the customer theme:
<customer-theme>/src/templates/config/custom.html. -
Create a new folder alongside it:
<customer-theme>/src/templates/config/custom/. -
Inside the
custom/folder, create files using the same names as within the defaults. This file needs to contain a variable that can be imported in thecustom.html.Example:
/src/templates/config/custom/account.html{% set account_config = {} %}infoIt is not necessary to copy the complete config object, but rather only change the
keysthat actually need modification. This way you'll keep a nice overview of what is theme-specific. -
To include this config in your
custom.html:/src/templates/config/custom.html{% from template('config/custom/account.html') import account_config with context %}
The 'with context' Directive
As you can see in the example above, we use the with context directive to import the account_config variable.
The with context directive is highly advised, as this ensures the right context is passed to the template.
Explanation:
'With context' is needed for imported templates/macros that need to use variables that are global and not passed directly to that template.
It sets the context of the imported template to 'local' instead of 'server'.
So a great example could be the frontend_config using a special locale setting.
If you have two users on a shop, one on /nl_NL/ and one on /en_US/, and the user on /nl_NL/ changes their language to /de_DE/, the translations in the template that are not imported with with context will share that information between all users. In this case, that means /de_DE/ AND /en_US/ will see the same translations.