Adding an Order Now button using the Recharge Theme Engine
Use the Recharge Theme Engine to add an Order Now button to the customer portal.
Use the Recharge Theme Engine, to process orders placed in the customer portal immediately with an Order Now button.
This guide provides instructions on adding an Order Now button to the customer portal using the Recharge Theme Engine.
Before you start
- You must have access to the Recharge Theme Engine and be on the Recharge Pro plan or be a Recharge Agency Partner.
- Recharge does not support these customizations as per the Recharge design and integration policy as it requires custom coding.
Step 1 - Add HTML logic
The following code snippet includes link and button elements with on-click events and a fieldset. Fieldset is initially hidden and should only be shown if the next queued charge for a subscription includes multiple line items.
The submit button uses an on-click event and handler function to determine the requested update type. Based on that call, a helper function populates a data object to send, fires off an Ajax call, and reloads the page when the call is successful.
Refer to the following steps to add the HTML logic:
- Click Storefront in your merchant portal and select Theme Editor.
- Click Edit code for the theme you want to edit.
- Click the
subscription.html
template file. - Add the following code snippet directly after conditional
if subscription.next_charge_scheduled_at
:
<!-- Order Now - HTML code begin -->
<a href="#" onclick="processNow({{ subscription.id }}); return false;">Order now</a><br>
<fieldset id="ReCharge_processNow-{{ subscription.id }}" style="display: none">
<p>
Your next order will also include the following items:
</p>
<ul class="item__list"></ul>
<br>
<button id="ReCharge_processNow_button-{{ subscription.id }}" type="button" onclick="confirmProcessNow(event);" data-charge-id="">
Confirm and order now
</button>
</fieldset>
<!-- Order Now - HTML code ends -->
Step 2 - Add JavaScript logic to run an Ajax call
Now that you have successfully created the HTML foundation, you must create a <script>
tag and place it at the end of the subscription.html
template. Place the script
tag before the {% endblock %}
closing tag in the subscription.html
template:
- Get charges for a subscription with status
“QUEUED”
using an Ajax call. - After successfully fetching charges, in
done()
function, check if there is a queued charge for a subscription and if there are multiple line items for the same charge. - If there are multiple line items under the same charge, create an HTML structure for each element in the array using
map()
method. - Toggle the fieldset and display all available line items.
- Build an Ajax call and send a
POST
request to process the charge immediately and create an order in your ecommerce platform. - Show a success message and reload the page after the charge is processed.
Add the following code to implement the JavaScript logic:
<!-- Order Now - JS code begin -->
<script>
function sendProcessRequest(chargeId, button) {
$.ajax({
url: `/tools/recurring/portal/{{ customer.hash }}/charges/${chargeId}/process`,
type: 'post',
}).done(function(response) {
ReCharge.Toast.addToast('success', 'You order was processed!');
window.location.reload();
}).fail(function(response) {
// Request failed
console.error(response);
ReCharge.Toast.addToast('error', 'Unable to process your order.');
window.isProcessing = false;
if (button) {
button.disabled = false;
}
});
}
function processNow(subscriptionId) {
if (window.isProcessing) {
return;
}
window.isProcessing = true;
$.ajax({
url: '/tools/recurring/portal/{{ customer.hash }}/request_objects',
type: 'get',
dataType: 'json',
data: { schema: `{ "charges": {"subscription_id": ${subscriptionId}, "status": "QUEUED"}}` }
}).done(function(response) {
// Successful request made
var charges = response.charges;
if (!charges.length) {
ReCharge.Toast.addToast('error', 'No queued charge was found for this subscription.');
window.isProcessing = false;
}
var charge = charges[0];
if (charge.line_items.length > 1) {
// Multiple items under the same charge
// Should confirm before submitting
var itemList = charge.line_items
.map(function(item) {
return `<li>${item.title}</li>`;
}).join('');
// Update line items list
document.querySelector(`#ReCharge_processNow-${subscriptionId} .item__list`).innerHTML = itemList;
// Update charge ID
document.querySelector(`#ReCharge_processNow_button-${subscriptionId}`).setAttribute('data-charge-id', charge.id);
// Toggle section
ReCharge.Helpers.toggle(`ReCharge_processNow-${subscriptionId}`);
} else {
// Single item
// Just submit request
sendProcessRequest(charge.id);
}
}).fail(function(response) {
// Request failed
console.error(response);
ReCharge.Toast.addToast('error', 'No queued charge was found for this subscription.');
window.isProcessing = false;
});
}
function confirmProcessNow(event) {
event.target.disabled = true;
var chargeId = event.target.getAttribute('data-charge-id');
if (chargeId) {
sendProcessRequest(chargeId, event.target);
}
}
</script>
<!-- Order Now - JS code ends -->
Updated 4 months ago