Produkte einer Kategorie

<< Click here to display Table of Contents >> Navigation: Wegweiser > Kategorien:

Produkte einer Kategorie

Inhalt

1 Produkte einer Kategorie anzeigen

2 Varianten-Produkte auf einer Kategorie anzeigen

3 Produkte direkt von der Kategorie bestellen

4 Bekleidungsmodul

5 Produkte direkt von der Kategorie auf die Merkliste legen

6 Kategorie-Produktteaser

7 Produkte einer Kategorie auf einer beliebigen Seite anzeigen

8 Produkte einer Kategorie per AJAX auf einer beliebigen Seite laden

9 Gesamtanzahl der Produkte einer Kategorie

1 Produkte einer Kategorie anzeigen

Die Produkte einer Kategorie werden standardmäßig auf der Produktübersichtsseite (ws_category.htm) innerhalb des Bereichs-Tag (Klammerung) CAT-Data dargestellt. Der Bereich CAT-Data wird automatisch entfernt, wenn auf einer Kategorie keine Produkte vorhanden sind.

Das Schleifen-Tag @PR-Data muss für die Anzeige der Produkte innerhalb von CAT-Data integriert werden und wird von WEBSALE V8s bei X Produkten genau X mal wiederholt. Innerhalb dieses Schleifen-Tags werden dann die Produktdaten dargestellt.

Schritt 1: Integration des Schleifen-Tags auf der Produktübersichtsseite (ws_category.htm)

Auf der Produktübersichtsseite (ws_category.htm) sollen der Name, ein Vorschaubild, die Kurzbeschreibung und der Preis des Produktes angezeigt werden.

{CAT-Data}
   ...
   {@PR-Data}
      {PR-Thumbnail}<img src="~PR-Thumbnail~" alt="~PR-Name_StripHtml">{/PR-Thumbnail}

      {PR-Name}~PR-Name~{/PR-Name}

      {PR-ShortDescr}~PR-ShortDescr~{/PR-ShortDescr}

      {PR-OrgPrice}statt ~PR-OrgPrice~ ~WS-Currency~ nur {/PR-OrgPrice}

      {PR-Price}~PR-Price~ ~WS-Currency~{/PR-Price}

   {/@PR-Data}
   ...
{/CAT-Data}

	Tipp:
	Standardmäßig stellt Ihnen WEBSALE V8s mit der Bereitstellung des Shops bereits einen fertigen Templatesatz zur Verfügung. In diesem Templatesatz ist bereits ein Template für die Anzeige der Produktübersichtsseite (ws_category.htm) enthalten. Der Dateiname dieses Templates ist auch schon korrekt in der ebenfalls bereitgestellten Shopkonfiguration shop.config eingetragen.

Referenz: CAT-Data

Referenz: PR-Data

Referenz: PR-Name

Referenz: PR-Name_StripHtml

Referenz: PR-OrgPrice

Referenz: PR-Price

Referenz: PR-ShortDescr

Referenz: PR-Thumbnail

2 Varianten-Produkte auf einer Kategorie anzeigen

Dieses Kapitel wird überarbeitet. Bei Fragen zu diesem Thema wenden Sie sich bitte an Ihren WEBSALE-Ansprechpartner

3 Produkte direkt von der Kategorie bestellen

Dieses Kapitel wird überarbeitet. Bei Fragen zu diesem Thema wenden Sie sich bitte an Ihren WEBSALE-Ansprechpartner

4 Bekleidungsmodul

Dieses Kapitel wird überarbeitet. Bei Fragen zu diesem Thema wenden Sie sich bitte an Ihren WEBSALE-Ansprechpartner

Wegweiser: Bekleidungsmodul

5. Produkte von der Kategorie auf die Merkliste legen

Dieses Kapitel wird überarbeitet. Bei Fragen zu diesem Thema wenden Sie sich bitte an Ihren WEBSALE-Ansprechpartner

6. Kategorie-Produktteaser

Dieses Kapitel wird überarbeitet. Bei Fragen zu diesem Thema wenden Sie sich bitte an Ihren WEBSALE-Ansprechpartner

7 Produkte einer Kategorie auf einer beliebigen Seite anzeigen

Mit WEBSALE V8s haben Sie die Möglichkeit, z. B. Produkte der Kategorie "Topseller" bereits auf der Shop-Startseite (ws_start.htm) anzuzeigen.

