Custom Off-canvas cart

Initial setup

Add a new Offcanvas element. Make sure it has class "brt-cart-offcanvas" to connect to ajax scripts. Don't style offcanvas using this class, to style it, add another class.

If you want offcanvas to be opened when product is added to cart, add this to its Attributes: data-auto-open-when-added

Leave the value blank.

Offcanvas content

Inside offcanvas content, add another Div and asign class "brt-cart-ajax-content"

Everything inside this Div will be "updated" when product is added to cart.

Now you can create a list of products with cart content loop. Inside this loop you can use dynamic tags from Bricks: https://academy.bricksbuilder.io/article/cart/:

• {woo_cart_product_name} – Renders the product name with a link. It is meant to be used inside of the Cart Contents loop.

• {woo_cart_remove_link} – Renders the anchor tag with the link to remove the product from the cart. By default, uses an “x” in the anchor content. Remember to add product-remove CSS class on the element that holding this dynamic tag. You would need to create a custom delete element. Tutorial below. Continue reading.

• {woo_product_price} – This tag shows the product price. But when used inside of the Cart Contents loop it doesn’t show the sale price.

• {woo_cart_quantity} – Renders the input field to add/remove the product quantity inside of the cart.

• {woo_cart_subtotal} – Renders the product price subtotal (price x quantity)

Update offcanvas on quality change

Add class "brt-cart-ajax-item" to product item card that is being looped.

Now when you add {woo_cart_quantity} dynamic tag inside this loop, the + and - buttons will update quantity of the product in the cart. Style everything to match your project.

Custom remove product from offcanvas

Inside a loop, add a Div and asign a class "brt-cart-ajax-item-remove". Now this Div will act as a remove button. You can add anything inside this div, e.g. icon, text...etc.

Empty cart state

We will use conditions to show/hide list of products and show/hide Empty cart message wrapper based on the query count. So we just need to check the count of products in the offcanvas product loop. Bricks has a dynamic tag for that. {query_results_count:X} where X is the bricks ID of your looped div.

Use this to create a condition to show product list wrapper when the count is not 0.

Create another Div to wrap empty cart message and add a condition to it:

Now we are showing this Div only when the query count is equal to 0.

Remember that Product list and Empty cart message wrapper elements must be inside a Div that has class "brt-cart-ajax-content" to they can be updated when something is added to cart or the quantity is updated.

Closing offcanvas

Create a custom element and add Interactions to toggle offcanvas class like this:

This works when you place this element anywhere outside of Div with class "brt-cart-ajax-content".

If you need to close button inside Div with class ""brt-cart-ajax-content" then you would need to use a custom JS to toggle class. E.g.:

document.addEventListener('click', function(event) {
    // Check if the clicked element has the class '.brt-cart-offcanvas__close'
    if (event.target.closest('.brt-cart-offcanvas__close')) {
        document.querySelector('.brt-cart-offcanvas').classList.toggle('brx-open');
    }
});

Make sure to have "Add element ID as needed" option off in Bricks settings for AJAX to work properly

Community guide

In this video you can see Barbabas Chris showing how to rearrange the cart to display a slider with some handpicked products that for example are on sale. The slider is taken from the single product template but don't forget to also copy the code block from the single product template that is linked to the slider.