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 URL groups where this template is used. 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 - no help from your developers needed. 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 still might be indexed if a crawler is able to see content rendered in browser window.
Integration
Integration of Modular Content on your website is very simple and consists of embedding a JS file and a <div> tag on your page. Compared to Pages and Magazines, the main differences are:
- the <div> in which the content is rendered requires a Slot ID that you can create yourself in the Editor and assign your content to it.
- integration with the SEO API not needed,
- it is not handled by any of Styla plugins and needs to be placed in your page template files or specific pages, directly or via your CMS.
These CodePens show examples of HTML and JavaScript included and content rendered:
https://codepen.io/michalwojtas/pen/WNQWpyr
https://codepen.io/michalwojtas/pen/BaNaXqO
https://codepen.io/michalwojtas/pen/voaxEd
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>
If needed the script can be placed inline, directly above the div tag. This is useful especially if you as a content editor add them on a single page using a UI in your website's CMS.
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 two slots from different Styla accounts on one page. If you do, none of them will be rendered and you will see a MULTIPLE_SLOT_CLIENTS_ERROR error in the console. Only content coming from one account will be delivered on several slots within one page.
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()
Managing Modular Content
Creating and updating content:
You create and manage it the same way as Pages in editor.styla.com, only select the "Modular Content" type when creating:
Assigning slots to Modular Content:
For such content an additional drop-down list will be displayed top-right of page settings where you will be able to assign it to existing slots:
Setting Custom Path:
The "Custom Path" field (bottom-left of page settings page) will per default contain an asterisk (*) which will enable embedding the content assigned to the slot on every URL/page path. If you change it to a specific path, the content will only be enabled on this path while not loaded on paths not matching the content of the field where the slot is present.
Managing Slots:
You can add, remove and manage slots in the list that you reach by clicking the "Slots Manager" link in your user overlay top-right:
Video recording with the full workflow:
The below screencasts shows you all the steps needed to create and include a piece of modular content on a website (simulated by a CodePen).
Live Examples
Flymo:
You can see three slots embedded on this page: https://www.flymo.com/uk
KPM:
You can see two slots embedded on this category page: https://www.kpm-berlin.com/porzellan-shop/kollektionen/kurland
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":
When creating slots, please have in mind that you don't need a slot for every single page/URL that you want to embed a piece of Modular Content. You only need a slot for every position on a given page template, no matter how many pages will use it.
So, for instance, if you want to display Modular Content top and bottom of your product details page, you only create two slots and place them in the page template HTML. Your content team will then be able to assign content to each of them in editor.styla.com and enable it on all or selected page paths only, as described above.