klaviyo-embedded-subscription_ajax.liquid

{%- comment -%}
###############################################################################
  Easy Step To Add a Custom Legacy Embedded Email Signup Form in Shopify AJAX  
   ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
###############################################################################
#    Paypal Me: https://paypal.me/elghorfimed  #
#              Buy Me A Coffee:                #
#    https://www.buymeacoffee.com/elghorfi     #
###############################################################################
    Elghorfi.med@gmail.com
    https://medium.com/p/1c157a887964/
###############################################################################
{%- endcomment -%}

{%style%}
  {% if section.settings.background_image %}
    #shopify-section-{{section.id}}::before {
      content: "";
      position: absolute;
      top: 0; 
      left: 0;
      width: 100%; 
      height: 100%;  
      opacity: {{section.settings.background_opacity}};
      z-index: -1;
      background: url({{section.settings.background_image | img_url: 'master'}}) center center no-repeat;
    }
  {% endif %}
  #shopify-section-{{section.id}} {
    margin-top: {{ section.settings.margin_top }}px;
    marin-bottom: {{ section.settings.margin_bottom }}px;
    background: {{ section.settings.background_color }};
    position: relative;
    z-index: 1;
    display:grid;
    justify-content:{{section.settings.align_items}};
    text-align:{{section.settings.text_align}};
  }
  #shopify-section-{{section.id}} * {
    font-familty:{{section.settings.font}};
  }
  .klaviyo-newsletter {
    padding: 20px;
  }
  .klaviyo-newsletter-body h3 {
    color: {{section.settings.heading_text_color}};
    margin: 10px 0;
    font-weight: bold;
    font-size:{{section.settings.heading_font_size}}px;
    text-transform:{{section.settings.heading_text_transform}};
    {% if section.settings.heading_text_bold %}
    font-weight: bold;
    {% endif %}
  }
  
  .klaviyo-newsletter-body p {
    color: {{section.settings.subheading_text_color}};
    font-size:{{section.settings.subheading_font_size}}px;
    text-transform:{{section.settings.subheading_text_transform}};
    padding: 0;
    margin: 0;
    {% if section.settings.subheading_text_bold %}
    font-weight: bold;
    {% endif %}
  }
  form#email_signup button,
  form#email_signup input {
    outline: none;
    border: none;
    box-shadow: none;
  }
  form#email_signup input {
    height: {{section.settings.input_height}}px;
    background: {{section.settings.input_background}};
    border-radius: {{section.settings.input_radius}}px;
    padding-left: 10px;
  }
  form#email_signup button:hover {
    background: {{section.settings.button_background_hover}};
    color: {{section.settings.button_color_hover}};
    cursor: pointer;
    transition: all .4s ease-in-out;
  }
  form#email_signup button {
    height: {{section.settings.button_height}}px;
    border-radius: {{section.settings.button_radius}}px;
    background: {{section.settings.button_background}};
    color: {{section.settings.button_text_color}};
    font-weight: bold;
    font-size: 14px;
  }
  .klaviyo-newsletter-logo img{
    border-radius: {{section.settings.logo_radius}}px;
  }
{%endstyle%}
<div class="klaviyo-newsletter">
  <div class="klaviyo-newsletter-logo">
    {{ section.settings.logo | img_tag }}
  </div>
  <div class="klaviyo-newsletter-body">
    <h3>{{section.settings.heading}}</h3>
    <p>{{section.settings.subheading}}</p>
    <div class="klaviyo_messages" style="color: {{section.settings.klaviyo_message_color}}; padding: 10px;">
      <div class="success_message" style="display:none;"></div>
      <div class="error_message" style="display:none;"></div>
    </div>
    <form method="GET"
      target="_blank"
      novalidate="novalidate"
      id="email_signup">
      <input type="text" placeholder="{{section.settings.email_placeholder}}" name="email" autocomplete="email">
      <input type="hidden" name="challenge" value="false" />
      <button type="button">{{section.settings.button_text}}</button>
    </form>
  </div>
</div>

