tüit Logo

Webseite (Website)

Einführung Webseite

Im Modul Webseite können wir die Oberfläche von unserer ERPNext Installation aus öffentlicher Sicht verändern. Ein Merkmal von ERPNext ist, dass die Webseite und die eigene Software in welcher wir unserer Geschäftsprozesse erledigen ein und die selbe Sache sind, lediglich der erlaubte Zugang ist ein anderer.

Melden wir uns an einer ERPNext Seite an befinden wir uns auf der "Webseite" erst durch die Anmeldung mit unseren Zugangsdaten gelangen wir auf eine andere Ebene. Diese sind das eigene Konto und die Anmeldung am "Desk". Ermöglich wird das durch die Rechte- und Zugangsvergabe einzelner Benutzer.

Produkte Einstellungen (Products Settings)

Einleitung

Auf dieser Seite lassen sich einige Allgemeine Einstellungen für die Ansicht unserer Produkte auf der eigenen Webseite einstellen.

Die Einstellungen beziehen sich auf die Seite /all-products welche alle unsere gelisteten Artikel anzeigt.

Einstellungsmöglichkeiten auf dieser Seite

Startseite ist "Products"

Ist unser Hauptgeschäft der Vertrieb von Artikeln über unserer Webseite können wir einstellen, dass unser ERPNext zum "Shop" wird. Ein Besucher unserer Webseite landet dann direkt bei den Artikeln.

image-1619961094417.png

Verfügbarkeitsstatus anzeigen

Aktivieren wir dies ist der Button "In den Warenkorb legen" von unseren Lagerbeständen abhängig. Artikel die nicht vorrätig sind können dann nicht mehr in den Warenkorb gelegt werden.

Produktseite

Produkte pro Seite

Hier können wir die Anzahl der anzuzeigenden Produkte für eine Seite einstellen. Sind mehr als die Anzahl auf unserer Seite werden diese nicht angezeigt und können durch drücken eines "Weiter" Button gesehen werden.

image-1619961292674.png

Feldfilter aktivieren

Der Feldfilter bezieht sich auf die Felder welche im Artikel zu finden sind. Aktivieren wir dies können wir die Artikel anhand der Feldauswahl weiter eingrenzen. Ein Beispiel im folgenden Bild in gelb.

Attributfilter aktivieren

Ähnlich dem Feldfilter können wir einen Filter für die Attribute von Varianten anzeigen lassen. Im folgenden Bild in lila.

image-1619962155036.png

Varianten ausblenden

Aktivieren wir dies werden nur noch die Artikelvorlagen (Stammartikel angezeigt). Diese Einstellung kann nur vorgenommen werden, wenn keine Attributfilter eingestellt sind.

 

 

Webseiten-Einstellungen (Website-Settings)

Einleitung

Hier kann eingestellt werden wie das Erscheinungsbild unserer Webseite aussehen soll. Unter anderem kann hier das Logo, das Favicon und die Titel der Webseite angepasst werden.

Zielseite

Startseite

Hier können wir nur aus Vorgaben auswählen. Diese sind

  1. home
  2. login
  3. products
  4. blog
  5. about
  6. contact

Dies sind alle im System hinterlegte Standardseiten.

Titel-Präfix

image-1632047497352.png

Webseiten-Thema

Dies ist ein weiterer DocType über welchen ich die Grundfarben des Systems und vieles mehr einstellen kann.

image-1638204808744.png

Zum DocType Webseiten-Thema

Marke

Wir müssen auf die Größe in Pixeln der entsprechenden Dateien achten, damit diese auch richtig dargestellt werden!

frappe/erpnext schlägt vor eine height=100px zu verwenden.

Für das Logo:

<img src='/files/logo-file.png' style='max-height: 100px;'>

image-1599913204986.png

Banner

image-1632047142680.png

Fußzeile

Die Fußzeile setzt sich aus 

zusammen. Weiter kann eine Fußzeilenvorlage gewählt werden und die Fußzeilen-Anmeldung ausgeblendet werden.