Innerhalb der Klammerung CAT-AdvData() können Sie in einer Schleife die Produktdaten auf einer beliebigen Seite anzeigen. Die Schleife wird so oft durchlaufen, wie Produkte in der Kategorie vorhanden sind oder wie viele Sie anzeigen möchten.

Eine Kategorie wie "Topseller" kann sehr viele Produkte beinhalten, die natürlich nicht alle auf der Startseite angezeigt werden sollen. Daher besteht die Möglichkeit, die Anzahl der Produkte festzulegen, die angezeigt werden sollen. Dabei werden standardmäßig immer die ersten Produkte einer Kategorie angezeigt. Daneben können die angezeigten Produkte der Kategorie auch per "Zufallsgenerator" bestimmt werden. Dies legen Sie mithilfe der CAT-AdvData()-Klammerung fest.

Beispiel:
Die ersten 10 Produkte der Kategorie "Topseller" (Kategorieindex 456789) sollen auf der Shop-Startseite (ws_start.htm) angezeigt werden.

{CAT-AdvData(456789,10)}

   Unsere ~CAT-Name~
   ~CAT-Descr~

    {@PR-Data}
      <a href="~PR-Link~">~PR-Name~</a>
    {/@PR-Data}

{/CAT-AdvData(456789,10)}

	Hinweis:
	Die CAT-AdvData()-Klammerung greift nur, wenn Produkte auf der gewünschten Kategorie vorhanden sind. Sind keine Produkte in der Kategorie hinterlegt, entfällt der komplette Bereich. Auch eine Anzeige des Kategorienamens innerhalb der Klammerung ist dann nicht möglich.

Referenz: CAT-AdvData()

Referenz: CAT-Descr

Referenz: CAT-Name

Referenz: PR-Data

Referenz: PR-Name

8 Produkte einer Kategorie per AJAX auf einer beliebigen Seite laden

Mit WEBSALE V8s haben Sie die Möglichkeit die Produkte einer Kategorie auf einer beliebigen Seite, z. B. der Shop-Startseite (ws_start.htm), im Shop über AJAX zu laden.

	Hinweis:
	Bitte beachten Sie, dass jedes Nachladen per AJAX wie ein Seitenaufruf, also wie z. B. ein Klick auf eine Kategorie gewertet wird und somit die Leistungseinheiten erhöht.

Schritt 1: Einbinden der WEBSALE JavaScript Bibliothek

Um die Produkte der gewünschten Kategorie auf einer beliebigen Seite, z. B. der Shop-Startseite (ws_start.htm), per AJAX zu laden werden die WEBSALE-Systembibliothek und ihre dazugehörige Designkomponente benötigt.

Überprüfen Sie, ob diese beiden Dateien bereits im Template eingebunden sind, auf der Sie die Produkte per AJAX nachladen möchten und fügen Sie diese gegebenenfalls im <head>-Bereich hinzu.

<head>
<script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-1.8.3.js"></script>
<script type="text/javascript" src="../<Ihr Verzeichnis>/ws-design-1.8.3.js"></script>
</head>

Wegweiser: WEBSALE JavaScript-Bibliothek

Schritt 2: Definieren des Produktbereiches

Legen Sie ein HTML-Element, z. B. <div>...</div>, auf Ihrem gewünschten Template (z. B. Shop-Startseite (ws_start.htm)) an und vergeben Sie eine ID. Innerhalb dieses HTML-Elementes werden später die Produkte Ihrer gewünschten Kategorie per AJAX geladen.

<div id="category_products">

....

</div>

Schritt 3: Anlegen eines neuen Templates für die Darstellung der Produkte

Um die Produkte der gewünschten Kategorie innerhalb der des HTML-Bereiches <div>...</div> z. B. auf der Shop-Startseite (ws_start.htm) zu laden, erstellen Sie bitte ein neues Template, z. B. incl_load_productlist.htm, und speichern Sie es in Ihrem Templateverzeichnis, z. B. benutzer/templates/translation

Erstellen Sie innerhalb dieses Templates innerhalb von <body> einen <WS-Ajax-"ID"> - Bereich, der die ID unseres HTML-Elementes als Suffix enthält. In unserem Beispiel lautet der Name des AJAX-Bereiches dann <WS-Ajax-category_products>.

Innerhalb dieses Bereiches setzen Sie jetzt die Schleife PR-Data und gestalten die Ansicht der Produkte nach Ihren Vorstellungen.

