Setting up an Order Now button using the Theme Editor

Using the ReCharge Theme Editor, merchants can enable their customers to process their order immediately by selecting the Order Now button in the customer portal. With the proper HTML, JavaScript and CSS code in place, your customer portal will have the ability to add an Order Now button for future subscription orders. 

This guide will take you through the steps to get it set up.

Before you start

• To implement these customizations, you will need access to the ReCharge Theme Engine. 
• The Theme Editor requires advanced HTML and JavaScript knowledge. 
• These customizations are not supported by ReCharge as per our design policy as it requires custom coding. If your team isn't experienced with development work, we recommend reaching out to a ReCharge Partner Agency.

Step 1 - Add HTML logic

Open your V2 theme in the Theme Editor and click on subscription.html to open the template file. 

The following code snippet will include link and button elements with on-click events, and a fieldset. Fieldset is initially hidden and it should be shown only if the next queued charge for a subscription includes multiple line items.

On the submit button there is an on-click event and handler function that will determine what type of update is requested. Based on that call, a helper function will populate data object to send, fires off an AJAX call, and reloads the page when the call is successful.

Add the following code to add the HTML logic:

<!-- 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, it is time to create a <script> tag and place it at the bottom of the template.

Note: Script tag needs to be placed before the {% endblock %} closing tag in subscription.html template.

1. Get charges for a subscription with status “QUEUED” using an AJAX call.
2. 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.
3. If there are multiple line items under the same charge, create an HTML structure for each element in the array using map() method.
4. Toggle the fieldset and display all available line items
   
5. Build an AJAX call and send POST request to processes charge immediately and create an order in Shopify.
6. After the charge is processed, show success message and reload the page.
   

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 -->

Wrap-up

If you have any questions about the process, feel free to reach out to ReCharge Support. We can help clarify the steps and how the end result should look and function.