Dit artikel is van toepassing op de Medium Javascript implementatie.

Als je Tweakwise via Javascript in je website hebt geïmplementeerd, dan wordt de sorteeroptie standaard linksboven je productlijst (level medium) weergegeven. Ook tonen we standaard een numerieke weergave van het aantal producten dat beschikbaar is in de geselecteerde categorie en/of filters.

Deze twee elementen horen bij elkaar en worden gegroepeerd weergegeven. Beide elementen zijn standaard zichtbaar, maar door middel van kleine aanpassingen in Javascript kan de zichtbaarheid of positie worden veranderd.

De sorteeroptie naar rechts verplaatsen

Gebruikelijk is om de sorteeroptie aan de rand van je productlijst te plaatsen, met daarbij de numerieke weergave van je selectie aan de binnenzijde. Indien je de sorteeroptie niet links (standaard) maar rechts uitgelijnd hebt, dan pas je enkele regels code aan in het css-bestand dat je al hebt ingeladen voor aangepaste styling.

Zoek in je css-bestand naar de volgende selector (of voeg deze toe) en zorg er voor dat -webkit-flex-direction: row-reverse; en flex-direction: row-reverse; aanwezig zijn. Hiermee verhuis je de sorteeroptie van links naar rechts.

 

/* Reverse positions of number of items and sorting */

*[id^="twn-starter-"] .twn-starter__products-header-column.sorting-summary {

  -webkit-flex-direction: row-reverse;

  flex-direction: row-reverse;

}

 

Om de uitlijning van de sorteeroptie en de numerieke weergave beter op elkaar aan te sluiten, voeg je volgende code toe aan je css:

*[id^="twn-starter-"] .twn-starter__products-header-column.sorting-summary > *:not(:last-child) {

  margin-right: 0;

  margin-left: 16px;

}

 

De numerieke weergave verbergen

Hoewel de numerieke weergave van het aantal producten dat beschikbaar is in de geselecteerde categorie en/of filters je klant kan helpen om verder te navigeren of filteren, kan het natuurlijk zijn dat je deze niet wilt tonen. Ook dit kun je aanpassen door een klein stukje css te plaatsen, ongeacht of de positie links of rechts is.

/* Hide number of items*/

*[id^="twn-starter-"] .twn-starter__navigation-summary {

  display: none;

}