Visuelles Beispiel

 

 

 

 
 

Allgemein

Dieses Modul ist im Shop-Modul-Paket zusammen mit dem Modul "Warenkorb" und dem Modul "Shop Bestellung" enthalten und dient zur Präsentation von Produkten, Dienstleistungen etc., die in einem Warenkorb abgelegt und schließlich bestellt werden können. Bezeichnung im Sitemanager: Shops. Synonyme Bezeichnung: Bestellmodul, Shop-Produkte.

 

Bestimmung

  • Katalogdarstellung, Online-Shop

 

Hinweis: Für das Modul sind zahlreiche Customization Points vorhanden. Detaillierte Informationen finden Sie im Support- und Partnerportal.

 
 

Der Bestellvorgang

  • Das gewünschte Produkt wird im Produktkatalog ausgewählt und in den Warenkorb gelegt.
  • Nach dem Wechsel zur Warenkorb-Seite oder bereits im Katalog können Änderungen erfolgen (Änderung der Bestellmenge, Löschen von Produkten).
  • Spätestens nach dem Wechsel auf die Bestell-Seite muss sich der Kunde einloggen, da sonst keine Bestellung möglich ist. Ist der Kunde noch nicht eingeloggt, kann eine Warnmeldung ausgegeben werden. Nach der Authentifizierung werden die Kundendaten geladen und können zur Kontrolle zusammen mit den ausgewählten Produkten angezeigt werden. Shop-Kunden müssen also immer als Benutzer in contentXXL registriert sein.
  • Wenn alle Informationen korrekt sind, kann der Bestellvorgang abgeschlossen werden.
  • Der Kunde erhält eine Bestätigung der Bestellung per Email an die in den Benutzerdaten angegebene Adresse, der Shop-Betreiber entsprechend eine Email mit der Bestellung.

 

Abb.: Der Bestellvorgang mit dem contentXXL Shop-Modul-Paket.

 

 

 
 

Das Basisdaten-Formular eines Shop-Objekts (Produkt)

Abb.: Das Basisdaten-Formular eines Produkts.

  • Produktnummer: Artikel- oder Bestellnummer des Produkts.
  • Produktname: Name des Artikels (wird intern zur Identifikation des Objekts verwendet). 
  • Vorschau: Der Text erscheint als Vorschau in der Listenansicht der Webseite (sofern vom Template unterstützt).
  • MwSt.-Satz (%):  Mehrwertsteuersatz, dem das Produkt unterliegt. Die Voreinstellung aus den Moduleinstellungen kann überschrieben werden.
  • Preis:  Produktpreis.
  • Währung: Zum Produktpreis gehörige Währung (Voreinstellung aus den Moduleinstellungen).
  • Vorschaubild: Auswahl / Ändern / Entfernen eines Vorschaubildes aus dem Ressourcen-Manager.
  • Detailbild: Auswahl / Ändern / Entfernen eines Detailbildes aus dem Ressourcen-Manager.
  • Benutzerdefinierte Felder: Die in diesem Screenshot abgebildeten exemplarischen Feldbenennungen Antrieb, Traglast, Hubhöhe wurden in den Einstellungen des dazugehörigen Moduls festgelegt, sind also benutzerspezifisch. Die hier getätigten Eingaben werden in den Datenbankfeldern usersetting1..5 gespeichert.
 
 

Spezielle Einstellungen

Folgende spezielle Einstellungen können getroffen werden:

  • Shopkonfiguration: Folgende Felder sind hier verfügbar:
    • MwSt.-Satz (%): Tragen Sie hier einen Mehrwertsteuersatz in % ein, der als Voreinstellung für die in diesem Modul angelegten Produkte verwendet werden soll. Die Voreinstellung kann in jedem Produkt überschrieben werden. Es können also in einem Modul Produkte mit z.B. 19% und 7% Mehrwertsteuersatz nebeneinander angelegt werden.
    • Währung: Tragen Sie hier die Währung ein, die als Voreinstellung für die in diesem Modul angelegten Produkte verwendet werden soll.
    • Benutzerdef. Feld (1..5): Die hier eingegebenenWerte erscheinen für zugehörige Objekte im Basisdaten-Formular als Label für zusätzliche Felder. Sie eignen sich, um Produktparameter wie Größe, Farbe, Gewicht auf einfache Weise (ohne Anpassung der Basisdaten-Masken) verfügbar zu machen.
  • Templates Einzelansicht: Wählen Sie hier die Einstellung "Kein Blättern in der Einzelansicht" sowie die Templates für die Einzelansicht,  Druckansicht und Inline-Edit aus, analog zum Artikel-Modul.
  • Templates Auch gekauft: Wählen Sie hier die Templates für den Kopf- und Fußbereich sowie für die Liste der Produkte, die von anderen Kunden zusammen mit dem ausgewählten Produkt gekauft wurden.
  • Templates Listenansicht: Wählen Sie hier die Einstellungen und Templates für die Listenansicht analog zum Artikel-Modul.
  • Blättern in der Vorschau: Wählen Sie hier die Templates für den Kopf- und Fußbereich der Liste sowie für den Fall, dass keine Daten vorhanden sind (analog zum Artikel-Modul).
  • Erweiterte Einstellungen: Wählen Sie hier die Einstellungen zu Rotationsmodus, Teasermodus (Angabe einer Zielseite und Zielmodul) sowie Featuremodus analog zum Artikel-Modul.

