GTM snippet

Friday, September 25, 2020

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

Backoffice WCMS

3.      Select your Component

4.      Add data in Content field

Backoffice Component

5.      Click on save

 

Outcome:


 

homepage

 

mailchip

mailchip subscription


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.  


No comments:

Post a Comment