KatieVetter Posted March 1 Share Posted March 1 (edited) Hey all, First, you'll need a password to see the site right now: Teckton1 https://teckton.squarespace.com/ I am working on a client's site that has a dropdown menu in the header to display categories of products. On the homepage there is a section about their products with a button that shows "view products." There is not one product page since they needed to be set up each like separate portfolios, thus the dropdown. When it is clicked, I want it to anchor back up to the top of the page AND open up the dropdown menu. So far I can only get it to anchor back up to the top. (Desktop view only) The tricky part is on mobile view it needs to open up the collapsed header options rather than open the dropdown menu - this I have gotten to work successfully. This code also generates the button mentioned above. It was adjusted to look like the other buttons on the site. I've pasted the code I have currently in the site below. Any advice? Disclaimer: I am not a coder. I have used ai to assist in writing code snippets for the very little coding I do need until I find a coder to collaborate with. I know very very little, and I am absolutely open for guidance and direction. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scroll to Top and Open Product Dropdown</title> <style> /* Center text inside the button */ #yui_3_17_2_1_1708440256551_17927 .sqs-html-content { text-align: center; line-height: 2em; /* Match the height of the button */ vertical-align: middle; } /* Set button dimensions and remove outline */ #yui_3_17_2_1_1708440256551_17927 { font-size: 1.4em; padding: 0.8em; /* Keep padding as it was */ height: 2em; /* Set the height to 2 grid units */ outline: 0px; } </style> </head> <body> <!-- Your existing button --> <a class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" onclick="return false;" style="cursor: text;" id="yui_3_17_2_1_1708440256551_17927"> <div id="yui_3_17_2_1_1708440256551_17575" class="sqs-dd-invalid-handle yui3-widget sqs-html"> <div id="yui_3_17_2_1_1708440256551_17577" class="sqs-html-content">View Products</div> </div> </a> <script> document.addEventListener("DOMContentLoaded", function() { var existingButton = document.getElementById('yui_3_17_2_1_1708440256551_17927'); var productDropdownLink = document.querySelector('#header > div.header-announcement-bar-wrapper > div.header-inner.container--fluid.header-mobile-layout-logo-left-nav-right.header-layout-nav-right > div.header-display-desktop > div.header-title-nav-wrapper > div.header-nav > div > nav > div.header-nav-item.header-nav-item--folder > div'); var menuToggleButton = document.querySelector('.header-burger-btn'); // Scroll to top and open product dropdown (for desktop) existingButton.addEventListener('click', function() { // Scroll to the top of the page window.scrollTo({ top: 0, behavior: 'smooth' }); // Open product dropdown (for desktop) if (!isMobileDevice()) { if (productDropdownLink) { productDropdownLink.click(); } } }); // Open collapsed header menu (for mobile) existingButton.addEventListener('click', function() { // Open the collapsed header menu (for mobile) if (isMobileDevice()) { if (menuToggleButton) { menuToggleButton.click(); } } }); // Function to check if the device is a mobile device function isMobileDevice() { return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1); } }); </script> </body> </html> Edited March 1 by KatieVetter Adding Link. Link to comment
paul2009 Posted March 1 Share Posted March 1 5 minutes ago, KatieVetter said: On the homepage there is a section about their products with a button that shows "view products." There is not one product page since they needed to be set up each like separate portfolios Have you considered creating a "/products" page that only contains tiles, one for each of the portfolios, Red Oak, Walnut, Hickory and so on? Your View Products button could then link directly to this page, allowing them to choose one of the different store pages, instead of using the dropdown? Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
KatieVetter Posted March 7 Author Share Posted March 7 I did consider that, but it interfered with the flow of the site in a way I didn't love. I thought it was too many pages within a page, given that each product line has a few sub categories as well. Lots of pages, lots of clicks... Does that make sense? 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