Best Practice¶

Ordner¶

Struktur Local¶

Pfad	Beschreibung
/var/
/var/builder/
/var/builder/js	alle Javascript Dateien für das minimieren mit build:js
/var/builder/templates	Templates zum bauen der Html Dateien , lokale sicherung
/bin/
/web/
/web/js	minimiertes Javascript
/web/css	minimiertes CSS
/web/assets
readme.txt	Text Datei mit beschreibung der Commands und Pfade

Struktur Server¶

Alle Dateien werden in einem Template-Verzeichnis unter /var/alvine-platform/resource/template/<name des templates>/ einsortieren.
Die Unterstruktur in diesem Verzeichnis ist dann:

Pfad	Beschreibung
/etc/
/etc/cron/
/etc/route/
/etc/builder/	Konfig Json Dateien
/var/builder/html	fertig gerenderte HTML Dateien
/var/builder/html/detail	für die Detail Seiten
/var/builder/html/gallery	für die Gallery Seiten
/var/builder/templates	Templates zum bauen der Html Dateien

Die Lokal gebauten minimierten Dateien aus /web/js dann hier im /www/template/<name des templates>/ Verzeichnis auf dem Server einsortieren.

| Pfad | Beschreibung | |------------------------------------------|-------------------------------------------------------------------| | |js | minimiertes Javascript | |css | minimiertes CSS | |assets | |

Javascript¶

Alle Javascripte die im Projekt verwendet werden , legt man in das Template Verzeichnis /var/builder/js im lokalen Customer Projekt.

Die Reihenfolge ist bei Javascript entscheident, am einfachsten werden die Files Nummeriert

01_alvine.framework-1.11.0.js
02_jquery.alvinehost-0.1.0.min.js
03_jquery.alvinefavourites-0.4.2.min.js
...

Auf dem Server wird nur mit der zusammen gefassten Datei gearbeitet.

Minimieren¶

Mit dem alvine-platform Command build:js werden die Files zusammengefasst und minimiert.

build:js --source=/shopcloud.customers/application/symbionet/asset/filesystem/var/alvine-platform/template/symbionet/web/js/ --output=/shopcloud.customers/application/symbionet/asset/filesystem/www/template/symbionet/js/min.js --node-path=/node_modules/

die min.js Datei wird dann auf dem Server /www/template/<name des templates>/web/js/ abgelegt und im Grundtemplate referenziert.

<script type="text/javascript" src="/template/<name des templates>/web/js/min.js"></script>

Mögliche Fehler¶

Um fehler besser debuggen zu können , kann der Paramter --no-minify verwendet werden.

Die Scripte sind nicht immer so gebaut das man die so leicht in einer Datei ausliefern kann. Die meisten Funktionen sind in einer anonymen Funktion gekapselt, die mit einem Globalem Parameter aufgerufen wird. Wenn das mit "this" aufgerufen wird führt das zu fehler. Der globle Kontext muss "window" sein.

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/this


(function (global) {

})(window);

CSS¶

Alle CSS Dateien die im Projekt verwendet werden , legt man in das Template Verzeichnis /var/builder/css im Lokalen Customer Projekt. Die Reihenfolge ist bei CSS entscheident, am einfachsten werden die Files nummeriert.

Die min.css Datei wird dann auf dem Server /www/template/<name des templates>/web/css/ abgelegt und im Grundtemplate referenziert.

<link rel="stylesheet" type="text/css" href="/template/<name des templates>/web/css/min.css">

Route definieren¶

Templates erstellen¶

Grund Template¶

Javascript und Css minimieren¶

Alle Javascript und css Dateien müssen zusammen gefasst und minimiert werden.
Hierzu Js Dateien in ein Ordner kopieren und mit dem Command build:js zusammen fassen. die min.js dann im Template verlinken.
Das gleiche dann mit den CSS Dateien.

Platzhalter definieren¶

${maincontent}

Unter Templates¶

Gallery

${gallery}

DataSource¶

Für jeden Kunden werden angepasste Datasourcen erstellt.
Eine für das erstellen der Html Dateien und eine für das indexieren.

Der wesentliche unterschied bei der Datasource für das Indexieren ist die einschränkung der Datasource. Denn dieser muss auch archivierte und inaktive Produkte indexieren.

Konfigurationen¶

