Skip to main content

Widgets

Widgets are the actual content elements in your webshop pages. Before they can be added to a page, they must be defined.

warning

Widgets will always be developed by CloudSuite. Never make modifications to the definition of your widgets unless explicitly instructed to do so.

To work with widget definitions, in the CloudSuite Admin go to Settings > Widgets. An overview appears, listing all widgets that have already been defined. Click an existing widget to open its definition or click Create Widget in the top right corner of the overview to create a new one.

Data​

  • The Name is used to identify the widget.
  • You may add a Description to record what the widget is for.
  • If API Widget is checked, the widget can use API data.
  • If Static Content is checked, the widget is placed on a page as is and its content cannot be edited.
  • If a Data Provider is selected, the JSON data defining the widget will be supplied by the backend: the JSON Schema tab then disappears.
    • Choose Blog when the widget needs to access data related to blog pages, blog posts, and associated metadata (including tags, categories, groups, etc.).
    • Choose Outlet when the widget needs to access outlet-related data.
    • Choose Order Template when the widget needs to access account-related data (for example, when creating the My Account widget).
  • If you select a Widget Group, the widget is added to the group. In the Layout tab of a page, widget groups with the widgets contained in them are shown after the ungrouped widgets.

Template​

The template contains (or references) the HTML and JavaScript that defines the widget. The widget HTML code is always developed in the dev environment and saved in the customer theme.

HTML Example​

<section class="footer__brands">
        <div class="container">
            <div class="row swiper" data-cs-brands-slider>
                <ul class="list list--unstyled footer-brands__list col-12 swiper-wrapper">
                    <li class="swiper-slide">
                     <a href="#" class="brand-link" target="_blank">
                     <img class="footer-brands__image" src="/static/uploads-cms2/riddell_logo_4.svg" alt="Riddell brand" loading="lazy">
                    </a>
                </li>
...
            </ul>
        </div>
    </div>
</section>
<script>
...
</script>

File Reference Example​

You can include the template from the theme, using a relative path:

{% include template('components/widgets/example.html') ignore missing %}

There is no need to import the widget's HTML code from Mosaic Templates into the customer theme. If you do not plan to make any changes to the code, simply use the default Mosaic Templates widget. In this case, the path should point to Mosaic Templates.

tip

Don't forget to add ignore missing to the path to prevent errors when a file is not available in the theme.

JSON Schema​

The JSON Schema defines the fields that you can fill for the widget, in the form of a JSON object. The tab is not available if a Data Provider is selected in the Data tab.

Usage​

In this tab, an overview is shown of all pages where the widget is used. These can be opened by clicking them.

Last updated on