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

How to move “sold” items to bottom of page


Recommended Posts

4 hours ago, jbpdx80 said:

Hi @bangank36 wondering if you had any help for v7.0 sites on this? My site is leftcoastrevivals.com

sure I will have a look

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 12/4/2020 at 1:05 PM, jbpdx80 said:

@bangank36 Leftcoastrevivals.com

Hope this helps you and other people with same template, could you tell us your template?

#productList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
#productList .product {
  width: 100%;
}
#productList .sold-out {
  order: 2;
}
@media only screen and (max-width: 768px) {
  #productList {
    display: grid;
    grid-template-columns: 1fr;
  }
  #productList .product {
    width: 100%;
  }
}

 

Edited by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 12/9/2020 at 11:18 PM, Ellavator said:

@jbpdx80 @bangank36 Same issue here, tried the code and it's not working. I have Brine template on 7.0  my website is ellafriberg.com

Add this to Design->Custom CSS, and would you mind tell us your template name so others people can follow if they have same issue

.ProductList-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .ProductList .ProductList-item {
    width: 100%;
  }
.ProductList .ProductList-item.sold-out {
  order: 2;
}
@media only screen and (max-width: 768px) {
  .ProductList-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  .ProductList .ProductList-item {
    width: 100%;
  }
}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
6 minutes ago, jbpdx80 said:

@bangank36 Template is Montauk. The code did work to sort sold out products to bottom. Unfortunately, it also removed padding between product listings and left a large gap between the sold out items that sorted to bottom and the not sold out items.

Tried to reduce the width on 

#productList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
#productList .product {
  width: 92%;
}
#productList .sold-out {
  order: 2;
}
@media only screen and (max-width: 768px) {
  #productList {
    display: grid;
    grid-template-columns: 1fr;
  }
  #productList .product {
    width: 100%;
  }
}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...
On 12/29/2020 at 1:22 AM, Ellavator said:

@bangank36 thank you for your response. I have the Brine template. I tried the codes and it still didn't seem to work..., just made my grid layout different (single product in one column, instead of 3 in a row). 

If you share page url, we can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
On 12/19/2020 at 9:30 PM, bangank36 said:

Tried to reduce the width on 


#productList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
#productList .product {
  width: 92%;
}
#productList .sold-out {
  order: 2;
}
@media only screen and (max-width: 768px) {
  #productList {
    display: grid;
    grid-template-columns: 1fr;
  }
  #productList .product {
    width: 100%;
  }
}

 

@bangank36 This worked well for me on the Hyde template, but unfortunately created an empty box between my unsold and sold products. Moreover on mobile view it changed my store to show only one product per row instead of two. Any idea how I can fix this? Thank you!

Link to comment
  • 1 month later...
Guest TrinaWallace
On 1/26/2021 at 2:06 AM, share said:

@bangank36 This worked well for me on the Hyde template, but unfortunately created an empty box between my unsold and sold products. Moreover on mobile view it changed my store to show only one product per row instead of two. Any idea how I can fix this? Thank you!

@share I had the same problem. Order: 1 seems to leave an empty box behind it. I'm not sure why, but I got around issue with using negative numbers to avoid "order: 1

#productList{
  order: -1;
}
#productList .sold-out {
  order: 0;
}

To show two product rows in mobile, just add another 1fr to the grid-template-columns. Might have to adjust your width in the process, so be aware of that. 

 

Hope that helps!

Link to comment
  • 6 months later...
  • 1 month later...
  • 5 months later...
On 12/19/2020 at 3:37 PM, bangank36 said:

Hope this helps you and other people with same template, could you tell us your template?

#productList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
#productList .product {
  width: 100%;
}
#productList .sold-out {
  order: 2;
}
@media only screen and (max-width: 768px) {
  #productList {
    display: grid;
    grid-template-columns: 1fr;
  }
  #productList .product {
    width: 100%;
  }
}

 

Hi! This works great - but is there a way to sort by date sold? The order seems random at the moment.

Thanks 🙂

Link to comment
5 hours ago, ali_b said:

but is there a way to sort by date sold? The order seems random at the moment.

Unfortunately no. The sorting happens on the backend. By the time it gets to the browser it's too late. Also SS doesn't provide a date as part of the info in the product listing in the browser.

The order you are seeing should be the order the items appear in the editing interface. Keeping in mind that you are manipulating the product list with CSS so it appears more random than it is.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
18 hours ago, creedon said:

Unfortunately no. The sorting happens on the backend. By the time it gets to the browser it's too late. Also SS doesn't provide a date as part of the info in the product listing in the browser.

The order you are seeing should be the order the items appear in the editing interface. Keeping in mind that you are manipulating the product list with CSS so it appears more random than it is.

Ah, OK no worries. thanks for getting back to me 🙂

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...