We have some issues with SmartEdit after upgrading Spartacus to 3.4.4.
Locally SmartEdit works fine, issues are present on our stage environment.
Contextual menu to edit components is missing on all slots but only on our homepage, and content of components is overlapping. All other pages don't have these issues.
We tried the following to solve this but nothing worked:
updating Spartacus styles
removing lazy loading, deferred loading and enabling SSR on components that are used on our homepage
downgrading Spartacus to 3.0.0
hiding component after component in SmartEdit to check if those issues are maybe caused by one of them
However, contextual menu shows up after changing route two times, i.e. going to login page, then back to homepage and repeating the step. When contextual menu shows up, content of components is not overlapping anymore.
What we also noticed is that locally we're using Angular 10, which is needed for the Spartacus 3.x, but somehow on our stage environment we have
Angular 8. Also, in SE preview mode we see this ySEEmptyClass shown in slots.
Another issue we found in SmartEdit, when we open one i.e. one category page but directly on stage (not navigating from homepage) we see empty slots and a spinner - same for the PDP.
Any ideas on how we can solve these issues? Is anyone facing similar problems?
I had issues with SmartEdit on Spartacus version 4. It kept showing up with the loading spinner too.
What I did to fix it was add to my index.html the following line:
<script id="smartedit-injector" src="assets/webApplicationInjector.js" data-smartedit-allow-origin="localhost:9002, development_environment_url.com:80"></script>
Perhaps try adding all your URLs (staging, dev, prod, etc) to the data-smartedit-allow-origin field?
Related
I have made an app based on vue-cli 3 and vue-router, deployed it to gh pages and saved the link. When I click on the link, the app loads normal. But if I click on refresh/reload, a 404-error occurs.
My link: https://alexandrchek.github.io/filmrock/index.html
I tried to find the answer in the net. But I have not find a description of the same problem. There are no descriptions of problems with refreshing.
Why does it happen? Help me to fix this problem, please.
I am using Vue 3 components purely as custom elements (in ASP.NET MVC views). When I view my site on localhost, after using vue-cli-service to make a non-prod build of the Vue components (all are .ce.vue), the Vue devtools icon "lights up" (in the browser's extensions icons toolbar) indicating that it detects Vue on the page--however, the Vue tab never appears in the Chrome dev tools.
Should the Vue devtools extension work with just Vue custom elements on a page? I tried the troubleshooting steps in the F.A.Q., but none seem to apply. (I also turned off all other extensions and restarted my browser.)
Note: I am using a 32" 4k monitor, so I am definitely seeing the full Chrome dev tools UI.
Note 2: I have tried using the Vue devtools with my custom element rendered in a shadow DOM and without one.
Without a shadow DOM:
With a shadow DOM
Here is a link to the Vue.js GitHub issue with a helpful comment for the PR for making the shadow DOM wrapper optional.
defineCustomElement without shadowDom #4314
Why do I have 2 instances of Vue running in Nuxt?
This happens in both Nuxt apps I'm working on.
I saw somewhere here they recommended nuking and reinstalling node modules, tried that with no change.
I also disabled my plugins prior to taking this snap, there is no place in the app that's calling Vue other than the Nuxt internals.
How do I make this stop?
This doesn't happen in production, or when running from an actual domain ie: on Valet. Nor is there any effect when producing static pages, so this really isn't an issue.
Once I moved it to a domain, it stopped even in dev so no reason to pursue this any further.
We are evaluating Spartacus for our B2B eCommerce site re-platform. One of the main requirement is to support IE11 (MUST). As per Spartacus documentation, Angular itself supports IE11 with polyfills and so Spartacus should work in IE11 without Spartacus styles (variable css).
We have tried to pollyfill OOTB Spartacus (3.1 & 3.2 in SSR mode & non SSR) and it is loading the pages & functionality but we are getting classList error in web console. Even though we have required polyfills. Below are the polyfills that we have installed & configured :
classlist.js
web-animation.js
core-js
and also target compilation is es5.
IE11 -Spartacus 3.1 & 3.2 classList error
Any help to resolve this classLIST error would be helpful.
So, does anyone made Spartacus work in IE11 with your own stylesheets ?
It looks like the root problem is that some DOM element reference is undefined while expected to be defined. Therefore its property classList cannot be accessed.
How to debug
Most optimal way for debugging will be using Spartacus repo: please clone the spartacus repo, install deps (yarn), and run yarn start. Then open it in IE11 and please debug.
The class that looks like a candidate for causing the error might be PageTemplateDirective.
I've searched the Spartacus codebase, where classList property is accessed. In most cases the DOM element is body - which should be always defined. It's not the case only for PageTemplateDirective and ProductIntroComponent (but the latter one is not displayed on home page, so I think it's not relevant).
Please set the debugger in the methods of PageTemplateDirective, to check when the DOM element reference is undefined and please investigate further.
Ongoing deprecation of ie11 by Angular
Please note that Angular is planning to deprecate the support of IE11 in ng12 (coming soon) and drop it in ng13 (late 2021). See: https://github.com/angular/angular/issues/41840
I am facing difficulties with my VueJS deployment. I have an accordion based on this : https://bootstrap-vue.org/docs/components/collapse#accordion-support
Everything works perfectly on my local project but when deployed on Netlify, it seems that the accordion is completely broken, first tab open and clicks on others dont trigger anything.
There is nothing appearing in my console.
I wonder if I need to include jQuery or Bootstrap in my app or bootstrap Vue is supposed to make them useless ?
Thanks