Subscribe Newsletter

Overview

The Subscribe To Newsletter component is designed for user subscription to a newsletter. It provides an interface for users to enter their email addresses and subscribe to updates. The component includes a header, subheader, email input field, and a submit button. It also handles email validation and displays appropriate messages based on the subscription status.

Model Documentation

Model Structure

The Subscribe To Newsletter component relies on a data model that includes:

header: The main heading displayed above the subscription form.

subHeader: An optional subheading that appears below the main heading.

buttonText: The text displayed on the subscription button.

email: The email address entered by the user.

emailIsValid: A boolean indicating whether the entered email address is valid.

showEmailValidMessage: A boolean controlling the display of the success message after a successful subscription.

isLoading: A boolean indicating whether the subscription request is being processed.

Example Model

Here’s a sample model configuration:

Component Structure

The Subscribe To Newsletter component includes:

HTML Template: Defines the structure and layout of the subscription form.

JavaScript: Contains the logic for handling email input, validation, and subscription.

Methods: Functions for subscribing to the newsletter and validating email addresses.

Computed Properties: Reactive calculations or state derived from the component's data.

HTML Template

The HTML template defines the layout of the subscription section, including the header, subheader, email input field, and subscription button. It also handles displaying error and success messages.

JavaScript

The JavaScript part of the Subscribe To Newsletter component handles email input, validation, and subscription.

Component Definition

Explanation

Props: The component accepts a model object that includes configuration details like header text, subheader, and button text.

Data: Manages internal state including email input, email validity, and loading status.

Methods:

subscribeEmail: Handles the email subscription process, including validating the email and triggering a subscription request.

validEmail: Validates the email address format using a regular expression.

getAlignmentClass: Returns the appropriate alignment class based on the alignment value from the model.

Computed Properties: Not used in this component, but can be added if needed for dynamic calculations.

Subscribe Newsletter

Subscribe To Newsletter Component Documentation#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Component Definition#

Explanation#

Subscribe To Newsletter Component Documentation