codefordummies Posted October 23, 2020 Share Posted October 23, 2020 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 comment
codefordummies Posted October 23, 2020 Author Share Posted October 23, 2020 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 comment
creedon Posted October 23, 2020 Share Posted October 23, 2020 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... Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
creedon Posted October 23, 2020 Share Posted October 23, 2020 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. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
creedon Posted October 23, 2020 Share Posted October 23, 2020 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 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
codefordummies Posted October 23, 2020 Author Share Posted October 23, 2020 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 comment
codefordummies Posted October 24, 2020 Author Share Posted October 24, 2020 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 comment
creedon Posted October 24, 2020 Share Posted October 24, 2020 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. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
codefordummies Posted October 24, 2020 Author Share Posted October 24, 2020 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 comment
codefordummies Posted March 4, 2021 Author Share Posted March 4, 2021 On 10/24/2020 at 6:53 PM, codefordummies said: Everything is perfect! Thank you!!! 🙂 @creedon @creedon I am trying to add "Austria" to the English code and "Autriche" into the French code but I am having a hard time understanding how to reconcile the magic table and the code. Any insight on this? Thanks so much 🙂 Link to comment
creedon Posted March 4, 2021 Share Posted March 4, 2021 Would the following be the new order for the french? Tous Nos Produits Autriche Canada Espagne France Italie Biodynamique Biologique Nature And would be the same for the english order but obviously using english? codefordummies 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
codefordummies Posted March 5, 2021 Author Share Posted March 5, 2021 On 3/4/2021 at 1:02 AM, creedon said: Would the following be the new order for the french? Tous Nos Produits Autriche Canada Espagne France Italie Biodynamique Biologique Nature And would be the same for the english order but obviously using english? @creedon Yes! Exactly! Link to comment
creedon Posted March 5, 2021 Share Posted March 5, 2021 (edited) @codefordummies Replace the previous french code with the following. <!-- begin reorder store categories SS Version : 7.0 Template : Brine template family the code is comprised of a number style tags. all of them are needed for the full effect to work --> <style> /* rulesets just for reordering categories */ .ProductList-filter-list-item:nth-child( 2 ) { /* Autriche */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 3 ) { /* Bio dynamique */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .ProductList-filter-list-item:nth-child( 4 ) { /* Biologique */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .ProductList-filter-list-item:nth-child( 5 ) { /* Canada */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 6 ) { /* Espagne */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 7 ) { /* France */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 8 ) { /* Grèce */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 9 ) { /* Italie */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 10 ) { /* Nature */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } </style> <style> /* rulesets just for styling the store categories keep in mind the styling applies to categories before they are reordered so use their natural order number */ .ProductList-filter-list-item:nth-child( 3 ) { border-top : solid 2px black; padding-top : 25px; } </style> <style> /* rulesets to define the base of this effect no user serviceable parts below */ .ProductList-filter-list { display : flex; flex-direction : column; } /* mobile */ @media only screen and ( max-width : 640px ) { .ProductList-filter-list { flex-direction : column; } } </style> <!-- end reorder store categories --> This is for a v7.0 site using the Brine template family. Normally I would have updated the relevant previous code post but in this case I've posted anew as the organization of this code is fairly different. Category Natural Order New Order Tous nos produits 1 1 Autriche 2 1 Bio dynamique 3 2 Biologique 4 2 Canada 5 1 Espagne 6 1 France 7 1 Grèce 8 1 Italie 9 1 Nature 10 2 Let us know how it goes. And don't worry folks! My Magic Table is alive and well! 😀 It's just getting a little upgrade. 😉 Edited March 17, 2021 by creedon Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
creedon Posted March 5, 2021 Share Posted March 5, 2021 I will get to the english tomorrow. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
creedon Posted March 5, 2021 Share Posted March 5, 2021 (edited) The english version. <!-- begin reorder store categories SS Version : 7.0 Template : Brine template family the code is comprised of a number style tags. all of them are needed for the full effect to work code generated on 03/17/2021 01:15:40 PM by my magic table < ? >, <http://www.tomsWeb.consulting/> --> <style> /* rulesets just for reordering categories */ .ProductList-filter-list-item:nth-child( 2 ) { /* Austria */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 3 ) { /* Biodynamic */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .ProductList-filter-list-item:nth-child( 4 ) { /* Canada */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 5 ) { /* France */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 6 ) { /* Greece */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 7 ) { /* Italy */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 8 ) { /* Natural */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .ProductList-filter-list-item:nth-child( 9 ) { /* Organic */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .ProductList-filter-list-item:nth-child( 10 ) { /* Spain */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } </style> <style> /* rulesets just for styling the store categories keep in mind the styling applies to categories before they are reordered so use their natural order number */ .ProductList-filter-list-item:nth-child( 3 ) { border-top : solid 2px black; padding-top : 25px; } </style> <style> /* rulesets to define the base of this effect no user serviceable parts below */ .ProductList-filter-list { display : flex; flex-direction : column; } /* mobile */ @media only screen and ( max-width : 640px ) { .ProductList-filter-list { flex-direction : column; } } </style> <!-- end reorder store categories --> Category Natural Order New Order All 1 1 Austria 2 1 Biodynamic 3 2 Canada 4 1 France 5 1 Greece 6 1 Italy 7 1 Natural 8 2 Organic 9 2 Spain 10 1 Let us know how it goes. Edited March 17, 2021 by creedon Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
codefordummies Posted March 6, 2021 Author Share Posted March 6, 2021 @creedon It worked great! Thanks again 😀 creedon 1 Link to comment
codefordummies Posted March 17, 2021 Author Share Posted March 17, 2021 On 3/5/2021 at 2:23 AM, creedon said: @codefordummies Replace the previous french code with the following. <!-- begin reorder store categories SS Version : 7.0 Template : Brine template family the code is comprised of three style tags. all three are needed for the full effect to work --> <style> /* rulesets just for reordering categories */ .ProductList-filter-list-item:nth-child( 2 ) { /* Autriche */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 3 ) { /* Biodynamique */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .ProductList-filter-list-item:nth-child( 4 ) { /* Biologique */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .ProductList-filter-list-item:nth-child( 5 ) { /* Canada */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 6 ) { /* Espagne */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 7 ) { /* France */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 8 ) { /* Italie */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } .ProductList-filter-list-item:nth-child( 9 ) { /* Nature */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } </style> <style> /* rulesets just for styling the store categories */ .ProductList-filter-list-item:nth-child( 3 ) { border-top : solid 2px black; padding-top : 25px; } </style> <style> /* rulesets to define the base of this effect no user serviceable parts below */ /* desktop */ @media only screen and ( min-width : 641px ) { .ProductList-filter-list { display : flex; flex-direction : column; } } /* mobile */ @media only screen and ( max-width : 640px ) { .ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list { display : flex; flex-direction : column; } } </style> <!-- end reorder store categories --> This is for a v7.0 site using the Brine template family. Normally I would have updated the relevant previous code post but in this case I've posted anew as the organization of this code is fairly different. Category Natural Order New Order Tous Nos Produits 1 1 Autriche 2 1 Biodynamique 3 2 Biologique 4 2 Canada 5 1 Espagne 6 1 France 7 1 Italie 8 1 Nature 9 2 And don't worry folks! My Magic Table is alive and well! 😀 It's just getting a little upgrade. 😉 Let us know how it goes. Hey @creedon I followed your magic table to add Greece but for some reason I get this order (FR version): Basically as you can see, "Nature" doesn't show under "biologique" and "Italie" ends up under it instead. This is the table I used: Natural Order New order Tous nos produits 1 1 Autriche 2 1 Bio dynamique 3 2 Biologique 4 2 Canada 5 1 Espagne 6 1 France 7 1 Grèce 8 1 Italie 9 1 Nature 10 2 This is the code I got by plugging in those values: I haven't tried my hand at the English version yet just because it didn't go too well with the first one LOL. Thanks 🙂 Link to comment
creedon Posted March 17, 2021 Share Posted March 17, 2021 I have updated my previous english and french code posts. A cursory look at your code things looked OK. Not sure what happened! Let us know how it goes. codefordummies 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
codefordummies Posted March 18, 2021 Author Share Posted March 18, 2021 9 hours ago, creedon said: I have updated my previous english and french code posts. A cursory look at your code things looked OK. Not sure what happened! Let us know how it goes. It worked! Yay! Thank you so so much! 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