[PHP/TWIG] Array sorteren in kolommen

[ChiLLeR]

Ik heb een webshop met daarin een navigatie dropdown die de merken toont van de shop.
Dit werkt dmv twig template. (Lightspeed shop).

Op dit moment worden de merken Alfabetisch achter elkaar weergegeven, horizontaal. Ik wil echter dat er vertical gesorteerd wordt. Het aantal kolommen staat vast, 6. Het aantal merken is varial

Ik moet dus de array opknippen in stukjes van 6, uitrekenen hoeveel rijen er komen en vanuit daar per kolom sorteren om dan uiteindelijk weer alles achterelkaar te zetten zodat het juist in de HTML wordt weergegeven.

Huidig resultaat (Array met 13 merken):
A B C D E F
G H I J K L
M

Gewenst resultaat:
A D G J M
B E H K
C F I L

De huidige code is als volgt:

HTML:

                      {% for link in shop.links.brands %}
                      <div class="subnav-rows grid-cell">
                        <div class="grid">
                          <div class="grid-cell">
                            <a href="{{ link.url | url }}" class="sub-title">{{ link.title }}</a>
                          </div>
                        </div>
                      </div>
                      {% endfor %}

Huidige gedachtengang:
De array deel ik door 6 (aantal kolommen), dan weet ik hoeveel rijen er moeten komen. Op dit moment zijn er 55 merken, dat zou 9,16 rijen zijn, dus afronden naar 10. De 2e positie in de array is dus eigenlijk positie 11 uit de oorspronkelijke array. 3e positie is positie 21, 4e = 31, 5e = 41, 6e = 51.
7e = 2, 8e = 12 etc.

Hoe krijg ik dit voor elkaar in code?

Ik krijg het niet goed in mijn hoofd hoe ik dit moet aanpakken, kan iemand mij op de juiste weg helpen?

[DJMaze]

ChiLLeR schreef op vrijdag 15 juni 2018 @ 12:26:
Het aantal kolommen staat vast, 6

Is je website niet responsive dan?

[borft]

iets als:

code:

$brands = ['A','B','C','D','E','F','G','H'];
$columnCount = 6;
$rotatedBrands = [];
foreach ( $brands as $index => $brand ){
   $rotatedbrands[($index % $columnCount)][] = $brand;
}

@KabouterSuper dat is precies wat ik voorstel hierboven

[ Voor 13% gewijzigd door borft op 15-06-2018 16:18 ]

[KabouterSuper]

Je kunt met een wiskundige truc de sortering goed krijgen. Als je het totaal aantal elementen weet (13), en je weet de numerieke volgorde (V=1,2,3,...,13), dan kan je sorteren met de volgende functie (pseudo xls):

code:

=V+999*MOD(V-1,CEILING(E/6,1))

Met andere woorden, je berekent het aantal benodigde html-rijen (ceiling (13/6,1)=3) en neemt voor elk element-nummer de modulo (MOD(V-1,3)). Dit levert een reeks op tussen 0 en 2 (in dit geval 0,1,2,0,1,2,0,1,2,0,1,2,0). Deze vermenigvuldig je met een groot getal, en tel je op bij het oorspronkelijke element-nummer.
Dit is je nieuwe sorteringscriterium

In jouw voorbeeld

code:

A=1=>1
B=2=>1001
C=3=>2001
D=4=>4
E=5=>1004
..
..
L=12=>2010
M=13=>13

[ Voor 14% gewijzigd door KabouterSuper op 15-06-2018 13:26 . Reden: Voorbeeld erbij gezet en foute getallen gefixt ]

[DJMaze]

ChiLLeR schreef op vrijdag 15 juni 2018 @ 12:26:
Het aantal kolommen staat vast, 6

DJMaze schreef op vrijdag 15 juni 2018 @ 12:59:
Is je website niet responsive dan?

ChiLLeR schreef op vrijdag 15 juni 2018 @ 12:26:
Hoe krijg ik dit voor elkaar in code?

Heel simpel:

HTML:

<div class="subnav">
                      {% for link in shop.links.brands %}
                      <a href="{{ link.url | url }}">{{ link.title }}</a>

Cascading Stylesheet:

@media only screen and (min-width: 801px)
{
    .subnav {
        columns: 6 15vw;
    }
    .subnav a {
        display: block;
    }
}

Meer info: https://www.w3.org/TR/css-multicol-1/#propdef-columns
Can i use: https://caniuse.com/#feat=multicolumn

[ Voor 37% gewijzigd door DJMaze op 16-06-2018 19:31 ]

[ChiLLeR]

Thanks voor de antwoorden, mijn website is inderdaad wel responsive, daar had ik nog niet over nagedacht want door de sortering te veranderen, komt die lijst op andere devices compleet verkeerd uit...
Je kan het zien op de site www.storeofdaydreams.com en dan gaat het specifiek over de navigatie ‘Merken’. Ik zal het denk ik dus met CSS moeten oplossen dan in PHP de Array sorteren.

[DJMaze]

ChiLLeR schreef op zaterdag 16 juni 2018 @ 16:03:
Ik zal het denk ik dus met CSS moeten oplossen dan in PHP de Array sorteren.

Yep, werkt perfect met mijn antwoord. Net gecheckt.

[ChiLLeR]

DJMaze schreef op zaterdag 16 juni 2018 @ 19:29:
[...]

Yep, werkt perfect met mijn antwoord. Net gecheckt.

Het is al even geleden, maar ik vandaag weer eens een poging gedaan om het werkend te krijgen maar ik krijg het helaas niet voor elkaar... Ik heb de CSS toegevoegd als volgt:

Cascading Stylesheet:

@media only screen and (min-width: 801px)
{
    .subnav-col {
        columns: 6 15vw;
    }
    .subnav-cell {
        display: block;
      height: 50px; 
    }
   .subnav-cell:hover {
     background: black;
    }
}

Ik heb het idee dat het conflicteert met andere CSS code van het dropdown menu. heb de andere CSS eruit gehaald en de code is nu als volgt:

HTML:

<div class="subnav noDivider">
 <div class="subnav-col">
  <div class="subnav-cell"> 
                            <a href="http://styling-test.webshopapp.com/nl/brands/1-more-in-the-family/" class="sub-title">1+ More in the Family</a>
                  </div>
  </div>
</div>

Zie http://styling-test.webshopapp.com/nl/ en dan het 'Merken' menu.

[ Voor 30% gewijzigd door ChiLLeR op 28-12-2018 10:37 ]