DIe Fußzeilen-Anmeldung ist das Feld für Newsletter abonnieren:

image-1633959472287.png

 

Hier können wir ein Logo für die Fußzeile einfügen.

image-1631974296591.png

image-1631974312262.png

 

Adresse

image-1631974327364.png

 

Fußzeilen-Objekte

image-1631974540708.png

Pro Spalte können maximal 5 Zeilen verwendet werden. Weitere Zeilen werde in einer weiteren Spalte dargestellt.

image-1632048360559.png

Fußzeilenvorlage

Fußzeilen-ANmeldung ausblenden

Einbindungen

Anmelden deaktivieren

image-1619972565752.png

Aktiveren wir dieser Einstellung verhindert das selbständige Anmelden (Neues Konto erstellen) von Besuchern unseres Systems.

image-1619972502452.png

Der Button "Anmelden" kann über ein Webseiten-Thema bearbeitet werden.

 

Warenkorb-Einstellungen (Shopping Cart Settings)

Seite wurde verschoben/Umbennant. Hier geht's zur neuen Seite.

Einleitung

 

image-1619963197917.png

Warenkorb aktivieren

Ist es gewünscht, dass Besucher der Webseite selbst Warenkörbe zusammenstellen können kann dies hier aktiviert werden.

Einstellungen anzeigen

Preis anzeigen

Blendet den Artikelpreis ein oder aus.

image-1619963372199.png

Bestandsverfügbarkeit anzeigen

Schaltet die Sichtbarkeit der Verfügbarkeit ein oder aus:

image-1619963455571.png

Varianten aktivieren

Aktiveren wir diese Option können Stammartikel (Artikelvorlagen) sinnvoll auf der Webseite verwendet werden. Bei der Auswahl des Artikels folgt dann eine Abfrage der gewünschten Attribute:

image-1619963832473.gif

Schaltfläche Kontakt anzeigen

Aktiviert ein Feld welches ein Kontaktdialog öffnet:

image-1619964021052.gif

Wird das Formular im Dialog gesendet wird ein entsprechender Lead wird angelegt!

Bestandsmenge anzeigen

Aktivieren wir die Bestandsmenge wird nicht nur angezeigt Artikel auf Lager sind sonder auch genau wie viele (bezieht sich auf angegebene Lager)

image-1619964216851.png

Gutscheincode anwenden anzeigen

Artikel, die nicht auf Lager sind, können in den Warenkorb gelegt werden

Aktiviert die Möglichkeit Artikel in der Warenkorb zu legen welche nicht am Lager verfügbar sind

 

Webseiten-Diashow (Website Slideshow)

Einleitung

Dieser DocType kann für mehrere andere DocTypes im System verwendet werden. Er kommt beim erstellen der eigenen Webseite vor aber auch beim pflegen von Artikeln welche wir später auf unserer Webseite z.B. im Shop einsetzen können.

image-1619965001745.png

Im Artikel

Die Diashow kann im Artikel für die Darstellung von mehr als nur einem Bild verwendet werden.

https://handbuch.tueit.de/link/380#bkmrk-diaschau

 

Website Route Meta (Website Route Meta)

Einleitung

Portaleinstellungen (Portal Settings)

Einleitung

Auf dieser Seite können wir einstellen wie das Standard-Portal für z.B. einen Kunden mit Kunden-Login aussehen soll.

 

Homepage Bereich (Homepage Section)

Einleitung

Dieser DocType ist im Modul ein besonderer. Wir können es im DocType Homepage verknüpften.

Abschnitt beasiernd auf

Karten

image-1632044147131.png

Benutzerdefiniertes HTML

Abschnitssreihenfolge

 

Web-Formular (Web Form)

Einleitung

Ein mächtiges Feature von EPRNext ist das bereitstellen von Formularen für dritte auf unserem System. Es erlaubt uns die strukturierte und sichere Eingabe von Daten durch externe Anwender unseres ERPs. Web-Formulare können so eingestellt werden, dass sie von jedem Besucher unserer Seite befüllt werden können oder aber nur nach erfolgreichem Login. Die Formulare können somit Komplett öffentlich oder aber auch für interne Funktionen wie einen Uraubsantrag oder ähnliches verwendet werden.

