The cart displays the type of product to be purchased, such as the subscription frequency of each product and the order total.

The cart appears as the image below, and should allow the following functionality:

  • Text under product title that describes the subscription item, if the customer selected a recurring item
  • Estimated taxes
  • Grand total
  • Checkout button should redirect the customer to Recharge checkout if there is an applicable product in the cart

🚧

Caution

Cart line item functionality is subject to change as Recharge adds features to the BigCommerce integration.

Required classes

The classes shown in the image below are required.

14401440

CSS Class

Content

Functionality

rca-cart-header-subtotal-label

Does not render content.

Selects the cart estimated total label. Shown as Estimated total in the image above.

rca-cart-taxes, rca-cart-taxes-label, rca-cart-taxes-value

Hides content.

Hides tax/VAT label, value or entire line (shown as GST row in the image above) when added to element.

rca-cart-subtotal, rca-cart-subtotal-label, rca-cart-subtotal-value

Hides content.

Automatically hides subtotal label, value or entire line item.

rca-cart-grandtotal, rca-cart-grandtotal-label, rca-cart-grandtotal-value

Cart totals

  • Selects grand total label, value and entire line item. Shown as Estimated grand total above.
  • rca-cart-grandtotal-value reflects updated total when subscription item is added to cart.

rca-cart-item

Cart Item

This class is a wrapper for each line item in the cart.

rca-cart-item-price, rca-cart-item-quantity, rca-cart-item-total

Cart item price, quantity and item total

These classes are injected into the item price, quantity and total. They reflect updated information. Shown as $9.45, the selector with the value 1, and the total value $9.45 in bold in the image above.

rca-cart-line-item-subscribe

Subscription info text.

This class displays the subscription text. Shown as Subscribe & Save: Every 30 days. in the image above.

rca-cart-coupon

Hides content.

When added to coupons element, hides coupon if subscription item is present in cart.

rca-cart-remove

Does not render content

We inject this class onto the remove item button in the cart to track behavior. Shown as x icon in the line item row in the image above.

📘

Note

Some of the following classes are only used to hide elements.

Cart preview dropdown

The cart dropdown shows a preview of the cart, and provides customers the option to proceed to checkout without viewing the cart page.

The cart preview should allow the following actions:

  • Show the amount of items in cart
  • Display product brand (if present), title and price
  • Display Checkout and View Cart buttons which redirect to Recharge

Required classes

The classes shown in the image below are required.

848848

CSS Class

Content

Functionality

rca-cart-dropdown

Displays the cart dropdown

  • This class is applied to the entire cart dropdown and checks the cart for changes in content.
  • It is shown above as the entire area encompassed by a border and contains the product title, thumbnail, and price. It also contains the checkout and view cart buttons.

rca-cart-dropdown-price

Does not render content.

This class is applied to the item price to reflect the subscription item price. Shown as $9.45 in the image above.

rca-cart-dropdown-checkout

Does not render content.

This class is added to the checkout button to ensure update when subscription item is present. Shown as the Checkout button in the image above.

rca-cart-dropdown-content

Does not render content.

Contains cart information. The area containing OFS, $9.45 and Le Parfait Jar as shown above.

Example

The following HTML is an example of a cart dropdown with Recharge elements.

<div class="dropdown-menu rca-cart-dropdown is-open f-open-dropdown" id="cart-preview-dropdown" data-dropdown-content="" aria-hidden="false" style="position: absolute; left: -0.000491992px; top: 49.0972px;"><div class="previewCartWrapper">
  <div class="previewCart">
        <ul class="previewCartList">
                <li class="previewCartItem">
                                       <div class="previewCartItem-image">...</div>
                                           <div class="previewCartItem-content rca-cart-dropdown-content">
                            <span class="previewCartItem-brand">
                                OFS
                            </span>

                            <h6 class="previewCartItem-name">
                                <a href="https://tarek-bc.mybigcommerce.com/1-l-le-parfait-jar/" alt="Le Parfait Jar" title="Le Parfait Jar">Le Parfait Jar</a>
                            </h6>

                            <span class="previewCartItem-price rca-cart-dropdown-price">
                                    <span>$9.45</span>
                            </span>
                        </div>
                    </li>
            </ul>
            <div class="previewCartAction">
                    <form method="post" action="https://checkout.rechargeapps.com/r/checkout?domain=tarek-bc.mybigcommerce.com&amp;cart_token=460f3a86-0d85-4309-a64e-5f38a197788c" class="previewCartAction-checkout rca-cart-dropdown-checkout"><input name="cart_json" type="hidden"> <button id="rc-checkout-button" type="button" value="Checkout New" class="button button--primary button--small">
        Checkout
    </button></form>
            </div>
    </div>
</div>
</div>

Cart Modal

The cart preview modal appears as a pop-up when a customer adds an item to their cart.

The default cart modal functionality is shown below. It should:

  • Show the type of recurring purchase and frequency of the product
  • Checkout button should redirect the customer to Recharge checkout if there is an applicable product in the cart

Required classes

The classes shown in the image below are required.

14401440

CSS Class

Content

Functionality

rca-cart-modal-content

Does not render content.

This class selects the entire modal.

rca-cart-modal-subtext

Descriptive text.

Displays the subscription information. Shown as Subscribe & Save: Every 30 days above.

rca-cart-modal-subtotal

Subtotal

Selects the cart subtotal. Shown as $61.60 above.

rca-cart-modal-price

Price

This class replaces the existing price with the subscription product price when applicable. Shown as 3 x $9.45 above.

rca-checkout-button

Sends customer to Recharge checkout.

This is injected on the checkout button to redirect the customer to the Recharge checkout when there is a subscription item present. Shown as Checkout button above.

Hiding Cart Elements

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

Example

<div class="previewCartCheckout-additionalCheckoutButtons" "rca-cart-hide-subscription"></div>

Need Help? Contact Us