savchukoleksii
7/9/2018 - 12:08 PM
Recharge Shopify Snippets
<!-- Subscriptions Powered by ReCharge Payments: Begin Liquid Code -->
<!--
Subscription Cart Footer
http://rechargepayments.com: v2
Updated: 2017/06/12
-->
{% comment %}
to install, insert:
{% include 'subscription-cart-footer' %}
at the top of cart.liquid page
for best results, add this in the checkout button/input on templates/cart.liquid:
{% if cart_has_subscription_item == 'true' %}
onclick="event.preventDefault(); reChargeSaveCartNoteAndRedirect()"
{% endif %}
{% endcomment %}
{% assign cart_has_subscription_item = 'false' %}
{% for i in cart.items %}
{% for p in i.properties %}
{% if p.first == 'shipping_interval_frequency' %}
{% assign cart_has_subscription_item = 'true' %}
{% endif %}
{% endfor %}
{% endfor %}
{% if cart_has_subscription_item == 'true' %}
<style>
form[action^="/cart"] [type="submit"] {
display: none;
}
.extra-checkout-buttons,
.additional-checkout-button,
.additional-checkout-buttons,
.amazon-payments-pay-button,
.google-wallet-button-holder,
#additional-checkout-buttons,
#a_p_c {
display: none !important;
}
</style>
<script>
// Subscriptions Powered by ReCharge Payments: JavaScript
(function() {
// Basic function to load script files, will be used to include jQuery
var loadScript = function(url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
// If the browser is Internet Explorer
if (script.readyState){
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
// For any other browser
} else {
script.onload = function() {
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
};
// This is our JavaScript that we'll run after jQuery is included
var reChargeShowButton = function($) {
$('form[action^="/cart"] [type="submit"]').show();
}
var reChargeCartFooterJS = function($) {
function reChargeGetCookie(name) {
return (document.cookie.match('(^|; )' + name + '=([^;]*)')||0)[2];
}
function reChargeReDirection(redirect_url) {
// Re-direct customer to desired URL
window.location.href = redirect_url;
}
function reChargeBuildCheckoutURL() {
// Build the Checkout URL
var myshopify_domain = '{{ shop.permanent_domain }}';
var token = reChargeGetCookie('cart');
try {
// Cross-domain tracking with Google Analytics
var ga_linker = ga.getAll()[0].get('linkerParam');
} catch (e) {
// 'ga' is not available
var ga_linker = '';
}
// Customer email address for use in the Checkout URL
var customer_param = '{% if customer %}customer_id={{ customer.id }}&customer_email={{ customer.email }}{% endif %}';
var checkout_url = 'https://checkout.rechargeapps.com/r/checkout?myshopify_domain=' + myshopify_domain + '&cart_token=' + token + '&' + ga_linker + '&' + customer_param
return checkout_url;
}
function reChargeUpdateURLs() {
// Map hidden product handles back to their original product handle
{% for item in cart.items %}
{% if item.product.metafields.subscriptions.original_handle %}
var handle = "{{ item.product.url }}";
var original_product_handle = "{{ item.product.metafields.subscriptions.original_handle }}";
var elements_to_update = $('a[href*="' + handle + '"]');
elements_to_update.each(function() {
$(this).attr('href', "products/" + original_product_handle);
});
{% endif %}
{% endfor %}
}
function reChargeSaveCartNoteAndRedirect() {
// Build the Checkout URL for later redirection
var checkout_url = reChargeBuildCheckoutURL();
try {
var has_cart_note_or_attribute = false;
var data = {};
// Store the Customer's response to the Terms and Conditions
if ($('#terms, #agree').val() != undefined) {
data['terms_and_conditions'] = $('#terms, #agree').val();
has_cart_note_or_attribute = true;
}
// Save Cart Attributes
$('[name*="attributes"]').each(function() {
var input = $(this);
var input_type = $(this).attr('type');
if (input.val() != '' && ((input_type != 'radio' && input_type != 'checkbox') || (input_type == 'radio' && input.is(':checked')) || (input_type == 'checkbox' && input.prop('checked')))) {
var name_attr = input.attr('name');
data[name_attr] = input.val();
has_cart_note_or_attribute = true;
}
});
// Save Cart Note
if ($('[name="note"]:visible').val() != "undefined") {
data['note'] = $('[name="note"]:visible').val();
has_cart_note_or_attribute = true;
}
// If store has either Terms and Conditions, Cart Attributes, or Notes, send data to update.js
if (has_cart_note_or_attribute) {
$.ajax({
type: 'POST',
data: data,
url: '/cart/update.js',
dataType: 'json',
success: function() {
// Redirect to ReCharge checkout after notes have been saved
reChargeReDirection(checkout_url);
}
});
} else {
// Redirect to ReCharge checkout
reChargeReDirection(checkout_url);
}
} catch (e) {
console.log(e);
// If an error occured, we'll still redirect customers to the ReCharge checkout.
reChargeReDirection(checkout_url);
}
}
$(document).ready(function() {
// Can use this by default or the onclick attribute directly
reChargeUpdateURLs();
var checkout_button_selectors = '[name="checkout"], [href="/checkout"], form[action="/checkout"] input[type="submit"], .checkout_button';
$(document).on('click', checkout_button_selectors, function(e) {
if (!$(this).data('disable-recharge')) {
e.preventDefault();
reChargeSaveCartNoteAndRedirect();
}
});
reChargeShowButton($)
});
}
// Check if jQuery is added, if not, then we'll loadScript, otherwise, run reChargeJS
if ((typeof(jQuery) == 'undefined') || (parseInt(jQuery.fn.jquery) == 1 && parseFloat(jQuery.fn.jquery.replace(/^1\./,"")) < 7.2)) {
// We'll get our jQuery from Google APIs
loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', function() {
jQuery172 = jQuery.noConflict(true);
setTimeout(function() {
try {
reChargeCartFooterJS(jQuery172);
}
catch (err) {
console.error('Error with function "reChargeCartFooterJS"', err);
reChargeShowButton(jQuery172);
}
}, 1);
});
} else {
setTimeout(function() {
try {
reChargeCartFooterJS(jQuery);
}
catch (err) {
console.error('Error with function "reChargeCartFooterJS"', err);
reChargeShowButton(jQuery);
}
}, 1);
}
})();
// If page is loaded from cache (browser back/forward button), force page reload
window.addEventListener('pageshow', function (event) { if (event.persisted || window.performance &&
window.performance.navigation.type == 2) { window.location.reload(); } }, false);
</script>
{% endif %}
<!-- Subscriptions Powered by ReCharge Payments: End Liquid Code -->
<!-- Subscriptions Powered by ReCharge Payments: Begin Liquid Code -->
<!--
Subscription Theme Footer
http://rechargepayments.com: v2
Updated: 2017/09/12
-->
{% if template and template != 'cart' %}
<script>
// Subscriptions Powered by ReCharge Payments: JavaScript
(function() {
// Basic function to load script files, will be used to include jQuery
var loadScript = function(url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
// If the browser is Internet Explorer
if (script.readyState){
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
// For any other browser
} else {
script.onload = function() {
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
};
// This is our JavaScript that we'll run after jQuery is included
var reChargeThemeFooterJS = function($) {
function reChargeSaveCartNoteAndRedirectToCart() {
var has_cart_note_or_attribute = false;
try {
var data = {};
if ($('[name="note"]').val() != undefined) {
var note = $('[name="note"]').val();
data['note'] = note;
has_cart_note_or_attribute = true;
}
if (has_cart_note_or_attribute) {
$.ajax({
type: 'POST',
data: data,
url: '/cart/update.js',
dataType: 'json',
success: function() {
window.location.href = '/cart';
}
});
} else {
window.location.href = '/cart';
}
} catch (e) {
window.location.href = '/cart';
}
}
var checkout_button_selectors = '[href="/checkout"], form[action="/cart"] button[type="submit"], form[action="/cart"] input[type="submit"], form[action="/checkout"] input[type="submit"], form[action="/checkout"] button[type="submit"]';
$(document).on('click', checkout_button_selectors, function(e) {
if (!e.target.hasAttribute('data-disable-recharge')) {
e.preventDefault();
reChargeSaveCartNoteAndRedirectToCart();
window.location.href = '/cart';
} else {
console.info('ReCharge disabled');
}
});
}
// Check if jQuery is added, if not, then we'll loadScript, otherwise, run reChargeJS
if ((typeof(jQuery) == 'undefined') || (parseInt(jQuery.fn.jquery) == 1 && parseFloat(jQuery.fn.jquery.replace(/^1\./,"")) < 7.2)) {
// We'll get our jQuery from Google APIs
loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', function() {
jQuery172 = jQuery.noConflict(true);
reChargeThemeFooterJS(jQuery172);
});
} else {
reChargeThemeFooterJS(jQuery);
}
})();
</script>
{% endif %}
<!-- Subscriptions Powered by ReCharge Payments: End Liquid Code -->
<!-- Subscriptions Powered by ReCharge Payments: Begin Liquid Code -->
<!--
Subscription Product
http://rechargepayments.com: v3.5
-->
{% if product.metafields.subscriptions.subscription_id %}
{% comment %}Subscriptions Powered by ReCharge Payments: Meta Fields{% endcomment %}
{% comment %}Subscription settings{% endcomment %}
{% assign subscription_product = product.metafields.subscriptions %}
{% assign subscription_id = subscription_product.subscription_id %}
{% assign widget_settings = shop.metafields.subscriptions %}
{% if widget_settings.subscription_active == 'true' %}
{% assign subscription_active = true %}
{% else %}
{% assign subscription_active = false %}
{% endif %}
{% if subscription_product.is_subscription_only == 'true' or product.tags contains 'Subscription Only' or product.tags contains 'subscription only' or product.tags contains 'Subscription only' or product.tags contains 'subscriptiononly' %}
{% assign subscription_only = true %}
{% else %}
{% assign subscription_only = false %}
{% endif %}
{% if widget_settings.select_subscription_first == 'true' %}
{% assign select_subscription_first = true %}
{% else %}
{% assign select_subscription_first = false %}
{% endif %}
{% if subscription_only or select_subscription_first %}
{% assign default_purchase_type = "autodeliver" %}
{% else %}
{% assign default_purchase_type = "onetime" %}
{% endif %}
{% comment %}Subscription Interval Settings{% endcomment %}
{% if subscription_product.shipping_interval_unit_type.size > 0 %}
{% assign shipping_interval_unit_type = subscription_product.shipping_interval_unit_type %}
{% else %}
{% assign shipping_interval_unit_type = 'Days' %}
{% endif %}
{% if subscription_product.shipping_interval_frequency.size > 0 %}
{% assign shipping_interval_frequency = subscription_product.shipping_interval_frequency | split: ',' %}
{% else %}
{% assign shipping_interval_frequency = '30' %}
{% endif %}
{% comment %}Discount settings{% endcomment %}
{% assign discount_percentage = subscription_product.discount_percentage | round: 2 %}
{% assign discount_floor = subscription_product.discount_percentage | floor %}
{% if discount_percentage == discount_floor %}
{% assign discount_percentage = discount_floor %}
{% endif %}
{% comment %}Currency settings{% endcomment %}
{% assign currency_prefix = widget_settings.currency_prefix | default: "$" %}
{% assign currency_suffix = widget_settings.currency_suffix | default: "" %}
{% comment %}Widget translation{% endcomment %}
{% assign label_onetime = widget_settings.onetime_message | default: "One-time purchase" %}
{% assign label_autodeliver = widget_settings.subscribe_message | default: "Subscribe & save" %}
{% assign label_deliver_every = widget_settings.widget_deliver_every | default: "Deliver every" %}
{% comment %}Popup settings{% endcomment %}
{% if widget_settings.show_subscription_details == 'false' %}
{% assign show_widget = false %}
{% else %}
{% assign show_widget = true %}
{% endif %}
{% if widget_settings.show_subscription_details_icon == 'false' %}
{% assign show_widget_icon = false %}
{% else %}
{% assign show_widget_icon = true %}
{% endif %}
{% if widget_settings.show_learnmore == 'false' %}
{% assign show_learnmore = false %}
{% else %}
{% assign show_learnmore = true %}
{% endif %}
{% if widget_settings.show_poweredby == 'false' %}
{% assign show_poweredby = false %}
{% else %}
{% assign show_poweredby = true %}
{% endif %}
{% comment %}Custom text{% endcomment %}
{% assign subscription_details_label = widget_settings.subscription_details_verbiage | default: "Subscription details" %}
{% assign how_it_works_text = widget_settings.how_it_works | default: "<strong>How subscriptions work</strong><br><br>Products are automatically delivered on your schedule. No obligation, modify or cancel your subscription anytime." %}
{% assign learnmore_link = widget_settings.learnmore_verbiage | default: "Learn more..." %}
{% comment %}Custom styling{% endcomment %}
{% assign widget_label_color = widget_settings.font_color | default: "#000000" %}
{% assign widget_active_color = widget_settings.active_color | default: "#676767" %}
{% assign widget_active_bg = widget_settings.background_color | default: "#F8F8F8" %}
{% assign widget_icon = subscription.widget_icon | default: "black" %}
{% if widget_icon == "white" %}
{% assign widget_icon = "//rechargestatic-bootstrapheroes.netdna-ssl.com/static/images/widget/rc_widget__icon__white@2x.png" %}
{% else %}
{% assign widget_icon = "//rechargestatic-bootstrapheroes.netdna-ssl.com/static/images/widget/rc_widget__icon__black@2x.png" %}
{% endif %}
{% assign popup_zindex = widget_settings.popup_zindex | default: "56" %}
{% assign popup_background_color = widget_settings.popup_background_color | default: "#474747" %}
{% assign popup_text_color = widget_settings.popup_text_color | default: "#FFFFFF" %}
{% assign popup_link_color = widget_settings.popup_link_color | default: "#4DD6B7" %}
{% assign recharge_custom_css = widget_settings.custom_css | defalut: "" %}
{% comment %}Custom URLs{% endcomment %}
{% comment %}Learn more link{% endcomment %}
{% if widget_settings.learnmore_url %}
{% if widget_settings.learnmore_url contains "rechargepayments.com/subscribe-with-recharge" %}
{% capture learnmore_url %}http://rechargepayments.com/subscribe-with-recharge?utm_source=shopify%20store&utm_medium=customer%20link&utm_campaign=Shopify%20store%20back%20link&shop_name={{ shop.name | url_param_escape }}&shop={{ shop.permanent_domain }}{% endcapture %}
{% else %}
{% assign learnmore_url = widget_settings.learnmore_url %}
{% endif %}
{% else %}
{% capture learnmore_url %}http://rechargepayments.com/subscribe-with-recharge?utm_source=shopify%20store&utm_medium=customer%20link&utm_campaign=Shopify%20store%20back%20link&shop_name={{ shop.name | url_param_escape }}&shop={{ shop.permanent_domain }}{% endcapture %}
{% endif %}
{% comment %}Powered by badge{% endcomment %}
{% if widget_settings.poweredby_url %}
{% if widget_settings.poweredby_url contains "rechargepayments.com/subscribe-with-recharge" %}
{% capture poweredby_url %}http://rechargepayments.com/subscribe-with-recharge?utm_source=shopify%20store&utm_medium=customer%20link&utm_campaign=Shopify%20store%20back%20link&shop_name={{ shop.name | url_param_escape }}&shop={{ shop.permanent_domain }}{% endcapture %}
{% else %}
{% assign poweredby_url = widget_settings.poweredby_url %}
{% endif %}
{% else %}
{% capture poweredby_url %}http://rechargepayments.com/subscribe-with-recharge?utm_source=shopify%20store&utm_medium=customer%20link&utm_campaign=Shopify%20store%20back%20link&shop_name={{ shop.name | url_param_escape }}&shop={{ shop.permanent_domain }}{% endcapture %}
{% endif %}
<!-- Subscriptions Powered by ReCharge Payments: CSS -->
<link href="//rechargeassets-bootstrapheroes-rechargeapps.netdna-ssl.com/static/css/rcWidget.css" rel="stylesheet" type="text/css">
<style>
/* Widget: Purchase options */
label.rc_label {
color: {{ widget_label_color }};
}
div.rc_block__type--active {
background-color: {{ widget_active_bg }};
}
div.rc_block__type--active label.rc_label {
color: {{ widget_active_color }};
}
/* Widget: Popup */
div.rc_popup__block {
z-index: {{ popup_zindex }};
}
div.rc_popup__block:before {
border-bottom-color: {{ popup_background_color }};
}
div.rc_popup__block {
background-color: {{ popup_background_color }} !important;
}
div.rc_popup__close,
div.rc_popup__block__content,
div.rc_popup__block__content strong {
color: {{ popup_text_color }} !important;
}
div.rc_popup__block__content a {
color: {{ popup_link_color }} !important;
}
/* ReCharge CSS */
{{ recharge_custom_css }}
/* Add Custom CSS Below */
</style>
<!-- Subscriptions Powered by ReCharge Payments: HTML -->
<div id="rc_container" style="display: none;"{% if subscription_only %} class="rc_subscription-only"{% endif %}>
<input type="hidden" name="" id="rc_subscription_id" value="{{ subscription_id }}">
<input type="hidden" name="" id="rc_shipping_interval_unit_type" value="{{ shipping_interval_unit_type }}">
<select id="rc_duplicate_selector" data-productid="{{ product.id }}" class="styled replaced no-js" style="display: none;">
{% for variant in product.variants %}
<option value="{{ variant.metafields.subscriptions.discount_variant_id }}">{{ variant.metafields.subscriptions.discount_variant_id }}</option>
{% endfor %}
</select>
{% unless subscription_only %}
<div class="rc_block rc_block__type rc_block__type__onetime{% unless select_subscription_first %} rc_block__type--active{% endunless %}">
<input type="radio" id="rc_purchase_type_onetime" name="purchase_type" data-productid="{{ product.id }}" value="onetime"{% unless select_subscription_first %} checked{% endunless %} class="rc_radio rc_radio__onetime">
<label for="rc_purchase_type_onetime" class="rc_label rc_label__onetime">
{{ label_onetime }}{% if discount_percentage > 0 %}:{% endif %}
{% if discount_percentage > 0 %}
<span id="rc_price_onetime" class="rc_price rc_price__onetime"></span>
{% endif %}
</label>
</div>
{% endunless %}
<div class="rc_block rc_block__type rc_block__type__autodeliver{% if select_subscription_first %} rc_block__type--active{% endif %}"{% if subscription_only and shipping_interval_frequency.size == 1 %} style="display: none;"{% endif %}>
<input type="radio" id="rc_purchase_type_autodeliver" name="purchase_type" data-productid="{{ product.id }}" value="autodeliver"{% if subscription_only or select_subscription_first %} checked{% endif %}{% if subscription_only %} style="display: none;"{% endif %} class="rc_radio rc_radio__autodeliver">
{% unless subscription_only %}
<label for="rc_purchase_type_autodeliver" class="rc_label rc_label__autodeliver">
{{ label_autodeliver }}
{% if discount_percentage > 0 %}
<span class="rc_label__discount">({{ discount_percentage }}%):</span>
<span id="rc_price_autodeliver" class="rc_price rc_price__autodeliver"></span>
{% endif %}
</label>
{% endunless %}
<div id="rc_autodeliver_options" class="rc_block rc_block__type__options">
{% if shipping_interval_frequency.size == 1 %}
<label for="rc_shipping_interval_frequency" class="rc_label rc_label__deliver_every">
<span class="rc_label__delivery">{{ label_deliver_every }}</span>
<span class="rc_label__frequency">
{{ shipping_interval_frequency[0] }}
{% if shipping_interval_frequency[0] == "1" %}
{% if shipping_interval_unit_type == 'Months' %}Month{% elsif shipping_interval_unit_type == 'Weeks' %}Week{% else %}Day{% endif %}
{% else %}
{{ shipping_interval_unit_type }}
{% endif %}
</span>
</label>
<input type="hidden" name="" id="rc_shipping_interval_frequency" data-productid="{{ product.id }}" value="{{ shipping_interval_frequency }}">
{% elsif shipping_interval_frequency.size > 1 %}
<label for="rc_shipping_interval_frequency" class="rc_label rc_label__deliver_every">
<span class="rc_label__delivery">{{ label_deliver_every }}</span>
<select name="" id="rc_shipping_interval_frequency" data-productid="{{ product.id }}" class="rc_select rc_select__frequency styled replaced">
{% for frequency in shipping_interval_frequency %}
<option value="{{ frequency }}">
{{ frequency }}
{% if frequency == "1" %}
{% if shipping_interval_unit_type == 'Months' %}Month{% elsif shipping_interval_unit_type == 'Weeks' %}Week{% else %}Day{% endif %}
{% else %}
{{ shipping_interval_unit_type }}
{% endif %}
</option>
{% endfor %}
</select>
</label>
{% endif %}
</div>
</div>
<div class="rc_popup">
{% if show_widget %}
<div class="rc_popup__hover">
{% if show_widget_icon %}
<img src="{{ widget_icon }}" height="21" width="18" class="rc_popup__icon">
{% endif %}
{{ subscription_details_label }}
<div class="rc_popup__block">
<div class="rc_popup__block__content">
<div class="rc_popup__close" style="display: none;">x</div>
{{ how_it_works_text }}
{% if show_learnmore %}
<br><a href="{{ learnmore_url }}" target="_blank">{{ learnmore_link }}</a>
{% endif %}
</div>
{% if show_poweredby %}
<div class="rc_popup__block__footer">
<a href="{{ poweredby_url }}" target="_blank">
<img src="//rechargestatic-bootstrapheroes.netdna-ssl.com/static/images/widget/rc_widget__banner@2x.png" height="28" width="153" class="rc_popup__badge">
</a>
</div>
{% endif %}
</div>
</div>
{% elsif show_widget == "link" %}
<a href="{{ learnmore_url }}" target="_blank" class="rc_popup__hover">{% if show_widget_icon %}<img src="{{ widget_icon }}" height="21" width="18" class="rc_popup__icon"> {% endif %}{{ subscription_details_label }}</a>
{% endif %}
</div>
</div>
<!-- Subscriptions Powered by ReCharge Payments: JS -->
<script src="//rechargeassets-bootstrapheroes-rechargeapps.netdna-ssl.com/static/js/rcWidget.js"></script>
<script>
(function() {
var myProduct = {
id: {{ product.id }},
subscription_id: {{ subscription_id }},
shop_currency: "{{ shop.currency }}",
currency_prefix: "{{ currency_prefix }}",
currency_suffix: "{{ currency_suffix }}",
money_format: "{{ shop.money_format }}",
subscription_only: {{ subscription_only }},
select_subscription_first: {{ select_subscription_first }},
shipping_interval_unit_type: "{{ shipping_interval_unit_type }}",
shipping_interval_frequency: [{% for interval in shipping_interval_frequency %}{{ interval }}, {% endfor %}],
discount_percentage: {{ discount_percentage }},
variant_to_duplicate: { {% for variant in product.variants %}{{ variant.id }}:'{{ variant.metafields.subscriptions.discount_variant_id }}', {% endfor %} },
variant_to_price: { {% for variant in product.variants %}{{ variant.id }}:'{{ variant.price }}', {% endfor %} },
duplicate_to_price: { {% for variant in product.variants %}{{ variant.metafields.subscriptions.discount_variant_id }}: '{{ variant.metafields.subscriptions.discount_variant_price | replace: ".", "" }}', {% endfor %} },
};
if (document.readyState === "complete" || document.readyState === "loaded") {
if (!window.ReCharge) { window.ReCharge = new rcWidget({ active: {{ subscription_active }} }); }
ReCharge.addProduct(myProduct);
} else {
document.addEventListener("DOMContentLoaded", function() {
if (!window.ReCharge) { window.ReCharge = new rcWidget({ active: {{ subscription_active }} }); }
ReCharge.addProduct(myProduct);
});
}
})();
</script>
{% endif %}
<!-- Subscriptions Powered by ReCharge Payments: End Liquid Code -->