{{ 'component-newsletter.css' | asset_url | stylesheet_tag }} {{ 'newsletter-section.css' | asset_url | stylesheet_tag }} <div class="newsletter center{% if section.settings.full_width == false %} newsletter--narrow page-width{% endif%}"> <div class="newsletter__wrapper color-{{ section.settings.color_scheme }} gradient"> {%- for block in section.blocks -%} {%- case block.type -%} {%- when '@app' -%} {% render block %} {%- when 'heading' -%} <h2 class="h1" {{ block.shopify_attributes }}>{{ block.settings.heading | escape }}</h2> {%- when 'paragraph' -%} <div class="newsletter__subheading rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div> {%- when 'email_form' -%} <div {{ block.shopify_attributes }}> {% form 'customer', class: 'newsletter-form' %} <input type="hidden" name="contact[tags]" value="newsletter"> <div class="newsletter-form__field-wrapper"> <div class="field"> <input class="field__input" autocomplete="name" type="text" id="ContactForm-first_name" name="contact[first_name]" value="" aria-required="true" placeholder="First Name" required> <label class="field__label" for="ContactForm-first_name">{{ 'customer.register.first_name' | t }}</label> </div> <div class="field"> <input class="field__input" autocomplete="name" type="text" id="ContactForm-last_name" name="contact[last_name]" value="" aria-required="true" placeholder="Last Name" required> <label class="field__label" for="ContactForm-last_name">{{ 'customer.register.last_name' | t }}</label> </div> <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="Newsletter-error--{{ section.id }}" {% elsif form.posted_successfully? %} aria-describedby="Newsletter-success--{{ section.id }}" {% endif %} placeholder="{{ 'newsletter.label' | t }}" required > <label class="field__label" for="NewsletterForm--{{ section.id }}"> {{ 'newsletter.label' | t }} </label> <button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}"> {% render 'icon-arrow' %} </button> </div> {%- if form.errors -%} <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small> {%- endif -%} </div> {%- if form.posted_successfully? -%} <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="Newsletter-success--{{ section.id }}" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3> {%- endif -%} {% endform %} </div> {%- endcase -%} {%- endfor -%} </div> </div> {% schema %} { "name": "t:sections.newsletter.name", "tag": "section", "class": "spaced-section spaced-section--full-width", "settings": [ { "type": "select", "id": "color_scheme", "options": [ { "value": "accent-1", "label": "t:sections.newsletter.settings.color_scheme.options__1.label" }, { "value": "accent-2", "label": "t:sections.newsletter.settings.color_scheme.options__2.label" }, { "value": "background-1", "label": "t:sections.newsletter.settings.color_scheme.options__3.label" }, { "value": "background-2", "label": "t:sections.newsletter.settings.color_scheme.options__4.label" }, { "value": "inverse", "label": "t:sections.newsletter.settings.color_scheme.options__5.label" } ], "default": "background-1", "label": "t:sections.newsletter.settings.color_scheme.label" }, { "type": "checkbox", "id": "full_width", "default": true, "label": "t:sections.newsletter.settings.full_width.label" }, { "type": "paragraph", "content": "t:sections.newsletter.settings.paragraph.content" } ], "blocks": [ { "type": "heading", "name": "t:sections.newsletter.blocks.heading.name", "limit": 1, "settings": [ { "type": "text", "id": "heading", "default": "Subscribe to our emails", "label": "t:sections.newsletter.blocks.heading.settings.heading.label" } ] }, { "type": "paragraph", "name": "t:sections.newsletter.blocks.paragraph.name", "limit": 1, "settings": [ { "type": "richtext", "id": "text", "default": "<p>Be the first to know about new collections and exclusive offers.</p>", "label": "t:sections.newsletter.blocks.paragraph.settings.paragraph.label" } ] }, { "type": "email_form", "name": "t:sections.newsletter.blocks.email_form.name", "limit": 1 }, { "type": "@app" } ], "presets": [ { "name": "t:sections.newsletter.presets.name", "blocks": [ { "type": "heading" }, { "type": "paragraph" }, { "type": "email_form" } ] } ] } {% endschema %}
star
photo_camera
Fri Dec 03 2021 12:50:42 GMT+0000 (Coordinated Universal Time) https://websensepro.com/blog/learn-how-to-add-new-field-in-shopify-newsletter-form/
#shopify #shopifynewsletter