Newsletter¶
Availability: All contexts
newsletter module is used to display a newsletter. It makes a use of newsletter-form webcomponent as well as newsletter styles.
Configuration parameters¶
title¶
string a title of the module.
shouldDisplayDescription¶
int if set to 1 a description of the module will be displayed.
description¶
string a description of the module.
legalNotice¶
string a legal notice information displayed under the module.
requireConsent¶
int if set to 1 consent will be required before signing up for a newsletter.
consentCheckboxText¶
string a consent checkbox text to display when requireConsent is set to 1
Module source code¶
{% from "@macros/control_input.twig" import control_input %}
{% from "@macros/header.twig" import header %}
<div class="newsletter">
{% if moduleConfig.title %}
{%- if ObjectApi.isSveContext() %}<div data-sve-inline-edit-field="title">{% endif %}
{{
header({
level: 'h2',
content: moduleConfig.title,
hasUnderline: true,
classNames: 'newsletter__title'
})
}}
{%- if ObjectApi.isSveContext() %}</div>{% endif %}
{% endif %}
<div class="newsletter__container {% if not moduleConfig.title %}mt-xs-2{% endif %}">
{% if moduleConfig.shouldDisplayDescription and moduleConfig.description %}
<div class="description newsletter__description mb-xs-2">{{ moduleConfig.description }}</div>
{% endif %}
<flash-messenger class="flash-messenger control" name="newsletter-form-{{ moduleInstance }}"></flash-messenger>
<newsletter-form module-instance-id="{{ moduleInstance }}" lazy>
<div slot="form">
{% if moduleConfig.requireConsent and moduleConfig.consentCheckboxText %}
<div class="form__additional-info mt-xs-0" aria-hidden="true">
<i>
{{ translate('Required fields are marked with') }} -
<span class="form__additional-info_secondary">*</span>
</i>
</div>
<div class="newsletter__controls-wrapper newsletter__controls-wrapper_grid-layout">
<control-connector class="control" email required>
<h-control>
<h-control-label class="control__label">
<label class="label label_required" for="newsletter-email-{{ moduleInstance }}">
<span class="label__asterisk" aria-hidden="true">*</span>
{{ translate('Your e-mail address') }}
</label>
</h-control-label>
<h-control-content class="control">
<h-control-element class="control__element control__element_flex">
<h-input controlId="newsletter-email-{{ moduleInstance }}" controlName="email">
<h-input-control required></h-input-control>
</h-input>
<control-errors class="newsletter__control-errors_inline"></control-errors>
</h-control-element>
<control-errors class="newsletter__control-errors_block"></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector class="control" required>
<h-control>
<h-control-content class="control">
<h-control-element class="control__element control__element_flex">
<h-checkbox controlId="newsletter-consent-{{ moduleInstance }}" controlName="consent" value="1">
<h-checkbox-control required></h-checkbox-control>
<h-checkbox-content>
<label for="newsletter-consent-{{ moduleInstance }}" class="label label_required">
<span class="label__asterisk" aria-hidden="true">*</span>
{{ moduleConfig.consentCheckboxText }}
</label>
</h-checkbox-content>
</h-checkbox>
<control-errors class="newsletter__control-errors_inline"></control-errors>
</h-control-element>
<control-errors class="newsletter__control-errors_block"></control-errors>
</h-control-content>
</h-control>
</control-connector>
<button type="submit" class="btn btn_primary newsletter__submit-button mt-xs-0 mt-sm-0">{{ translate('Join the newsletter') }}</button>
</div>
{% else %}
<div class="newsletter__controls-wrapper">
<control-connector class="control" email>
<h-control>
<h-control-label class="control__label">
<label class="label" for="newsletter-email">{{ translate('Your e-mail address') }}</label>
</h-control-label>
<h-control-content class="control">
<h-control-element class="control__element control__element_flex">
<h-input controlId="newsletter-email" controlName="email">
<h-input-control required></h-input-control>
</h-input>
<control-errors class="newsletter__control-errors_inline"></control-errors>
<button type="submit" class="btn btn_primary newsletter__submit-button">{{ translate('Join the newsletter') }}</button>
</h-control-element>
<control-errors class="newsletter__control-errors_block"></control-errors>
</h-control-content>
</h-control>
</control-connector>
</div>
{% endif %}
{% if ObjectApi.getFeatureFlag("dev_storefront_form_honeypot").isEnabled %}
<input type="text" name="email_verify" aria-hidden="true" tabindex="-1" autocomplete="off" />
{% endif %}
</div>
</newsletter-form>
{% if moduleConfig.legalNotice %}
<p class="newsletter__legal-notice mb-xs-2">{{ moduleConfig.legalNotice|raw }}</p>
{% endif %}
</div>
</div>
Webcomponents reference¶
- newsletter-form
- flash-messenger
- h-input
- input-control
- control-connector
- control
- control-label
- control-content
- control-element
- control-errors
Used styles¶
Macros reference¶
Module configuration schema¶
[
{
"state": "unfolded",
"label": "General settings",
"elements": [
{
"type": "infobox",
"name": "infobox",
"options": {
"type": "blank",
"message": "#### Related settings in the admin panel%s- changing phrases in [translations](%s)%s- manage pages: [Privacy Policy and Terms and Conditions](%s)",
"placeholderValues": [
"\n",
"\/admin\/configLanguages\/list",
"\n",
"\/admin\/configInfoPages\/list"
]
}
},
{
"type": "text",
"name": "title",
"label": "Module title",
"defaultValue": "Newsletter",
"supportsTranslations": 1,
"isRequired": 0
},
{
"type": "checkbox",
"name": "shouldDisplayDescription",
"label": "Display additional description below the module title",
"defaultValue": 1,
"children": [
{
"type": "textarea",
"name": "description",
"label": "Description",
"defaultValue": "Enter your e-mail address to receive updates and promotions.",
"isHidden": 1,
"supportsTranslations": 1,
"relations": [
{
"parentName": "shouldDisplayDescription",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
]
}
]
},
{
"type": "radio",
"name": "requireConsent",
"label": "Newsletter subscription consent",
"defaultValue": 0,
"options": {
"radioOptions": [
{
"key": 0,
"label": "Clicking the button constitutes consent"
},
{
"key": 1,
"label": "Require consent checkbox"
}
]
}
},
{
"type": "textarea",
"name": "consentCheckboxText",
"label": "Consent checkbox text",
"defaultValue": "I want to receive the newsletter",
"supportsTranslations": 1,
"relations": [
{
"parentName": "requireConsent",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setHidden",
"setOptional"
]
},
{
"value": 1,
"actions": [
"setVisible",
"setRequired"
]
}
]
}
]
},
{
"type": "wysiwyg",
"name": "legalNotice",
"label": "Legal notice",
"defaultValue": "By signing up, you agree to receive the newsletter on the terms described in the <a href=\"\/pl\/i\/Regulamin\/3\">Terms and Conditions<\/a>. You can <a href=\"\/newsletter\/unsign\">unsubscribe<\/a> at any time. Your personal data is processed by {shop_company_name} {shop_address_1}, {shop_zip_code} {shop_city}. Learn more: <a href=\"\/pl\/i\/Polityka-prywatnosci\/11\">Privacy Policy<\/a>.",
"supportsTranslations": 1
},
{
"type": "infobox",
"name": "infobox_legal_notice",
"options": {
"type": "blank",
"message": "If you make changes to the content of the \"Legal notice\", be sure to add links to the \"Terms and Conditions\" and \"Privacy Policy\". [See the manual](%s)",
"placeholderValues": [
"https:\/\/www.shoper.pl\/help\/"
]
}
}
]
}
]