Abb.: Spezielle Einstellungen des Moduls "Shop Produkte".

 

Hinweis: Standardmäßig werden Seiten, die ein Modul "Shop Produkte" bereitstellen, nicht gecached, da es sich hier um personenbezogene Daten handelt. Wenn ein Caching dennoch gewünscht wird, kann das in den Portaleinstellungen unter "Modulspezifische Einstellung" durch Deselektieren des entsprechenden Klickfelds aktiviert werden.

 
 

Templates Einzelansicht: Detailansicht

<ul class="media-list">
    <li class="media">
        <img class="media-object pull-left" src='[imageurl]' alt=''>
       <div class="media-body">
         [editbutton]
         <h3>[articlename]</h3>
             <h5>[articlenumber]</h5>
            <label [mvif:price:neq:0]>[price] [currency]</label>
               <p class="margin-top10" [mvif:price:neq:0]>[tb:qty:text=[countitem] maxlength="2"] <A href="[AddToBasketLink]">[pfl:1:In Warenkorb][pfl:2:add to basket]</A> 
<a href='[backlink]' class="btn btn-default" role="button"><span class="glyphicon glyphicon-eye-close"></span></a>  <a href='[printlink]' class="btn btn-default" role="button"><span class="glyphicon glyphicon-print"></span></a></p>
               <p class="margin-top10" [mvif:price:eq:0]>
 <a href='[backlink]' class="btn btn-default" role="button"><span class="glyphicon glyphicon-eye-close"></span></a>  <a href='[printlink]' class="btn btn-default" role="button"><span class="glyphicon glyphicon-print"></span></a></p>
              <hr/>
             [description]
      </div>
   </li>
</ul>

Template mit Textbox zur Eingabe einer Menge. Eingabe von 0 löscht das Produkt aus dem Warenkorb.

 

Templates Einzelansicht: Druckansicht

<img [mvif:imageurl:neq:0] class="media-object" src='[imageurl]' alt=''/>
     <div>
     [editbutton]
     <h3>[articlename]</h3>
     <h5>[articlenumber]</h5>
    <label [mvif:price:neq:0]>[price] [currency]</label>
    <hr/>
    [description]
</div>

 

Templates Auch gekauft: Ansicht

<img [mvif:imageurl:neq:0] class="media-object" src='[imageurl]' alt=''/>
     <div>
     [editbutton]
     <h3>[articlename]</h3>
     <h5>[articlenumber]</h5>
    <label [mvif:price:neq:0]>[price] [currency]</label>
    <hr/>
    [description]
</div><div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src='ResourceImage.aspx?raid=[previewimage]' alt='[previewimage_alt]'/>
      <div class="caption" [mvif:articlenumber:neq:]>
         [editbutton]
        <h3>[articlename]</h3>
        <h5>[articlenumber]</h5>
        <label class="no-margin" [mvif:price:neq:0]>[price] [currency]</label>
         <hr/>
        <p [mvif:preview:neq:]>[preview] </p>
         <p  [mvif:price:neq:0]>
         <a href='[morelink]' class="btn btn-default" role="button"><span class="glyphicon glyphicon-eye-open"></span></a>
         <a  href='[AddToBasketLink]' class="btn btn-default" role="button"> <span class="glyphicon glyphicon-shopping-cart"></span>&nbsp; [localize:add_to_basket]&nbsp;<span class="badge">[countitem]</span></a>
         </p>
         <p [mvif:price:eq:0]>
           <a href='[morelink]' class="btn btn-default" role="button"><span class="glyphicon glyphicon-eye-open"></span>&nbsp; [localize:product_details]</a>
         </p>
      </div>
    </div>
</div>

 

Templates Listenansicht: Vorschau groß

<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src='ResourceImage.aspx?raid=[previewimage]' alt='[previewimage_alt]'/>
      <div class="caption" [mvif:articlenumber:neq:]>
         [editbutton]
        <h3>[articlename]</h3>
        <h5>[articlenumber]</h5>
        <label class="no-margin" [mvif:price:neq:0]>[price] [currency]</label>
         <hr/>
        <p [mvif:preview:neq:]>[preview] </p>
         <p  [mvif:price:neq:0]>
         <a href='[morelink]' class="btn btn-default" role="button"><span class="glyphicon glyphicon-eye-open"></span></a>
         <a  href='[AddToBasketLink]' class="btn btn-default" role="button"> <span class="glyphicon glyphicon-shopping-cart"></span>&nbsp; [localize:add_to_basket]&nbsp;<span class="badge">[countitem]</span></a>
         </p>
         <p [mvif:price:eq:0]>
           <a href='[morelink]' class="btn btn-default" role="button"><span class="glyphicon glyphicon-eye-open"></span>&nbsp; [localize:product_details]</a>
         </p>
      </div>
    </div>
</div>

Template mit Link zum Auswählen eines Produkts. Jeder Klick erhöht die Menge im Warenkorb um 1.

 

<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src='ResourceImage.aspx?raid=[previewimage]' alt='[previewimage_alt]'/>
      <div class="caption" [mvif:articlenumber:neq:]>
         [editbutton]
        <h3>[articlename]</h3>
        <h5>[articlenumber]</h5>
        <label class="no-margin" [mvif:price:neq:0]>[price] [currency]</label>
         <hr/>
        <p [mvif:preview:neq:]>[preview] </p>
        <p  [mvif:price:neq:0]>
           <a href='[morelink]' class="btn btn-default" role="button"><span class="glyphicon glyphicon-eye-open"></span></a>
           <INPUT id="additem[itemid]" style="WIDTH: 50px" maxLength="4" value="[countitem]" name="additem[itemid]">[lbn:addtobasket:text="In den Warenkorb" commandname="update"]        
        </p>
         <p [mvif:price:eq:0]>
           <a href='[morelink]' class="btn btn-default" role="button"><span class="glyphicon glyphicon-eye-open"></span>&nbsp; [localize:product_details]</a>
         </p>
      </div>
    </div>
</div>

Template mit Textbox zur Eingabe einer Menge. Jeder Button (bn, lbn, ibn, bnupdate) mit dem Attribut CommandName="Update" kann zum Absenden des Formulars verwendet werden.

 

Template: Blättern in der Vorschau - Fußbereich

<div class="row"><div class="col-sm-6 col-md-8">
  <ul class="pagination">
    <li><a href='[FirstPage]'>[localize:firstpage]</a></li>           
    <li><a href='[PreviousPage]'>&laquo;</a></li>
    <li><span>[CurrentPageNumber]</span></li>            
    <li><a href='[NextPage]'>&raquo;</a></li>
    <li><a href='[LastPage]'>[localize:lastpage]</a></li>
   </ul>
</div>

 

 
 

Platzhalter: Detailansicht

Platzhaltername

Typ

Platzhalterbeschreibung

[AddToBasketLink]

string

Url zum Hinzufügen des Produkts zum Warenkorb.

[Articlename]

string

Name des Produkts.

[Articlenumber]

string

Bestell- oder Produktnummer.

[Backlink]

string

Link zurück zur Listenansicht.

[CanEditInline]

string

Gibt an, ob der Benutzer den Inline-Editor verwenden darf.

[Countitem]

integer

Gibt an, welche Anzahl vom jeweiligen Produkt im Warenkorb liegt.

[Currency]

string

Währung.

[Description]

string

Textdaten (WYSIWYG).

[Detailimage]

integer

RAID (RessourceAssignID) des Detailbilds.

[Editbutton]

string

Schaltfläche, um das Produkt im Objekt-Edit-Manager zu bearbeiten.

[EditInlineButton]

string

Schaltfläche, die den Inline-Editor öffnet.

[EditInlineLink]

string

Url zum Inline-Editor.

[Imageurl]

string

Url des Vorschaubilds.

[Nextitemurl]

string

Url zum nächsten Produkt in der Liste (Blättern in der Einzelansicht muss aktiviert sein).

[Preview]

string

Vorschautext.

[Previewimage]

integer

RAID (RessourceAssignID) des Vorschaubilds.

[PreviewImageIsVisible]

string

Obsolet. Verwenden Sie [mvif:previewimage:neq:0].

[Previousitemurl]

string

Url zum vorherigen Artikel in der Liste (Blättern in der Einzelansicht muss aktiviert sein).

[Price]

decimal

Der Einzelpreis für dieses Produkt inklusive Mehrwertsteuer.

[Printlink]

string

Url zur Druckansicht.

[Vat] decimal Die in [price] enthaltene Mehrwertsteuer.
[Vatvalue] decimal Mehrwertsteuersatz für dieses Produkt in %.

