codefordummies 6 Share Posted October 23 Site URL: https://www.terroir-imports.com/products Hi, I would need your help finding a way to organize my categories in my shop online. My categories are: France Italy Spain Natural Organic I would want there to be some type of separation between the countries and the natural and organic option, so as to look something like: Canada France Italy Spain ---- Biodynamic Natural Organic Can you provide any help with this? Thanks 🙂 @tuanphan Link to post
codefordummies 6 Author Share Posted October 23 Hey @creedon, I saw you answered a similar question for someone in the forum, any chance you could help me with this? Thanks 🙂 Link to post
creedon 220 Share Posted October 23 I think we can adapt my code to your situation. The only thing it doesn't do is add the separator. We can get into that after we get the order right. Stand by... Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need. Link to post
creedon 220 Share Posted October 23 Using my magic table and plugging in your information we get... Category Default Order Reorder Group Reorder All 1 1 1 Biodynamic 2 5 2 Canada 3 2 1 France 4 3 1 Italy 5 4 1 Natural 6 7 2 Organic 7 8 2 Spain 8 5 1 Now you may notice something a little different here. I've added a Group Reorder column. We want to maintain the natural behaviour of alphabetic sorting but create two groupings. Non-organic and organic. We can create two groups 1 and 2. Add the following to Store Settings > Advanced > Page Header Code Injection. <style> /* reorder Store categories Brine template family */ /* desktop */ @media only screen and ( min-width: 641px ) { .ProductList-filter-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* this is where reordering takes place */ .ProductList-filter-list-item:nth-child( 2 ) { border-top: solid 2px black; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-top: 25px; } .ProductList-filter-list-item:nth-child( 3 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 4 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 5 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 6 ) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .ProductList-filter-list-item:nth-child( 7 ) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .ProductList-filter-list-item:nth-child( 8 ) { /* margin-bottom: 1em; */ -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } /* mobile */ @media only screen and ( max-width: 640px ) { .ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* this is where reordering takes place */ .ProductList-filter-list-item:nth-child( 2 ) { border-top: solid 2px black; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-top: 25px; } .ProductList-filter-list-item:nth-child( 3 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 4 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 5 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 6 ) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .ProductList-filter-list-item:nth-child( 7 ) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .ProductList-filter-list-item:nth-child( 8 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } </style> I've also added a border to separate the two groups. Let us know how it goes. Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need. Link to post
creedon 220 Share Posted October 23 4 hours ago, codefordummies said: I saw you answered a similar question for someone in the forum, any chance you could help me with this? As codefordummies mentions there is another thread that has variations on this technique. codefordummies 1 Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need. Link to post
codefordummies 6 Author Share Posted October 23 1 hour ago, creedon said: As codefordummies mentions there is another thread that has variations on this technique. @creedon thank you so so much for your help! This is exactly what I needed! creedon 1 Link to post
codefordummies 6 Author Share Posted October 24 Hey@creedon I have a follow up question. I tried using the same code for my french version of the website and for some reason it doesn't seem to work? I tried to rework the category numbers and such but it seems that some of these categories are linked in blocks (i.e. when I change one number, two different categories jump from the first group to the second). Any idea why this may be happening? https://www.terroir-imports.com/produits Thanks for your help! 🙂 Link to post
creedon 220 Share Posted October 24 Back to the magic table and plugging in your french information we get... Category Default Order Reorder Group Reorder All 1 1 1 Biodynamique 2 6 2 Biologique 3 7 2 Canada 4 2 1 Espagne 5 3 1 France 6 4 1 Italie 7 5 1 Nature 8 8 2 Which gives us the following. <style> /* reorder Store categories Brine template family */ /* desktop */ @media only screen and ( min-width: 641px ) { .ProductList-filter-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* this is where reordering takes place */ .ProductList-filter-list-item:nth-child( 2 ) { border-top: solid 2px black; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-top: 25px; } .ProductList-filter-list-item:nth-child( 3 ) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .ProductList-filter-list-item:nth-child( 4 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 5 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 6 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 7 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 8 ) { /* margin-bottom: 1em; */ -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } /* mobile */ @media only screen and ( max-width: 640px ) { .ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* this is where reordering takes place */ .ProductList-filter-list-item:nth-child( 2 ) { border-top: solid 2px black; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-top: 25px; } .ProductList-filter-list-item:nth-child( 3 ) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .ProductList-filter-list-item:nth-child( 4 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 5 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 6 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 7 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 8 ) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } </style> I hope I got the order right as I don't read french! 🙂 Let us know how it goes. Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need. Link to post
codefordummies 6 Author Share Posted October 24 3 minutes ago, creedon said: Back to the magic table and plugging in your french information we get... Category Default Order Reorder Group Reorder All 1 1 1 Biodynamique 2 6 2 Biologique 3 7 2 Canada 4 2 1 Espagne 5 3 1 France 6 4 1 Italie 7 5 1 Nature 8 8 2 Which gives us the following. <style> /* reorder Store categories Brine template family */ /* desktop */ @media only screen and ( min-width: 641px ) { .ProductList-filter-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* this is where reordering takes place */ .ProductList-filter-list-item:nth-child( 2 ) { border-top: solid 2px black; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-top: 25px; } .ProductList-filter-list-item:nth-child( 3 ) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .ProductList-filter-list-item:nth-child( 4 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 5 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 6 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 7 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 8 ) { /* margin-bottom: 1em; */ -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } /* mobile */ @media only screen and ( max-width: 640px ) { .ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* this is where reordering takes place */ .ProductList-filter-list-item:nth-child( 2 ) { border-top: solid 2px black; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-top: 25px; } .ProductList-filter-list-item:nth-child( 3 ) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .ProductList-filter-list-item:nth-child( 4 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 5 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 6 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 7 ) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .ProductList-filter-list-item:nth-child( 8 ) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } </style> I hope I got the order right as I don't read french! 🙂 Let us know how it goes. Everything is perfect! Thank you!!! 🙂 @creedon creedon 1 Link to post
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment