Off-canvas sidebar cart

Hi,


To do this with the offcanvas feature of bootstrap you want to:
- make sure that your template loads bootstrap
- in your template, create a position ( www.balbooa.com/help/knowledge-base/temp...-new-module-position ) and surround that position with the div of the offcanvas ( getbootstrap.com/docs/5.0/components/offcanvas/ ). Something like this:

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Cart</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <jdoc:include type="modules" name="newposition" />
  </div>
</div>

<script>
document.getElementById('hikashop_product_quantity_field_1_add_to_cart_button').addEventListener("click", function (e) {
  var bsOffcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasExample'));
  bsOffcanvas.show();
});
</script>

Hi,

Indeed, this javascript will only work when the product doesn't have variants.
With variants, the HTML of the add to cart button is changed each time the selected variant is changed. So you need to add an eventListener each time.

If you want to handle products with variants, you need to use something like this instead:

<script>
(function(){window.Oby.registerAjax("cart.updated",function(){
  var bsOffcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvascart'));  bsOffcanvas.show();
});})();
</script>

Hi,

I dont know. Please provide the URL of the pages with instructions to reproduce the problems so that I can analyze the situation.

Hi,

1. The +/- issue is because of the way you add the offcanvas cart module to the page. You're adding it via modules anywhere inside the product page layout.
Instead of doing it like that, I would rather recommend that you do it via a normal module module of your template, surrounded by the offcanvas code, as I explained in my first message. It will avoid the problem you're facing:
www.hikashop.com/forum/product-category-...bar-cart.html#363218

2. That issue with the offcanvas not appearing on the homepage is also caused by the same reason. Since you're adding the offcanvas code with a view override of the product details page, the code is missing on the homepage. And thus the cart module only opens the normal way. Again, if you follow what I recommend in my first message with the module position, this would not be a problem.