cchs Posted April 12, 2022 Share Posted April 12, 2022 (edited) Site URL: http://www.blackbookbar.com Squarespace's mobile information bar includes the ability to dynamically publish your business hours. What I am looking for is a way to create a similar embed on multiples pages. Basically, I want to include the business hours in the footer, but also on some select other pages. I'd love for the data that's displayed to be pulled dynamically from the business information in my account settings. This way I don't have to remember to update the hours in multiple locations each time. Anyone have thoughts on how to achieve this? Thanks! Edited April 12, 2022 by cchs ManningAgency 1 Link to comment
ManningAgency Posted April 15, 2022 Share Posted April 15, 2022 I need to do this exact same thing. Can't believe there isn't a "Business Hours" block choice to add the synced info from the Business Information settings. Please help us with a solution Forum Friends! Link to comment
Beyondspace Posted April 15, 2022 Share Posted April 15, 2022 Do you mean you want to display the business hour on footer of the desktop interface? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
ManningAgency Posted April 15, 2022 Share Posted April 15, 2022 24 minutes ago, bangank36 said: Do you mean you want to display the business hour on footer of the desktop interface? No, I want to display them right in the body of a page. The Contact Us page for example. I don't want to manually manage the business hours on a page, it should be synced to what is entered in the BUSINESS INFORMATION section of the backend, which controls the hours in the footer on desktop already. https://www.hollenbeckpestcontrol.com/contact-us cchs 1 Link to comment
paul2009 Posted April 16, 2022 Share Posted April 16, 2022 On 4/12/2022 at 7:21 AM, cchs said: I want to include the business hours in the footer, but also on some select other pages. I'd love for the data that's displayed to be pulled dynamically from the business information in my account settings. This way I don't have to remember to update the hours in multiple locations each time. It should be possible to write some code to pull the opening hours from Settings > Business Information > Business Hours but these are quite restrictive in terms of formatting whereas I note that your current statement is arguably more user friendly - "Open Noon–Late. Every day." Do you want to replace this with the hours from the "Business Hours" setting, as below? Mo 12:00-02:00 Tu 12:00-00:00 We 12:00-00:00 Th 12:00-00:00 Fr 12:00-00:00 Sa 12:00-00:00 Su 12:00-00:00 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
jo11 Posted April 12 Share Posted April 12 (edited) @paul2009 Hey Paul, sorry picking up on this old thread as I have a similar question. I am working for a shopping centre and they just want to display 'todays' opening hours on the home page. Is there a way of coding in a block to pull that day's hours from the site's business hours, based on the actual day that you are viewing the site? Essentially like this attached. Thanks so much for any help you can give me in advance. 🙂 Edited April 12 by jo11 Link to comment
Solution paul2009 Posted April 12 Solution Share Posted April 12 1 hour ago, jo11 said: I am working for a shopping centre and they just want to display 'todays' opening hours on the home page. Is there a way of coding in a block to pull that day's hours from the site's business hours, based on the actual day that you are viewing the site? Sure, here's some code to get you started. It will require a Business billing plan or above because it contains some HTML and JavaScript. Add the code below to a Code Block, positioned wherever you want the day's opening hours to appear. You can amend the times and the messaging to suit your needs. Ensure that the Code Block is set to HTML. <div class="sf-opening-hours"></div> <script> // Store opening hours (replace with actual shopping hours) const storeHours = { Monday: { open: "9:00 AM", close: "5:00 PM" }, Tuesday: { open: "9:00 AM", close: "5:00 PM" }, Wednesday: { open: "9:00 AM", close: "5:00 PM" }, Thursday: { open: "9:00 AM", close: "7:00 PM" }, Friday: { open: "9:00 AM", close: "5:00 PM" }, Saturday: { open: "10:00 AM", close: "4:00 PM" }, Sunday: { open: "Closed", close: "Closed" }, }; // Get the current day and time according to the locale specified const today = new Date(); const currentDay = today.toLocaleDateString("en-US", { weekday: "long" }); const currentTime = today.toLocaleTimeString("en-US"); // Find the opening hours div on the page const openingHours = document.querySelector(".sf-opening-hours"); // Check if the store is open if (storeHours[currentDay].open !== "Closed" && storeHours[currentDay].close !== "Closed") { const openTime = storeHours[currentDay].open; const closeTime = storeHours[currentDay].close; openingHours.textContent = `Today's opening hours: ${openTime} - ${closeTime}`; } else { openingHours.textContent = "Sorry, the store is closed today."; } </script> In this simplified example, we first create a div element to hold the text that will show the opening hours. The opening hours are then defined for each day of the week. Next, we grab the current day and time, according to the locale specified. We check if the shopping centre is currently open by comparing the open and close properties of the storeHours object for the current day. It doesn't take into account users who may be located in a different timezone. If the shopping centre is open, the div element is populated with today's opening hours. If it is closed, we display a message indicating that the shopping centre is currently closed. If you want to style the message, you can add some CSS to Design > Custom CSS. For example, to set the text to 24px: .sf-opening-hours { font-size: 24px; } Did this help? Please give feedback by clicking an icon below ⬇️ cchs, rabidzoomonkey and jo11 3 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
jo11 Posted April 14 Share Posted April 14 @paul2009I literally can not thank you enough. This has worked absolutely perfectly. So kind of your to take the time to write that script for me. Really appreciated. 🙂 paul2009 1 Link to comment
rabidzoomonkey Posted November 7 Share Posted November 7 (edited) Wow this is so incredibly helpful!! Thank you so much @paul2009!! I fiddled around with the code you created and made a version that accounts for holidays. I thought I'd share it here in case it helps anyone else. Also, I'm not a very experienced coder, so I'd love to learn if there's a more efficient or better way to do this! I added this part below "Store opening hours" to define the holidays: // Define holidays (without the year) in "MM-DD" format const holidays = [ "12-25", // Christmas Day "01-01", // New Year's Day // Add more holidays (MM-DD format) as needed ]; I added this after "Get the current day and time" to check if it's currently a holiday: // Function to check if the date is a holiday (without the year) function isHoliday(date) { const month = date.getMonth() + 1; // Month is zero-based, so add 1 const day = date.getDate(); const monthDay = `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`; return holidays.includes(monthDay); } Then I modified the last "Check if the store is open" section: // Check if the store is open const isHolidayToday = isHoliday(today); if (isHolidayToday || storeHours[currentDay].open === "Closed" || storeHours[currentDay].close === "Closed") { openingHours.textContent = "Sorry, the store is closed today."; } else { // Code to handle open hours const openTime = storeHours[currentDay].open; const closeTime = storeHours[currentDay].close; openingHours.textContent = `Today's opening hours: ${openTime} - ${closeTime}`; } EDIT: Originally the code had to include the year. This edited version should work for the MM-DD format, so no year is required. Edited November 7 by rabidzoomonkey Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment