Variant Dilemmas "Solved"

[Acorn]

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: JS - Handling awkward Objects across Variants.xar.
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:



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