ECWID widget does not work with 2 webvariants

Former user wrote on 2/21/2020, 4:09 PM

Using Webdesigner Premium vs 16.....

My site has 2 variants. Mobile 480px and Monitor 960px

If ECWID is used on the monitor site only, shop content is shown
If ECWID is used on the mobile site only, shop content is shown
If ECWID is used in both variants, it will only work in the mobile variant. It doesn't show the shop on the monitor variant. Just blank, no errors. As soon as ECWID is removed from the mobile variant, the main variant shows the shop content again.

I tried also adding the ECWID widget in a different order, first monitor, then mobile and vice versa.

I tried using a different page in the mobile variant (monitor page = services / mobile page = services-a). That works in the preview, but not in the published site 😏

Does anyone have a clue?

Thanks in advance.

Weynand

Comments

onlye wrote on 2/22/2020, 11:48 AM

It will not work. I build client sites and use both Xara and ecwid. They won't play together. There are some workarounds but not good solutions. Here is what I did. I researched and purchased WYSIWYG Web Builder to use on my ecwid sites. It is similar enough to Xara that you can figure it out, it is very affordable, and you can build a fully responsive site that plays well with ecwid.

I would be happy to assist you in getting your site going from some free help. If you'd like some help leave a comment here and we'll get together.

eric

Former user wrote on 2/23/2020, 7:49 AM

Hi Eric, thanks for your answer. It would be great if you could help me. I'll send you a pm with more information. Weynand

Graeme-Dickson wrote on 1/29/2021, 6:14 AM

I got it working on 3 variants, wide, main, & mobile just now. Bit of work getting my head around it but it can easily be done once you get the concept. Its a work-around, 'yes', but can be done. Not the sort of thing that can easily be described in text, but happy to go through it with anyone that's wanting to in person. Just message me.

emmrecs wrote on 1/29/2021, 6:59 AM

@Graeme-Dickson

Welcome to the Magix user to user forums.

Did you notice that the most recent reply prior to yours to this thread was in February 2020? I strongly suspect that @Former user now has the solution he needs but, if your method can be put into writing, why not do so and then offer it as a tutorial for other users to benefit from?

Jeff
Forum Moderator

Graeme-Dickson wrote on 1/30/2021, 3:50 AM

The Ecwid widget has a known bug in it that prevents it from displaying on multiple variants.

I have quite accidentally discovered a work-around that seems to work quite successfully for me other than just one small problem that will be eliminated once the widget is corrected.

It’s an about way of doing it. In short, I found that by simply placing the Ecwid integration code as a placeholder using the ‘paste placeholder’ after copying the code from your store on the Ecwid site (go to website>store extension>Get the Ecwid integration code here) onto an ‘individual Shop’ (ie: shop-wide, shop-main, & shop-mobile) page for each variant, and then in the Navbar instead of linking to the page, link the page to your web address followed by the following #!/c/0 after the .htm. (ie: https://mysite.com.au/shop.htm#!/c/0 ). Bear in mind, the only hiccup I found was that if the sites visitor reduces/maximizes their screen say on a desktop PC, they will likely change between variants, so as an easy-fix I simply placed a message with a button beside the message saying to please click to view the shop. This button was linked to the shop webpage relevant to that variant.

I should also mention that the same issue seems to exist with if you wish to insert a placeholder for a product on multiple variants. It will only display on the first variant its pasted onto. Personally, I’m keeping this for just the desktop version. The main & mobile visitors can only visit the store directly, but on the upside, all variants no matter how many, will all show the shop and also be able to visit the items FULL description & ALL photos perfectly. This is not something you would achieve on the mobile variant even if you could place the code as a placeholder & then link to the page. By default the mobile version would only display the compact version.

If unsure, please visit https://impresin.com.au & go to the shop using a desktop PC, then change between variants by widening or narrowing the screen. Hint! Keep an eye on your browsers address bar as you swap between variants & follow the buttons/prompts & you will get the gist of what I’ve done on each page.

Hopefully this helps somebody.