Streaming live at 10am (PST)

How to trigger webflow.js slider


#1

I have created a slider in Webflow that I am now trying to integrate into a Wordpress homepage. I have exported the Webflow project, copied the HTML elements that contain the slider and have linked the webflow.js file. However, the slider is not getting initiated. The slider works correctly from the original exported HTML page - calling the same webflow.js file.

I have reviewed the webflow.js file and find the structure unlike anything i have ever encountered - so it is a little difficult to debug. The file is loading correctly, as I have placed some alerts in various places to track the flow. The code gets into the first module "Front End Modules" then quits with the following error in the JS console:

    Uncaught TypeError: Cannot read property 'tram' of undefined
webflow.js:4695 
17.../plugins/tram-min
webflow.js:14 
s
webflow.js:16 (anonymous function)
webflow.js:1203 
7.../plugins/tram-min
webflow.js:14 swebflow.js:16 (anonymous function)
webflow.js:38 1../webflow-brand
webflow.js:14 
s
webflow.js:22 e
webflow.js:24 (anonymous function)

Is there a dependency that is not getting loaded somehow?
What exactly is the require function doing?
Is there a way to force the call to initiate the slider inline?

Any help is appreciated.


#2

To facilitate the review - here is the staging server for the site:

http://ecres161.servconfig.com/~puppysaveme/

The original export on the staging server - which is working - can be found here:

http://ecres161.servconfig.com/~puppysaveme/wp-content/themes/puppy-save-me/webflow/home2.html


#3

I found the solution from another post by @pingram3541 - who initially gave me the crazy idea to work some webflow-Wordpress magic.

one line of code before the webflow.js starts:

var $ = jQuery;

Thanks Phil!!

I am still receiving the following error in the JS console but the slider is working now:

Uncaught TypeError: Cannot read property 'init' of undefined

#4

Glad you found that helpful tidbit =)

In chrome can check how to debug and track uncaught exceptions - see here -> https://developer.chrome.com/devtools/docs/tips-and-tricks#tracking-uncaught-exceptions

And even more helpful you can beautify compressed js with chrome as well for easier readability -> https://developer.chrome.com/devtools/docs/tips-and-tricks#prettyprint-javascript

Lastly, sometimes I will use a free online js beautifier like http://www.jspretty.com/ and load up that version of the js file and comment out the original so I can add code in different areas to debug...i.e. if(foo=bar) do_something();


#5

Thanks Phil!

I recently started using Brackets and I love it. There is a beautify plugin that does an excellent job on html, css, and javascript. I was finally able to see that webflow.js was a modular pattern of separate files and it was probably merged for performance reasons - with browserify maybe?

So much to learn


#6