Variant Dilemmas "Solved"

Many Posts have emerged over problems with handling Third Party Widgets that use an HTML ID Tag to access their embedded product (ECWID is one, but there are many others).

The following design addresses part of the issue but there are still limitations, which will be explained: Attachment 131446.
Note - the download is so large as it has a 4MB MP4 included.

Some planning is required.

1. jQuery has to be invoked. You can use the special Name in Utilities > Names of UsesJQuery:

Attachment 131445

2. You can use any number of Variants!

• Check you have added the Website > HTML Body (code) as given in the design. It only needs changing in one line...
  
  • Note the width of each Variant. Mine were 640px, 960px & 1440px.
  • You actually need their mid-point as shown. Mine are 800 & 1200.
  • Throw in the widest you can manage with your monitors and scaled to just read your text. My guess is 16,000 pixels but I played safe with 19,999. It can be any really large number.
  • My final array is [800, 1200, 19999].
  
  
• ...you now change Website > HTML Code (body) to these values, as given in the orange text in the Website Head code on the first Main design page.

3. On each page create a Placeholder for your required object.

• Each Placeholder can be a different width. If your Third-Party Width is adaptive, it will snuggle in just fine.
• Counting from smallest to largest, identify each Variant as an increasing number from zero.
• My design has Placeholder > HTML Code (body) of <span id="variant0"></span> for Mobile; <span id="variant1"></span> for Tablet; <span id="variant2"></span> for Main.

4. Get your Third-Party Widget Embed Code.

• Pick any one of your Placeholders and add <div id="wrapper" style="width: 100%; height: auto;"></span>.
• Between the SPAN Tags, add your Embed code.

5. Done!

LIMITATIONS
Amazingly, not many. A local FORM will retain any input, checkbox or radio selection; any local video will run uninterrupted.

• YouTubers and ECWIDers use IFRAMEs. Unfortunately, I finally found out that when an IFRAME is moved within the Document Object Model (DOM), it is always reset to the original source address. ECWID will retain any Shopping Cart entries so not all is lost.
• I used OBJECT & EMBED for the YouTube insert as YT https VIDEO Tag in a Xara http Preview complained too much. This is not a major issue, it is just some browsers get narky.
• MESSY so avoid - If you have more than one Object to shift on a page, you need to duplicate the code, changed the wrapper ID. [var form = $('#wrapper').appendTo('#variant' + vrnt); You would include var formX = $('#wrapperX').appendTo('#variantX' + vrnt); var formY = $('#wrapperY').appendTo('#variantY' + vrnt);..., changing instances]
• Equally, if you are using Scrolling or Transition websites, the same applied as there will be multiples of the same wrapper ID as Xara mungs all the pages into one HTML file.

The principle this design employs is: detect the Variant in use; pick up the Embed code wherever it is; put it back down into the changed-to variant.
Only one ID Tag is ever present and you therefore retain the same session and state information.

I do have a solution for those site-within-a-site widgets and on-line videos (& games) that are within IFRAMES.

In the meantime, do test with your own examples and offer the successes back or ask about the failures.

Acorn

Excellent.

Thank you, Acorn

So you solved this issue as well! Thanks for sharing Acorn! Might come in handy one day.....

Just to rub salt into the wound, today, I found that ECWID is sending out sameorigin headers such that my browsers are now blocking the embedded site from showing.
I am looking into how ECWID now wants us to embed our shopping stores...

...panic over.

Replace the code <iframe src="https://example.ecwid.com" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe> and its wrapping with:

Code:

---

<span id="variant2">
<div id="wrapper" style="width: 100%; height: auto;">
<div id="my-store-1003"></div>
<div>
<script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?1003&data_platform=code" charset="utf-8"></script>
<script type="text/javascript"> xProductBrowser("id=my-store-1003");</script>
</div>
</div>
</span>

---

As this is a demo site, I have no control over its presentation.
You alter the Store-Id (1003) to yours.

The major benefit is it removes the IFRAME dependency and so the shop state is retained across all Variants!
This change is therefore a full delivery for a ECWID solution.

Acorn

Nice work Acorn!