Webflow — Custom JS
This post will show you a step by step tutorial, created for Webflow users, on how to automate and populate the current status (open/closed) of the store/project and the opening-hours for the same day.
Adding the “Momentjs.com” library to Webflow
If you want the hours to populate for a store, it is very important to consider the web browsers local time, as a user might view your website in a different time zone. For this project I use the “Momentjs.com” library. The library will do all the work of converting the date & time for us, so we don’t have to deal with it.
The open/close — hours are shown in the header, so I want to make sure I pull this library on every page. Instead of adding the library separately on each page, let’s add the library into the project page itself.
- Go to Project Settings
- Click “Custom Code”
- Past the following snippet into the <head> sections:
Create/Customize code
In this paragraph I will break down the code into sections. This will make it easier to understand and what changes you can make to make the custom code fit your store/project. At the end of this step by step I added a codepen.io document where you can play around and adjust the code.
Create the store/project schedule
In this section we will add the opening-hours of the store:
- I added 2 different tags: “Open & Close” — this is for the system/browser to read, and “openDisplay & closeDisplay” which is that time that will be displayed on the browser.
- Extra note: The schedule always starts with Sunday — in my case Sunday is closing day, therefore I added “0”.
Get the store/project local time
This is the part where we will need to pull the momentjs.com library as we want to convert the local time to UTC. Extra Note: UTC is the standard timezone and used in most systems/software to retrieve date & time.
My store is located in Monterrey, Mexico, which is located in the CST time zone and has a 6 hour difference with UTC. I use a time zone converter to see the difference.
I created a variable for momentInMonterrey, pulled the library and tell the library to subtract 6 hours from UTC. No matter in which time zone you’re located, momentjs.com will read your time and convert it to automatically.
Display the opening-hours
In Webflow, each element has an ID tag. These ID-tags are needed to push and display the function’s data into the Webflow element. ID’s should be unique and can only be used once in your entire project.
In my project I added a simple “text-element” and styled it in Webflow. When data is pulled into the element, it will automatically adapt to the style in Webflow.
In this section, we want to tell the browser when and which opening hours to display based on the local date and time.
As you can see we are calling the ID into this function and tell the system:
- if “close = 0” and “open = 0” (for me this is on Sunday) — don’t display anything.
- Otherwise show “openDisplay” & “closeDisplay” hours for that current day. (These are the hours we defined in previous step) + When displaying the “openDisplay” add “am” and do the same for the “closeDisplay” add “pm”.
Display the open/closed status
As mentioned in the previous section (Display the opening-hours) you’ll need to add a unique ID to the element where we will display the status of the store.
We want the website to tell us, based on the local date and time, if the store is currently open or closed. We can do that by adding another variable that will tell us the store is open:
- if the local time is earlier than the closing (close — in schedule)time AND
- if the local time is later or the same as the opening (open — in schedule)time.
Now we want to add the “Open” or “Closed ” into the browser + I want to display different colors for a better user experience. This can be done inside the function, which will overwrite the Webflow style (in this case only the color) I previously created.
- When the store is open — display “Open” and add the color green (#00911c).
- When the store is closed — display “Closed” and add the color red (#e03a01).
Pull the function
To be able to run everything, we just need to let the browser know to load and execute the function when the page has finished loading.
Add the Custom JS code to Webflow
Our entire function is complete and now it’s time to implement this into Webflow. As I like to keep all my elements organized, I created a div called “div-opening-wrapper”, where I keep all my elements related to the opening-hours (icon, open & opening-hours).
Add Embed Component
In the “div-opening-wrapper”, I will add my Embed component. When you are using a lot of custom js code, it will be easier navigate and to find the embed section if any changes need to be made.
In the component section, click on the “Embed” — component to add it into Webflow.
Add your Custom JS Code into the “embed” component.
- If you copied the code from codepen.io, make sure to not include the first script tag as we already used this to pull the library. You only want to copy the second script tag.
- Also don’t forget to include the <script></script>tags into the editor, otherwise your function will not run as it will be read as just “HTML” code.
Hide your Embed — component.
As we don’t need to see the component in our design, we can simple hide it in our layout by clicking display: None.
View your work in the browser.
As you can see in the designer, your function will not run, neither will it run in “toggle preview”, as we need to run the function in the browser first. You can test out your work by publishing your website.
Making changes to the HTML Embed Editor
Currently our embedded code editor is hidden in our design. To have easy access to the code editor, simply go to your navigator, select your wrapper (depending where you added your embed component), click the html embed component and in the top left corner you will be able to click the little gear, which will pop up your HTML Embed code editor.
Playground in codepen.io
As previously mentioned I created the function into a codepen.io file. This allows you to play/change/experiment/… and customize the function to your needs. If everything runs well in the codepen editor, simply copy the code into your embed-component in Webflow.
- To just copy the code — select the code and past it in your embed component
- To play around — click the Edit on Codepen in the upper right corner.
Coming Soon — Open/Close Widget
I hope this tutorial was helpful and you successfully created your own schedule! However, I know this can be very intimidating to designers and time consuming to learn and implement.
Therefore I reached out to Jorge Cuadra, who is a software developer, to sit together and create a Webflow widget. The purpose of the widget is to make this entire process easy and accessible for everyone.
If you want to receive an update when the widget will be released, please leave your email address and we will let you know the moment we launch!