KenSalter Posted April 9, 2021 Share Posted April 9, 2021 Hi! I was wondering if there was anyway to have products "disappear" from a store after they are x days old or after a certain date? I see there is an option to schedule products to appear at a certain date, so I was hoping the opposite is true. Link to comment
Solution creedon Posted April 9, 2021 Solution Share Posted April 9, 2021 You might be able to use tags and some Javascript to hide products. You could do something like expire MMDDYY for a tag. Then Javascript would scan for tags beginning with expire and check the current date against the date parsed from the tag. If the current date is greater than the tag date then hide the product. The other approach might work as well. The tag would be date MMDDYY. The code would check to see if the current date is n number of days after the tag date. If so, hide the product. Would something like these work for your needs? KenSalter 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
KenSalter Posted April 10, 2021 Author Share Posted April 10, 2021 Actually, yes that would work I think. I didn't even think about using script. Do you know if SquareSpace has jQuery or momentjs, or is it just pure ol' javascript? Link to comment
KenSalter Posted April 10, 2021 Author Share Posted April 10, 2021 Did a quick test - so the tags are added as a class, which should make this easy, especially if jQuery is involved...but I don't think I have that luxury 🙂 Thanks for the suggestion! Link to comment
KenSalter Posted April 10, 2021 Author Share Posted April 10, 2021 So here is my code if anyone is interested. I put it in the store's page injection code. The tag I put on the products is "expireYYYY-MM-DD" where YYYY is the year, MM is the month, and DD is the day. <script type="text/javascript"> window.addEventListener('DOMContentLoaded', (event) => { var elements = document.getElementsByClassName('grid-item'); for (var i = 0; i < elements.length; i++) { var ele = elements[i]; if (ele.className.includes('tag-expire')) { var classes = ele.className.split(' '); for (var j = 0; j < classes.length; j++) { if (classes[j].includes('tag-expire')) { var expireDate = new Date(classes[j].substring(10)); if (expireDate <= Date.now()) { ele.style.visibility = "hidden"; } } } } } }); </script> The only complaint I would have is that it makes the grid of products look like it has holes in it, so perhaps I can enhance this by "ghosting" the product and disabling clicks on it...will have to investigate. Link to comment
KenSalter Posted April 10, 2021 Author Share Posted April 10, 2021 (edited) Ok last post, here is the final version of my code, where it ghosts the item and changes the link: <script type="text/javascript"> window.addEventListener('DOMContentLoaded', (event) => { var elements = document.getElementsByClassName('grid-item'); for (var i = 0; i < elements.length; i++) { var ele = elements[i]; if (ele.className.includes('tag-expire')) { var classes = ele.className.split(' '); for (var j = 0; j < classes.length; j++) { if (classes[j].includes('tag-expire')) { var expireDate = new Date(classes[j].substring(10)); if (expireDate <= Date.now()) { ele.style.opacity = '0.2'; // get second child node, which is the <a></a> var a = ele.childNodes[1]; // get rid of the href and add an onclick a.removeAttribute('href'); a.setAttribute('onclick','alert("This product is no longer available.");'); } } } } } }); </script> Edited April 10, 2021 by KenSalter edited the script - the <a> node is actually the second in the array... sruss76, creedon and Sweeet 2 1 Link to comment
creedon Posted April 10, 2021 Share Posted April 10, 2021 Nice job! You can use jQuery if you want. Add the following to Settings > Advanced > Code Injection > HEADER. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Yes the downside to this technique is that it can leave holes in the grid. For v7.1 sites the hidden items should only be noticed at the end of the grid as it is using display : grid. On v7.0 floats seem to be the preferred method for making grids, which is trickier to deal with. KenSalter 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
KenSalter Posted April 10, 2021 Author Share Posted April 10, 2021 Ah, ok I'll keep that in mind. Didn't know if we were allowed to use CDN links or not, but since I don't need jQuery then I'll not include the extra scripts. Thanks for the suggestion and info! The last version of the code is working quite well, and it will keep everything looking "complete" until I can come around and manually delete the products. Link to comment
captbdel12 Posted September 22, 2022 Share Posted September 22, 2022 I use this to hide a Product at the end of the date/time specified with the Product given enclosed with DIV = <div class="houdini" style="display:none"> <p>content for div #one</p> </div> <script> window.setInterval(function() { var current = new Date(); var expiry = new Date("September 22, 2022 12:32:00") if (current.getTime() > expiry.getTime()) { $('.houdini').hide(); } else if (current.getTime() < expiry.getTime()) { $('.houdini').show(); } }, 0); </script> Link to comment
Sweeet Posted July 18, 2023 Share Posted July 18, 2023 On 4/10/2021 at 8:30 AM, KenSalter said: Ok last post, here is the final version of my code, where it ghosts the item and changes the link: <script type="text/javascript"> window.addEventListener('DOMContentLoaded', (event) => { var elements = document.getElementsByClassName('grid-item'); for (var i = 0; i < elements.length; i++) { var ele = elements[i]; if (ele.className.includes('tag-expire')) { var classes = ele.className.split(' '); for (var j = 0; j < classes.length; j++) { if (classes[j].includes('tag-expire')) { var expireDate = new Date(classes[j].substring(10)); if (expireDate <= Date.now()) { ele.style.opacity = '0.2'; // get second child node, which is the <a></a> var a = ele.childNodes[1]; // get rid of the href and add an onclick a.removeAttribute('href'); a.setAttribute('onclick','alert("This product is no longer available.");'); } } } } } }); </script> I need this! But I'm unfamiliar with coding. I copy your code into the "Page Header Code Injection" for my store. Then add tags to the products: "expireYYYY-MM-DD" where YYYY is the year, MM is the month, and DD is the day. Is that all? Do I need to modify anything in the code for my site? Thanks in advance! Link to comment
Sweeet Posted July 18, 2023 Share Posted July 18, 2023 Tried the code but need help getting it to work. The store page isn't the primary product page, "schedule" is, and there are other summary blocks across the site to promote products. https://www.grandconcerts.org/ Need the ticket products to expire automatically the day after the shoe. Link to comment
creedon Posted July 18, 2023 Share Posted July 18, 2023 (edited) On 7/18/2023 at 11:51 AM, Sweeet said: The store page isn't the primary product page, "schedule" is, and there are other summary blocks across the site to promote products. I do not have a solution. The code provided was designed to cover a very specific need. New code and possibly different techniques would need to be used, to use a similar concept with other elements of the website. Edited October 13 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
creedon Posted March 26 Share Posted March 26 Cited is my code based on my idea. Please see Store Page List Tag Date Hide. Let me know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Jackie123 Posted October 13 Share Posted October 13 On 4/10/2021 at 10:30 AM, KenSalter said: Ok last post, here is the final version of my code, where it ghosts the item and changes the link: <script type="text/javascript"> window.addEventListener('DOMContentLoaded', (event) => { var elements = document.getElementsByClassName('grid-item'); for (var i = 0; i < elements.length; i++) { var ele = elements[i]; if (ele.className.includes('tag-expire')) { var classes = ele.className.split(' '); for (var j = 0; j < classes.length; j++) { if (classes[j].includes('tag-expire')) { var expireDate = new Date(classes[j].substring(10)); if (expireDate <= Date.now()) { ele.style.opacity = '0.2'; // get second child node, which is the <a></a> var a = ele.childNodes[1]; // get rid of the href and add an onclick a.removeAttribute('href'); a.setAttribute('onclick','alert("This product is no longer available.");'); } } } } } }); </script> I am going to try this thank you! Does it expire 12am on the day? or is there a way to specify time? 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