Welcome to TalkGraphics.com
Results 1 to 6 of 6
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Thumbs up 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: 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:

    Click image for larger version. 

Name:	5813.png 
Views:	73 
Size:	28.7 KB 
ID:	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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Variant Dilemmas "Solved"

    Excellent.

  3. #3
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,819

    Default Re: Variant Dilemmas "Solved"

    Thank you, Acorn
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

  4. #4
    Join Date
    Mar 2009
    Posts
    4,501

    Default Re: Variant Dilemmas "Solved"

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

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Variant Dilemmas "Solved"

    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Variant Dilemmas "Solved"

    Nice work Acorn!
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •