How to open an Ecwid “shopping bag” clicking on a button/icon?

[Providia (Yann Douchin)]

Hi everybody,

I hope you’re all doing well!

Is there a way to open an Ecwid “shopping bag” clicking on a button/icon stack, please?

Indeed, by default, Ecwid shopping cart icon only appears when an item has been added to the cart, and at the bottom right corner of the page.

But some customers have let me know that they were confused while searching for the shopping cart icon but not finding it on the NavBar www.lafinebouchee.com

Therefore, I’d like to add a cart icon, within the NavBar. But what is stopping me is that I don’t know how to open the content of Ecwid shopping cart when a visitor clicks on the cart icon, as it is not a link, but this bit of code :

<div class="ec-cart-widget"></div>
<div>
<script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?19018547&data_platform=code&data_date=2021-04-07" charset="utf-8"></script>
<script type="text/javascript">Ecwid.init();</script>
</div>

Thank you in advance!

Kind regards,

Yann

[teefers (Doug Bennett)]

Adam (@Elixir) might have a better way.
Most people due look for the shopping cart on the top right side of the page.

Since I don’t think Foundry Navbar allows any outside stacks to be inserted, I’d probably look to putting the Navbar into a two column stack. I’d put the shopping cart code from ECWID into an HTML stack and place it in the right column. Put the Navbar into the left column. Maybe set the columns to be 10 on the left and two on the right.

[Elixir (Adam Shiver)]

@Providia

<script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?19018547&data_platform=code&data_date=2021-04-07" charset="utf-8"></script>
<script type="text/javascript">Ecwid.init();</script>

I think this one is for @RicardoR actually. I don’t think it is possible, but I’ve never used ECWID.

[RicardoR (Axyn Technology)]

Hi @Providia,

Just add another icon to your navbar and set the link to the following: ./#!/~/cart

Also make sure that every page contains the Ecwid initialization script.

Cheers,

Ricardo

[Providia (Yann Douchin)]

@RicardoR

./#!/~/cart

Hi @RicardoR,

Thank you so much for your swift response!

This solved my issue

Cheers,

Yann

[Providia (Yann Douchin)]

Hi @RicardoR,

I hope you’re doing well!

I have one last question for you, if you don’t mind.

Now that I’m using my own shopping cart icon, do you know how I can prevent Ecwid’s own basket icon to appear when a customer adds an item to its cart, please?

With many thanks in advance.

Kind regards,

Yann

[RicardoR (Axyn Technology)]

Hi @Providia,

Just remove the shopping cart widget from the page.

[Providia (Yann Douchin)]

Hi @RicardoR,

Thank you for your answer.

I’m not using the shopping cart widget in the page, only the “Buy Now” button widget on every product.

Kind regards,

Yann

[RicardoR (Axyn Technology)]

How are you initializing Ecwid and connecting to your store?

[Providia (Yann Douchin)]

Hi @RicardoR,

I’m not using Ecwid to display my products, they’re all built using Foundry stacks.

The only Ecwid widget I use is the “Buy Now” button (seen on this page: www.lafinebouchee.com)

I guess that the website is connected to the store through the “Buy Now” button script:

<div class="ecsp ecsp-SingleProduct-v2 ecsp-Product ec-Product-327749844" itemtype="http://schema.org/Product" data-single-product-id="327749844"><div class="ecsp-title" itemprop="name" style="display:none;" content="Mousse de bleu aux noix sur feuille de betterave"></div><div customprop="addtobag"></div></div><script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?19018547&data_platform=singleproduct_v2" charset="utf-8"></script><script type="text/javascript">xProduct()</script>

Kind regards,

Yann

[RicardoR (Axyn Technology)]

Are you by any chance using the Ecwid Plug in?

[Providia (Yann Douchin)]

No, I’m just copy-pasting the “Buy Now” button code from Ecwid dashboard into an html stack.

[RicardoR (Axyn Technology)]

Normally that would not trigger the cart to come up at all.

[RicardoR (Axyn Technology)]

Hi @Providia,

Just add this CSS, and the bag will not popup anymore:

.ec-minicart.ec-minicart--fixed {
	display: none !important;	
}

Cheers,

Ricardo

[Providia (Yann Douchin)]

Hi @RicardoR,

Thank you so much much, this CSS indeed blocked the cart to come up

Have a lovely weekend!

Kind regards,

Yann