If you want to create your own editor blocks, flexibly customize their behavior and manage email layout, you can use the Stripo editor extensions.
This feature is only available for Business or Enterprise plans.
Firstly, you will need to figure out what can be done, and our GitHub repository with examples of ready-made extension blocks will help you with this.
Ready? Getting started! :)
How to create your own blocks?
1) So, please select the desired example extension from the extensions folder that you want to integrate into the editor;
2) Install the npm program (it is downloaded as a package and its dependencies), and then run the npm i command in the developer console to pull up and connect the necessary modules from the Internet.
It is important that the npm install runs in the same location as the package.json file;
3) Replace the sample code from GitHub with your product logic. Replace the data in the configuration with your own variables or completely change the logic of the block;
4) Compile this code with the command: npm run build
The finished code will be saved in the dist folder.
All you have to do is save the compiled extension files on your server and, when initializing the Stripo editor, insert the below example code into the parameters:
window.Stripo.init({
...,
"extensions": [
{
"globalName": "YourExtensionName",
"url":"https://your.hosting/main.hash.extension.js"
}
]
});
5) During initialization, the editor will load the standard product blocks with your extension, and you can test the work of the block (s).
Doesn't sound very clear anyway? Let's take a look at a real example!
Let's say you have already had the logic of the block that is opened and described it in your js file.
Next, you need to initialize the plugin and apply this type of extension to the window.Stripo.init function:
{
"globalName": "ProductBlockExtension",
"url":"https://rcrm.stripocdnplugin.email/content/retailcrm/samples/product/0.1/main.092072eb39ff67666a45.extension.js"
}
If you have additional parameters or variables that must be provided to the user for selection in a block in your own application, you must define them additionally during initialization.
For example:
"productBlock": {
"enabled": true,
"precondition": {
"enabled": true,
"count": {
"min": 1,
"max": 12,
"def": 3
}
},
"recommendation": {
"groups": [
{
"id": "group1",
"name": "Чехлы для iPhone",
"count": 6
},
{
"id": "group2",
"name": "Аксессуары",
"count": 4
}
]
}
}If there are no such parameters, then the globalName of the extension and a link to js-file will be enough.
As a result, you simply initialize the plugin and use the extension like a regular block.
After clicking on the block in the menu, you can select the same data that you described in the configuration earlier.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.