*
logo-layout-01
blockHeaderEditIcon
Layout-01
blockHeaderEditIcon

Anleitungen zum Layout Titan

Informationen

Das Kopieren der Layouts kann in jede Worldsoft-CMS-Website erfolgen. Die genauen Schritte sind in den nächsten Punkten aufgelistet.

Die Layouts sind optimiert in der Struktur und in Bezug auf die Darstellungen auf verschiedenen Geräten (responsive). Sie können Farben sowie andere Einstellungen einfach abändern. Wir raten jedoch davon ab, die Position der Makros zu ändern. Dies könnte zu Komplikationen führen. Lassen Sie also bitte die Position der Makros unverändert.

Einfügen von HTML und CSS Code

HTML Code für die Layouts einfügen (Beispiel-Erklärung):
Anleitungen

CSS Code für die Layouts einfügen:
Anleitungen

WBS Shop (Modul)

Wichtig Die Layouts werden nur richtig dargestellt, wenn auch in der WBS Artikel mit den nötigen Informationen vorhanden sind.

Grundeinstellungen / Anzeige-Einstellungen

Die Breite und Höhe der Artikel-Bilder werden hier definiert. Die optimale Einstellung für dieses Layout ist:

Breite der Bilder: 260
Höhe der Bilder: 340

Layouts & Shop-Texte

Hier werden die Layouts erstellt und dem richtigen Punkt zugewiesen.

Um ein neues Layout zu erstellen, gehen Sie zum Punkt "Ein neues Layout hinzufügen". Dort wählen Sie den Layout-Typ aus und vergeben einen Namen. Danach können Sie dieses Layout mit dem Editor bearbeiten.

Hauptkatalog-Layout

Artikelanzeige-Einstellungen:
Aktivieren Sie die Artikelliste durch das Häkchen. Die weiteren Einstellungen sind Ihnen überlassen. Sie können die Einstellungen auch einfach vom Layout übernehmen, wie auf dem Screenshot dargestellt.

Haupt-Artikelübersicht-Layout

Der HTML Code für die Artikelübersicht:

Code wurde erfolgreich kopiert!

<div class="produkte-box">
<div class="flaggen">#WSSHOP_ARTICLE_FLAGS[[{"widget":"text"}]];Article Flags#</div>

<div class="produkt-bild">#WSSHOP_ARTICLE_THUMBNAIL[[{"widget":"image"}]];Article Thumbnail#</div>

<div class="produkt-mehr">
<div class="box-overlay-icons"> <span class="icon">#WSSHOP_BTN_MORE{{37}}[[{"widget":"link"}]];More...#</span> <span class="icon02">#WSSHOP_BTN_ADD_TO_WISHLIST[[{"widget":"button"}]];Wishlist#</span><span class="icon03">#WSSHOP_BTN_ADD_TO_CART[[{"widget":"button"}]];Add to Cart#</span>
</div></div>

<div class="box-info">
<div class="produkt-titel">#WSSHOP_ARTICLE_TITLE[[{"widget":"text"}]];Article Title#</div>

<div class="produkt-preis">#WSSHOP_ARTICLE_PRICE[[{"widget":"text"}]];Article Price# #WSSHOP_ARTICLE_DISCOUNT_PRICE[[{"widget":"text"}]];Article Discount Price#</div>
</div>
</div>

Als letzten Schritt vergeben Sie für das Makro "More..." einen Platzhalter. Dazu machen Sie ein Doppelklick auf das Makro "More...". Bei der Label Optionen setzen Sie ein Häkchen und geben folgenden Text als Platzhalter ein: Detail

- Speichern durch den Button OK.

Hauptartikel-Detail-Layout

Der HTML Code für die Artikel-Detail-Layout:

Code wurde erfolgreich kopiert!

<div class="row">
<div class="col-md-6">
<div class="flaggen-detail">
#WSSHOP_ARTICLE_FLAGS[[{"widget":"text"}]];Article Flags#</div>
#WSSHOP_ARTICLE_IMAGE[[{"widget":"image"}]];Article Image#</div>

<div class="col-md-6 box-detail-inf">
<div class="detail-titel">
#WSSHOP_ARTICLE_TITLE[[{"widget":"text"}]];Article Title#</div>

<div class="detail-preis">
#WSSHOP_ARTICLE_PRICE[[{"widget":"text"}]];Article Price# #WSSHOP_ARTICLE_DISCOUNT_PRICE[[{"widget":"text"}]];Article Discount Price# #WSSHOP_ARTICLE_DISCOUNT_PERCENTAGE[[{"widget":"text"}]];Article Discount Percentage#</div>

<div class="detail-kurzb">
#WSSHOP_ARTICLE_SHORT_DESCRIPTION[[{"widget":"text"}]];Article Short Description#</div>

<div class="detail-nr">
Art. Nr.: #WSSHOP_ARTICLE_NUMBER[[{"widget":"text"}]];Article Nr#</div>

<div class="detail-optionen">
#WSSHOP_ARTICLE_OPTIONS_SELECTOR[[{"widget":"select"}]];Article Option Selector#</div>

