Home › Forums › WoodMart support forum › Issue with Mini Cart and custom empty cart layout

Issue with Mini Cart and custom empty cart layout

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 25, 2024 at 11:43 pm #592391

    leejay123
    Participant

    Hello,

    I’ve designed a custom layout for the cart page with the layout type set as “Empty Cart.”

    I created the layout for the “Empty Cart” page using Elementor, which you can view here: https://gyazo.com/c3bace88038db5e800d203c5d92a647b

    In this custom layout, I included the element “Products (Grid or Carousel).” You can see it here: https://gyazo.com/99242921de73af7adbce2fa6717c9a4a

    However, when I empty my cart, I’m redirected to the “Empty Cart” page via AJAX. This prevents the page from refreshing and causes some issues.

    Here’s a video showing the problem: https://jmp.sh/LK23AAlC

    As you can see in the video, when I add items to the cart from the homepage, they are correctly added to the mini cart. However, when I remove all items from the basket, I’m taken to the “Empty Cart” page through AJAX. At this point, the “Products (Grid or Carousel)” element doesn’t display unless I manually refresh the page.

    Additionally, when I add an item to the cart from the “Products (Grid or Carousel)” element from the “Empty cart” it redirects me to the cart page instead of adding the item to the mini cart, which is not the intended behavior.

    Ideally, I need a custom JavaScript solution to address this issue. When there is only one item left in the cart, the page should refresh automatically and direct me to the empty cart page, bypassing the AJAX process. AJAX should only be disabled for the last item; for everything else, it should function normally.

    Please note that this issue is unrelated to any other plugins. I am only using the WoodMart theme, WooCommerce, WoodMart Core, and Elementor, all updated to the latest versions, and there are no caching problems involved.

    August 26, 2024 at 1:24 pm #592564

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

    Best Regards

    August 26, 2024 at 2:07 pm #592588

    leejay123
    Participant

    As requested please find the login details In private area.

    I found that In order for the “Products (Grid or Carousel)” on the empty cart page to be visible, i must disable lazy loading found here: https://gyazo.com/56d8ec9ffeae51671a8ec92cd13cec15

    However we are still having the this isuse: when I add an item to the cart from the “Products (Grid or Carousel)” element from the “Empty cart” it redirects me to the cart page instead of adding the item to the mini cart, which is not the intended behavior.

    • This reply was modified 2 months, 3 weeks ago by leejay123.
    August 26, 2024 at 2:25 pm #592601

    leejay123
    Participant

    I’ve come to realize that when using the “Products (Grid or Carousel)” on the empty cart page, adding an item redirects to the cart page instead of the mini cart. This happens because the cart is no longer empty, so that behavior makes sense. I apologize for any confusion caused earlier.

    However, the AJAX functionality still occasionally causes issues. For example, sometimes the “Products (Grid or Carousel)” doesn’t display correctly when removing an item from the cart, as shown here: https://gyazo.com/fcb639336d66d3632d8c66eabb593a9e. This is why I suggested the need for a custom JavaScript solution. Ideally, when there’s only one item left in the cart, the page should refresh automatically and redirect to the empty cart page, bypassing AJAX. AJAX should function normally for all other scenarios except when the cart reaches the last item.

    It seems AJAX is causing this issue because the only plugins I have activated are WoodMart Core, WooCommerce,, and Elementor. Additionally, although my site is currently in production mode, I have completely disabled Varnish, Cloudflare, and Object Cache. There are no caching plugins active, and I’ve cleared my browser cache and tested with different browsers.

    Please note that my theme and all plugins are fully up to date!

    As mentioned earlier
    I found that In order for the “Products (Grid or Carousel)” on the empty cart page to be visible, i must disable lazy loading found here: https://gyazo.com/56d8ec9ffeae51671a8ec92cd13cec15

    However, this still doesn’t fix the issue where the button doesn’t display correctly when an item is removed from the cart, as can be seen in the attached image link:
    https://gyazo.com/fcb639336d66d3632d8c66eabb593a9e
    Manually refreshing the page resolves the display problem as this comes to my attention that ajax is the cause!

    • This reply was modified 2 months, 3 weeks ago by leejay123.
    August 27, 2024 at 9:16 am #592790

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Now I have checked your site and removed the products from the cart and the products are showing for the first time without refreshing the page. Check back your site and check the issue.

    Best Regards.

    August 28, 2024 at 11:47 am #593159

    leejay123
    Participant

    Problem 1:
    It seems that there has been some misunderstanding of the issue, so let me explain it in more detail. As shown in this video https://jumpshare.com/v/HMGEnsm9QANBp88XBySs I added multiple items to my cart on the Cart page https://iblazevape.co.uk/cart/. I then removed each item one by one. Once all items were removed, I was automatically redirected to the custom empty cart layout created in Woodmart Layouts, specifically using the type “empty cart” associated with the Cart page, as shown here: https://gyazo.com/481424be03bd78c8fc48c938599efc1b

    The main problem arises because the cart is emptied using AJAX. When I am redirected to the empty cart layout via AJAX, the page elements, like the accordion, do not function correctly. Additionally, the “Products (Grid or Carousel)” element sometimes appears and sometimes does not, which could be why you were unable to see the issue during your testing. The core of the problem is that I have to manually refresh the page for everything to function correctly, which is not ideal or user-friendly.

    Problem 2:
    When removing items directly from the Checkout page https://iblazevape.co.uk/checkout/, the page refreshes, which is not the most desirable behavior, but at least it doesn’t present the same issues as Problem 1. You can see this behavior in this video: https://jmp.sh/Ptn75oFG

    The difference is that while the page refresh on the Checkout page is not ideal, it prevents the inconsistencies seen when the cart is emptied via AJAX on the Cart page. This inconsistency and need for manual refresh should be addressed to improve the user experience.

    • This reply was modified 2 months, 3 weeks ago by leejay123.
    • This reply was modified 2 months, 3 weeks ago by leejay123.
    • This reply was modified 2 months, 3 weeks ago by leejay123.
    August 28, 2024 at 11:53 am #593164

    leejay123
    Participant

    cart video: https://jmp.sh/bIEqo9px
    Checkout Video: https://jmp.sh/Q0sOrANl

    I posted these here because in my last reposnse some of the links did not work!

    August 28, 2024 at 3:53 pm #593287

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please follow the below steps:

    1. In the theme settings, you needs to enable the Accordion element script from Theme Settings >> Performance >> JS: https://monosnap.com/file/cHryNAHHkaF5Y6EBDmz59HM83xQRVw.

    2. Also, Add the following code to the Custom JS area in Theme Settings >> Custom JS area:

    (function($) {
	$( document.body ).on( 'wc_cart_emptied', function() {
		if ( typeof woodmartThemeModule !== 'undefined' && typeof woodmartThemeModule.accordion !== 'undefined' ) {
			woodmartThemeModule.accordion();
		}
	})
})(jQuery);

    Best Regards.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)