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

  1. ${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

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