Why This Script Completely Freezes Webstudio

any reason why this script completely freezes webstudio?

Plain Text

<div id="ecwid-widget-placeholder" class="ecsp ecsp-SingleProduct-v2 ecsp-Product ec-Product-3290828" itemtype="http://schema.org/Product" data-single-product-id="3290828">
    <div customprop="options"></div>
    <div customprop="qty"></div>
    <div customprop="addtobag"></div>
</div>

<script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?260044&data_platform=singleproduct_v2" charset="utf-8"></script>
<script type="text/javascript">
    function initializeWidget() {
        if (window.Ecwid) {
            Ecwid.OnAPILoaded.add(function() {
                xProduct();
            });
        }
    }

    // Initial widget initialization
    initializeWidget();

    // Use MutationObserver to detect when the relevant page is active
    let observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (document.contains(document.getElementById('ecwid-widget-placeholder'))) {
                // Re-initialize the widget
                initializeWidget();
            }
        });
    });

    // Configuration of the observer:
    let config = { childList: true, subtree: true };

    // Pass in the target node, as well as the observer options
    observer.observe(document.body, config);
</script>

72 comments

OOleg Isonen

that mutation observer logic looks evil

OOleg Isonen

reinitializing something on mutation is a recipe for infinite loop

DDirky Dirk

k, kinda figured it was not ideal when i did a search for what it's doing. just having a hell of a time including scripts for this ecwid integration. Same thing with swiper js, if I browse to another page and come back to page where script needs to be it just doesn't work.

OOleg Isonen

yep, all this embed html stuff is actually terrible, because its not properly integrated with components lifecycle

OOleg Isonen

We are having this jus because we haven't gotten to component authoring yet.

OOleg Isonen

Code needs to be aware of the navigation, because it doesn't do a full page reload, it rerenders onnly whants necessary and scripts need to react to this

OOleg Isonen

with components this is happening mostly automatically

OOleg Isonen

but we need to build them and bundle them as if they are built-in

OOleg Isonen

right now we need to show how to write an html embed so that it works with both reload and navigation

OOleg Isonen

if your script is client only, it is being reexecuted every time page switches

OOleg Isonen

so you can already assume it is being reinitialized, don't need to do observing

DDirky Dirk

@Oleg Isonen so is there a particular way we should be embedding javascript to ensure that it works while browsing different pages of a project?

DDirky Dirk

Plain Text

(function render() {
  if (document.readyState !== 'complete') {
    console.log('Document not ready, adding listener.');
    document.addEventListener('DOMContentLoaded', render);
    return;
  }

  console.log('Document is ready.');

  // Add your javascript here

})();

DDirky Dirk

This seems to work which is what you provided for me last week

OOleg Isonen

@TrySound we really need to define and document the best possible way that works for everyone

DDirky Dirk

i think that would be very helpful

DDirky Dirk

this seems to work sometimes as I still get "document not ready, adding listener"

DDirky Dirk

@Oleg Isonen are there any specific events that indicate page/content has changed?

DDirky Dirk

i'm just having a hell of time getting scripts to work once navigating away from page and coming back to page with javascript I'm using to add product to cart. Works just fine when I initially go to the page but when I navigate back to a product details page javascript doesn't seem to work anymore.

OOleg Isonen

let me discuss the best way with @TrySound for this, hold on

OOleg Isonen

there is navigation events but you want not just a navigation event, you want the time when dom tree was updated and your script can access it

OOleg Isonen

effectively the bests time is when script is literally being executed

OOleg Isonen

the problem is when you combine in one html embed external scripts and inline scripts

OOleg Isonen

your inline scripts execute without waiting for the external once

DDirky Dirk

ecwid is also adding script into the dom as well which seems to be probmatic

DDirky Dirk

they have a javascript SDK which is really what I should be using

OOleg Isonen

easy way to do it is to put external once into the project settings and only use html embed for the activaction code

DDirky Dirk

probably best to shelf this for now and just wait for added functionality

DDirky Dirk

will wait for bogdan but for now, I'm not going to dedicate anymore time on this

DDirky Dirk

when we can author components, this is going to be cake

OOleg Isonen

Looking at your code above, the problem is really the script with external source and inline script all in one embed

OOleg Isonen

need to check but generally what should work:

this in the project settings

Plain Text

<script defer src="https://app.ecwid.com/script.js?260044&data_platform=singleproduct_v2" ></script>

and this in the html embed

Plain Text

<div id="ecwid-widget-placeholder" class="ecsp ecsp-SingleProduct-v2 ecsp-Product ec-Product-3290828" itemtype="http://schema.org/Product" data-single-product-id="3290828">
    <div customprop="options"></div>
    <div customprop="qty"></div>
    <div customprop="addtobag"></div>
</div>

<script type="text/javascript">
  if (window.Ecwid) {
      Ecwid.OnAPILoaded.add(function() {
          xProduct();
      });
  }
</script>

DDirky Dirk

Thanks I'll check it out after picking my son up from school.

DDirky Dirk

Btw that's older code as I'm using their JavaScript API to add product to cart based on data attributes. I copied the project which is why your seeing the older code. Ill probably just use their instant store embed for now.

OOleg Isonen

