Adjusted Subtotals

What are Adjusted Subtotals?

Typical subtotal displays with Shopify don't properly handle the presence of Try Before You Buy items in a Shopper's cart. Updating the subtotal value in your cart to reflect an accurate Amount Due At Checkout value can improve the Shopper experience. This can be done using Liquid and/or Javascript to display correct amounts.

For example, in this test store cart we have one $10.00 TryNow item. Using the below documentation a merchant can accurately represent totals and provide education to merchants.

Prerequisites

Be able to add Try Before You Buy items to the cart. This will work with both mini carts and static cart pages.

Implementation - Amount Due

JavaScript

Some themes inject the mini-cart using Javascript. TryNow exposes a variety of methods to be able to handle cart features in these instances. The getAmountDueToday() method is within the window.trynow.cart object which returns a promise containing the value of the correct amount due today taking TryNow products into consideration.

The following instructions will show you how to use this method:

1. Locate the file in which the change should be made. Likely a cart-drawer.liquid file or something similar.
2. Add some kind of TryNow delineated total section to the cart drawer, like below:
   HTML

   <div class="grandtotal">
     <span class="label">Amount Due Today</span>
   	<span class="trynow-value"></span>
   </div>
   

3. Where the mini cart is rendered, add in a <script> tag or a method to the theme.js file which will execute the below code snippet. Please keep in mind the trynow-value query selector will have to be manually added.
   JavaScript

   window.trynow.cart.getAmountDueToday().then((res) => { 
     const tryNowAmountDueElement = document.querySelector('.trynow-value');
     tryNowAmountDueElement.innerHTML = res      
   })
   

4. Likely the styles will need to be fixed or lightly altered for your new subtotal value. These can be done in CSS, inlined, or using Javascript.

Liquid

1. Locate where the subtotal is rendered to find placement of where the new TryNow subtotal should be added.

   

2. A variable should be assigned in Liquid to change this amount to reflect reductions based on TryNow items in the cart, i.e. the Amount Due Today. The calculations can be done based on the selling plan associated with the items in the cart.

   Liquid

   <!-- TRYNOW -->
   <div class="totals" role="status">
     <h2 class="totals__subtotal">{{ 'sections.cart.subtotal' | t }}</h2>
   
     {% assign amount_due_today = cart.total_price %}
   
     {% for item in cart.items %}
       {% if item.selling_plan_allocation
       	and 
     		item.selling_plan_allocation.selling_plan.name contains 'Try Before You Buy'
       %}
         {% assign product_price = item.final_line_price %}
         {% assign amount_due_today = amount_due_today | minus: product_price %}
       {% endif %}
     {% endfor %}
   
     <p class="totals__subtotal-value">{{ amount_due_today | money_with_currency }}</p>
   </div>
   <!-- END TRYNOW -->
   

3. Test by adding products to the cart.

Implementation - Amount Charged if Kept

Amount charged if Kept

The Amount if Kept represents the value of the TryNow items all together.

{% assign amount_if_kept = 0 %}

  {% for item in cart.items %}
  {% if item.selling_plan_allocation
   and item.selling_plan_allocation.selling_plan.name contains 'Try Before You Buy'
   %}
     {% assign product_price = item.final_line_price %}
     {% assign amount_if_kept = amount_if_kept | plus: product_price %}
   {% endif %}
 {% endfor %}

Additionally a second line of Liquid with the original total price can reflect how much the shopper will be charged if they keep everything in their cart.

{% if amount_due_today < cart.total_price  %}
		<p>Amount if kept — {{ cart.total_price }}</p>
{% endif %}

📘

Hint

Match element types and classes to the styles you'd like to mirror.

Implementation - Authorization Warning

Authorization at Checkout

This will appear below the checkout button:

Adding some clarification text below the Checkout button will inform the shopper of what will happen to their credit card. Any styles and classes can be added to match the styles of your theme.

<p>
  By placing this order, you agree to our Trial Terms. An authorization will be placed on your
  card at checkout for the full amount of your order. This is not an actual charge. You will 
  only be charged for what you keep at the end of your trial period.
</p>

Troubleshooting

Editing Javascript cart

Depending on how your cart is built (e.g., minified JS), you might not be able to directly edit its markup. In that case you'll need to rely on DOM manipulation to append the element containing the 'Amount Due Today' value.

You might also need a Mutation Observer to detect changes to the cart and update the value. See an example of this in implementing Cart Limits here.