Make a selection

Customize the Recurring Cart Widget's Default Selection

Laurel
Laurel
  • Updated

Using Bold Subscriptions V1 on the Recurring Cart Mode creates a widget on the cart page for customers to choose their subscription frequencies. This widget defaults to the one-time purchase selection, but you can change the default selection from one-time purchase to subscription using JavaScript.

This customization only works for stores using the Recurring Cart mode. All other cart modes have this option built into the subscription group.

 


 

Setup

  1. From the Shopify admin, select Online Store.
  2. Select ....
  3. Select Edit code.
  4. Under Snippets, select Add a new snippet.
  5. Enter boldsubs-btn-preselect as the snippet name, then select Create snippet.

    Subscriptions snippet

  6. Copy and paste the boldsubs-btn-preselect.liquid code into the new snippet file and select Save.
    • <script>
        BOLD.common.eventEmitter.enableLog();
         
        if(window.BOLD && window.BOLD.common && window.BOLD.common.eventEmitter && window.BOLD.recurring_orders){
           
          //recurring cart event emitter listener
          BOLD.common.eventEmitter.on("BOLD_RECURRING_ORDERS_cart_widget_loaded", function(e){
            BOLD.common.preselect_subscribe_recurring_orders_widget(e.data)
          });
       
          //single and multiple product event emitter listener
          BOLD.common.eventEmitter.on("BOLD_RECURRING_ORDERS_widget_loaded",function(e){
            BOLD.common.preselect_subscribe_recurring_orders_widget(e.data.form);
          });
       
          //function added to bold common scope, requires an element higher in hierarchy than the subscribe div
          BOLD.common.preselect_subscribe_recurring_orders_widget =  function (e){
            setTimeout(function(){
              var btn;
       
              //recurring_cart: 0, single_product: 1, mixed_cart: 2
              //if in recurring cart
              if(BOLD.recurring_orders.modes.current_mode == 0){
                btn = e.querySelector('.bold-ro__recurring-div .bold-ro__recurring-radio-btn');
              }
              //if in single product or multiple product
              else{
                btn = e.querySelector('.bold-ro__subscribe-radio-btn');
              }
       
              //if button exists, click it, if not, do nothing
              if(btn){
                btn.click();
              }
            }, 100);
          }
        }
      </script>

      Paste the code

  7. Under Layout, select theme.liquid.
  8. Directly below the Bold includes, insert the following line of code:
    {% include 'boldsubs-btn-preselect' %}

    Insert the code

  9. Select Save.

To test this, reload your product page and ensure that the default selection is now beside the Subscribe option.