# 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.
{% hint style="info" %}
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.
{% endhint %}
### 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: :
* `{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.
{% hint style="info" %}
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.
{% endhint %}
### 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.:
```javascript
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');
}
});
```
{% hint style="warning" %}
Make sure to have "Add element ID as needed" option off in Bricks settings for AJAX to work properly
{% endhint %}
### 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.
{% embed url="" %}
