Automatically remove products based on age/date

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.

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?

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!

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.

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>

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.

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.

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>

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!

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. 

9 minutes ago, 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 difference techniques would need to be used to use a similar concept with other elements of the website.

Cited is my code based on my idea.

Please see Store Page List Tag Date Hide.

Let me know how it goes.