<script type="text/javascript">
document.querySelector('#email_signup button').addEventListener('click', function(e) {  
  e.preventDefault()
  let k_success = document.querySelector('.klaviyo_messages .success_message')
  let k_error = document.querySelector('.klaviyo_messages .error_message')
  let email = document.querySelector('[name="email"]')
  let klaviyoID = "{{section.settings.klaviyo_id}}"
  let settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://manage.kmail-lists.com/ajax/subscriptions/subscribe",
  "method": "POST",
  "headers": {
    "content-type": "application/x-www-form-urlencoded",
    "cache-control": "no-cache"
  },
  "data": {
    "g": klaviyoID, 
    "email": email.value,
    "$fields": "$source",
    "$source": "Newsletter Form"
  }
};
  if (!validateEmail(email.value)) {
    k_success.style.display = "none"
    email.style.border = "2px solid #ff0000"
    k_error.style.display = "block"
    k_error.innerHTML = "Please enter a valid email!"
  }else{
    k_error.style.display = "none"
    email.style.border = "2px solid #000"
    $.ajax(settings).done(function(response) {
      if (response.success) {
        k_error.style.display = "none"
        k_error.innerHTML = ""
        k_success.style.display = "block"
        if (response.data.is_subscribed) {
          k_success.innerHTML = "You are already signed up!"
        }else{
          k_success.innerHTML = "Thank you for signing up!"
        }
      }else{
        if (response.data.is_subscribed) {
          k_error.style.display = "none"
          k_success.style.display = "block"
          k_success.innerHTML = "You are already signed up!"
        }else{
          k_success.style.display = "none"
          k_error.style.display = "block"
          k_error.innerHTML = response.errors[0]
        }
      }
    })
  }
})
function validateEmail(email){return String(email).toLowerCase().match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)}
</script>