Ein klassiches Web-Formular ist die Kontaktanfrage. Diese erstellt einen Doctype Lead.

image-1622444873952.png

 

Webformulare beziehen sich immer auf einen einzelnen DocType. Das Webformular ist eine Maske welches über diesen DocType gelegt wird und nur auf die Felder zugreift welche wir benötigt und dem Anwender bereit stellen wollen. Alle weiteren Felder sind nur nach Anmeldung auf der DocType Ebene zu sehen.

 

 

 

Weiterleitung auf neue Seite

frappe.web_form.handle_success = () => window.location = frappe.web_form.success_url

Beispiele

Leads per QR-Code sammeln

Das Webformular kann dazu verwendet werden um Lead-Informationen wie Firma, Telefon, E-Mail und die Info um welche Produkte es geht angefragt werden.

image-1633961805698.png

Webseite Sidebar (Website Sidebar)

Einleitung

 

Webseiten-Thema (Website Theme)

Einleitung

Dies ist eine Konfigurationsseite für das aussehen unserer Webseite unserer ERPNext Instanz. Wir können hier Schriftarten, Farben uvm. konfigurieren. Die Seite ist Teil des Moduls Webseite.

Themenkonfiguration

Google Font

Hier können wir eine Schriftart eintragen welche Teil des Google Font Pakets ist. Tragen wir diese ein und speichern das Dokument wird der Font kompiliert und aktiviert.

image-1639408061684.png

 

Vorher Nacher
image-1639408139711.png

image-1639408177752.png

Im Anschluss ist die Schriftart auf unserer "Webseite" aktiv. Die Schriftart des Systems intern (Desk) wird dabei nicht beeinflusst.

Knopf Schatten

Aus

image-1632044939700.png

Ein

image-1632044993278.png

Primärfarbe

image-1632044647722.pngPrimärfarbe anlegen

image-1632044712504.png

Dies ändert auch die Farbe des Buttons zum Login.

Textfarbe

image-1632045304074.png

Hintergrundfarbe

image-1632045152782.png

 

Navigation

 

Homepage

Einleitung

Die "Homepage" ist eine fest integrierte Seite unser Systems welche nur bearbeitet werden kann, nicht aber kopiert oder neu erstellt wird.

Oft finden wir auf einer frisch installierten Seite folgenden Satz

This is an example website auto-generated from ERPNext

https://my_domain.frappe.cloud/app/homepage

Helden-Sektion

Homepage-Bereich

Tag-Line

Beschreibung

Heldenbild

Produkte

Seitenbausteine (Web Template)

Einleitung

Seitenbausteine sind vorgefertigte Elemente welche für Webseiten in ERPNext verwendet werden können. Dieser DocType ist Teil des frappe Frameworks und im Modul Webseite zu finden.

Bei der Installation werden schon eine vielzahl an Seitenbausteine bereitgestellt mit welchen wir schon einiges anstellen können um unserer Seite ein eigenes Aussehen zu geben.

Hier folgend sehen wir einige Beispiele und wie sie auf unserer Webseite später zu sehen sind.

Item Card Group

Diese Vorlage gibt die Möglichkeit bis zu 12 Karten auf unserer Webseite anzuzeigen welche direkt zu einem dahinterliegenden Artikel führen.

image-1632346402972.png

Auf der Webseite

image-1632346483974.png

Hero

image-1640469890474.png

Auf der Webseite

image-1640469866817.png

Hero Slider

folgt...

Auf der Webseite

Hero with Right Image

Auf der Webseite

image-1640469410536.png

Section with Cards

image-1632349069201.png

Section with CTA

 

image-1632347163483.png

Section with Collapsible Content

image-1632348304448.png

Section with Features

image-1632398752890.png

Section with Small CTA

image-1632347284884.png

