News Letter Subscription

News Letter Subscription in Hybris

This task is done by using Mailchimp as a campaign manager.

Requirements:

1.      Active account on mailchimp. If you do not have then create a free account.

2.      Running hybris suite of any latest version.

Acceptance criteria:

User subscribe to your list from storefront. Email should be stored in mailchimp audience.

All otb files, content catalog, and products catalog is used.

Step1:

Create a CMSParagraph component

To create use this impex

$contentCatalog=apparel-ukContentCatalog

$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged]

INSERT_UPDATE

ContentSlot;$contentCV[unique=true];uid[unique=true];active;cmsComponents(&componentRef)[mode=append]

;;FooterSlot;true;CookieNotificationComponent,AnonymousConsentManagementComponent

Step2:

Call this component in your footer.tag file

Location of this file is :

/<storefront>/web/webroot/WEB-INF/tags/responsive/common/footer/footer.tag

Use component id to call it.

<cms:component uid="MailchimpFooterComponent"></cms:component>

Step3:

Add data to this component by either using impex or through backoffice

Impex for data is

UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];content[lang = en]

;;MailchimpFooterComponent;"<div id=""mc_embed_signup"">

<form action=""hide for privacy reasons this you will get from mailchimp acocunt "" method=""post"" id=""mc-embedded-subscribe-form"" name=""mc-embedded-subscribe-form"" class=""validate"" novalidate>

    <div id=""mc_embed_signup_scroll"">

              <h2>Get on the list.</h2>

              <p>Apparently we had reached a great height in the atmosphere, for the sky was a dead black and there a stars.</p>

<div class=""mc-field-group"">

              <input type=""email"" value="""" name=""EMAIL"" class=""required email emailtype"" id=""mce-EMAIL"" placeholder=""Your email"">

</div>

              <div id=""mce-responses"" class=""clear"">

                             <div class=""response"" id=""mce-error-response"" style=""display:none""></div>

                             <div class=""response"" id=""mce-success-response"" style=""display:none""></div>

              </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->

    <div style=""position: absolute; left: -5000px;"" aria-hidden=""true""><input type=""text"" name=""b_7d9a62fe5c9ca5b12961bd498_bdd7dcc143"" tabindex=""-1"" value=""""></div>

    <div class=""clear""><input type=""submit"" value=""Subscribe"" name=""subscribe"" id=""mc-embedded-subscribe"" class=""button_subscribe""></div>

    </div>

</form>

</div>"

 

You need to add some extra script lines for that you have to modify footer.tag file

<script type="text/javascript" src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'>

</script>

<cms:component uid="MailchimpFooterComponent">

             

              <script type='text/javascript'>

                             (function($) {

                                           window.fnames = new Array();

                                           window.ftypes = new Array();

                                           fnames[0] = 'EMAIL';

                             }(jQuery));

                             var $mcj = jQuery.noConflict(true);

              </script>

</cms:component>

 

To add data via backoffice

Steps:

1.      Login in to backoffice

2.      Go to Component under WCMS

3.      Select your Component

4.      Add data in Content field

5.      Click on save

 

Outcome:

 

 

I have used Internal Custom CSS for the styling. Let me know you need this file.

If you need more help in this regarding mailchimp let me know in comments.