Für jedes Template werden Konfigurationen angelegt.

diese Konfiguration wird dann an den Builder übergeben.

build:create-fragment --config={CUSTOMISATIONPATH}resource/frontend/config/items.json

{
    "company": "1",
    "locale": "de",
    "datasource": "\\Alvine\\Application\\Platform\\Builder\\DataSource\\Commerce\\Catalog\\Category\\Tree",
    "delta-uuid": "60a98749-018d-461b-9d36-79303d02a5ae",
    "files": [
        {
            "template": "{CUSTOMISATIONPATH}resource/template/categoryfilter.html",
            "selector": "",
            "output": "{CUSTOMISATIONPATH}resource/html/filter/categoryfilter.html"
        }
    ]
}

Indexieren¶

Für jeden Kunden wird ein angepasster Indexer erstellt.

Konfigurationen¶

{
    "company": "1",
    "locale": "de",
    "datasource": "\\Customisation\\Builder\\DataSource\\Commerce\\ItemForIndex",
    "indexer": "\\Alvine\\Application\\Platform\\Builder\\Indexer\\Commerce\\Item",
    "delta-uuid": "5b4b135b-5d3b-4fc4-b148-9bbb051fb17c" 
}

SEO¶

Die Meta Daten werden auch über die Datasource erstellt. Je nachdem wie die Seite aufgerufen wird werden entsprechende HTML Files geladen. Hierzu wird ein Template mit den meta Tags angelegt. Für die Gallery kann man die Datasource \Alvine\Application\Platform\Builder\DataSource\Commerce\Catalog\Category verwenden. Diese liefert pro Kategorie ein Dataset.
Die Anzeige in der Gallery wird dann über das Plugin \Alvine\Application\Platform\Presenter\Page\Plugin\Commerce\Item\Catalog\Category gemacht.

Beispiel Template für die Meta Daten

<title data-replace="dataset:text | index:name | plaintext | suffix: online kaufen - Muster Firma GmbH" ></title>
<meta name="description" data-attributes="content dataset:text | index:description | plaintext" >

<meta property="og:site_name" content="">
<meta property="og:title" data-attributes="content dataset:text | index:name | plaintext | suffix: online kaufen - Muster Firma GmbH" >
<meta property="og:description" content="">
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:locale" content="de_DE">
<meta property="og:determiner" content="auto">

Beispiel Template für die Kategorie Texte

<div>
    <h4 data-replace="dataset:text | index:name" ></h4>
    <p data-replace="dataset:text | index:description"></p>
</div>

JSON

{
    "company": "1",
    "locale": "de",
    "datasource": "\\Alvine\\Application\\Platform\\Builder\\DataSource\\Commerce\\Catalog\\Category",
    "delta-uuid": "7f20f99e-8834-483e-9e31-fa0bbb2d3f08",
    "files": [
        {
            "template": "{CUSTOMISATIONPATH}templates/categorytext.html",
            "selector": "",
            "output": "{CUSTOMISATIONPATH}html/categorytext/{cid}_text.html"
        },
         {
            "template": "{CUSTOMISATIONPATH}templates/categorymeta.html",
            "selector": "",
            "output": "{CUSTOMISATIONPATH}html/categorymeta/{cid}_meta.html"
        }
    ]
}

Route¶

Detail¶

Die Standard ID der Reoute ist ALVINE-FRONTEND-SHOP-PRODUCTS-DETAILS

^\/(?!(console|admin|api|alvine)\/)([a-zA\/-Z0-9-_]*)~(?<iid>[0-9]+)$

/apeeea/sad/asd-2323

Gallery¶

Die Standard ID der Reoute ist ALVINE-FRONTEND-SHOP-PRODUCTS-GALLERY

<pattern><![CDATA[^\/shop([a-zA\/-Z0-9-_]*)\~(?<catalogingCategoryCID1>[0-9]+)*$]]></pattern>
<template><![CDATA[/shop/{uriPartString}~{cid}]]></template>

der Platzhalter {uriPartString} und `{cid} kommen aus der Kategorie.
Alles was in der URL auftauchen soll , muss über die Kategorie abgebildet werden.

Damen T-Shirt Hosen Kurze Hosen Herren T-Shirt Hosen Kurze Hosen

/shop/herren/hosen/kurze-hosen~12