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.