Leider ohne Konfeti :(

Section with Tabs

image-1641131865210.png

Auf der Webseite

image-1641131850624.png

Split Section with Image

image-1640470150633.png

Das Feld Split Columns bestimmt dabei das Verhältnis von Bild zu Text

image-1640470284258.png

image-1640470353994.png

image-1640470415922.png

Auf der Webseite

image-1640470118505.png

Testimonial

image-1632351627836.png

E Commerce Settings

Einstellungen zu "Über uns" (About us settings)

Einleitung

Dies ist eine Standardseite die bei der Installation des System mitgegeben wird. Sie dient dazu details über unser Unternehmen und unsere Mitarbeiter auf unserer Webseiten-Ansicht zu präsentieren.

Der Pfad der Seite ist fest und immer myerpnext.tld/about

Die Seite teilt sich auf in einen Allgemeinen Bereich, einen Bereich Unternehmensgeschichte und einen bereich Teammitglieder.

Allgemeiner Bereich

Dieser Bereich ist der Eingangsbereich der Seite und ist mit einem Standardtext gefüllt sollten wir nichts anderes eintragen.

image-1640466685547.png

 

Unternehmensgeschichte

Der zweite Abschnitt kann für einen tabellarischen Lebenslauf der Unternehmung verwendet werden.

image-1640466783281.png

In der Webseiten-Ansicht:

image-1640466760474.png

Füllen wir diesen Abschnitt nicht ist er auf der Webseite nicht zu sehen

Teammitglieder

Hier können wir unser Team vorstellen. Wir können Name, Bild und Lebenslauf hinterlegen.

image-1640466885271.png

In der Webseiten-Ansicht:

image-1640466915473.png

 

Webseite (Web Page)

Einleitung

Header und Breadcrumbs

Breadcrumbs

Um auf unserer Webseite einen klickbaren Pfad zur Navigation anzuzeigen verwenden wir diesen Abschnitt.

Bsp:

[{ "label": _ ( "Modules"), "route": "module"}]

image-1641141579627.png

Hilfeartikel (Help Article)

Einleitung

Abschnitte

image-1644627179699.png

Bezeichnung
Kategorie

Hier verlinken wir auf eine Hilfekategorie

Veröffentlicht

Bestimmen ob der Hilfeartikel öffentlich auf unserer Webseite zu sehen ist.

Autor
Ebene

image-1644627304062.png

Inhalt

In diesem Editor-Feld verfassen wir den Inhalt unseres Hilfe Arikels. Es kann aus unterschiedlichen Schrift merkmalen gewählt werden, Listen, Tabellen, Bilder uvm. verwendet werden.

Likes

Zähler aller "Likes

Route
Besitzer

Einen Kommentar hinzufügen

Besonders an diesem DocType ist, dass wir hier Kommentare sehen welche über die Webseiten-Ansicht eingetragen wurden. Weiter wird der (Autor oder Besitzer oder beide) automatisch per Mail benachrichtigt wenn ein neuer Kommentar verfasst wurde.

image-1644628149064.pngKommentareingabe über die Webseite

image-1644628411069.pngE-Mail-Mitteilung über neuen Kommentar

 

Hilfekategorie (Help Category)

Einleitung

Die Hilfekategorie ist ein Sub-DocType der als Pflichtfeld im Hilfeartikel vorkommt. Die Kategorie ist Filtermerkmal und gleichzeit ein Register für die Hilfeartikel in der Webseitenansicht.

Kategoriename

Dient als Bezeichnung der Schaltfäche und Titel der Kategorie in der Webseitenansicht

image-1644630849897.png

Kategoriebeschreibung

Die Beschreibung dient als interner Vermerk und wird nicht auf der Webseitenansicht angezeigt.

Veröffentlicht

Bestimmen ob die Hilfekategorie öffentlich auf unserer Webseite zu sehen ist.

Artikel-Hilfe

Anzahl der Hilfeartikel in welchen die Kategorie verwendet wird.

Route

Hier bestimmen wir den Pfad unter welche die Kategorie auf unserer Webseite aufrufbar ist. Bsp: kb/automation entspricht https://phamos.eu/kb/automation

image-1644630411098.png