DesignerLeo

https://www.polivantage.com/developmentlog/activeviewersperpage This is my temporary solution using the real time database of google's firebase. Now I would also like to add a counter for how many times this product has been actually bought, not just added to cart..

I am looking to create a light-weight solution to display the number of visitors who are viewing the same product in my shop. I understand that squarespace does not expose such data to be used by the front end. What would be the best way to go about it? I tried google's firebase realtime database and it works, however it gets expensive really quickly if we are talking about a per page implementation for a large number of users. I want on every product - a div that says # of users are also viewing this product. This should update in realtime, whenever a user enters the product page. Any thoughts on this would be highly appreciated.

.centered-element-inside-container { position: absolute; left: 50%; transform: translateX(-50%); margin-left: - "(minus) half the element's width"; // this might not be required, i forgot. } .container { position: relative; } Have you tried this?

I just wrote this functionality if you are still interested. https://www.polivantage.com/developmentlog/dynamicsitemap

you probably will want to dynamically set the styling property "border-radius: n%;" You can do this with CSS: .your-element-class:hover { border-radius: 25%; } I would need more context to help further, such as type of element that the shape is. is it a div? and the environment it is in, is it dynamically created with JS or placed upfront, etc. Additionally you may want: .your-element-class:hover { border-radius: 25%; pointer-events: auto; cursor: pointer; }

Not to infringe on any paid plug-in territory, you still want those if you want support. However here is my solution: https://www.polivantage.com/developmentlog/choosing-a-platform-4d3sb-nt27j-8tmjn-cxkp2-dhzsz-m6r9p-e6ssx-8ecc9-eyxmx-ykpll Please review the code before using it, your shop url might be different, among other variables. What this does is store last shopping url and scroll position and takes you back when you push the buttons.

there are ways to do this in js, but i suspect this is done on the example website you provided, simply by placing a duplicate at the bottom.

you could simply set the value of the input field to nothing every time the submission is made. This would potentially require a custom text field instead of the squarespace form, or you could use event.preventdefault, to stop the initial submission and then add your own submit logic.

I also need this. I would also like to define the break point manually and also would be nice to have a css solution apart from screen width to know when in mobile view. This would solve the need for tablet view in the editor which is ominously missing...

you could try something like this in the header code injection: <!--SIMPLE ALL BUTTONS PLAY A NOSIE ON CLICK--> <script> document.addEventListener('DOMContentLoaded', function() { //make sure document is loaded let buttons = document.querySelectorAll(".sqs-block-button-container"); //get all buttons, add or change if your buttons have different classes var BTNaudioCLICK = new Audio('INSERT LINK TO AUDIO FILE HERE'); //provide a link to your audio file BTNaudioCLICK.preload = 'auto'; //make sure the audio is ready BTNaudioCLICK.volume = 1; //set volume to 100% function CLICK(event) { BTNaudioCLICK.pause(); //pause to avoid clipping sounds on spam BTNaudioCLICK.playbackRate = 1; //set speed of audio playback BTNaudioCLICK.currentTime = 0; //set audio time to beginning BTNaudioCLICK.play(); //play the sound } for(const button of buttons) { button.addEventListener('mousedown', CLICK, false); //assign click listeners to all buttons } }); //closing the dom loaded statement </script> I am unsure if I closed all the brackets correctly but chatGPT should help you along nicely with this. This should keep your links intact.

thank you, will give it a try 🙂

Anyone help please. I just want a button as a standard squarespace button which has the same function as the account link from the header...

Hello, I have gotten rid of the account button/link in the header and have reasons to not enable it - mostly aesthetic reasons. I would like however to provide a link to the usual squarespace account management panel, just as it would open from the header link/button, - but from a different place on the website, namely from just a button I will create on a page. To what exactly should I link the button to open that log in popup for the user to manage their payment info, i believe shipping address, etc. Summary: Need a button to open account link, but not from header. Ideally without moving it around with code, unless the link/button is so unique and special and tender that there is no other option. Thanks in advance great squarespace minds, Leo.

i would like this functionality as well, please allow us to save stuff

Thank you for looking into this with me! The problem isn't solved, however I have opted for a different approach and no longer am bothered by it. Here are some screenshots, because I still think it has to be addressed. This is the first page in my blog! if I click newer posts, this happens: That is because it was already page 1 and there are no newer posts. Yet the link is there. Also, If I navigate to older posts like so: And then click newer posts, it returns me to the first page, instead of taking me back step by step: As I said I no longer have need for solving this issue, but it still is weird, I hope it can be resolved somehow.

Hello, I have encountered a problem with blog navigation. The blog has older posts and newer posts links - to view older and newer posts which aren't displayed on the current page. They work great, except when you go two pages into the oldest blogs (on my site it is as far as you can get date-wise) and then try to use the "newer posts" links to return to the first blog listing page - It now appears empty. Also the url is weird it keeps trying to offset, instead of returning to the original url. https://www.polivantage.com/developmentlog Try navigating to the oldest posts and then back to the newest, you will see the page with no blog list at all. I would really like to know why this is happening and if there is a fix for this, apart from using JS to manually reset the link of the "newer posts" to navigate to the right url. I would like to avoid this because as I add more blog posts, the offset and the link will change. Thanks in advance, L. EDIT: I now see that when I am at the last blog list page, it doesn't return me to the previous page, but to the first one, and still keeps the link to go further to newer posts which are of course none. This results in an empty page. Why does it skip a page when going to newer posts?

Hello, I want to create a button to make it so that the user has to enter his password AGAIN on password protected pages, instead of directly going to that page on new visit. How would i clear the password storage? clearing local storage does nothing. Thanks!

I figured it out. I wrote some JS to log any new elements: <!--LOG NEW ELEMENTS--> <script> // Ensure the DOM is fully loaded before setting up the observer document.addEventListener('DOMContentLoaded', (event) => { // Create a callback function to execute when mutations are observed const callback = (mutationsList, observer) => { for (const mutation of mutationsList) { if (mutation.type === 'childList') { // Loop through the added nodes mutation.addedNodes.forEach(node => { // Check if the node is an element (not a text node, etc.) if (node.nodeType === Node.ELEMENT_NODE) { console.log(`New element added: ID = ${node.id}, Class = ${node.className}`); } }); } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the document body for configured mutations const targetNode = document.body; if (targetNode) { observer.observe(targetNode, { childList: true, subtree: true }); } else { console.error('Target node for MutationObserver is not available.'); } // Optionally, you can disconnect the observer when you no longer need it // observer.disconnect(); }); </script> And then I identified a single element with no ID and three gibberish classes which appears as I modify the quantity of a product in cart page. Setting display: none; on any of them removes the spinner along with the background. I set background: transparent; now I retained the spinner wheel loader and removed the pesky grey overlay. <style> //STOCK SPINNER WHEEL MODS// .IxjCAUd2hJFV_2zxKcW9 { // display: none !important; background: transparent !important; } .tTLeCwDAKFm1AX2fwAaS { // display: none !important; } .pFXZ5G2whUcWOosr649g { // display: none !important; } </style> I hope this helps someone else too.

Hello wise ones, Whenever removing a product from cart, or increasing/decreasing product quantity within the cart, a spinner wheel appears. This is great, but it also brings along a grey, semi-transparent overlay (that doesn't cover the header). I would like for this overlay to go away or be transparent so that only the spinner loading wheel remains. How do I target it with CSS or JS? It only appears for a moment so I have no way of getting it's ID. I have a feeling that this overlay also appears in other places, I would like to get rid of it everywhere. Thank you, Leo.

Worked! thank you.

Hello, I am trying to style cart-checkout-button in 7.1 and was able to do so apart from letter-spacing. can you please direct me to a setting or a way that does that? thanks!

the CSS: //ADDED TO CART POP-OVER// //disable stock pop-over .template-cart-item-added-popover { display: none; } //custom pop-over #custom-popover { display: block; opacity: 0; position: fixed; transition: all 0.5s ease; color: #ffc700; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%); padding: 25; border: 0; width: 100%; z-index: 999999; // min-height: 90px; align-items: center; text-align: center; font-size: 20px; letter-spacing: 2.5px; pointer-events: none; } .popover-message { padding-left: 25px; padding-right: 25px; } #custom-popover.show { opacity: 1; } and the JS: <!--Custom Added to Cart Pop-Over--> <div id="custom-popover"> <p id="popover-message"></p> </div> <script> document.addEventListener('DOMContentLoaded', function() { let hideTimeout; function showPopover(message) { var popover = document.getElementById('custom-popover'); var popoverMessage = document.getElementById('popover-message'); popoverMessage.textContent = message; popover.classList.add('show'); clearTimeout(hideTimeout); hideTimeout = setTimeout(function() { popover.classList.remove('show'); }, 3000); } function checkSelectOptions(productItem) { var selects = productItem.querySelectorAll('select'); for (var i = 0; i < selects.length; i++) { if (selects[i].selectedIndex === 0) { return 'Please select ' + selects[i].options[0].textContent; } } return null; } function listenForAddToCart() { var buttons = document.querySelectorAll('.sqs-add-to-cart-button'); buttons.forEach(function(button) { button.addEventListener('click', function(event) { let productItem = event.target.closest('.ProductItem') || event.target.closest('.grid-item'); let productName = productItem?.querySelector('.ProductItem-details-title')?.textContent || productItem?.querySelector('.grid-title')?.textContent; if (productItem) { let selectMessage = checkSelectOptions(productItem); if (selectMessage) { showPopover(selectMessage); return; // Prevent showing the "acquired" message if select option is not chosen } } if (productName) { showPopover(productName + ' acquired!'); } }); }); } listenForAddToCart(); document.addEventListener('click', function(event) { if (event.target.closest('.sqs-add-to-cart-button')) { listenForAddToCart(); } }); }); </script> This disables the stock popup, adds a bar at the top whenever a product was added, regardless of whether it was added from product page or category view.

Currently the added to cart pop-over/pop-up only appears (if at all) from category view of the store. I would like to make it consistent and also appear if the product was added from the individual product page. p.s. If there isn't a quick fix, how would i go about recognizing in javascript, which product was just added to cart without comparing the cart contents from before and after? Thanks in advance!

this is interesting, i would also appreciate any pointers on this

has anyone tried making their own sorter with js?