Dynamically list and unlist products when one is sold.

I'm looking to create an online clothing store that offers 3 items at a time. The idea is that as an item is purchased, the inventory would be changed to 0 and the item would be marked as unlisted and removed from view, while the next item in the queue is dynamically marked as listed and is shown in its place.

I imagine some JavaScript will be necessary for this, I'm just not sure how to go about it. Any help would be appreciated. Thanks, ~ev.

Hey,

Hmm you could try it with some jquery and CSS

In my CSS I have:

.sold-out{
  display:none;
 }

.avail:not(.show){
 display:none;
}

And then for the code I have:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
/* add avail class to any not sold out  product
to make the nth child not assign to a sold out product*/

$(".product").not(".sold-out").addClass("avail");


/* applying show class to first 3 products */

 $(".avail:nth-child(1)").addClass("show");
 $(".avail:nth-child(2)").addClass("show");
 $(".avail:nth-child(3)").addClass("show");

</script>

Hope that helps get you started!

I'm sure there's a more classy solution to this, but couldn't think of a different way to count classes

Thank you @DMK it is tremendously helpful to see this in something clearer than my psuedo-code . However I still am not sure how to integrate jquery with my Squarespace site. I've followed this (https://developers.squarespace.com/beginner-tutorial/) tutorial and have a gitcopy of my site in my atom repository that I can commit and push from however I'm not sure how to access things like my inventory to accomplish the task of posting three items at a time dynamically. Are there any resources you could point me to on this or am I misunderstanding something fundamental.?

Thanks again. -ev

Hey @evmtree

The first line of the code pulls in jquery into your code. You can add this in the footer Code Injection in Settings > Advanced > Code Injection. There's not necessarily a need to have developer mode on for this, once you get it working in the way you want, you could then edit the site.region to include it in there.

I'd say if you look through these 2 links,it may be a bit more clear:

https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript#toc-adding-code

https://www.w3schools.com/jquery/jquerygetstarted.asp