Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Automatically remove products based on age/date


Go to solution Solved by creedon,

Recommended Posts

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 post
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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) =>

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 cu

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/

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 best , and see my profile. Thanks for your support!

Link to post

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 post

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 post

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

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 best , and see my profile. Thanks for your support!

Link to post

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 post

Create an account or sign in to comment

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


×
×
  • Create New...