0

I am trying to implement Webflow's horizontal scrolling in WordPress.

HTML Webflow export (working): https://horizontalscrolling.demo.site/webflow/horizontal-scrolling/

My WordPress attempt (not working): https://horizontalscrolling.demo.site/horizontal-scrolling/

As you can see in the WordPress version, scrolling down does not make the images in the purple section move horizontally.

My questions are:

  1. What can be done to fix this JS error in the console?
webflow.js:16 Uncaught TypeError: Cannot read property 'tram' of undefined
    at Object.<anonymous> (webflow.js:16)
    at n (webflow.js:7)
    at Object.<anonymous> (webflow.js:7)
    at n (webflow.js:7)
    at Object.<anonymous> (webflow.js:16)
    at n (webflow.js:7)
    at Object.<anonymous> (webflow.js:16)
    at n (webflow.js:7)
    at webflow.js:7
    at webflow.js:7
  1. webflow.js is a huge file (155.3 KB). Surely, the actual relevant code is only a small fraction. How do I identify what part it is so I can use just that?

Here's how I loaded the JS in WordPress:

Code in a custom functionality plugin:

wp_enqueue_script( 'main', plugin_dir_url( __FILE__ ) . 'assets/js/main.js', array( 'jquery' ), '1.0.0', true );

wp_enqueue_script( 'webflow', plugin_dir_url( __FILE__ ) . 'assets/js/webflow.js', '', '1.0.0', true );

where main.js is:

(function($) {
    $("html").attr("data-wf-page", "5c37e0e1e3cff796d50e5cca");
    $("html").attr("data-wf-site", "5c37e0e1e3cff72e980e5cc5");
})(jQuery);

Thanks in advance.

Improve this question

1 Answer 1

Reset to default
2

Got it working.

I had to add a couple more data attributes in the HTML markup to match those in the Webflow export.

Then replace both the instances of window.$ with window.jQuery in webflow.js. An alternative to this to add var $ = jQuery at the beginning of that file.

Now need to figure out how to trim webflow.js to just the actual code that is needed..

Improve this answer
2
  • +1 upvote thank you very much, I found this to work when using webflow.js exported file with Drupal 9 (9.0.7). My menu built in webflow its markup re-used in a menu.html.twig template file didn't work on mobile. When ran a search replace with your search/replace suggestion, I too found 2 instances that needed changing from window.$ to window.jQuery in webflow.js Then clearing Drupal cache and that webflow markup in that template now works on a mobile width screen. Commented Nov 11, 2020 at 20:30
  • I should add another helpful note. I came across "Oops! This page has improperly configured forms. Please contact your website administrator to fix this issue" and traced this to the minified webform.js in the webform export html/js/css that I wanted to use direct with my Drupal site. To stop this error happening, I renamed w-form to something else and added a css class of that name to the css. What this does is stop the webform.js from looking for w-form in the html to raise that error on it. So this means that the export can be used in non-webflow systems: Drupal or Wordpress :) Commented Nov 12, 2020 at 13:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.