Want to save template name

[kamleshkatpara]

Hi @artf @sonnylloyd @arthuralmeidap @cmcintosh

I am trying to store template name, but not sure how to pass the template name along with template data.

I mean I want to store template name and template data with the help of one single submit button.

Below is my code :

<form id="save-template" class="test-form" action="<?php echo base_url(); ?>dragdropeditor/dragdrop/add" method="POST" style="display:none">
      <div class="putsmail-c">
        <div class="gjs-sm-property" style="font-size: 10px">
          <span class="form-status" style="opacity: 0">
            <i class="fa fa-refresh anim-spin" aria-hidden="true"></i>
          </span>
        </div>
      </div>
      <div class="gjs-sm-property">
        <div class="gjs-field">
          <span id="gjs-sm-input-holder">
            <input type="text" name="templatename" placeholder="Template Name" required>
          </span>
        </div>
      </div>
      <input type="hidden" name="body">
      <button class="gjs-btn-prim gjs-btn-import" style="width: 100%">Save</button>
    </form>
</div>   

    <script type="text/javascript">
       var editor = grapesjs.init
           ({
              height: '100%',
              container : '#gjs',
              plugins: ['gjs-preset-newsletter'],
          storageManager: {
              id: '',
              type: 'remote',
              autosave: false,
              urlStore: '<?php base_url(); ?>/dragdropeditor/dragdrop/add',
              contentTypeJson: true,
              },
          });

         editor.Panels.addButton('options', [{
             id: 'save',
                  className: 'fa fa-floppy-o icon-blank',
                  command: function (editor, sender) {
                      if (sender)
                          sender.set('active', false);
                      editor.store();
                      alert('Template Saved Successfully !');
                  },
                  attributes: {title: 'save to database'}
              }]);

              // Let's add in this demo the possibility to test our newsletters
      var mdlClass = 'gjs-mdl-dialog-sm';
      var pnm = editor.Panels;
      var cmdm = editor.Commands;
      var testContainer = document.getElementById("save-template");
      var contentEl = testContainer.querySelector('input[name=body]');
      var md = editor.Modal;
      cmdm.add('send-test', {
        run(editor, sender) {
          sender.set('active', 0);
          var modalContent = md.getContentEl();
          var mdlDialog = document.querySelector('.gjs-mdl-dialog');
          var cmdGetCode = cmdm.get('gjs-get-inlined-html');
          contentEl.value = cmdGetCode && cmdGetCode.run(editor);
          mdlDialog.className += ' ' + mdlClass;
          testContainer.style.display = 'block';
          md.setTitle('Please enter template name');
          md.setContent('');
          md.setContent(testContainer);
          md.open();
          md.getModel().once('change:open', function() {
            mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
            //clean status
          })
        }
      });
      pnm.addButton('options', {
        id: 'send-test',
        className: 'fa fa-paper-plane',
        command: 'send-test',
        attributes: {
          'title': 'Test Newsletter',
          'data-tooltip-pos': 'bottom',
        },
      });

      //fa fa-refresh
      var statusFormElC = document.querySelector('.form-status');
      var statusFormEl = document.querySelector('.form-status i');
      var ajaxTest = ajaxable(testContainer).
        onStart(function(){
          statusFormEl.className = 'fa fa-refresh anim-spin';
          statusFormElC.style.opacity = '1';
          statusFormElC.className = 'form-status';
        })
        .onResponse(function(res){
          if (res.data) {
            statusFormElC.style.opacity = '0';
            statusFormEl.removeAttribute('data-tooltip');
            md.close();
          } else if(res.errors){
            statusFormEl.className = 'fa fa-exclamation-circle';
            statusFormEl.setAttribute('data-tooltip', res.errors);
            statusFormElC.className = 'form-status text-danger';
          }
        });
    </script>

[daniel-farina]

Since you are already loading php in this file why don't you pass that as a url parameter:

 urlStore: '<?php base_url(); ?>/dragdropeditor/dragdrop/add?templateId=<?=$templateId?>',

I would advise to have all this running under a user's session with tokens, etc but for now that should do the trick.

[kamleshkatpara]

@daniel-farina I am trying to save the template name from a input text box and not the templateId

[artf]

Well, there is always an option to use your custom ajax call where you might just add getHtml and getCss to your data.

If the use of editor.store() is necessary you can add/update params (which will be passed with any request) on RemoteStorage instance

const RemoteStorage = editor.StorageManager.get('remote');
RemoteStorage.set('params', {yourKey: 'yourValue'})
editor.store();

[lock[bot]]

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.