Adding new feature for BlockManager
Currently, you should try with something like this BTW I'd like to re-enable block specific events, so probably with the next release the process will be more concise
Read full answer below ↓Question
I want to use grapes.js to create a website constructor for clients and when they show the design it should show the price of constructed website according to how many elements are used. What I am struggling in is that I can not create variable called "Price" and when from Blockmanager something is dragged and dropped that variable "Price" should change.
Which line of code should I change to add "price" variable for every separate objects of Blockmanager and when object is dropped to specified place variable "price" changed?
Thanks in advance ! Hope that this kind of feature will help others too.
Answers (2)
Currently, you should try with something like this
editor.BlockManager.add('your-block', {
label: 'Your block',
// ...
content: { // your component
price: 123,
// ...
}
});
editor.on('canvas:drop', (dr, component) => {
const price = component.get('price');
...
})
BTW I'd like to re-enable block specific events, so probably with the next release the process will be more concise
editor.BlockManager.add('your-block', {
label: 'Your block',
price: 123, // Add stuff to the block, not the component
// ...
});
editor.on('block:drag:stop', (component, blockModel) => {
const price = blockModel.get('price');
...
})
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1213
I need help
I want to use grapes.js to create a website constructor for clients and when they show the design it should show the price of constructed w...
Issue #1890
[QUESTION] Disable Drag Feature, Not Ability
I want to create my own dragging and placement abilities. I love grapesjs, but really want more control over how dragging elements work in...
Issue #545
Buttons in sector
How to add the custom button while adding a new sector in grapesJS? Is there any property? How should I create a button while making new se...
Issue #697
Question: Dropping external element into blocks
Hello, I want to drop external elements ( for example, tree view node) into blocks. Can you please help me out to show a way, how to achiev...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.