<div class="detail-stock">
#WSSHOP_ARTICLE_STOCK[[{"widget":"text"}]];Stock#</div>

<div class="detail-btn">
#WSSHOP_BTN_ADD_TO_CART[[{"widget":"button"}]];Add to Cart#</div>

<div class="detail-btn">
#WSSHOP_BTN_ADD_TO_WISHLIST[[{"widget":"button"}]];Wishlist#</div>
</div>
</div>

<div class="row">
<div class="detail-langb">
#WSSHOP_ARTICLE_LONG_DESCRIPTION[[{"widget":"text"}]];Article Long Description#</div>
</div>


<div class="row" style="margin-top:45px;"> 
#WSSHOP_ARTICLE_ALSOPURCHASED[[{"widget":"list"}]];Also Purchased#</div>

Haupt-"Auch gekauft"-Layout

Der HTML Code für Auch gekauft Layout:

Code wurde erfolgreich kopiert!

<div class="produkte-box">
<div class="flaggen">#WSSHOP_ARTICLE_FLAGS[[{"widget":"text"}]];Article Flags#</div>

<div class="produkt-bild">#WSSHOP_ARTICLE_THUMBNAIL[[{"widget":"image"}]];Article Thumbnail#</div>

<div class="produkt-mehr">
<div class="box-overlay-icons"> <span class="icon">#WSSHOP_BTN_MORE{{37}}[[{"widget":"link"}]];More...#</span> <span class="icon02">#WSSHOP_BTN_ADD_TO_WISHLIST[[{"widget":"button"}]];Wishlist#</span><span class="icon03">#WSSHOP_BTN_ADD_TO_CART[[{"widget":"button"}]];Add to Cart#</span>
</div></div>

<div class="box-info">
<div class="produkt-titel">#WSSHOP_ARTICLE_TITLE[[{"widget":"text"}]];Article Title#</div>

<div class="produkt-preis">#WSSHOP_ARTICLE_PRICE[[{"widget":"text"}]];Article Price# #WSSHOP_ARTICLE_DISCOUNT_PRICE[[{"widget":"text"}]];Article Discount Price#</div>
</div>
</div>

Haupt-Bestseller-Layout

Der HTML Code für Haupt-Bestseller-Layout:

Code wurde erfolgreich kopiert!

<div class="produkte-box">
<div class="flaggen">#WSSHOP_ARTICLE_FLAGS[[{"widget":"text"}]];Article Flags#</div>

<div class="produkt-bild">#WSSHOP_ARTICLE_THUMBNAIL[[{"widget":"image"}]];Article Thumbnail#</div>

<div class="produkt-mehr">
<div class="box-overlay-icons"> <span class="icon">#WSSHOP_BTN_MORE{{37}}[[{"widget":"link"}]];More...#</span> <span class="icon02">#WSSHOP_BTN_ADD_TO_WISHLIST[[{"widget":"button"}]];Wishlist#</span><span class="icon03">#WSSHOP_BTN_ADD_TO_CART[[{"widget":"button"}]];Add to Cart#</span>
</div></div>

<div class="box-info">
<div class="produkt-titel">#WSSHOP_ARTICLE_TITLE[[{"widget":"text"}]];Article Title#</div>

<div class="produkt-preis">#WSSHOP_ARTICLE_PRICE[[{"widget":"text"}]];Article Price# #WSSHOP_ARTICLE_DISCOUNT_PRICE[[{"widget":"text"}]];Article Discount Price#</div>
</div>
</div>

Layout für "Ähnliche Artikel"

Der HTML Code für ähnliche Artikel:

Code wurde erfolgreich kopiert!

<div class="produkte-box">
<div class="flaggen">#WSSHOP_ARTICLE_FLAGS[[{"widget":"text"}]];Article Flags#</div>

<div class="produkt-bild">#WSSHOP_ARTICLE_THUMBNAIL[[{"widget":"image"}]];Article Thumbnail#</div>

<div class="produkt-mehr">
<div class="box-overlay-icons"> <span class="icon">#WSSHOP_BTN_MORE{{37}}[[{"widget":"link"}]];More...#</span> <span class="icon02">#WSSHOP_BTN_ADD_TO_WISHLIST[[{"widget":"button"}]];Wishlist#</span><span class="icon03">#WSSHOP_BTN_ADD_TO_CART[[{"widget":"button"}]];Add to Cart#</span>
</div></div>

<div class="box-info">
<div class="produkt-titel">#WSSHOP_ARTICLE_TITLE[[{"widget":"text"}]];Article Title#</div>

<div class="produkt-preis">#WSSHOP_ARTICLE_PRICE[[{"widget":"text"}]];Article Price# #WSSHOP_ARTICLE_DISCOUNT_PRICE[[{"widget":"text"}]];Article Discount Price#</div>
</div>
</div>

Buttons

WBS Shop / Konfiguration / Grundeinstellungen / Buttons
Für die richtige Darstellung der Buttons sollte das Häkchen bei "Buttons personalisieren" gesetzt sein.

Footer
blockHeaderEditIcon

Copyright by Worldsoft AG 2016 / All rights reserved
Benutzername:
User-Login
Ihr E-Mail