Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to code drag&drop templates for mailchimp?

Seems like mailchimp has two types of templates: classic and "drag and drop."

The classic templates (they call these "themes") have content areas defined using the mc: attrubutes. Some of these can be repeated but can't be moved around.

The "drag and drop" templates have "container" zones which accept content blocks from a menu which appears only when the template is of the "drag and drop" kind.

Seems that it is impossible to code and import a "drag and drop" template. I tried exporting one of theirs to HTML but was given a warning that re-importing the template will eliminate its drag and drop functionality.

Am I correct in understanding that it is only possible to code and import "classic" templates using the mailchimp template tags or am I missing something?

like image 463
aaandre Avatar asked Jan 05 '23 16:01

aaandre


2 Answers

You can use drag and drop, but it's not documented any where that I could find. I was able to get the source code they used to get the "content" and "design" panels to appear on the righthand side.

Code:

In order to get the "content" panel to appear you need to use code in this gist! It's just the source code from the single column basic template. Paste the code into the "Edit Code" panel. You just need to follow the proper formatting in the file. I haven't parsed through it yet to tell you what is exactly does what.

Things you already knew.

The documentation on how to modify your templates (mc:edit="body") and have the design panel can be found here MailChimp's Knowledge Base: Code Your Own

like image 107
edesilets Avatar answered Jan 09 '23 19:01

edesilets


I found edesilets' answer helpful. I uploaded the gist file as a mailchimp template and started removing elements until I found what broke the drag and drop editor.

If you add the following code into your main content div or td it will enable the drag and drop block editor:

mc:container="body_container" mccontainer="body_container"

example:

<div  mc:container="body_container" mccontainer="body_container"></div>

This code will add a block editor region to the preheader section:

  mc:container="preheader_container" mccontainer="preheader_container"

For the header:

  mc:container="header_container" mccontainer="header_container" 

For the footer:

 mc:container="footer_container" mccontainer="footer_container"

Note: It doesn't seem to matter what you call the mc:container. Creating a new container with a different name worked. Although using just mc:container tag seems to work at first by itself, the mccontainer (no colon) tag is required for it to save properly.

like image 40
createscape Avatar answered Jan 09 '23 18:01

createscape