<body>

...

<WS-Ajax-category_products>
  {CAT-Data}

    {@PR-Data}

      ~PR-Name~
      ~PR-Descr~
      ~PR-Price~ ~WS-CurrencySymbol~

    {/@PR-Data}

  {/CAT-Data}
</WS-Ajax-category_products>

...
<body>

Referenz: CAT-Data

Referenz: PR-Data

Referenz: PR-Descr

Referenz: PR-Name

Referenz: PR-Price

Referenz: WS-CurrencySymbol

Referenz: WS-Ajax-"ID"

Schritt 4: JavaScript zum Laden der Kategorie

Nachdem Sie das Template incl_load_productlist.htm erstellt und gespeichert haben, bearbeiten Sie noch einmal das Templates (in unserem Beispiel die Shop-Startseite (ws_start.htm)), in dem die Produkte der gewünschten Kategorie per AJAX geladen werden sollen.

Fügen Sie in den zuvor erstellen HTML-Bereich mit der ID category_products das folgende JavaScript zum Laden der Produktdaten ein. Dieses Script enthält den Link zum Aufruf der gewünschten Kategorie und dem Template incl_load_productlist.htm.

Der Link kann durch das Anhängen verschiedener Parameter die Anzeige der Produkte beeinflussen. So können Sie zum Beispiel durch das Anhängen von &input_max_cat_products= die Anzahl und durch &input_product_sort= die Sortierung der Produkte festlegen.

<div id="category_products">

...

{WS-TplComment}{/WS-TplComment}

  <script type="text/javascript">
    $(document).ready(function() {
     ~WS-DisableAmpersandLinkEncoding~
     ws_AJAXloadTemplate("~CAT-Link(Ihr Kategorieindex)~&tpl=incl_load_productlist.htm", '~WS-Charset~', ws_AJAXloadProductStart, ws_AJAXloadProductError, 'ws_AJAXloadProductResponseSuccess()', 'ws_AJAXloadProductResponseError()');
     ~WS-EnableAmpersandLinkEncoding~
    });
  </script>

...

</div>

Referenz: CAT-Link()

Referenz: WS-DisableAmpersandLinkEncoding

Referenz: WS-EnableAmpersandLinkEncoding

Schritt 5: Hinzufügen der Funktionen in die WEBSALE-Designkomponente

Das oben genannte JavaScript beinhaltet Funktionen, die in die Designkomponente übernommen werden müssen.

Mit diesen Funktionen können Sie beispielsweise Ladecontainer oder Effekte definieren, z. B. ein langsames Einblenden der gewünschten Produkte.

Kopieren und speichern Sie den folgenden Inhalt in Ihrer Designkomponente:

	//////////////////////////////////////////////////////////////////////////////////////////
	//    Produkte einer Kategorie auf einer beliebigen Seite anzeigen     //
	//////////////////////////////////////////////////////////////////////////////////////////
	
	// Diese Funktion wird aufgerufen bevor die AJAX-Anfrage abgesetzt wird.
	// Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
	function ws_AJAXloadProductStart()
	{
	}
    
	// Diese Funktion wird aufgerufen wenn die AJAX-Kommunikation fehlschlug
	// Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler (z.B. wenn die Internetverbindung unterbrochen wurde) anzeigen
	function ws_AJAXloadProductError()
	{
	}

	// Diese Funktion wird aufgerufen wenn die Produkte geladen werden konnten
	// Mit dieser Funktion ist die Erfolgsmeldung realisierbar
	function ws_AJAXloadProductResponseSuccess()
	{
	}

	// Diese Funktion wird aufgerufen wenn keine Produkte geladen werden konnten
	// Mit dieser Funktion laesst sich eine Fehlermeldung anzeigen
	function ws_AJAXloadProductResponseError()
	{
	}

9 Gesamtanzahl der Produkte einer Kategorie

Auf der Produktübersichtsseite (ws_category.htm) kann die Anzahl der in der Kategorie befindlichen Produkte mit dem Tag PR-MaxPages angezeigt werden:

Beispiel:

Auf der Produktübersichtsseite (ws_category.htm) sollen der Name der Kategorie sowie die Anzahl der Produkte in der Kategorie angezeigt werden.

~CAT-Name~ (~PR-MaxPages~ Produkte)

Dies ergibt z. B. die Anzeige "Winterreithosen (17 Produkte)".

Referenz: PR-MaxPages