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

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

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.
2021-04-09_12-11-57

1 Like

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

1 Like

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

3 Likes

Hi @RicardoR,

Thank you so much for your swift response!

This solved my issue :+1:t2:

Cheers,

Yann

1 Like

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

Hi @Providia,

Just remove the shopping cart widget from the page.

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

How are you initializing Ecwid and connecting to your store?

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

Are you by any chance using the Ecwid Plug in?

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

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

Hi @Providia,

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

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

Cheers,

Ricardo

3 Likes

Hi @RicardoR,

Thank you so much much, this CSS indeed blocked the cart to come up :+1:t2:

Have a lovely weekend!

Kind regards,

Yann

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.