installation.md

Installation

Please require plugin by running composer command:

$ composer require bitbag/mailchimp-plugin --no-scripts

Add plugin dependencies to your config/bundles.php file:

return [
    ...
    BitBag\SyliusMailChimpPlugin\BitBagSyliusMailChimpPlugin::class => ['all' => true],
];

Import routing on top of your config/routes.yaml file:

# config/routes.yaml

bitbag_sylius_mailchimp_plugin:
    resource: "@BitBagSyliusMailChimpPlugin/Resources/config/routing.yml"

Add plugin parameters to your config/services.yaml file:

# config/services.yaml

parameters:
  ...
  mailchimp.api_key: '%env(resolve:MAIL_CHIMP_API_KEY)%'
  mailchimp.list_id: '%env(resolve:MAIL_CHIMP_LIST_ID)%'
  mailchimp.webhook_secret: '%env(resolve:MAIL_CHIMP_WEBHOOK_SECRET)%'

Configure MailChimp credentials

To get info about list id: https://mailchimp.com/developer/marketing/api/lists/get-lists-info/

# .env.local

// ...

MAIL_CHIMP_API_KEY=YOUR_KEY
MAIL_CHIMP_LIST_ID=YOUR_LIST_ID
MAIL_CHIMP_WEBHOOK_SECRET=QUERY_PARAMETER_FOR_UNSUBSCRIBED_WEBHHOOK

Read more about MAIL_CHIMP_WEBHOOK_SECRET

You can read more about Mailchimp webhooks here: https://mailchimp.com/developer/marketing/guides/sync-audience-data-webhooks/

Add the parameters listed below to your config/packages/_sylius.yaml file:

parameters:
    mailchimp.api_key: '%env(resolve:MAIL_CHIMP_API_KEY)%'
    mailchimp.list_id: '%env(resolve:MAIL_CHIMP_LIST_ID)%'
    mailchimp.webhook_secret: '%env(resolve:MAIL_CHIMP_WEBHOOK_SECRET)%'

Import plugin's webpack.config.js file

// webpack.config.js
const [bitbagMailChimp] = require('./vendor/bitbag/mailchimp-plugin/webpack.config.js');
...

module.exports = [..., bitbagMailChimp];

Configure config/packages/webpack_encore.yaml .yaml

webpack_encore:
    builds:
        // ...
        shop: '%kernel.project_dir%/public/build/shop'
        admin: '%kernel.project_dir%/public/build/admin'
        mail-chimp-shop: '%kernel.project_dir%/public/build/bitbag/mail-chimp/shop'

Include the newsletter in your template:

{# templates location: templates/bundles/SyliusShopBundle/ #}

{% include '@BitBagSyliusMailChimpPlugin/_subscribe.html.twig' %}

Add these javascripts to the layout template that includes your subscription form imported in the previous steps

<!-- templates/bundles/SyliusShopBundle/_scripts.html.twig -->

{{ encore_entry_script_tags('bitbag-mail-chimp-shop', null, 'mail-chimp-shop') }}
<script>
    document.addEventListener("DOMContentLoaded", function(event) { 
        $('#footer-newsletter-form').joinNewsletter();
    });
</script>

Clear project cache:

bin/console cache:clear # if there is an issue with translations displaying correctly, clear the cache again.

Update your webpack build:

yarn encore dev # or yarn encore prod, when you build production environment