Jump to content

Automatically remove products based on age/date

Go to solution Solved by creedon,

Recommended Posts

  • Solution

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?

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

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

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 by KenSalter
edited the script - the <a> node is actually the second in the array...
Link to comment

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.

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

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
  • 1 year later...

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
  • 9 months later...
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
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 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
  • 8 months later...
  • 6 months later...
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.