Interactive HTML blocks
In many places in the app you can insert your own HTML blocks: on the home screen, in a product description, in stories, in articles and on static pages. In the past such a block could only show text and pictures. Now it can also drive the app: open a catalogue section, add a product to the basket, show a bottom sheet, open a PDF, all without leaving the app.
Control is added with a single attribute, data-mobius. You write an ordinary
link or button and attach a command to it:
<a data-mobius="catalog.openProduct('15')">Open the product</a>On tap the app opens the product card with that ID itself. No programming required.
What blocks can do
- Navigation: open a catalogue section, a product card, the catalogue home, the loyalty card, run a search.
- Basket: add, change the quantity, remove a product, clear the basket.
- Favourites and comparison: add or remove a product.
- Sheets and modal windows: show an extra block over the screen without taking the user off the page.
- Documents: open a PDF (a contract, a manual, a certificate) inside the app.
- Other: show a toast, share a link, open an external site, change the region, start the barcode scanner.
The full list is in the command reference.
Where it works
What is available depends on where the block is shown.
| Where the block is inserted | Navigation and actions on a link or button | Built-in sheets, live updates, programmatic access |
|---|---|---|
| Home screen, product card, stories | Yes | Yes |
| Articles, news, static pages | Yes | No |
In short: links and buttons with commands work everywhere, while the more
complex scenarios, built-in <bottomsheet> elements and automatic content
updates, only work in blocks on the home screen, on the product card and in
stories. This follows from how the app renders article text.
Two ways to connect
- The
data-mobiusattribute: the main and simplest way. It suits links, buttons and any element. Described in Getting started. - Programmatic access through
Mobius: for advanced scenarios: receiving a result from the app, reading user data, reacting to basket changes. Described in Programmatic access.
Where to start
- Read Getting started: how to insert a block and how the
data-mobiusattribute works. - Look through the command reference: what exactly can be called.
- Take a ready block from Examples and replace the product and section IDs with your own.
Related pages
- Posts: where article and news HTML is inserted
- Static pages: permanent app pages
- Home screen: blocks on the home screen