Countdown not working; how to use JSON?

[andrewryan1906]

Referencing what I think is the same issue as described in #3... the countdown works fine in the designer but does not render in my page. It looks as though the Javacript is not getting saved.

You responded; don't use HTML/CSS, use the JSON.

What does that mean? Right now, I'm added the rendered HTML from the GrapesJS to my DOM via an Angular app. Is that wrong? If I'm supposed to be using JSON to render, how do I do that? Is there an example somewhere of an actual rendering of the output created by the GrapesJs designer I could look at?

[artf]

You responded; don't use HTML/CSS, use the JSON.
What does that mean?

I mean you have to save correctly your templates https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates
From docs

So be careful, GrapesJS is able to start from any HTML/CSS but use this approach only for importing already existent HTML templates, once the user starts editing, rely always on JSON objects because the HTML doesn't contain information about your components

[SintoDema]

Hi @artf

I was using some other editors for template creation in my app & many users are working on that, which is in HTML format. Due to many issues, I changed the editor to GrapesJS.

Now, I'm facing an issue that the attribute like data-gjs-type="countdown" etc are changing to data-gjs-type="default". I have gone through several comments that you have made over this issue. One of them is the above-mentioned comment from the doc.

rely always on JSON objects because the HTML doesn't contain information about your components

I have tested this with saving the JSON by using getComponents() like JSON.stringify(editor.getComponents()). Got this from a fiddle while searching for a fix. As you said, by using this I was able to solve the issue with the component. But at this point, I was losing HTML styles which were added earlier in older templates(saved in DB HTML) and also in the grapesJS countdown.

The thing is that I can't fully rely on JSON, I need HTML with styles also. Is there any way to set component over the rendered HTML templated in grapesJS editor.

[robsonsobral]

Hi, @SintoDema .

Are you also saving the styles, besides the components?

A little excerpt of my code:

          case x.indexOf('components') !== -1:
            if (data[x]) {
              payload.internal_config.components = data[x];
            }
            break;
          case x.indexOf('style') !== -1:
            if (data[x]) {
              payload.internal_config.style = data[x];
            }
            break;
          case x.indexOf('assets') !== -1:
            if (data[x]) {
              payload.internal_config.assets = data[x];
            }

You should save components, styles and assets.