ECWID ecommerce and Xara Web Designer - Advice wanted

I discovered, as no doubt many before me, that the ECWID ecommerce widget does not work for sites with more than one variant, because Xara stores the code for all variants on one web page and the ECWID integration code cannot be inserted into a page more than once.

I wondered if anyone had come up with a better way of using ECWID with Xara variants, than the method I had to use, which is less than perfect.

I should point out that the site I am creating only has two variants (Mobile and Main) and will be fairly static after implementation.

1: Create your website with both/all variants and save it as "Site1".
2: Delete the mobile variant and save the site with a different name "Site2". (Utilities Menu, Website Variants, Website variants, Select and Delete button)
3: Load the originally saved site "Site1"
4: Delete the Main variant and save the site with a different name "Site3".
5: Edit "Site2", containing the main variant by adding a shape. Add the following code on the index page to the web Properties, Placeholder, HTML Code (head)

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "/m/index.htm";
}
//-->
</script>

And save the site.

6: Publish Site2 (The Main variant) to your normal location on your webserver e.g. public_html.
7: Publish Site3 (The mobile variant) to a subfolder of the normal location on your webserver. e.g. public_html/m

Path, your method is what I have used to separate out Variants generally.
My JavaScript was a little more targeted in that I parsed the current URL and altered the location for any page in the site, checking against the screen size on any change.

I took on work for a client where I am able to handle an ECWID presentation in Main and one Variant.
Basically, it is a case of detecting a viewport size change and taking the entire ECWID code and relocating it.

I am sure they won't mind the publicity as their products are worth trying.
The Mumbai Spice Club Shop page handles Main <--> Variant transitions seamlessly.

Xara hinted months ago of a possible change to adaptive websites.
My method has a number of Xara functional dependencies so, while robust, I have to keep monitoring for such changes.

In the next month I will be deploying a website of mamy of my Xara codings as a mostly free resource. One will be that for handling ECWID but it will be behind a modest paywall simply because both Xara and ECWID have said for years it could not be done.

Acorn

Quote:

---

Originally Posted by Acorn

Path, your method is what I have used to separate out Variants generally.
My JavaScript was a little more targeted in that I parsed the current URL and altered the location for any page in the site, checking against the screen size on any change.

I took on work for a client where I am able to handle an ECWID presentation in Main and one Variant.
Basically, it is a case of detecting a viewport size change and taking the entire ECWID code and relocating it.

I am sure they won't mind the publicity as their products are worth trying.
The Mumbai Spice Club Shop page handles Main <--> Variant transitions seamlessly.

Xara hinted months ago of a possible change to adaptive websites.
My method has a number of Xara functional dependencies so, while robust, I have to keep monitoring for such changes.

In the next month I will be deploying a website of mamy of my Xara codings as a mostly free resource. One will be that for handling ECWID but it will be behind a modest paywall simply because both Xara and ECWID have said for years it could not be done.

Acorn

---

Dear Acorn,

Many thanks for your comprehensive reply. ECWID is a useful and functional way to integrate Ecommerce into a site with some ease. Given that Xara have a widget for using ECWID one might expect that they would warn users in the text for the widget, or in a knowledge article, about the impossibility of implementing ECWID in a single site with multiple variants, and perhaps even more helpfully how you might get round the issue.

I have no complaints with Xara about their product which is very good, nor any expectation that it can do more than it can do. It would just be helpful if known limitations were identified, rather than everyone new finding them by trial and error and Googling.

In any event, your response is excellent and much appreciated.
Kind regards,
Path

I have to tell you that ECWID e-commerce still isn't suitable for those websites. I had a project, and it was planned to become a new marketplace for gamers. The users could trade skins and many other things there. And, considering the website had many variants, including the mobile one and so forth, the ECWID didn't work. The most fantastic thing about this project was that the customer created his own skins and sold them on his platform! He even asked me to get proper Sales Management Dashboards to manage all the information about the sales and revenue.