Anmerkung:
Ihnen stehen hier zusätzlich die Felder [usersetting1] - [usersetting10] (string-Werte), [userint1]-[userint5] (integer-Werte), [userdate1] and [userdate2] (datetime-Werte), [userfloat1]-[userfloat5] (double-Werte), [userimage1]-[userimage5] (integer-Werte, RAIDs), [userimage1_alt]-[userimage5_alt] (string-Werte) zur Verfügung.

 

Platzhalter: Kopf- und Fußbereich

Platzhaltername

Typ

Platzhalterbeschreibung

[CanCreateInline]

string

Gibt an, ob der Benutzer den Inline-Editor zum Erzeugen eines neuen Objekts verwenden darf.

[CreateInlineButton]

string

Schaltfläche, die den Inline-Editor zum Erzeugen eines neuen Objekts öffnet.

[CreateInlineLink]

string

Url, die den Inline Editor zum Erzeugen eines neuen Objekts öffnet.

[CurrentPageNumber]

integer

Aktuelle Seitennummer – Paging.

[FirstPage]

string

Url zur ersten Seite – Paging.

[IsListView]

string

Gibt an, ob sich das Modul in der Listenansicht befindet.

[LastPage]

string

Url zur letzten Seite – Paging.

[ModulePreview]

string

Vorschautext des Moduls.

[ModulePreviewImage]

string

Vorschaubild des Moduls (RAID).

[ModuleImage_alt]

string

Textinformation zum Vorschaubild (Tooltip).

[NextPage]

string

Url zur nächsten Seite – Paging.

[PreviousPage]

string

Url zur vorherigen Seite Paging

[PrintLink]

string

Url zur Druckansicht.

[ReturnToListLink]

string

Url zurück zur Listenansicht.

[ReturnToOriginalListLink]

string

Url zurück zur Listenansicht (bei Paging der Einzelansicht).

[ShownFrom]

integer

Index des ersten Elements, das auf der aktuellen Seite angezeigt wird.

[ShownTo]

integer

Index des letzten Elements, das auf der aktuellen Seite angezeigt wird.

[TellAFrendLink]

string

Url zum Empfehlungs-Modul (Tell-a-Friend).

[TotalItemsCount]

integer

Anzahl aller Elemente – Paging.

[TotalPageCount]

integer

Anzahl aller Seiten – Paging.

 

Platzhalter: Listenansicht

Platzhaltername

Typ

Platzhalterbeschreibung

[AddToBasketLink]

string

Url zum Hinzufügen des Produkts zum Warenkorb.

[Articlename]

string

Name des Produkts.

[Articlenumber]

string

Bestell- oder Produktnummer.

[Countitem]

integer

Gibt an, welche Anzahl vom jeweiligen Produkt im Warenkorb liegt.

[CanEditInline]

string

Gibt an, ob der Benutzer den Inline-Editor verwenden darf.

[Countitem] integer Gibt an, welche Anzahl vom jeweiligen Produkt im Warenkorb liegt.

[Currency]

string

Währung.

[Description]

string

Textdaten (WYSIWYG).

[Editbutton]

string

Schaltfläche, um das Produkt im Objekt-Edit-Manager zu bearbeiten.

[EditInlineButton]

string

Schaltfläche, die den Inline-Editor öffnet.

[EditInlineLink]

string

Link zum Inline Editor

[Imageurl]

string

Url des Vorschaubilds.

[Itemid]

integer

DatenbankID des Produkts.

[Morelink]

string

Url zur Detailansicht des Produkts.

[Preview]

string

Vorschautext.

[Previewimage]

string

RAID (RessourceAssignID) des Vorschaubilds.

[Previewimage_alt]

string

Textinformation zum Vorschaubild (Tooltip).

[PreviewImageIsVisible]

string

Obsolet. Verwenden Sie [mvif:previewimage:neq:0].

[price]

decimal

Der Einzelpreis für dieses Produkt inklusive Mehrwertsteuer.

[vat] decimal Die in [price] enthaltene Mehrwertsteuer.
[vatvalue] decimal Mehrwertsteuersatz für dieses Produkt in %.

Anmerkung:
Ihnen stehen hier zusätzlich die Felder [usersetting1] - [usersetting10] (string-Werte), [userint1]-[userint5] (integer-Werte), [userdate1] and [userdate2] (datetime-Werte), [userfloat1]-[userfloat5] (double-Werte), [userimage1]-[userimage5] (integer-Werte, RAIDs), [userimage1_alt]-[userimage5_alt] (string-Werte) zur Verfügung.

 

 

 

 

Verknüpfte Produkte

Das Shop-Modul ist auch als Variante für verknüpfte Produkte verfügbar. Entsprechend Betriebsmodus und Templates werden hier dynamisch bestimmte Produkte in Listenform angezeigt. Es sind die gleichen Einstellungen verfügbar wie für Artikel.