Off-canvas sidebar cart

Hello,
I tried to make an off-canvas sibebar cart displayed after clicking on add to cart button like here
but I did nothing good.
An attempt with bootsrap off-canvas seems not achievable with my level of coding as I have to retrieve all the informations to buid a cart in an off-canvas div. I tried by copying the code from the cart.php but of course it didn't work.
I tried to modify the dropdown minicart so that it slides from the top right and after try to find a solution to active that dropdown from the add to cart button. But stucked at step 1 as I don't understand how the css of the dropdown is created and I can't override it. And the button step seems complicated too. I've seen someone posting on another thread but I didn't understand as my javascript is close to 0.
Ialso tried a javascript off-canvas with an include 'show.php' but of course it doesn't work.

All I have achieved is a pop-up cart page but it appears like an entire window with browser top bar. and I have no idea how I would do two events onclick so that it adds the product to the cart and then open the modal.

So, is there some kind of solution or a module to buy?

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: - in the Joomla modules manager, configure the HikaShop cart module to be displayed in that "newposition" position.
- finally, edit the view file product / show_default via the menu Display>Views. There, you can add such javascript code: It will trigger the display of the offcanvas area when the add to cart button is clicked on the product page. And the cart module will refresh itself automatically after the add to cart is successful.

Thanks I'll try that, probably lighter than mine

I was trying something close but didn't do a jdoc of the module
Most important is your button code which I had no idea.

Let's see if all this works....

Ok, made it work.
I don't why the jdoc include doesn't work but I made it with moduleanywhere.

In case there are php, javascript iilliterate like me, the button scipt has to be placed somewhere after the button and not before.

Thanks again for your great help.

Actually it works well until I realised the offcanvas is not triggered everytime. If I select a variant it does add the item to the cart but doesn't trigger the offcanvas.

The code for the offcanvas

The script for the button

Ok, I understand why it is not working. The elementid changes for the variants.
Main product is : hikashop_product_quantity_field_1_add_to_cart_button
Variant 1 : hikashop_product_quantity_field_2_add_to_cart_button
Variant 2 : hikashop_product_quantity_field_3_add_to_cart_button

So I added two scripts similar to the initial one, just changing the elementid but that doesn't do the trick.

How can I solve this?

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: This way, each time the cart is changed by an add to cart, regardless of how to product / variant is added to the cart, the sidebar panel will be displayed.

Magic, it works like a charm.

So, in the continuation of this topic, I put a script on the minicart icon link in cart.php.
I just added an Id to the link
script
This works fine when I am on the product page but in the other pages it is not working. I guess it is because the "offcanvascart" is not loaded on each page.
Is there a way to call it?

Also, there's a weird behaviour in the offcanvascart. When I clicl on +/- or refresh, the action is done but then it redirects to the checkout page... where could that come from?

Hi,

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

The product page where the offcanvas works with the weird behaviour on +/- and the offcanvas shows right wen clicking on the minicart

Main page when clicking on the minicart it shows the cart but not the offcanvas.

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.

I went back to the jdoc solution but as before, it is not working, the module is not loading.
The position is well defined in templatedetails, it is selected in the module... In this case the postion is named "poscart". The menu is assigned on all pages.

I whrote this in show_default.php
[code]<div class="offcanvas-body">
<jdoc:include type="modules" name="poscart" />
</div>

What am I doing wrong?

Hi,

You need to add your jdoc code in the index.php of your Joomla template, not in a HikaShop view override.
This is explained in points 1 and 2 of :
www.balbooa.com/help/knowledge-base/temp...-new-module-position
Once you have the module position properly working for your template, you can add a custom module to that position, and in that custom module, you can add your canvas code.

Thank you so much, it works perfectly!