jbpdx80 Posted December 17, 2020 Share Posted December 17, 2020 Hi @bangank36 wondering if you had any help for v7.0 sites on this? My site is leftcoastrevivals.com bangank36 1 Link to comment
bangank36 Posted December 17, 2020 Share Posted December 17, 2020 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 jbpdx80 1 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 SquarespaceIf 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
bangank36 Posted December 19, 2020 Share Posted December 19, 2020 (edited) 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 December 19, 2020 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 SquarespaceIf 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
bangank36 Posted December 19, 2020 Share Posted December 19, 2020 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 SquarespaceIf 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
jbpdx80 Posted December 19, 2020 Share Posted December 19, 2020 @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. Link to comment
bangank36 Posted December 19, 2020 Share Posted December 19, 2020 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%; } } jbpdx80 1 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 SquarespaceIf 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
jbpdx80 Posted December 19, 2020 Share Posted December 19, 2020 @bangank36 That's better on keeping padding between products. However, it still leaves a space in between the sold out and not sold out products. I left code in site so you can see on product page. Link to comment
Ellavator Posted December 28, 2020 Share Posted December 28, 2020 @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). Link to comment
tuanphan Posted December 30, 2020 Share Posted December 30, 2020 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
Ellavator Posted December 30, 2020 Share Posted December 30, 2020 @tuanphan, previously shared it. It's ellafriberg.com thank you. Link to comment
share Posted January 26, 2021 Share Posted January 26, 2021 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
tuanphan Posted January 31, 2021 Share Posted January 31, 2021 @share Can you share link to your site? 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
Guest TrinaWallace Posted March 18, 2021 Share Posted March 18, 2021 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
pineapplefibreart Posted October 14, 2021 Share Posted October 14, 2021 Worked for me too, thanks so much! I'm on 7.1 Link to comment
christinedevs Posted November 25, 2021 Share Posted November 25, 2021 Hi - Is there a way to move sold out items to the bottom within summary blocks? The site is www.badlandsvintage.com. My client wanted a different navigation so it only uses summary blocks. Thanks! Link to comment
ali_b Posted May 24 Share Posted May 24 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
creedon Posted May 24 Share Posted May 24 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
ali_b Posted May 25 Share Posted May 25 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 🙂 creedon 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment