Diazo themes: is the js of my theme conflicting with requirejs from Plone?

I'm currently seeing situations where things like javascript sliders work reliably in my theme html but once that html is combined with a Diazo theme then the javascript components fail. I think this may be due the theme relying on javascript that is not "friendly" with requirejs. This is only an informed hunch. I need to do further investigation.

In the end I suspect my solution will relate to making my theme JS work with Plone 5 and requirejs.

If you've solved this kind of issue I'd love to hear about it.

Did you see this?

Well the first one definitely (since it is my blog post).
The second one looks like the answer... I'll need to dive a bit more deeply into the AMD stuff.

I just put +100 on the PLIP in the third link.

1 Like

What problem do you have? You have a traceback?

I'm not seeing anything in the console, additionally I'm not confident that the issue is Plone's fault. I'm working with html generated by http://webflow.com, webflow code ships with custom javascript in the form of a webflow.js file. On the Plone side, a custom slider/carousel that I created was not working via Diazo, I assumed it was due to some conflict between webflow.js and requirejs.

Since then I've experimented with a totally different webflow based project (which also has a slider) on that one there was no problem, it just worked via Diazo. This suggests that the problem may be caused by something else.

long-winded way of saying... no traceback.

can you see the javascript in the console ?
does 'other javascripts' work ?
does it work if you drop Plone's javascript ?
(remember to disable / enable the theme (or clear the cache)

@pigeonflight if there is no error in the browser console, then it likely has nothing to do with requirejs

@espenmn
I'm definitely not seeing anything in the js console. I tried dropping Plone's javascript and it still didn't work.
I created a new theme with similar features and that one just worked. I also tried the disable/enable thing and that made no difference.

If you make a theme with just index,html with the working things and drop all other rules

only
<theme href=index.html" />

and put your javascript in the index.html file

does that work?
(I assume you can see the javascript at http://yoursite/path/to/javascript )

Finally figured it out. My theme contains a special class in the body tag.
I was using the following directive:

<copy attributes="*" css:content="body" css:theme="body" />

The copy directive effectively removes the classes provided by my theme (including the special class)..

After a few experiments, the following worked best for me.
I added a merge directive to ensure that the final output preserved the special class provided by my theme.

 <copy attributes="*" css:content="body" css:theme="body" />
 <merge attributes="class" css:content="body" css:theme="body" />