Sending Newsletters with dynamic content

Goal: Send a Newsletter that is based on a Mailing Template but also contains content that is dynamically gathered and rendered with CSE.

You can download the whole Kickstarter-based sample application from our GitLab repository: um-public/tutorial-dynamic-newsletter-content

Start a new Kickstarter project

umkickstarter -n de.pinuts.tutorial
cd umkickstarter
gradle setup run

Create Newsletter Template

Login to http://localhost:8080/cmsbs as admin / admin and create a new Newsletter Template named offerlist-nl with the following HTML body:

Dear {firstname},

your top offers for today:

{withcse:renderOfferList:}

Implement RenderEntryCallback

Implement a new RenderEntryCall method that will be called by the withcse directive from within the Newsletter Template just created.

cmsbs-conf/cse/plugins/de.pinuts.tutorial/callback/RenderEntryCallback.es6:

/// <reference path="../../../.vscode.js"/>

import faker from "@de.pinuts.demodata/shared/faker.es6";

function renderOffers(offers) {
    return `<ul>${offers.map(renderOffer).join('')}</ul>`;
}

function renderOffer(offer) {
    return (
    `<li style="margin-bottom: 8px">
        <strong>${Strings.encodeXml(offer.productName)}</strong><br/>
        ${Strings.encodeXml(offer.price)}
    </li>`);
}

function fakeOffers() {
    const offers = [];
    const num = faker.random.number({min: 0, max: 5});

    for (let idx = 0; idx < num; idx++) {
        offers.push({
            productName: faker.commerce.productName(),
            price: faker.commerce.price(10, 100, 2, '€')
        });
    }

    return offers;
}

RenderEntryCallback.prototype.renderOfferList = function() {
    const offers = fakeOffers();
    this.templateContext.doSend = offers.length > 0;
    this.value = renderOffers(offers);
    return true;
}

Install DemoData plugin

To generate some random content we use the DemoData plugin. Include the dependency into your build.gradle file and run gradle setup run again:

...

dependencies {
    runtime('de.pinuts.cmsbs:UM:7.34.1')
    runtime('de.pinuts.cmsbs:TestDriver2:2.0.6')
    runtime('de.pinuts.cmsbs:DemoData:1.0.4')
}

...

cmsbs-conf/cse/plugins/de.pinuts.tutorial/shared/SendOfferListNewsletter.es6:

/// <reference path="../../../.vscode.js"/>

const MAILING_TEMPLATE_NAME = 'offerlist-nl';
const CHANNEL_NAME = 'offerlist';
const NEWSLETTER_TAG = 'offerlist';

function createEventFile() {
    return `<event archive="true">
        <destination>
            <channel>${Strings.encodeXml(CHANNEL_NAME)}</channel>
        </destination>
        <data>
            <message>${Strings.encodeXml(MAILING_TEMPLATE_NAME)}</message>
            <email archiveOutgoingEmails="false" obeyPreferHtml="false" sendBothParts="false" trackingMode="Off"></email>
        </data>
        <tag>${Strings.encodeXml(NEWSLETTER_TAG)}</tag>
    </event>`;
}

export function run() {
    UM.println('Preparing newsletter...');

    const eventFile = createEventFile();
    UM.newsletterArchive.send(eventFile);
}

de.pinuts.tutorial.sendNewsletter = run;

build.gradle:

...

dependencies {
    runtime('de.pinuts.cmsbs:UM:7.34.1')
    runtime('de.pinuts.cmsbs:TestDriver2:2.0.6')
    runtime('de.pinuts.cmsbs:DemoData:1.0.4')
}

...