footer.liquid

{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-accordion.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-accordion.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-social.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'disclosure.css' | asset_url | stylesheet_tag }}</noscript>

<footer class="footer color-{{ section.settings.color_scheme }}">
  {%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}
    <div class="footer__content-top page-width">
      {%- if section.blocks.size > 0 -%}
        {%- liquid
          if section.blocks.size == 9
            assign footer_grid_class = 'grid--3-col-tablet'
          elsif section.blocks.size > 6
            assign footer_grid_class = 'grid--4col-desktop'
          elsif section.blocks.size > 4
            assign footer_grid_class = 'grid--3-col-tablet'
          endif
        -%}
        <div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
          {%- for block in section.blocks -%}

            {%- if block.type == 'link_list' and block.settings.heading != blank -%}
              <div class="accordion">
                <details>
                  <summary><h2 class="h4 accordion__title">{{ block.settings.heading | escape }}</h2>{% render 'icon-caret' %}</summary>
                  {%- if block.settings.menu != blank -%}
                    <ul class="footer-block__details-content list-unstyled">
                      {%- for link in block.settings.menu.links -%}
                        <li>
                          <a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
                            {{ link.title }}
                          </a>
                        </li>
                      {%- endfor -%}
                    </ul>
                  {%- endif -%}
                </details>
              </div>
            {%- endif -%}

            <div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu small-hide{% endif %}">
              {%- if block.settings.heading != blank -%}
                <h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
              {%- endif -%}

              {%- case block.type -%}
                {%- when 'text' -%}
                  <div class="footer-block__details-content rte">
                    {{ block.settings.subtext }}
                  </div>
                {%- when 'link_list' -%}
                  {%- if block.settings.menu != blank and block.settings.heading != blank -%}
                    <ul class="footer-block__details-content list-unstyled">
                      {%- for link in block.settings.menu.links -%}
                        <li>
                          <a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
                            {{ link.title }}
                          </a>
                        </li>
                      {%- endfor -%}
                    </ul>
                  {%- endif -%}
                {%- endcase -%}
            </div>
          {%- endfor -%}
        </div>
      {%- endif -%}

      <div class="footer-block--newsletter">
        {%- if section.settings.newsletter_enable -%}
          <div class="footer-block__newsletter">
            {%- if section.settings.newsletter_heading != blank -%}
              <h2 class="footer-block__heading">{{ section.settings.newsletter_heading | escape }}</h2>
            {%- endif -%}
            {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
              <input type="hidden" name="contact[tags]" value="newsletter">
              <div class="newsletter-form__field-wrapper">
                <div class="field">
                  <input
                    id="NewsletterForm--{{ section.id }}"
                    type="email"
                    name="contact[email]"
                    class="field__input"
                    value="{{ form.email }}"
                    aria-required="true"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    {% if form.errors %}
                      autofocus
                      aria-invalid="true"
                      aria-describedby="ContactFooter-error"
                    {% elsif form.posted_successfully? %}
                      aria-describedby="ContactFooter-success"
                    {% endif %}
                    placeholder="{{ 'newsletter.label' | t }}"
                    required
                  >
                  <label class="field__label" for="NewsletterForm--{{ section.id }}">
                    {{ 'newsletter.label' | t }}
                  </label>
                </div>
                {%- if form.errors -%}
                  <small class="newsletter-form__message form__message" id="ContactFooter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              </div>
              <button type="submit" class="button button--secondary newsletter-form__button" name="commit" id="Subscribe">
                {{ 'newsletter.button_label' | t }}
              </button>
              {%- if form.posted_successfully? -%}
                <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="ContactFooter-success" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
              {%- endif -%}
            {%- endform -%}
          </div>
        {%- endif -%}

        {%- if section.settings.show_social -%}
          <ul class="footer__list-social list-unstyled list-social" role="list">
            {%- if settings.social_twitter_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_twitter_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-twitter' -%}
                  <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_facebook_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_facebook_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-facebook' -%}
                  <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_pinterest_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_pinterest_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-pinterest' -%}
                  <span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_instagram_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_instagram_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-instagram' -%}
                  <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_tiktok_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_tiktok_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-tiktok' -%}
                  <span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_tumblr_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_tumblr_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-tumblr' -%}
                  <span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_snapchat_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_snapchat_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-snapchat' -%}
                  <span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_youtube_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_youtube_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-youtube' -%}
                  <span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_vimeo_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_vimeo_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-vimeo' -%}
                  <span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            <li class="list-social__item--placeholder">{{ 'sections.footer.social_placeholder' | t }}</li>
          </ul>
        {%- endif -%}
      </div>
    </div>
  {%- endif -%}

  <div class="footer__content-bottom">
    <div class="footer__content-bottom-wrapper page-width">
      <div class="footer__column footer__localization">
        {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
          <noscript>
            {%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
                <h2 class="visually-hidden" id="FooterCountryLabelNoScript">{{ 'localization.country_label' | t }}</h2>
                <select class="localization-selector link" name="country_code" aria-labelledby="FooterCountryLabelNoScript">
                  {%- for country in localization.available_countries -%}
                    <option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
                      {{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
            {%- endform -%}
          </noscript>
          <localization-form>
            {%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}
              <div class="no-js-hidden">
                <h2 class="caption-large" id="FooterCountryLabel">{{ 'localization.country_label' | t }}</h2>
                <div class="disclosure">
                  <button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterCountryList" aria-describedby="FooterCountryLabel">
                    {{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
                    {% render 'icon-caret' %}
                  </button>
                  <ul id="FooterCountryList" role="list" class="disclosure__list list-unstyled" hidden>
                    {%- for country in localization.available_countries -%}
                      <li class="disclosure__item" tabindex="-1">
                        <a class="link link--text disclosure__link caption-large{% if country.iso_code == localization.country.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#"{% if country.iso_code == localization.country.iso_code %} aria-current="true"{% endif %} data-value="{{ country.iso_code }}">
                          {{ country.name }} <span class="localization-form__currency">({{ country.currency.iso_code }} {{ country.currency.symbol }})</span>
                        </a>
                      </li>
                    {%- endfor -%}
                  </ul>
                </div>
                <input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
              </div>
            {%- endform -%}
          </localization-form>
        {%- endif -%}

        {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
          <noscript>
            {%- form 'localization', id: 'FooterLanguageFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
                <h2 class="visually-hidden" id="FooterLanguageLabelNoScript">{{ 'localization.language_label' | t }}</h2>
                <select class="localization-selector link" name="locale_code" aria-labelledby="FooterLanguageLabelNoScript">
                  {%- for language in localization.available_languages -%}
                    <option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
                      {{ language.endonym_name | capitalize }}
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
            {%- endform -%}
          </noscript>

          <localization-form>
            {%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}
              <div class="no-js-hidden">
                <h2 class="caption-large" id="FooterLanguageLabel">{{ 'localization.language_label' | t }}</h2>
                <div class="disclosure">
                  <button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterLanguageList" aria-describedby="FooterLanguageLabel">
                    {{ localization.language.endonym_name | capitalize }}
                    {% render 'icon-caret' %}
                  </button>
                  <ul id="FooterLanguageList" role="list" class="disclosure__list list-unstyled" hidden>
                    {%- for language in localization.available_languages -%}
                      <li class="disclosure__item" tabindex="-1">
                        <a class="link link--text disclosure__link caption-large{% if language.iso_code == localization.language.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#" hreflang="{{ language.iso_code }}" lang="{{ language.iso_code }}"{% if language.iso_code == localization.language.iso_code %} aria-current="true"{% endif %} data-value="{{ language.iso_code }}">
                          {{ language.endonym_name | capitalize }}
                        </a>
                      </li>
                    {%- endfor -%}
                  </ul>
                </div>
                <input type="hidden" name="locale_code" value="{{ localization.language.iso_code }}">
              </div>
            {%- endform -%}
          </localization-form>
        {%- endif -%}
      </div>
      <div class="footer__column footer__column--info">
        <div class="footer__copyright">
          <small class="copyright__content">&copy; {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
          <small class="copyright__content">{{ powered_by_link }}</small>
        </div>
        {%- if section.settings.payment_enable -%}
          <div class="footer__payment">
            <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
            <ul class="list list-payment" role="list">
              {%- for type in shop.enabled_payment_types -%}
                <li class="list-payment__item">
                  {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                </li>
              {%- endfor -%}
            </ul>
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
</footer>

{% javascript %}
  class LocalizationForm extends HTMLElement {
    constructor() {
      super();
      this.elements = {
        input: this.querySelector('input[name="locale_code"], input[name="country_code"]'),
        button: this.querySelector('button'),
        panel: this.querySelector('ul'),
      };
      this.elements.button.addEventListener('click', this.openSelector.bind(this));
      this.elements.button.addEventListener('focusout', this.closeSelector.bind(this));
      this.querySelectorAll('a').forEach(item => item.addEventListener('click', this.onItemClick.bind(this)));
    }

    onItemClick(event) {
      event.preventDefault();
      this.elements.input.value = event.currentTarget.dataset.value;
      this.querySelector('form')?.submit();
    }

    openSelector() {
      this.elements.button.focus();
      this.elements.panel.toggleAttribute('hidden');
      this.elements.button.setAttribute('aria-expanded', (this.elements.button.getAttribute('aria-expanded') === 'false').toString());
    }

    closeSelector(event) {
      const shouldClose = event.relatedTarget && event.relatedTarget.nodeName === 'BUTTON';
      if (event.relatedTarget === null || shouldClose) {
        this.elements.button.setAttribute('aria-expanded', 'false');
        this.elements.panel.setAttribute('hidden', true);
      }
    }
  }

  customElements.define('localization-form', LocalizationForm);
{% endjavascript %}

{% schema %}
{
  "name": "t:sections.footer.name",
  "blocks": [
    {
      "type": "link_list",
      "name": "t:sections.footer.blocks.link_list.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Quick links",
          "label": "t:sections.footer.blocks.link_list.settings.heading.label",
          "info": "t:sections.footer.blocks.link_list.settings.heading.info"
        },
        {
          "type": "link_list",
          "id": "menu",
          "default": "footer",
          "label": "t:sections.footer.blocks.link_list.settings.menu.label",
          "info": "t:sections.footer.blocks.link_list.settings.menu.info"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.footer.blocks.text.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Heading",
          "label": "t:sections.footer.blocks.text.settings.heading.label"
        },
        {
          "type": "richtext",
          "id": "subtext",
          "default": "<p>Share store details, promotions, or brand content with your customers.</p>",
          "label": "t:sections.footer.blocks.text.settings.subtext.label"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.footer.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.footer.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.footer.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.footer.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.footer.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.footer.settings.color_scheme.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__1.content",
      "info": "t:sections.footer.settings.header__1.info"
    },
    {
      "type": "checkbox",
      "id": "newsletter_enable",
      "default": true,
      "label": "t:sections.footer.settings.newsletter_enable.label"
    },
    {
      "type": "text",
      "id": "newsletter_heading",
      "default": "Sign up to our emails",
      "label": "t:sections.footer.settings.newsletter_heading.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__2.content",
      "info": "t:sections.footer.settings.header__2.info"
    },
    {
      "type": "checkbox",
      "id": "show_social",
      "default": false,
      "label": "t:sections.footer.settings.show_social.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__3.content",
      "info": "t:sections.footer.settings.header__4.info"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_country_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__5.content",
      "info": "t:sections.footer.settings.header__6.info"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_language_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__7.content"
    },
    {
      "type": "checkbox",
      "id": "payment_enable",
      "default": true,
      "label": "t:sections.footer.settings.payment_enable.label"
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "link_list"
      }
    ]
  }
}
{% endschema %}