Skip to main content
All CollectionsMore about Subscriptions :)
Display the subscription widget on cart page.
Display the subscription widget on cart page.
Sinchain avatar
Written by Sinchain
Updated over a week ago

  1. Navigate to themes and search for the main file from where the cart page is getting rendered. Generally, the file names are cart.liquid or cart-template.liquid.
    ​
    In the case of 2.0 themes like Dawn, you will have to write the custom js on the global javascript of the theme. Generally, the file name is global.js

  2. Write a custom javascript and do a GET request to /cart.json endpoint. To ensure all the scripts run only on the cart page wrap the entire script in an if condition.

    if (window.location.href.indexOf("/cart") > -1) {
         fetch('/cart.json').then(function(response) {
           return response.json();
         }).then(function(data) {
            console.log(data);
         }).catch(function() {
            console.log("Error");
         });
    }

  3. Create an empty array and push all the unique product id's of the line items you have got in the success response of cart.
    ​

    var cartProducts = ["456789078998","45676217309484"]

  4. Do a POST request on Plans API for respective products by sending the cartProducts array in the request to fetch all the selling plans.

  5. In case of a successful response, create an array of objects and add the below params while looping in through the plans:


    ​[{
    plan_name: "",
    selling_plan_id:"",
    product_id:""
    }]

  6. Create an array by fetching all the unique plan names from the above object and show a dropdown on the cart page with the subscription plan names.

  7. Bind an event on the dropdown selection and the moment customer chooses a plan call /cart/change.js get the selected plan name from the dropdown and search for the respective selling plan id for every product with the help of object created in step 5.

  8. The vice versa will happen if the customer chooses a one-time option in the cart you can call /cart/change.js again to remove all the selling plans from the cart.

  9. You are all set now. Test out the flow on a preview theme and if everything looks fine you can make it live. In case any technical assistance is required feel free to initiate a live chat from your Recurpay Dashboard.

Did this answer your question?