Streaming live at 10am (PST)

Check data on other page with http request

Check data from another page

Hi, all I’m writing this post only as note “HOW TO”. Someone will find it redundant but someone can find the following information useful. In the first place, I have to mention that I’m on Webflow Platform around one month so I still looking for better, flawless workflow for testing and implementations of custom JS.

So my first problem was where to host JS file. I have read some ideas for hosting here on the forum as Github page etc. at the end I have decided for now (until I find or someone recommend best practice for production) to inject JS file from Dropbox.

Here is HOW TO do this

Load javascript file from Dropbox

  1. Create a folder on dropbox
  2. Open folder in a text editor (my is VS Code)
  3. Add js file
  4. Write code
  5. Right-click on file in dropbox to get a shareable link (copy link / create/link)
  6. Paste link in the browser search input
  7. Remove ?dl=0 from the end of link AND replace www in front with dl
  8. A new link is generated
  9. Copy this link and place it as src: value into a script tag

Now you can use this JS file as a valid hosted file. When you make changes in file save file and refresh the browser.

// Original Link (link number is fictional)
https://www.dropbox.com/s/jifiq4z73fhwj84/custom.js?dl=0
// customsed Link
https://dl.dropbox.com/s/jifiq4z73fhwj84/custom.js
// Generated Link
https://dl.dropboxusercontent.com/s/jifiq4z73fhwj84/custom.js
<!-- placed in webflow project preference `custom code` in before body section -->
<script src:="https://dl.dropboxusercontent.com/s/jifiq4z73fhwj84/custom.js" type="text/javascript"></script>

Now, this was my first step. It’s not perfect, I know, but at this moment it works for my live tests on workflow

The Problem

I have faced a problem that I need to hide the link button on one page if there are no data on another page. These data are generated from CMS with Active button On. So my mission was to `check if there are some data in the collection on site B and if not hide button on site A ( in my case homepage) and show link button only if on site B are data to be seen.

As Javascript is only aware of data on current page there is no “simple” way how not get ERROR or NULL when switching between pages. So my first approach was to use localStorage that is actually in this case not useful at all so I decided to get data by requesting the second page by XMLHttpRequest.

Before I started writing code I have opened WF designer and I have assigned an ID to collection wrapper (“oc-shorts”) to access its first child and I have added ID also to collection List to be able to check its presence. Why? Collection wrapper has two states first is collection list that will show when data are present and second is Empty State that will reveal when no data are presented (no active, no filter match or whatever). I have assigned ID also Empty state (“no-trainings”) to be able to check if is present.

Http REQUEST

Here is an example of HOW TO make Http Request the old way

const btnShortOc = document.querySelector("#btn-short-oc");
const btnTrainingOc = document.querySelector("#btn-training-oc");
// create request
let xhr = new XMLHttpRequest();
// "/open-courses" is page I need to check
xhr.open("GET", "/open-courses", true);
xhr.responseType = "document";

xhr.onload = function (e) {
  if (this.status === 200) {

    var doc = e.target.responseXML;
    // console.log(doc); => Now you have your page (#document) and you can start work on it 
    // 
    // chatch collection wrapper by ID
    const shortsOcContainer = doc.querySelector("#oc-shorts");
    // I had 2 collection on one page so I grabbed both
    const trainingsOcContainer = doc.querySelector("#oc-trainings");

//  condition to check if first child of collection wrapper is empty state
    if (trainingsOcContainer.firstChild.id === "no-trainings") {
// if true do not display button 
      btnTrainingOc.style.display = "none";
    }
    // I have two collection on page B ("/open-courses")
    if (shortsOcContainer.firstChild.id === "no-trainings") {
      btnTrainingOc.style.display = "none";
    }
  }
};

xhr.send();

Http request with Fetch - modern way

fetch("/open-courses")
  .then(function (response) {
    return response.text();
  })
  .then(function (html) {
    // Initialize the DOM parser
    var parser = new DOMParser();

    // Parse the text
    var doc = parser.parseFromString(html, "text/html");

    // You can now even select part of that html as you would in the regular DOM
    // Example:
    // var docArticle = doc.querySelector('article').innerHTML;

    const shortsOcContainer = doc.querySelector("#oc-shorts");
    const trainingsOcContainer = doc.querySelector("#oc-trainings");

    if (trainingsOcContainer.firstChild.id === "no-trainings") {
      btnTrainingOc.style.display = "none";
    }
    if (shortsOcContainer.firstChild.id === "no-trainings") {
      btnTrainingOc.style.display = "none";
    }

    console.log(doc);
  })

Now when you are done copy your code to a dedicated page, in my case homepage, into before body section and don’t forget on <script></script>

Hope that will be for someone useful and if someone can reveal their workflow (as I’m still searching) to test custom JS on live WF website to see immediate results, use DevTools etc. and sorry for my English it’s not my native language.

Happy Coding :slight_smile:

Hi @Stan,

A colleague of mine ran into this type of issue some years ago. We researched for a while, so I would suggest using Pcloud for this. It’s built much better for these types of situations. They allow for storage and connectivity to pretty much everything. And you’ll make 1 payment!

I used it a while ago and it was much better than dropbox to me. Just wanted to add options, take care :slight_smile:

thanks for tip I will check it out. As I have said I’m still looking for flawless workflow with custom JS as working with Webflow embed is pain in neck and WF API doc is IMHO not clear, at least for me . :slight_smile:

No problem, I think it will be easier … glad to help … see ya!

What about using GitHub to host your js file, then use jsdeliver to CDN your GitHub file ? Easy, highly efficient, minification on the fly and free.

I have looked on JSDelivr as possible option two days ago but I didn’t have time to look into it deeper as I was not able to find on official JSDelivr website any info on how to use it. Do you mean host on Github Page or as a project file? For now, I’m using Dropbox as is free and easy for testing but I’m looking for some solution to be safe and fast for production if need it. Any recommended materials to read HOW TO use Github and JSDelivr? Never did it before. Thanks in advance

EDIT: Just looking into JSDeliver doc on Github :wink: but any other links will be helpful

It is true there is little doc about this implementation.
Here is what you need to do:

How to CDN a JavaScript file:

  1. create a free GitHub account
  2. create a repository (which can be seen as a folder containing all your files for a specific project)
  3. create or upload your javascript file inside that repository
  4. setup your jsDeliver url link as such if you don’t want to minify on fly your JavaScript: https://cdn.jsdelivr.net/gh/yourusername/yourrepository/yourfilename.js
  5. setup your jsDeliver url link as such if you want to minify on the fly your file: https://cdn.jsdelivr.net/gh/yourusername/yourrepository/yourfilename.min.js
  6. wrapp your url within its script tags as such and add it to your webflow project: <script src="https://cdn.jsdelivr.net/gh/yourusername/yourrepository/yourfilename.min.js"></script>

Note:

/yourusername = your GitHub username
/yourrepository = the name of your Github repository
/yourefilename = you’ve guessed it
simply add min at the end of your file, before the .js if you want jsDeliver to minify your file onthe fly.

Hope that helps !

1 Like

Thank you for detail answer @anthonysalamin I have also found small article about it https://gomakethings.com/how-to-turn-any-github-repo-into-a-cdn/

1 Like