I am guessing instant store is a client-only thing, so no SEO and no styling over webstudio

DDirky Dirk

@Oleg Isonen yea it's basically just an ajax site but you can manage meta tags for seo within their backend. I just don't like the designs and you don't really have any flexibility to create your own store which is what I'm wanting to do with webstudio. However, I may just bite the bullet for the time being and migrate this client over to web studio because I'm tired of dealing with wordpress.

DDirky Dirk

@Oleg Isonen any update on being able to detect changes in the URL in a way that can be detected without direct access to the internal state or navigation events?

OOleg Isonen

did you try what I posted above?

OOleg Isonen

one problem will be when combining header scripts and htmlembed is that this won't work in preview since we don't render header scripts in preview

DDirky Dirk

yes I did but unfortunately didn't work

OOleg Isonen

if you need to be able to preview this we need to load the script dependency differently

DDirky Dirk

I've managed to embed ecwid instant site, however, same issue when navigating away and back to the page with embed code, stops working

DDirky Dirk

i'll send preview here in a bit

DDirky Dirk

https://leather-lid-inserts-copy-dz9k5.wstd.io/store/

OOleg Isonen

what should I click?

DDirky Dirk

you can click any of the products on that page to navigate within the ewcid instant site

DDirky Dirk

then just click home link and then click "reviews" which will bring you back to page with ecwid embed code

DDirky Dirk

Plain Text

<div id="my-categories-1003"></div>
<div id="my-search-1003"></div>
<div class="ec-cart-widget"></div>
<div id="my-store-1003"></div>

<script>
  window.ecwid_script_defer = true;
  
  var script = document.createElement('script');
  script.charset = 'utf-8';
  script.type = 'text/javascript';
  script.src = 'https://app.ecwid.com/script.js?260044';

  document.getElementById('my-store-1003').appendChild(script);

  window._xnext_initialization_scripts = [
      // Storefront widget
      { 
        widgetType: 'ProductBrowser', id: 'my-store-1003', arg: [
          'id=my-store-1003'
        ] 
      },
      // Horizontal categories widget
      { 
        widgetType: 'CategoriesV2', id: 'id=my-categories-1003', arg: [
          'id=my-categories-1003'
        ] 
      },
      // Search widget
      { 
        widgetType: 'SearchWidget', id: 'my-search-1003', arg: [
          'id=my-search-1003'
        ] 
      },
      // 'Buy now' button for product
      { 
        widgetType: 'SingleProduct', id: 'Product-1', arg: [
          'id=Product-1'
        ]
      }
  ];

// Initialize Minicart Widget. A div with class '.ec-cart-widget' must be present on a page  
  
  Ecwid.init();

</script>

DDirky Dirk

for testing I didn't include the script in the project settings

DDirky Dirk

i can add it there real quick tho

OOleg Isonen

instead of doing this

document.getElementById('my-store-1003').appendChild(script);

do

document.head.appendChild(script)

OOleg Isonen

additionally Ecwid.init(); needs to wait until script is loaded

OOleg Isonen

Plain Text

var script = document.createElement('script');
script.src = 'https://app.ecwid.com/script.js?260044';
script.onload = Ecwid.init
document.head.appendChild(script)

OOleg Isonen

this way you start init when script is being loaded

DDirky Dirk

sorry for the delay, I updated per your instructions:

preview:
https://leather-lid-inserts-copy-dz9k5.wstd.io/store

Project settings code:

Plain Text

<script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?260044&data_platform=code&data_date=2024-02-27" charset="utf-8" defer></script>

Embed HTML:

Plain Text

<div id="my-store-260044"></div>
<script type="text/javascript">
    if (window.Ecwid) {
      Ecwid.OnAPILoaded.add(function() {
          xProductBrowser("categoriesPerRow=3","views=grid(20,3) list(60) table(60)","categoryView=grid","searchView=list","id=my-store-260044");
      });
  }
</script>

DDirky Dirk

if you click home link then click "reviews (default dummy page for embed ewcid code)" it looks like it wants to add the products

OOleg Isonen

I am a bit lost with which scenario are we testing etc

OOleg Isonen

we are discussing 2 different methods at the same time

DDirky Dirk

we are testing your method right now

DDirky Dirk

https://discord.com/channels/955905230107738152/1211501091737313321/1211786372579467274

OOleg Isonen

and its not rendering anything at all, right?

DDirky Dirk

right

OOleg Isonen

I don't see errors, need to assume its not getting into that OnAPILOaded callback

DDirky Dirk

i can get it to load by just using "xProductBrowser("categoriesPerRow=3","views=grid(20,3) list(60) table(60)","categoryView=grid","searchView=list","id=my-store-260044");" without the onapiload callback

DDirky Dirk

however, same issue, navigate and come back doesn't display

OOleg Isonen

let me try

OOleg Isonen

dm me an admin link pls

DDirky Dirk

sure

DDirky Dirk

loads on this page btw: https://leather-lid-inserts-copy-dz9k5.wstd.io/test

DDirky Dirk

without callback

OOleg Isonen

Uncaught ReferenceError: xProductBrowser is not defined

OOleg Isonen

right now its broken

Add a reply

Join the Webstudio community

Why This Script Completely Freezes Webstudio