how to display mini shopping cart on shopping page

Hi
I want to display mini shopping cart in home page and any other shopping page instead of flyout mini shopping cart.
the problem is that when I add a product to cart, the number of quantity will be updated but the mini shopping cart doesn't change until refreshing the page.

finally I want to develope someting like the page below
https://www.hellofood.sa/en/

Hi,

I'm not entirely sure that I understand what you need. Could you please elaborate more?

Looking forward to your reply!

I couldn't find English Website sample but would you please look at the link below:
https://www.reyhoon.com/restaurants/red-crescent
if you push the + button, the product add to shopping cart on the side bar.
then we can increament quantity of products by click on + button and decreament the quntity by click on - button

I want to manipulate brooklyn theme to implement something like this.

Hi,

you need to customize the theme code ( and most certainly the nopCommerce core code ) in order to achieve what you want.

As a workaround, you can just make the flyout cart to be visible all the time. However, there might be some issues with this which you need to find a way to overcome.

@media all and (min-width: 1025px) {
.flyout-cart {
    right: 0;
}
}

With the code above, you will make the flyout cart visible on desktop devices. But as I mentioned there might be some issues with this as by default there are some javascript calculations when you click the "Cart" button which now won't be executed as the cart will be always shown.

P.S. if you are using RTL, just change "right" property with "left";

Hope this helps!

I have not any problem in css part, is there any learning document about this article. where is JS code of 'card' button.

Hi,

With the CSS that I provided in my last post, you will make the flyout shopping cart visible all the time.

The JS code is in brooklyn.js file in the Themes\Brooklyn\Content\scripts folder. Inside the file, you will find the logic and calculations that the flyout cart is making when its open/close button is clicked.

Hope this helps!