Styla Modular Content

Styla Modular Content is used for embedding any Module inside a template that is used for multiple pages like product details or category grid. It can be displayed or not on specific pages using this template. Same as Pages and Magazines, it is managed by Styla CMS at editor.styla.com.

Use Cases and Features

Modular Content covers a different use case than Pages and Magazines. Instead of large sets of modules, it is mostly used to embed only one module in a specific template which also includes content from different sources.

The most important feature of Modular Content is its reusability:

  • You embed one or more Content Slots (which are simply <div> tags with specific id) on a page template. Each of them can host an unlimited number of Styla modules.
  • In editor.styla.com you assign modules to specific Slots. You can also set rules for each of these modules to be displayed or not on any given path with a regular expression. If there are two modules assigned to a Slot, then one with a more specific path regex matching the current URL will be displayed.
  • This way, a Slot can be included on an unlimited number of pages of your website using a template but still render different modules on different paths - or nothing - depending on page's path.
  • You can then update each of such modules or Slots and changes will be reflected across your website within minutes, without any changes in your files or database. The changes are delivered by Styla's JavaScript.
  • You can also use Modular Content across several websites and manage it centrally in editor.stya.com.
  • As opposed to Pages and Magazines, it does not require integration with Styla's SEO API. Server-side rendered HTML tags are not needed as we consider such single modules not SEO-relevant. They stll might be indexed if a crawler is able to see content rendered in browser window.

Integration

Integration of Modular Content on your website is simply embedding a JS file and a <div> tag on your page. Compared to Pages and Magazines, the main differences are:

  • a different source of JavaScript, common for all clients,
  • the <div> in which the content is rendered requires a Slot ID that you get from Styla,
  • integration with the SEO API not needed,
  • it is no handled by any of Styla plugins and needs to be placed in your template files directly or via your CMS.

You embed Modular Content with this snippet:

This goes into page's <head> tag:

<script src="https://engine.styla.com/init.js" async></script>

This goes into <body>, where you need Slot contents to be rendered:

<div data-styla-slot="{slot-id}"></div>

Slots can be included inside dynamic content rendered with JavaScript loops like category page grids with proucts loaded with a "load more" button. They can also substitute every n-th element in a grid and display a Styla content instead of a product or anyting else shown in such a template

Please don't include the Styla JavaScript rendering Modular Content (from engine.styla.com) on one page with the JavaScript rendering Pages or Magazines (from client-scripts.styla.com). This will potentially lead to problems.

Triggering Styla content in a specific moment

If you're having timing issues and, for instance, Styla div is loaded after Styla JS has checked for it, please use the below to load the content in a specific moment:

window.styla.init()

Examples of Use

KPM:

You can see two slots embedded on this category page: https://www.kpm-berlin.com/porzellan-shop/kollektionen/kurland

The first one directly below the website menu
The second one inserted between product rows

Styla Static Page:


This is a simple example page that we've created to demonstrate how Modular Content works:
https://static-cdn.styla.com/mcl/categories/shoes/index.html
https://static-cdn.styla.com/mcl/categories/shoes/reebok.html
https://static-cdn.styla.com/mcl/categories/shoes/nike.html

The three pages use the same template with these two Slots embedded:

<div class="fixml dinHeight" data-styla-slot="7b35a82e-8e8d-4b09-a080-fa110dcc85df"></div>
<div class="fixml" data-styla-slot="9f83f29d-e989-4a97-98e5-4baf4ae0a59c"></div>

However, each of the pages displays a different set of two modules. This happens because two modules are assigned to each of the two Slots and the modules have different paths "whitelisted".

The 1st Slot: data-styla-slot="7b35a82e-8e8d-4b09-a080-fa110dcc85df":

The 2nd Slot: data-styla-slot="9f83f29d-e989-4a97-98e5-4baf4ae0a59c":