home | sitemap

Shop-module 

De shop-module kent verschillende pagina's:

NB: bekijk de broncode van de html van de verschillende pagina's voor een compleet overzicht én inzicht van gebruikte ID's en classnames.

Naast bovenstaande pagina's bestaan er nog twee pagina's die gewone pagina's zijn die zelf bij de shop-instellingen kunnen worden opgegeven, namelijk de pagina met Algemene Voorwaarden- en de Bedankt-pagina.

Algemeen

Als eigen templates worden gebruikt om pagina's weer te laten geven kan met

<pre><!-- TMPL_VAR NAME="xcms_dump" ESCAPE="HTML" --></pre>

een compleet overzicht van alle beschikbare variabelen incl. hun waarden worden weergegeven.

Productoverzicht

In de shop kunnen producten worden onderverdeeld in verschillende groepen. Van elke groep kan een overzicht van de producten worden getoond. Als er een kleine afbeelding is opgegeven, dan kan een bezoeker daar op klikken voor de detailpagina van een product.

De weergave van het productoverzicht kan indien gewenst via een eigen template vormgegeven worden.
Zet in de map van de vormgeving het bestand shop_list.html. De shop-module zal dit bestand automatisch herkennen en gebruiken.

Voorbeeld van een shop_list.html:

NB: let op de constructie <!-- TMPL_VAR NAME="form" -->. Deze voegt het begin in van een formulier per product. Aan het eind van een product dient het form-element zelf afgesloten te worden. Binnen het formulier dienen de knoppen naar meer informatie en bestellen opgenomen te worden (indien gewenst).

<!-- TMPL_LOOP NAME="products" -->
  <!-- TMPL_IF NAME="__first__" -->
    <!-- TMPL_IF NAME="group_title" --><h1 id="group_title"><!-- TMPL_VAR NAME="group_title" --></h1><!-- /TMPL_IF -->
    <!-- TMPL_IF NAME="group_descr" --><p id="group_descr"><!-- TMPL_VAR NAME="group_descr" --></p><!-- /TMPL_IF -->
  <!-- /TMPL_IF NAME="__first__" -->
  <!-- TMPL_VAR NAME="form" -->
  <table class="product" cellspacing="0">
    <tr>
      <td width="1%">
        <input class="proddetailsimage" type="image" name="details" src="/<!-- TMPL_VAR  NAME="prodimgsmall" -->" alt="" />
      </td>
      <td>
       <h2><!-- TMPL_VAR NAME="prodtitle" --></h2>
       <h3><!-- TMPL_VAR NAME="metaSubTitle" --></h3>
       <!-- p class="prodprice">€ <!-- TMPL_VAR NAME="price" --></p -->
       <p class="proddescr"><!-- TMPL_VAR NAME="proddesc" --></p>
       <input class="proddetailsbutton" type="submit" name="details" value="Meer informatie..." />
        <input class="prodorder" type="submit" name="voegtoe" value="Bestel" />
      </td>
    </tr>
    <tr>
      <td class="border" colspan="2"> </td>
    </tr>
  </table>
  </form>
<!-- TMPL_IF NAME="__last__" -->
  <!-- TMPL_IF NAME="paging_links" --><p>Pagina: <!-- TMPL_VAR NAME="paging_links" --></p><!-- /TMPL_IF -->
  <!-- /TMPL_IF NAME="__last__" -->
<!-- /TMPL_LOOP NAME="products" -->

Detailpagina product

Een detailpagina van een product toont een grote afbeelding met de lange omschrijving van het product incl. een prijsoverzicht (bij meerdere uitvoeringen.)

De weergave van de detailpagina kan indien gewenst via een eigen template vormgegeven worden.
Zet in de map van de vormgeving het bestand shop_detail.html. De shop-module zal dit bestand automatisch herkennen en gebruiken.

Voorbeeld van een shop_detail.html:

NB: let op de constructie <!-- TMPL_VAR NAME="form" -->. Deze voegt het begin in van een formulier per product. Aan het eind van een product dient het form-element zelf afgesloten te worden. Binnen het formulier dienen de knoppen terug naar overzicht en bestellen opgenomen te worden (indien gewenst).

<!-- TMPL_VAR NAME="form" -->
<table class="productdetails" cellspacing="0">
  <tr>
    <td width="1%">
      <img src="/<!-- TMPL_VAR NAME="prodimgsmall" -->" alt="" />
    </td>
    <td>
      <h2><!-- TMPL_VAR NAME="prodtitle" --></h2>
      <p class="prodmeta"><!-- TMPL_VAR NAME="metaDetails" --></p>
      <p class="prodprice">Prijs: € <!-- TMPL_VAR NAME="price" --></p>
    </td>
    <td style="width:20%;vertical-align:middle;text-align:center">
      <input class="proddetailsorderimage" type="image" name="voegtoe"  src="/css/website/gfx/bestellen.gif" alt="" />
    </td>
  </tr>
  <tr>
    <td colspan="3" class="border">
      <p class="proddescr"><!-- TMPL_VAR NAME="proddesclarge" --></p>
      <input class="proddetailsorder" type="submit" name="voegtoe" value="Bestellen" />
      <input class="proddetailsback" type="submit" name="back" value="Terug naar de catalogus" />
    </td>
  </tr>