{% schema %}
{
"name": "Klaviyo Newsletter",
"settings": [
{
  "type": "header",
  "content": "Section Styles"
},
{
  "type": "color",
  "id": "background_color",
  "label": "Background Color",
  "default": "#eee"
},
{
  "type": "image_picker",
  "id": "background_image",
  "label": "Background Image",
  "info": "If set, the background color will be skipped."
},
{
  "type": "range",
  "id": "logo_radius",
  "label": "Logo Radius",
  "min": 0,
  "max": 100,
  "step": 1,
  "default": 100
},
{
  "type": "range",
  "id": "background_opacity",
  "label": "Background Opacity",
  "min": 0,
  "max": 1,
  "step": 0.1,
  "default": 1
},
{
  "type": "select",
  "id": "align_items",
  "label": "Align Items",
  "default": "center",
  "options": [
    {
      "value": "left",
      "label": "Left"
    },
    {
      "value": "center",
      "label": "Center"
    },
    {
      "value": "right",
      "label": "Right"
    }
  ]
},
{
  "type": "select",
  "id": "text_align",
  "label": "Text Align",
  "default": "center",
  "options": [
    {
      "value": "left",
      "label": "Left"
    },
    {
      "value": "center",
      "label": "Center"
    },
    {
      "value": "right",
      "label": "Right"
    }
  ]
},
{
  "type": "font_picker",
  "id": "font",
  "label": "Font Family",
  "default": "work_sans_n6"
},
{
  "type": "header",
  "content": "Heading Styles"
},
{
    "type": "color",
    "id": "heading_text_color",
    "label": "Heading Text Color",
    "default": "#000"
},
{
  "type": "range",
  "id": "heading_font_size",
  "label": "Heading Font Size",
  "min": 10,
  "max": 50,
  "step": 1,
  "default": 30,
  "unit": "px"
},
{
  "type": "select",
  "id": "heading_text_transform",
  "label": "Text Format",
  "default": "none",
  "options": [
    {
      "value": "none",
      "label": "Default"
    },
    {
      "value": "lowercase",
      "label": "Lowercase"
    },
    {
      "value": "capitalize",
      "label": "Capitalize"
    },
    {
      "value": "uppercase",
      "label": "Uppercase"
    }
  ]
},
{
  "type": "checkbox",
  "id": "heading_text_bold",
  "label": "Text Bold",
  "default": true
},
{
  "type": "header",
  "content": "Sub-Heading Styles"
},
{
    "type": "color",
    "id": "subheading_text_color",
    "label": "Text Color",
    "default": "#999"
},
{
  "type": "range",
  "id": "subheading_font_size",
  "label": "Font Size",
  "min": 10,
  "max": 50,
  "step": 1,
  "default": 25,
  "unit": "px"
},
{
  "type": "select",
  "id": "subheading_text_transform",
  "label": "Text Format",
  "default": "none",
  "options": [
    {
      "value": "none",
      "label": "Default"
    },
    {
      "value": "lowercase",
      "label": "Lowercase"
    },
    {
      "value": "capitalize",
      "label": "Capitalize"
    },
    {
      "value": "uppercase",
      "label": "Uppercase"
    }
  ]
},
{
  "type": "checkbox",
  "id": "subheading_text_bold",
  "label": "Text Bold",
  "default": false
},
{
  "type": "header",
  "content": "Email Input Style"
},
{
  "type": "text",
  "id": "input_height",
  "label": "Input Height",
  "default": "50",
  "info": "in px"
},
{
  "type": "color",
  "id": "input_background",
  "label": "Input Background",
  "default": "#fff"
},
{
  "type": "range",
  "id": "input_radius",
  "label": "Border Radius",
  "min": 0,
  "max": 20,
  "step": 1,
  "default": 0
},
{
  "type": "header",
  "content": "Button Style"
},
{
  "type": "text",
  "id": "button_height",
  "label": "Button Height",
  "default": "50",
  "info": "in px"
},
{
  "type": "color",
  "id": "button_background",
  "label": "Button Background",
  "default": "#aaa"
},
{
  "type": "color",
  "id": "button_text_color",
  "label": "Button Text Color",
  "default": "#000"
},
{
  "type": "color",
  "id": "button_background_hover",
  "label": "Button Background on hover",
  "default": "#000"
},
{
  "type": "color",
  "id": "button_color_hover",
  "label": "Text color on hover",
  "default": "#fff"
},
{
  "type": "range",
  "id": "button_radius",
  "label": "Border Radius",
  "min": 0,
  "max": 20,
  "step": 1,
  "default": 0
},
{
  "type": "header",
  "content": "Section Content"
},
{
    "type": "image_picker",
    "id": "logo",
    "label": "Logo"
},
{
  "type": "text",
  "id": "heading",
  "label": "Heading",
  "default": "NEW DROPS COMING SOON"
},
{
  "type": "textarea",
  "id": "subheading",
  "label": "Subheading",
  "default": "Get early access to new releases."
},
{
  "type": "text",
  "id": "email_placeholder",
  "label": "Email Placeholder",
  "default": "Your email"
},
{
  "type": "text",
  "id": "button_text",
  "label": "Button Text",
  "default": "GET UPDATES"
},
{
  "type": "header",
  "content": "Klaviyo Settings"
},
{
  "type": "text",
  "id": "success_message",
  "label": "Success Message",
  "default": "Thank you for signing up!"
},
{
  "type": "color",
  "id": "klaviyo_message_color",
  "label": "Klaviyo Message Color",
  "default": "#28a745"
},
{
  "type": "text",
  "id": "klaviyo_id",
  "label": "Klaviyo List ID",
  "default": "00000"
},
{
  "type": "header",
  "content": "Spacing Settings"
},
{
  "type": "range",
  "id": "margin_top",
  "label": "Top spacing",
  "min": 0,
  "max": 80,
  "default": 0,
  "unit": "px"
},
{
  "type": "range",
  "id": "margin_bottom",
  "label": "Bottom spacing",
  "min": 0,
  "max": 80,
  "default": 10,
  "unit": "px"
}
],
"presets": [
  {
    "category": "Newsletter",
    "name":"Klaviyo Newsletter"
  }
]
}
{% endschema %}