Voor ik de code weergeef en deze uitleg moet je rekening houden met het volgende: om ervoor te zorgen dat alle producten eenmaal worden weergegeven moeten ze toegewezen zijn aan één categorie (dus niet meerdere). Op het moment dat je een product in meerdere categorieën hebt staan zal deze even vaak weergegeven worden als de hoeveelheid categorieën hij is toegewezen.

De code

<ul class="products">
<li class="row">
<ul>
<?php
if (shopp('catalog','has-categories')) :
  while (shopp('catalog','categories')) :
    if (shopp('category','hasproducts')) : while (shopp('category','products')) :
      if (shopp('category','row')): ?></ul>
<hr /></li>
<li class="row">
<ul><?php endif; ?>
<li class="product">
<div class="frame">
          <a href="<?php shopp('product','link'); ?>"><?php shopp('product','thumbnail'); ?></a>
<h3><a href="<?php shopp('product','link'); ?>"><?php shopp('product','name'); ?></a></h3>

                    <?php shopp('product','summary'); ?>
              </div>
</li>

<?php
        endwhile; endif; // shopp('category','hasproducts')
  endwhile; // shopp('catalog','categories')
endif; // shopp('catalog','has-categories')
?>
  </ul>
</li>
</ul>

Uitleg van de code

Net als de inhoud van de category pagina worden de producten in een ul geplaatst. De weergave is de zogenaamde ‘gridview’ en het aantal producten dat op 1 regel wordt weergegeven is in te stellen in je Shopp instellingen (Shopp -> Instellingen -> Presentatie).

Als eerste moeten we er zeker van zijn dat de catalogus wel categorieën heeft, dit doen we met if (shopp('catalog','has-categories')). Daar staat eigenlijk hetzelfde als “als de catalogus categorieën heeft, dan …”. Daarna gaan we met behulp van de while-loop door alle categorieën heen. Alles wat in die while-loop staat wordt eenmaal per categorie uitgevoerd.

De if (shopp('category','hasproducts')) zorgt ervoor dat de code – binnen die if – alleen wordt uitgevoerd als de huidige categorie, in de loop, producten heeft. De while-loop die meteen daarna komt (while (shopp('category','products'))) zorgt ervoor dat we alle producten van de huidige categorie doorlopen. Alles in die while-loop wordt eenmaal per product (in de huidige categorie) doorgelopen.

Om de gridview te krijgen hebben we de if nodig die ervoor zorgt dat het aantal kolommen – zoals in je Shopp instellingen is ingevuld – juist is:

<?php if (shopp('category','row')): ?></ul>
<hr /></li>
<li class="row">
<ul><?php endif; ?>

De code in die if wordt alleen uitgevoerd als we bij het aantal producten zijn die op 1 regel weergegeven moeten worden (standaard is overigens 3).

Het product

Per product geven we de thumbnail weer, inclusief link naar de productpagina. Dan de titel van het product (die ook gelinkt is) en daar onder de korte omschrijving.

Voorbeeld

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:

Om ze te vertalen zul je dus de custom templates aan moeten zetten (omdat anders de templates worden overschreven met een update) en dan allemaal vertalen naar het Nederlands. Om je hier wat tijd bij te besparen heb ik de bestanden vast voor je naar het Nederlands gegooid (kan niet garanderen dat het 100% klaar is, maar hoe dan ook: het scheelt je tijd ).

Als je de bestanden download hoef je dus alleen de custom templates nog maar te activeren, zipbestand uitpakken en de templates die daar in staan over de templates in de shopp map in je theme gooien. En klaar is klara

Als je Shopp activeert krijg je de ‘out-of-the-box’ templates te zien. Je kunt er niks aan veranderen? Fout, je kan juist alles aanpassen! Het enige dat je ervoor hoeft te doen is de custom templates activeren en de templates bewerken tot ze precies zijn zoals jij wil!

Custom templates activeren

Ga naar Shopp -> Settings -> Presentation (of Shopp -> Instellingen -> Presentatie) en klik op ‘Use custom templates’. Dan krijg je drie punten te zien die je moet aflopen:

• Maak een map aan, in je huidige theme, en noem deze ‘shopp’
• Geef de server schrijfrechten voor die map (of: geef de map een CHMOD van 0777)
• Ververs de instellingen pagina voor meer instructies

Nadat je de map hebt aangemaakt (moet dus hier staan: /wp-content/themes/jouw_theme/shopp – waarbij jouw_theme dus de map is van jouw huidige theme) en deze een CHMOD heeft van 0777 ga je terug naar de presentatie instellingen pagina van Shopp en ververs je ‘m.

Als de map gevonden is door Shopp (en schrijfbaar is) krijg je nu een button ‘Install Theme Templates’. Als je op die knop drukt worden alle custom templates van Shopp in die nieuwe shopp map gezet.
Nadat alle bestanden zijn gekopieerd krijg je een checkbox te zien om de custom templates ook daadwerkelijk te activeren.

De custom templates

Een overzicht van alle templates die in je shopp map worden gezet en waar ze voor zijn:

• account.php – de account pagina van ingelogde klanten
• cart.php – de winkelwagen
• catalog.php – de indexpagina van je webshop
• category.php – de template die gebruikt wordt voor als je een categorie bekijkt
• checkout.php – het afrekenen (nadat je in de winkelwagen op een betalingsmethode hebt geklikt)
• confirm.php – om de bestelling te bevestigen (wordt niet bij elke betalingsmethode gebruikt)
• errors.php – voor het weergeven van eventuele fouten in de procedure, of bij inloggen etc.
• login.php – inlogpagina voor klanten
• notification.html – notificatie die wordt verzonden via e-mail (voor als er een wijziging is gemaakt in de bestelling)
• order.html – de order die via email verzonden wordt na de bestelling (dus de factuur via e-mail – mits [receipt] in deze template staat)
• product.php – de template die gebruikt wordt als je een product aan het bekijken bent
• receipt.php – de inhoud van de factuur ([receipt] in de beide html-templates)
• shopp.css – het CSS bestand van de Shopp templates
• sidecart.php – de winkelwagen widget
• sideproduct.php – product widget
• summary.php – een overzicht van de bestelling (wordt ook boven checkout.php weergegeven)