# Backends

hubble ist Backend agnostisch. Grundidee von hubble ist, dass alle online Shops prinzipiell gleich funktionieren. Egal ob Magento, Shopware, WooCommerce, usw. Das hubble Frontend bedient diese Grundfunktionalität und setzt dabei auf eine eigene Daten und Entitätenstruktur. So benötigt man nur noch einen Service der die Daten aus einem beliebigen Shop Framework in das hubble Format bringt.

Die hubble data API extrahiert Daten aus einem Shopbackend und stellt sie über einen Elastic Seach Index und einer Laravel Api dem Frontend zur Verfügung. Man kann jedoch auch ein Shopsystem direkt ansprechen und die Daten zu beziehen. Dafür muss man allerdings selbst zusätzlich das Mapping der Daten vornehmen. Für SW6 bietet hubble bereits eine Lösung der Direktanbindung an die Saleschannel Api an.

Arten der Anbindung an ein Backend:

# Unterschiedliche Shopsysteme, gleiche Funktionsaufrufe

Bei der Delegierung durch die Middleware an den Vuex Store gilt es zu beachten, dass im @hubblecommerce Modul je nach verwendetem Shopsystem unterschiedliche Vuex Store Module existieren. Um den jeweiligen Aufruf von Vuex Store Funktionen plattformunabhängig zu halten, werden immer die gleichen Funktionsaufrufe in den Vuex Store Modulen verwendet, ungeachtet des Backends. Folgender Mechanismus ermöglicht dies:

Das hubble Modul (~/modules/@hubblecommerce/hubble/module.js) wird bei Start der Applikation aufgerufen und anhand des, in der .env eingetragenen, API_TYPE werden die entsprechenden Shop spezifischen Dateien entweder aus dem Unterordner sw oder api registriert. Dadurch entfällt der Pfad Prefix für Shop spezifische Vuex Store Module, da es in der laufenden Applikation nur ein Store Modul mit dem jeweiligen Namen gibt.

Store Modul Verwendung
hubble/core/store/modApi.js gültig für alle Shopsysteme
hubble/core/store/api/modApiProduct.js gültig nur für den API Typ 'api' (hubble API)
hubble/core/store/sw/modApiProduct.js gültig nur für den API Typ 'sw'

Zum Aufruf von Store Modulen in Komponenten:

// ~/components/customer/LoginForm.vue (simplified)
...mapActions({
    logIn: 'modApiCustomer/logIn' // name of module === 'modApiCustomer', name of action === 'logIn'
})
1
2
3
4