In der Template-Datei ws_product_comparison_vertical.htm finden Sie bereits eine Auswahl an Tags und deren Positionierung für eine vertikale Anzeige des Produktvergleichs. Im Falle einer vertikalen Positionierung werden die Produktvergleichsdaten dann per JavaScript in einer Tabelle zusammengebaut werden.

Wegweiser: Produktvergleich

Speichern Sie diese Datei in Ihrem Templateverzeichnis, z. B. benutzer/templates/translation, unter dem Namen, den Sie im Abschnitt <Templates> hinter dem Parameter ProductComparison = eingetragen haben.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>~FMSG-TitleFirma~</title>
<meta name="description" content="~FMSG-TitleFirma~ ~FMSG-MetaDescr~">
<meta name="keywords" content="~FMSG-MetaKeywords~">
<meta name="page-topic" content="~FMSG-MetaPageTopic~">
<meta name="copyright" content="~FMSG-MetaCopyright~">
<meta http-equiv="imagetoolbar" content="~FMSG-MetaImagetoolbar~">
<meta http-equiv="language" content="~FMSG-MetaLanguage~">
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="~URL-Template~">

<!--{WS-Config}
CatMouseOver = yes
PMPositionType = css_ul
{/WS-Config}-->
</head>

<body>
<h1>Inhaltsbereich des vertikalen Produktvergleichs für das Template ws_product_comparsion.htm</h1>
<p>Bitte kopieren Sie den Inhalt zwischen <body> und </body> in Ihr Template ws_product_comparison.htm.</p>

<!-- Datensektion: Hier stehen die Rohdaten, welche dann per JS in einer Tabelle zusammengebaut werden -->
<data>
{CAT-Data}
   Eigenschaften<df>
   Bild<df>
   Name<df>
   Preis<df>
   {PRC-ComparisonWithVariations}Varianten<df>{/PRC-ComparisonWithVariations}
   {@PRC-CompareField}~PRC-CompareFieldDescr~<df>{/@PRC-CompareField}
   Gefunden in<df>
    <df>
    <df><dr>

   {@PR-DATA}
      ~PR-Position~<df>
      {PR-Thumbnail}<a href="~PR-Link~"><img src="~PR-Thumbnail~" alt="~PR-Name~" border="0" align="left"></a>{/PR-Thumbnail}{!PR-Thumbnail}--{/!PR-Thumbnail}<df>
      ~PR-Name~<df>
      ~PR-Price~<df>
      {PRC-ComparisonWithVariations}{PRC-Variations}~PRC-Variations~{/PRC-Variations} <df>{/PRC-ComparisonWithVariations}
      {@PRC-CompareField}~PRC-CompareFieldValue~ <df>{/@PRC-CompareField}
      <a href="~Cat-Link~">~Cat-Name~</a><df>
      {!ST-ProductComparisonPosition_OK} {/!ST-ProductComparisonPosition_OK}
      {ST-ProductComparisonPosition_OK}Menge: <input type="text" size="4" name="~PR-Quantity_Input~" value="" /><br>
      <input type="submit" value="bestellen">{/ST-ProductComparisonPosition_OK}<df>
      <a href="javascript:ws_PRCdeletePRCElement('~PRC-DeleteLink~');">vom Produktvergleich löschen</a><df><dr>
   {/@PR-DATA}
{/CAT-Data}
</data>

<!-- Templatesektion: Dies wird im Layer angezeigt und an der entsprechenden Stelle die Tabelle mit den Produktdaten erzeugt -->
<template>
<style type="text/css">
   .prc-header {background-color: #AAAAAA}
   .prc-line1  {background-color: #EEEEEE}
   .prc-line2  {background-color: #DDDDDD}
   .prc-line3  {background-color: #CCCCCC}

   .PRC-TDHeader1     {background-color: #AAAAAA; font-weight: bold}
   .PRC-TDHeader2     {background-color: #CCCCCC; font-weight: bold}
   .PRC-TD1        {background-color: #DDDDDD;}
   .PRC-TD2        {background-color: #EEEEEE;}

</style>

<form action="~FORM-Product~">
   {WS-ProductComparison}
      {WS-ProductComparison_NumberOfProducts}
         Es werden ~WS-ProductComparison_NumberOfProducts~ Produkte miteinander verglichen.
      {/WS-ProductComparison_NumberOfProducts}
      {!WS-ProductComparison_NumberOfProducts}Der Produktvergleich ist leer.{/!WS-ProductComparison_NumberOfProducts}
   {/WS-ProductComparison}
    
   <!-- Hinweismeldungen für den Vergleich -->
   {MSG-ProductCompare_Notify}
      ~MSG-ProductCompare_Notify~
   {/MSG-ProductCompare_Notify}
    
   <!-- Tabelle zur Darstellung der Produkte, die miteinander verglichen werden -->
   {Cat-Data}
      <div id="PRC-RotateMe">
         #####REPLACE#####
      </div>
   {/Cat-Data}
</form> 
</template>

</body>
</html>