Skip to content

Newsletter

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.

Module source code

{% from "@macros/control_input.twig" import control_input %}

<div class="newsletter">
    {% if moduleConfig.title %}
        <h2 class="title module__header newsletter__title">
            <div class="module__header-title">
                <span class="module__header_highlight">{{ moduleConfig.title }}</span>
            </div>
        </h2>
    {% 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">
                <div class="newsletter__controls-wrapper">
                    <control-connector class="control" email>
                        <h-control>
                            <h-control-label class="control__label label_required">
                                <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></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>
            </div>
        </newsletter-form>

        {% if moduleConfig.legalNotice %}
            <p class="newsletter__legal-notice mb-xs-2">{{ moduleConfig.legalNotice|raw }}</p>
        {% endif %}
    </div>
</div>

Webcomponents reference

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)",
                    "placeholderValues": ["\n", "\/admin\/configLanguages\/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": "textarea",
                "name": "legalNotice",
                "label": "Legal notice",
                "defaultValue": "By signing up, you accept our <a href='\/pl\/i\/Regulamin\/3'>Terms and Conditions<\/a> (regarding the Newsletter). Data processing is carried out following the <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\/"]
                }
            }
        ]
    }
]