Customizing cart elements and the checkout for the Recharge Checkout on BigCommerce

This article will guide you through common cart customizations.

📘

Platform:

• Recharge Checkout on BigCommerce

Locate cart totals parent element

The cart totals parent element contains all lines totaled from the cart. It is designated with the rca-cart-totals selector. You must ensure the rca-cart-totals class is present on the cart element. The Recharge integration observes this class for cart changes before sending information to checkout.

Hiding Elements

Add rca-cart-hide-subscription to every element you wish to hide when there is a subscription element in the cart. For example, hiding Google Pay when subscription products are in the cart.

Set subtotal elements in a cart

The following steps will allow you to add subtotals to a cart:

1. Navigate to the store's Theme Files and locate the cart totals theme file. It is usually located in the templates > components > cart directory.
2. Add class rca-cart-subtotal to the cart totals subtotal row HTML element that contains cart subtotal fields.
3. Add class rca-cart-subtotal-label to the cart totals subtotal row’s label HTML element.
4. Add class rca-cart-subtotal-value to the cart total subtotal row’s value HTML element.

Set taxes elements in a cart

To include order tax elements in the cart:

1. Add the class rca-cart-taxes-label to your taxes label element
2. Add the class rca-cart-taxes-value to your taxes value element
3. Add the class rca-cart-taxes to the parent div of your taxes value and taxes label elements.

By default Recharge sets the taxes label to say "Estimated Tax" on the rca-cart-taxes-label element. Taxes are calculated from the rca-cart-taxes-value element.

Add grand total elements to the cart

To add order grand total elements to the cart:

1. Add the class rca-cart-grandtotal-label to your grand total label element
2. Add the class rca-cart-grandtotal-value to your grand total value element
3. Add the class rca-cart-grandtotal to the parent div of your grand total value and grand total label elements.

Recharge updates the grand total label on the cart page to say “Estimated Grand Total" (by default) and get the grand total value for calculations from the grand total value element.

Setting discounts and coupons in the cart

To add coupon elements to the cart:

1. Add the class rca-cart-discount to the cart discount parent element
2. Add the class rca-cart-coupon to the cart coupon parent element

Adding line items to cart

Recharge observes the line items in a cart to keep track of changes to these totals and to track the subscription items still in cart. If the Recharge Adapter fails to update with these changes, you can ensure this functionality by adding these elements:

1. Add the class rca-cart-items to the line item parent element
2. Add the class rca-cart-item to each line item element
3. Add the class rca-cart-item-price to each Line item price element
4. Add the class rca-cart-item-quantity to each line item quantity element
5. Add the class rca-cart-item-total to each line item total element
6. Add the class cart-item-name to each line item product name element (This sets the anchor point for subscription messaging in the cart)
7. Add the class rca-cart-remove to each remove the item button element.

Send customer to Recharge checkout

You can manually direct a user to the Recharge checkout whenever there is a subscription product in a customer's cart and anywhere there is a checkout button. To send a customer for the Recharge checkout from the cart preview, follow these steps:

1. Locate the cart theme file, which is usually located in templates > components > cart > preview.html file.

2. Add the rca-checkout-button class to the checkout button element:

🚧

Note:

When the rca-checkout-button class is added to a checkout button element and there aren't any subscription products present in the cart, the user will proceed to the normal BigCommerce Checkout.