Footer

Purpose

The Footer component renders the storefront footer area, including:

Optional newsletter subscription form (email input + validation)

Footer logo (normal + optional “light” variant for dark mode)

Company info block (address, phone/working hours, email) using GlobalData.Company and GlobalData.Settings

Navigation columns (multi-level links) using model.Navigations

Social links (icons + external links)

Payment method logos

Dark mode toggle (driven by $store.darkMode)

Inputs (model contract)

Model shape (storefront example)

{
  "navigations": [
    {
      "navigationTitle": "Sample navigation title",
      "navigationType": "Link",
      "url": "/sample",
      "navigations": [
        {
          "navigationTitle": "Sample navigation item",
          "navigationType": "Category",
          "relativeId": "Navigation Relative Id",
          "url": "/category/sample",
          "image": {
            "id": "Image Id",
            "link": "https://example.com/media/sample.jpg",
            "mediaType": "Image"
          },
          "navigations": [],
          "isMegaMenu": false,
          "megaMenuWithImages": false,
          "megaMenuPosition": "Horizontal",
          "banners": []
    "..."
  "name": "Footer",
  "view": "Default",
  "section": "SectionFooter",
  "settings": {
    "showNewsletterSubcription": true,
    "socialBlock": {
      "socials": [
        {
          "link": "https://example.com/social",
          "socialName": "Sample"
        },
        "..."
      ]
    },
    "paymentMethods": [
      {
        "name": "Sample payment method",
        "image": {
          "link": "https://example.com/media/sample-payment.svg"
        }
      },
      "..."
    ],
    "id": "Component Id",
    "section": "SectionFooter",
    "type": "NoirFooter",
    "name": "Footer",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "",
    "cssClass": "",
    "header": "",
    "alignment": "Left"
  },
  "translations": {
    "allRightsReserved": "Sample text",
    "poweredBy": "Sample text",
    "subscribeNewsletter": "Sample text",
    "...": "..."
  }
}

Required fields

settings.id
Used for wrapper id: comp-{{ id }}.

navigations[]
Used to render the footer menu columns.

Optional fields

settings.cssClass
Applied only when non-empty and not (UNDEFINED).

settings.showNewsletterSubcription (boolean)
If true, the newsletter subscription block is rendered.

settings.socialBlock
The JSON sample may include a socialBlock, but the Liquid template reads socials from model.Settings.SocialBlock.Socials.

settings.paymentMethods[]
If present, renders accepted payment method logos.

translations.*
Used for button labels, input placeholders, accessibility labels, and newsletter messages.

The template also reads from Root.Page.Data.

JavaScript

Global object

The newsletter form behavior is provided by a global Alpine-ready object:

[start_code]
const footerdefault = {
validateField(field) { ... },
updateSubmissionStatus() { ... },
}
[end_code]
It’s used only when the newsletter block is enabled (showNewsletterSubcription).

State fields

errors: {}

isSending: false

successSubmission, errorSubmission

navigations: []

Advice

`validateField(field)`

Validates the newsletter email input with 2 rules:

required (empty → "required")

email format (regex fail → "invalidEmail")

Sets:

this.errors["footer-subscribe"] = errorType

.valid when valid

Advice

The function toggles classes on field.closest("div"). If markup changes, validation styling may break.

`updateSubmissionStatus()`

Finds success/error status elements inside the footer:

"footer .submission-status .success"

"footer .submission-status .error"

Adds show based on:

Advice

changes to markup/class names must be kept in sync with this selector.

If you prefer consistency, you can replace this with Alpine-driven x-show + state only (no DOM querying).

`submitSubscribeForm()` (async)

What it does

Reads the email input:

#footer-subscribe

Calls validateField(emailInput).

“Actual API call is missing here… For now, we will simulate a successful submission…”

Advice

Right now the newsletter form won’t actually submit anything to the backend.
If you integrate an API later, implement this pattern:

set isSending = true

try calling a service method

on success: set successSubmission = "show" and clear input

on failure: set errorSubmission = "show"

call updateSubmissionStatus()

Global Alpine stores (used by Footer)

The Footer component is mostly Liquid-rendered, but it does rely on one global Alpine store for a theme-wide behavior.

How the Footer uses it

:aria-checked="$store.darkMode.on"

:class="{ 'active': $store.darkMode.on }"
What it means in practice

Because it’s global, the same state can be toggled from other places too (header, popup, etc.), and the Footer UI stays consistent.

Dependencies

Alpine.js (for newsletter component x-data and for dark mode toggle bindings)

Global Alpine store: $store.darkMode

Navigation rendering is handled in Liquid; JS does not control menus in the footer.

Newsletter submission currently has validation UI, but no backend integration.

Extras

Template behavior (Liquid + Alpine)

x-data="footerdefault"

Form uses:

Shows inline field errors using:

x-show="errors['footer-subscribe'] === 'required'"

x-show="errors['footer-subscribe'] === 'invalidEmail'"

Shows submission status placeholders:

errorSubmission

Logo behavior

Uses global logos (footerLogo/footerLogoLight).

For each model.Navigations[]:

renders a submenu list if nav.navigations.size > 0

Renders icon class based on social name:

ic-{{ social.SocialName | downcase }}

Uses target="_blank" (external).

Payment methods

Renders list of images from settings.paymentMethods[].

alt falls back to:

provided image alt OR <paymentMethod.Name> + translations.logo

Dark mode toggle

The toggle is a switch-like button tied to the global store:

@click="$store.darkMode.toggle()"

:aria-checked="$store.darkMode.on"

:class="{ 'active': $store.darkMode.on }"

Footer

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

State fields#

validateField(field)#

updateSubmissionStatus()#

submitSubscribeForm() (async)#

Global Alpine stores (used by Footer)#

Dependencies#

Extras#

Template behavior (Liquid + Alpine)#

Logo behavior#

Navigation columns#

Social links#

Payment methods#

Dark mode toggle#

Purpose

Inputs (model contract)

Model shape (storefront example)

Required fields

Optional fields

JavaScript

Global object

State fields

`validateField(field)`

`updateSubmissionStatus()`

`submitSubscribeForm()` (async)

Global Alpine stores (used by Footer)

Dependencies

Extras

Template behavior (Liquid + Alpine)

Logo behavior

Navigation columns

Social links

Payment methods

Dark mode toggle