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
- Create a folder on dropbox
- Open folder in a text editor (my is VS Code)
- Add js file
- Write code
- Right-click on file in dropbox to get a shareable link (copy link / create/link)
- Paste link in the browser search input
- Remove
?dl=0from the end of link AND replacewwwin front withdl - A new link is generated
- 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 
but any other links will be helpful