</table>
</form>

Winkelwagentje

Bij elk product staat een knop om het product te bestellen of direct naar het winkelwagentje te gaan. In het winkelwagentje kan men de bestelling nog aanpassen (aantal producten en/of uitvoering) en naar de bestelpagina gaan.
Het winkelwagentje kan ook direct worden opgeroepen via de url cgi/shop.cgi?site=mijnwebsite;toon=1, bijvoorbeeld te gebruiken op elke pagina van de website.

De weergave van het winkelwagentje (waarin de klant het aantal kan aanpassen, producten kan verwijderen) kan niet worden beinvloed. Via CSS kan wel de opmaak worden geregeld.

De inhoud van het winkelwagentje kan wel worden getoond:

Aantal producten/totaal bedrag

Om op elke pagina van de website het aantal producten in het winkelwagentje en/of het totaalbedrag te tonen dient gebruikt te worden gemaakt van javascript. De shopmodule zet namelijk twee cookies:

Zo'n waarde kan bijvoorbeeld als volgt in de html worden getoond:

<p>Totaal aantal producten: <script type="text/javascript">document.write(getCookie("xcms_shop_count") || 0)</script></p>

Complete inhoud winkelwagentje

De complete inhoud van het winkelwagentje kan op shop-pagina's via de templates shop_list.html en shop_detail.html (of eigen templates) naar wens worden weergegeven. In de templates is de variabelen cart (array) en cart_total beschikbaar. Per product zal alle gegevens beschikbaar en de variabele num voor het aantal besteld.

Voorbeeld van de weergave van het winkelwagentje in een template:

<div class="shopping-cart">
  <div class="boxTitle">Winkelwagen</div>
    <div class="boxContents">
    <!-- TMPL_IF NAME="cart" -->
      <!-- TMPL_LOOP NAME="cart" -->
        <dl>
          <dt><a href="/<!-- TMPL_VAR NAME="seo_url" -->&conpag=<!-- TMPL_VAR NAME="conpag" -->"><!-- TMPL_VAR NAME="prodtitle" --></a></dt>
          <dd><!-- TMPL_VAR NAME="num" --> x</dd>
        </dl>
      <!-- /TMPL_LOOP NAME="cart" -->
    <!-- TMPL_ELSE -->
      <p>Uw winkelwagen is nog leeg.</p>
    <!-- /TMPL_IF NAME="cart" -->
    <p class="cart-subtotal"><span>Subtotaal:</span>€ <!-- TMPL_VAR NAME="cart_total" --></p> 
    <p class="checkoutlink"><a href="/cgi/shop.cgi?site=<!-- TMPL_VAR NAME="site" -->;toon=1;conpag=<!-- TMPL_VAR NAME="conpag" -->"><img src="/css/website/gfx/button_checkout2.gif" border="0" alt="" /></a>
    </p>
  </div>
</div>

Wensenlijst

De wensenlijst van een klant kan worden weergegeven onder het winkelmandje. De klant kan dan eenvoudig een product toevoegen aan het winkelmandje.

De opmaak van de wensenlijst kan ook zelf worden bepaald door deze op een eigen pagina met een eigen template weer te laten geven. Maak een template met de naam shop_wishlist.html bij de vormgeving en roep deze als volgt aan: /cgi/shop.cgi?site=<websitenaam>;wishlist=1

Bestellingenoverzicht

Het bestellingenoverzicht van een klant kan worden weergegeven onder het winkelmandje. De klant kan dan eenvoudig bestellingen raadplegen en eerder bestelde producten weer toevoegen aan het winkelmandje.

De opmaak van het bestellingenoverzicht kan ook zelf worden bepaald door deze op een eigen pagina met een eigen template weer te laten geven. Maak een template met de naam shop_orders.html bij de vormgeving en roep deze als volgt aan: /cgi/shop.cgi?site=<websitenaam>;orders=1

Klantgegevens

De gegevens van een klant worden (ook) weergegeven onder het winkelmandje incl. een linkje om de gegevens eventueel aan te passen.

De opmaak van de pagina met klantgegevens kan niet nader worden opgemaakt. De directe link naar deze pagina is: /cgi/shop.cgi?site=<websitenaam>;user=1

Bestelpagina

De bestelpagina toont het overzicht van de te plaatsen bestelling en het formulier voor de NAW-gegevens en keuze betaalmethode. Aangezien de bestelpagina relatief breed is vanwege de hoeveelheid getoonde en gevraagde informatie past deze pagina soms niet in elk layout. Om hierin te voorzien kan bij de shop-instellingen een aparte 'Order'-pagina worden ingesteld. Deze pagina kan dan door de vormgever van een breder layout worden voorzien.

De weergave van de bestelpagina kan niet (bijv. via een template) worden beinvloed. Via CSS kan wel de opmaak worden geregeld.