Handoff cart to Recharge checkout with Javascript
The following code lets you send a specific subscription item from a product or category page to checkout. This may be necessary if you want to send customers to the Recharge checkout for subscription items, then ensure sure customers checkout via a custom checkout for with a onetime item.
In this scenario after the customer completes checkout for the subscription product, if they were to come back to the storefront the onetime item would still be in their cart and they'd complete checkout via the custom checkout.
Place the following code in the footer of the store. See Using Script Manager for more information.
Note
You should replace the sample URL in the
storeDomainfunction with your store URL.
Product Page
<script>
function addQuickCart() {
//---- Product & Subscription Settings ----\\
const storeDomain = "{{you-store-domain}}.mybigcommerce.com" // Replace with your domain
const subscriptionButtonText = 'Subscribe now'
const product = {
id: 117,
variantId: 85,
price: 7000, // Price in cents
weight: 6169, // Weight in grams
title: "Subscription Box",
subtitle: "Recurring subscription every 3 months",
order_interval_unit: "month", // Can be "day", "week", or "month"
order_interval_frequency: 3, // Default value for how often the subscription ships
requires_shipping: true, // Is this a subscription that must be physically shipped?
}
const subscription = {
note: "This is a Subscription Box", // Internal notes
extra: [ // Extra information to include in the order. Each array entry must contain a dictionary with “name” and “value” keys.
{
name: "Marketing Campaign",
value: "Christmas Subscription Box"
}
]
}
//---- End Settings ----\\
let _$ = selector => {
return document.querySelector(selector)
}
// Get Product ID of current product page
const tmiID = _$(".productView .productView-options input[name=product_id]")
const sbID = _$('.product-info input[name=product_id]')
const productID = parseInt((tmiID ? tmiID : sbID).value)
const isSubscriptionProduct = productID === product.id
// Only add a subscription button if this is the matching subscription product
if(isSubscriptionProduct) {
const tmi = _$('#form-action-addToCart')
const sb = _$('[data-button-purchase]')
const $addCartButton = tmi ? tmi : sb
const $quickButton = $addCartButton.cloneNode(true)
$quickButton.innerHtml = subscriptionButtonText
$quickButton.value = subscriptionButtonText
if ($quickButton.children[0]) {
$quickButton.children[0].innerText = subscriptionButtonText
$quickButton.children[0].value = subscriptionButtonText
}
if ($quickButton.type === 'submit') {
$quickButton.type = 'button'
}
$quickButton.addEventListener('click', (ev) => {
ev.preventDefault()
const selectedFrequency = _$('.rca-subscription-frequency-selector')
const quantity = parseInt(_$('[name="qty[]"]').value)
const cart = {
"items": [{
"order_interval_unit": product.order_interval_unit,
"order_interval_frequency": selectedFrequency ? selectedFrequency.value : product.order_interval_frequency,
"quantity": quantity,
"product_id": product.id,
"variant_id": product.variantId,
"price": product.price,
"grams": product.weight,
"requires_shipping": product.requires_shipping,
"title": product.title,
"variant_title": product.subtitle
}],
"note": subscription.note,
"note_attributes": subscription.extra,
}
const $form = document.createElement('form')
$form.id = '#rca-subscribe-now'
$form.setAttribute('method', 'post')
$form.setAttribute('action', `https://checkout.rechargeapps.com/r/checkout?domain=${storeDomain}`)
const $cart = document.createElement('input')
$cart.setAttribute('name', 'cart_json')
$cart.value = JSON.stringify(cart)
$form.appendChild($cart)
document.body.appendChild($form);
$form.submit()
})
$addCartButton.parentNode.insertBefore($quickButton, $addCartButton.nextSibling)
}
}
addQuickCart()
</script>
Checkout page
function addListQuickCart() {
//---- Product & Subscription Settings ----\\
const storeDomain = "{{your-store-domain}}.mybigcommerce.com"
const subscriptionButtonText = 'Subscribe now'
const products = [{
id: 1397,
variantId: 85,
price: 7000, // Price in cents
weight: 6169, // Weight in grams
title: "Subscription Box",
subtitle: "Recurring subscription every 3 months",
order_interval_unit: "month", // Can be "day", "week", or "month"
order_interval_frequency: 3, // Default value for how often the subscription ships
requires_shipping: true, // Is this a subscription that must be physically shipped?
}] // hardcoded data to show first 3 results as subscription products
products.push({...products[0], id: 952}, {...products[0], id: 5960}) const subscription = {
note: "This is a Subscription Box", // Internal notes
extra: [ // Extra information to include in the order. Each array entry must contain a dictionary with "name" and "value" keys.
{
name: "Marketing Campaign",
value: "Christmas Subscription Box"
}
]
} const selector = {
product: "[data-product-item]", // every product in category page
quickView: "[data-quick-shop]", // 'quick view' button inside product. if doesn't exist, don't add 'subscribe now' button
addToCart: "[data-button-purchase]" // 'add to cart' button inside modal. only loads when quickview button is clicked
} //---- End Settings ----\\
let _$ = (selector, options = {}) => {
const {all, parent} = options
if(all) return (parent|| document).querySelectorAll(selector)
return (parent || document).querySelector(selector)
} const productList = Array.from(_$(selector.product, {all: true}))
let $addCartButton = null
let $quickButton = null function redirectQuickCart(selectedProduct) {
const selectedFrequency = _$('.rca-subscription-frequency-selector')
const quantity = parseInt(_$('[name="qty[]"]').value)
const cart = {
"items": [{
"order_interval_unit": selectedProduct.order_interval_unit,
"order_interval_frequency": selectedFrequency ? selectedFrequency.value : selectedProduct.order_interval_frequency,
"quantity": quantity,
"product_id": selectedProduct.id,
"variant_id": selectedProduct.variantId,
"price": selectedProduct.price,
"grams": selectedProduct.weight,
"requires_shipping": selectedProduct.requires_shipping,
"title": selectedProduct.title,
"variant_title": selectedProduct.subtitle
}],
"note": subscription.note,
"note_attributes": subscription.extra,
}
const $form = document.createElement('form')
$form.id = '#rca-subscribe-now'
$form.setAttribute('method', 'post')
$form.setAttribute('action', `https://checkout.rechargeapps.com/r/checkout?domain=${storeDomain}`)
const $cart = document.createElement('input')
$cart.setAttribute('name', 'cart_json')
$cart.value = JSON.stringify(cart)
$form.appendChild($cart)
document.body.appendChild($form);
$form.submit()
} function addQuickCartButton($addCartButton, selectedProduct) {
$quickButton = $addCartButton.cloneNode(true) if (!$quickButton) return $quickButton.innerHtml = subscriptionButtonText
$quickButton.value = subscriptionButtonText // check if the button label is another element inside the button
if ($quickButton.children[0]) {
$quickButton.children[0].innerText = subscriptionButtonText
$quickButton.children[0].value = subscriptionButtonText
} if ($quickButton.type === 'submit') {
$quickButton.type = 'button'
} $quickButton.addEventListener('click', ev => redirectQuickCart(selectedProduct)) $addCartButton.parentNode.insertBefore($quickButton, $addCartButton.nextSibling)
} productList.forEach(productElement => {
const quickViewBtn =_$(selector.quickView, {parent: productElement})
const productID = parseInt(quickViewBtn.getAttribute('data-product-id'))
const selectedProduct = products.find(({id}) => id === productID)
let isSubscriptionProduct = !!selectedProduct if(isSubscriptionProduct) {
quickViewBtn.addEventListener('click', () => {
let count = 0 const waitForModal = setInterval(() => {
const cartButton = _$(selector.addToCart)
if(cartButton) {
clearInterval(waitForModal)
addQuickCartButton(cartButton, selectedProduct)
} else if (count >= 100) {
clearInterval(waitForModal)
} else {
count+=1
}
}, 100)
})
}
})
}
addListQuickCart()
Updated about 2 years ago