Created
August 24, 2016 15:49
-
-
Save kyledurand/0e42289a7239fa05fec8ac1e7788a810 to your computer and use it in GitHub Desktop.
Cash on Delivery module to drop inside theme templates - https://help.shopify.com/manual/payment-settings/cash-on-delivery/zipcode-checker/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% comment %} | |
Start of Cash on Delivery pincode checker snippet | |
Instructions: | |
1. Copy and paste this snippet into the liquid template where you'd like it to be displayed. | |
i.e. product.liquid, cart.liquid etc... | |
2. Set title and messages below (optional). | |
3. Customize success and failure colors (optional). | |
4. Adjust the pixel spacing on line 19 to best match the surroundings of the snippet. | |
This will adjust spacing below the title and input field. | |
{% endcomment %} | |
{% assign title = 'Check COD Availability' %} | |
{% assign cod_available_message = 'Cash on Delivery is available!' %} | |
{% assign cod_unavailable_message = 'Cash on Delivery is not available to this pincode.' %} | |
{% assign placeholder_message = 'Pincode, e.g. 414001' %} | |
{% assign check_button_text = 'Check' %} | |
{% assign success_color = '#468847' %} | |
{% assign failure_color = '#FF0000' %} | |
{% assign spacing_in_pixels = 20 %} | |
<div> | |
<h3 style="margin-bottom: {{ spacing_in_pixels | append: 'px' }}">{{ title }}</h3> | |
<div style="display: flex; margin-bottom: {{ spacing_in_pixels | append: 'px' }};"> | |
<input type='text' id="ZipCode" name='zip_code' placeholder='{{ placeholder_message }}' style="margin: 0 {{ spacing_in_pixels | divided_by: 2 | append: 'px' }} 0 0;" /> | |
<button type='button' class="btn button" onclick="checkCodAvailability()">{{ check_button_text }}</button> | |
</div> | |
<p id='PincodeCheckerAvailability' style='display: none;'></p> | |
</div> | |
<script type="text/javascript"> | |
var checkCodAvailability = function() { | |
var url = 'https://cod-app.myshopify.io/payment/check'; | |
var box = document.getElementById('PincodeCheckerAvailability'); | |
var zipCode = document.getElementById('ZipCode').value; | |
box.style.display = 'none'; | |
var xhr = new XMLHttpRequest(); | |
xhr.open('POST', url); | |
xhr.setRequestHeader('Content-Type', 'application/json'); | |
xhr.setRequestHeader('Accept', 'application/json'); | |
xhr.onreadystatechange = function() { | |
if (xhr.readyState == 4 && xhr.status == 200) { | |
var result = JSON.parse(xhr.responseText); | |
if (result.cod_available == true) { | |
box.innerHTML = '{{ cod_available_message }}' | |
box.style.color = '{{ success_color }}'; | |
} else { | |
box.innerHTML = '{{ cod_unavailable_message }}' | |
box.style.color = '{{ failure_color }}'; | |
} | |
box.style.display = 'block'; | |
} | |
} | |
params = { | |
x_account_id: '{{ shop.permanent_domain }}', | |
zip_code: zipCode | |
} | |
xhr.send(JSON.stringify(params)); | |
} | |
</script> | |
{% comment %} End of Cash on Delivery pincode checker snippet {% endcomment %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment