mailchimpmailchimp-api-v3.0mailchimp-api-v3

Mailchimp API and mc:repeatable

I'm working with the MailChimp Transactional API but am having an issue populating an email template that uses a mc:repeatable section. I can't find any docs or examples on how to do this. Here is the endpoint im using https://mailchimp.com/developer/transactional/api/messages/send-using-message-template/

And here is my email template

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Your Order</title>
</head>
<body>
  <div>Thanks for your order</div>
  <div>Your receipt for your order from</div>
  <div mc:edit="store_name">Store Name</div>
  <div>Order Type</div>
  <div mc:edit="order_type">Type</div>  
  <div>Products:</div>  
  <table>
    <tr mc:repeatable="products">     
      <td mc:edit="quantity">Quantity</td>
      <td mc:edit="product_name">Product Name</td>
      <td mc:edit="price">Price</td>
    </tr> 
  
  </table>  

</body>
</html>

I'm able to populate all of the mc:edit areas using this as the template_content in the request body:

const content = [
                {
                    name: 'store_name',
                    content: 'Any Store Name'
                },
                {
                    name: 'order_type',
                    content: 'Pickup Order'
                },
                {
                    name: 'subtotal',
                    content: '$80.00'
                },
                {
                    name: 'taxes',
                    content: '$2.22'
                },
                {
                    name: 'fees',
                    content: '$0.00'
                },
                {
                    name: 'total',
                    content: '$82.22'
                }
            ]

I can even populate a SINGLE row in the repeatable section if I add objects for quantity, product_name and price but I need to be able to REPEAT this section and add multiple quantity > product name > price lines.

Any advice or help or docs would be great, thanks!

Solution

  • From the MailChimp template language reference, it doesn't appear that <tr> elements are supported by mc:repeatable. See the third (bolded) point and note that, while <table> is a block level element, <tr> is not.

    mc:repeatable

    • mc:repeatable is used to provide a duplication action for a particular element within a template.
    • Syntax: mc:repeatable.
    • Use mc:repeatable on block-level elements (like <div> and <p>) with the exception of lists, or inline elements (like <img>, <a>, and <span>).
    • mc:repeatable elements can be nested within each other, but use care if you’re going to do this. We don’t encourage this use.
    • mc:repeatable can be used on the same element as mc:edit, but nesting mc:repeatable beneath mc:edit will render content that is editable but not repeatable.
    • If you want to apply styles to repeatable container elements or elements within repeatable containers, either use class or apply them in-line. Don’t use the id attribute.

    If they do happen to work, you might need to use mc:variant and per-product names for the subfields. Something like this:

    <table>
    <tr mc:repeatable="products" mc:variant="product1">
        <td mc:edit="product1_quantity">Quantity</td>
        <td mc:edit="product1_product_name">Product Name</td>
        <td mc:edit="product1_price">Price</td>
    </tr>
    <tr mc:repeatable="products" mc:variant="product2">
        <td mc:edit="product2_quantity">Quantity</td>
        <td mc:edit="product2_product_name">Product Name</td>
        <td mc:edit="product2_price">Price</td>
    </tr>
    <tr mc:repeatable="products" mc:variant="product3">
        <td mc:edit="product3_quantity">Quantity</td>
        <td mc:edit="product3_product_name">Product Name</td>
        <td mc:edit="product3_price">Price</td>
    </tr>
</table>

    const content = [
    {
        name: 'product1_quantity',
        content: '5'
    }, {
        name: 'product1_name',
        content: 'Some Product'
    }, {
        name: 'product1_price',
        content: '$49.99'
    }, 

    {
        name: 'product2_quantity',
        content: '1'
    }, {
        name: 'product2_name',
        content: 'Some Other Product'
    }, {
        name: 'product2_price',
        content: '$1,200'
    },

    {
        name: 'product3_quantity',
        content: '13'
    }, {
        name: 'product3_name',
        content: 'Some Third Product'
    }, {
        name: 'product3_price',
        content: '$17.50'
    }
];

    If this looks like it isn't for building a list from dynamic data, that's because I don't think it is. It looks like it's a tool for easily getting styles into the Campaign Builder.

    Inside the builder, there is a Product concept that includes the kind of information you appear to want to send in your email. The tutorial for the builder indicates that while a Product section is repeatable, you need to have a source of data connected to the builder and must choose the Products to include at design time.

    Use Product content blocks to add items from your connected online store. Each block is designed to contain a product name, custom description, price, and call-to-action button. And if you turn on e-commerce tracking in your email settings, your report will show purchase revenue.

    To use a Product block, follow these steps.

    1. Click a Product block or add one to your email. If you’re working with an existing block, skip to step 4.
    2. In the Select a store modal, choose the store you want to add products from. If you haven’t yet connected a store, you’ll be prompted to do so.
    3. Click the product you want to add.
    4. In the Products menu, edit the Title, Button, and Link to URL as needed. You can also click the edit icon to choose a different product, or click the settings icon to check your store connection.