Standaard krijg je op catalog.php (de template die de de ‘Shop’-pagina gebruikt, ofwel: de template voor de indexpagina van je shop) het volgende te zien:

1. Featured producten (3 stuks)
2. Producten in de aanbieding (3 stuks)
3. Bestsellers (3 stuks)
4. Nieuwe producten (3 stuks)

In deze tutorial gaan we dat allemaal vervangen met een handig overzicht van de categorieën die je in je webshop hebt, inclusief de categorie afbeelding. We slaan alle sub-categorieën in deze tutorial over.

Catalog.php

Open de catalog.php van je custom templates en verwijder de gehele inhoud. Kopieer daar de onderstaande code in:

<?php

if(shopp('catalog','has-categories'))
{
	$i = 0;

	while(shopp('catalog','categories'))
	{
		if(shopp('category','is-subcategory')) { continue; }
		?>
<div class="<?php echo ( ( $i % 2 ) == 0 ? ' alignleft' : ' alignright' ); ?>">
<div class="alignleft"><?php shopp('category','thumbnail'); ?></div>
<h3><a href="<?php shopp('category','url'); ?>"><?php shopp('category','name'); ?></a></h3>

			<?php shopp('category','description'); ?>

<a href="<?php shopp('category','url'); ?>"><strong>Bekijk alle producten &raquo;</strong></a>
</div>

		<?php
		if ( ( $i % 2 ) != 0 ) { echo '
<hr class="clear" />'; }
		$i++;
	}
}

?>

Uitleg code

Met if(shopp('catalog','has-categories')) geven we eigenlijk aan: “alleen als de catalog (webshop) categorieën heeft”.
Na die if gaan we een while-lus beginnen. Deze while-lus kun je vergelijken met ‘The Loop’ van WordPress, maar in dit geval alleen om door alle categorieën van de catalogus (webshop) te gaan. Alles wat in die while-lus staat wordt eenmaal per categorie uitgevoerd.

De volgende code zorgt ervoor dat de subcategorieën worden overgeslagen (wil je dus subcategorieën wel weergeven, dan moet je die regel weghalen):

<?php if(shopp('category','is-subcategory')) { continue; } ?>

Er wordt per categorie een blok (div) aangemaakt die de alignleft of alignright class mee krijgt. Dit hangt af van waar we zijn in het tellen ($i wordt tussen de if en while aangemaakt met een waarde van 0). Onderin de while-lus krijgt $i er 1 bij op (na de eerste keer de while doorlopen gaat $i van 0 naar 1, etc). De code die bekijkt of we bij een even of oneven getal zijn en dus welke class er dan mee gegeven moet worden staat op deze regel:

<div class="<?php echo ( ( $i % 2 ) == 0 ? ' alignleft' : ' alignright' ); ?>">

Op de regel daarna maken we een nieuw blok aan om de afbeelding van de categorie in weer te geven. Het blok krijgt een alignleft class mee, zodat de tekst er mooi naast komt te staan:

<div class="alignleft"><?php shopp('category','thumbnail'); ?></div>

Dan komen we bij de header (titel) van de categorie aan. Deze wordt ook gelinkt naar de juiste pagina. Op de regel daaronder geven we de omschrijving van de categorie weer:

<h3><a href="<?php shopp('category','url'); ?>"><?php shopp('category','name'); ?></a></h3>

<?php shopp('category','description'); ?>

Het laatste wat we nog toevoegen is een extra link die duidelijker aangeeft dat de klant daar kan doorklikken om naar de categorie te gaan:

<a href="<?php shopp('category','url'); ?>"><strong>Bekijk alle producten &raquo;</strong></a>

Onder elke twee categorieën wordt er een lijn (hr) weergegeven. Hierdoor weet je zeker dat de blokken van de categorieën visueel gezien ook zijn gescheiden van elkaar.

<?php if ( ( $i % 2 ) != 0 ) { echo '
<hr class="clear" />'; } ?>

Een voorbeeld hiervan uitgewerkt:

Deel Tweet Deel Deel