Creighton - I have removed your link (you didn't read our FAQs did you?

Unless you participate in these forums you cannot post commercial links. Drive by postings do no count as participation.

Any questions?

Quote:

---

Originally Posted by Acorn

In the next month I will be deploying a website of mamy of my Xara codings as a mostly free resource. One will be that for handling ECWID but it will be behind a modest paywall simply because both Xara and ECWID have said for years it could not be done.
Acorn

---

It eascaped - https://www.talkgraphics.com/showthr...890#post644890.

Acorn

This thread is pretty old, but I found a work-around that has been a life-saver for me - and it's not very hard to implement as well. Ecwid is worth it! Instructions: Do not put the Ecwid code on the same page on both variants. Create a store page for each variant on separate pages. [One for Mobile and one for Desktop.] Make sure the links in the menu bar go to the corresponding store page for each variant. Fixed the problem in no time at all. I have also found that I have the same issues with using JotForm, and this solution works for this issue as well.

That's a creative solution. Thanks for sharing.

Marjorie,

I am having a mental block picturing what you said.

When you said don't put the code the same page on both the main and variant, are you meaning on the Main site you have say Sales Page 1 and on the Variant you have Sales Page2 and you delete the sales page 1 from the variant?

Ray

Ok, so the cause of this issue is that the code doesn't work on the same page in both variants. So the solution is to not put them on the same page. Pretty simple concept. Create two separate store pages. One for desktop and one for mobile. Just make sure you point the navigation bar store links to the correct page in both as well. Sometimes over-thinking something, just makes it more complicated. :)

Quote:

---

Originally Posted by marjorie

This thread is pretty old, but I found a work-around that has been a life-saver for me - and it's not very hard to implement as well. Ecwid is worth it! Instructions: Do not put the Ecwid code on the same page on both variants. Create a store page for each variant on separate pages. [One for Mobile and one for Desktop.] Make sure the links in the menu bar go to the corresponding store page for each variant. Fixed the problem in no time at all. I have also found that I have the same issues with using JotForm, and this solution works for this issue as well.

---

marjorie, thank you for sharing.
I understand what you have done but it has a big assumption that the viewer will never switch from one variant to another.
The problem will arise that a partially completed form (JotForm) for Shape selection (Ecwid) will apparently disappear and a visitor will not be happy.
I switch L to P all the time on my smartphone and the change usually forces into another variant.

My Post above yours is how a code solution will work in this circumstance, across any number of variants as well.
My argument remains - having one form instance at any time is safer.
It is a reverse shell game where at every move, the form is thee waiting for you.

Acorn

P.S. The Thread is not that old and the issue is still there for a lot of designers. Appreciate your contribution and Ecwid is worth it too.

@ Acorn

I can see the need for applying your variant code where a visitor is attempting to buy something or complete a form, as by rotating a device phone / tablet could cause a change of variant and a loss of input. Great idea and perfect for resolving many of the widget issues.

I had a play with your document and all worked as expected, but I then tried the idea with Jotform and failed, which I guess is operator error! Attachment 131909

Any thoughts?

Thanks,

Gary

Gary, the Variant Placeholder code should be <span id = "variant0"></span>, without any gap in the ID.
The form then switched over but the inputs didn't.

When I then ran it with the Dev Tools Console and the Log on, my browser complained mightily about in-line nonces:

Quote:

---

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'report-sample' 'nonce-FsXVb2CyAr6KvIiOeGrMwg' 'unsafe-inline' 'strict-dynamic' https: http: 'unsafe-eval'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

---

I guess I have a lot more poking to do.

It might work on-line rather than through Preview but I suspect is it a new Jotform feature.

Acorn

Thanks Acorn,

Published the test Jotform online > https://initiostar.co.uk/demo/formtest/. It fails to take the values across when you squeeze the browser, but one would not do this in practise anyway. Plenty of complaining though!

With my mobile and auto rotate available it works, enter the fields and rotate, but this could be simply that the desktop variant is not brought into play? I am using 640px /1280px which takes you to 960px before the desktop fires.

Gary

Hi, speaking about eCommerce, I mostly find it simpler to ask a specialist. As it is an important topic, I want it to be as perfect as possible. I once had a similar situation to yours, and I remember how much I struggled to find the best solution. Only after that to understand some people specialise in solving these problems. I was so happy to see my problem solved by magento professional solution partner. They usually specialise in digital transformations, design and development, performance improvements, ongoing maintenance, and support, so you can contact them if you want. I am sure they will be there to help you.

Quote:

---

Originally Posted by sabinarina

Hi, speaking about eCommerce, I mostly find it simpler to ask a specialist. As it is an important topic, I want it to be as perfect as possible. I once had a similar situation to yours, and I remember how much I struggled to find the best solution. Only after that to understand some people specialise in solving these problems. I was so happy to see my problem solved by magento professional solution partner. They usually specialise in digital transformations, design and development, performance improvements, ongoing maintenance, and support, so you can contact them if you want. I am sure they will be there to help you.

---

Touting your self promoting website is not how we do things in TG.

Acorn

Quote:

---

Touting your self promoting website is not how we do things in TG.

---

+1

I can totally relate to the difficulty of trying to make ECWID work with Xara variants. Unfortunately, as you have discovered, it can be quite difficult. I have used a similar method to the one you have described, but it is not ideal. If you're looking for a better way to build a good e-commerce site, I'd highly recommend contacting the web development experts at [Link removed - follow TG rules]. They have a team of experienced professionals specializing in designing and building custom digital commerce solutions matching your business needs. Good luck, and I hope you find the perfect solution!