Off-canvas sidebar cart

  • Posts: 23
  • Thank you received: 3
  • Hikashop Essential
3 months 1 week ago #363216

Hello,
I tried to make an off-canvas sibebar cart displayed after clicking on add to cart button like here

This message contains confidential information

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?

Last edit: 3 months 1 week ago by Rejouisens.

Please Log in or Create an account to join the conversation.

  • Posts: 83024
  • Thank you received: 13403
  • MODERATOR
3 months 1 week ago #363218

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>
- 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:
<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>
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.

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 3
  • Hikashop Essential
3 months 1 week ago #363224

Thanks I'll try that, probably lighter than mine

I was trying something close but didn't do a jdoc of the module

<div id="importation""></div>
<script>
$("#importation").load("carturl #sp-main-body");
</script>

Most important is your button code which I had no idea.

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

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 3
  • Hikashop Essential
3 months 1 week ago #363225

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.

Last edit: 3 months 1 week ago by Rejouisens.
The following user(s) said Thank You: nicolas

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 3
  • Hikashop Essential
2 months 1 week ago #363966

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

<div id="offcanvascart" class="offcanvas offcanvas-end" tabindex="-1" aria-labelledby="offcanvascartLabel">
	<div class="offcanvas-header">
		<h5 id="offcanvascartLabel" class="offcanvas-title"><?php echo JText::_('HIKASHOP_CART'); ?></h5>
		<button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div> 
	<div class="offcanvas-body">    {module id="174"} 

	</div>
</div>

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

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 3
  • Hikashop Essential
2 months 1 week ago #363969

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?

Please Log in or Create an account to join the conversation.

  • Posts: 83024
  • Thank you received: 13403
  • MODERATOR
2 months 1 week ago #363967

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>
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.

The following user(s) said Thank You: Rejouisens

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 3
  • Hikashop Essential
2 months 1 week ago #363979

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

<a id="hikashop_small_cart_checkout_link" class="hikashop_small_cart_checkout_link" href="<?php echo $link; ?>"<?php echo $extra_data; ?>>
<span class="hikashop_small_cart_total_title"><?php echo $icon_html . $text; ?></span>
</a>

script
<script>document.getElementById('hikashop_small_cart_checkout_link').addEventListener("click", function (e) {  var bsOffcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvascart'));  bsOffcanvas.show();});</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?

Please Log in or Create an account to join the conversation.

  • Posts: 83024
  • Thank you received: 13403
  • MODERATOR
2 months 5 days ago #363991

Hi,

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

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 3
  • Hikashop Essential
2 months 1 day ago #364111

The product page

This message contains confidential information
where the offcanvas works with the weird behaviour on +/- and the offcanvas shows right wen clicking on the minicart

Main page
This message contains confidential information
when clicking on the minicart it shows the cart but not the offcanvas.

Please Log in or Create an account to join the conversation.

  • Posts: 83024
  • Thank you received: 13403
  • MODERATOR
2 months 11 hours ago #364114

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.

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 3
  • Hikashop Essential
1 month 3 weeks ago #364206

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
<div class="offcanvas-body"> <jdoc:include type="modules" name="poscart" /> </div> What am I doing wrong? [confidential]https://www.ndnfragrance.com/index.php?option=com_hikashop&view=product&layout=show&Itemid=535&lang=fr[/confidential][code]<div class="offcanvas-body">
<jdoc:include type="modules" name="poscart" />
</div>

What am I doing wrong?

This message contains confidential information

Please Log in or Create an account to join the conversation.

  • Posts: 83024
  • Thank you received: 13403
  • MODERATOR
1 month 3 weeks ago #364207

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.

The following user(s) said Thank You: Rejouisens

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 3
  • Hikashop Essential
1 month 2 weeks ago #364384

Thank you so much, it works perfectly!

Please Log in or Create an account to join the conversation.

Time to create page: 0.082 seconds
Powered by Kunena Forum