Custom JavaScript/CSS Manager für Shopware 6
von
PremSoft
Fügt dem Backend einen Container Manager für JavaScript/SCSS hinzu. Schnell und einfach eigenes CSS und JavaScript schreiben und in den Storefront kompilieren.
Kompatibel mit:
6.1.0-RC1 - 6.7.3.0
Inklusive:
Das Abonnement beginnt mit einem kostenlosen Probemonat, in dem das Abonnement jederzeit gekündigt werden kann.
Während des Abonnements sind alle veröffentlichten Updates kostenlos enthalten.
Falls du Fragen oder Probleme mit der Erweiterung hast, kannst du während des Abonnements jederzeit den Extension Partner um Hilfe bitten.
Beschreibung
Features
Über die Erweiterung
Fügt dem Backend einen Container Manager für eigenes JavaScript/CSS/SCSS hinzu.
Das Plugin bietet die folgenden Features:
- Anlegen von beliebig vielen Containern, die JavaScript und/oder CSS/SCSS enthalten
- SCSS Variablen und Mixins aus Themes und Plugins können verwendet werden
- Custom CSS und JavaScript werden in die Kompilierung des Themes injiziert. Dadurch entstehen keine Konflikte bei Abhängigkeiten von bspw jQuery und es gibt keine zusätzlichen Ressourcen Requests.
Nach der Installation finden Sie einen zusätzlichen Menüpunkt "Custom CSS/JS" unter "Einstellungen" in der Sidebar der Administration.
Wenn Sie das HTML der Templates Ihres Shops verändern oder erweitern wollen, sehen Sie bitte das Plugin Custom Template Manager
Details
- Verfügbar in: Englisch, Deutsch
- Zuletzt aktualisiert: 30. September 2025
- Veröffentlicht: 20. Februar 2020
- Version: 5.0.3
- Kategorie: Sonderfunktionen
Ressourcen
Bewertungen (42)
Danke
5.0
von Alexander Lembert
13. April 2024 16:28
...war das hilfreichste überhaupt!
5.0
Funktionalität
5.0
Bedienung
5.0
Dokumentation
5.0
Support
Question
5.0
von Mateusz Zmuda
13. März 2024 13:58
Do you also have error in admin panel?
mode-scss.js:1 Uncaught ReferenceError: ace is not defined
mode-scss.js:1 Uncaught ReferenceError: ace is not defined
5.0
Funktionalität
5.0
Bedienung
5.0
Dokumentation
5.0
Support
Liebe das Plugin, aber es erzeugt seit Version 6.5.8.4 einen Javascript-Fehler
5.0
von Christian Lübke
15. Februar 2024 17:33
Uncaught TypeError: Class extends value undefined is not a constructor or null
at 649 (all.js?1708014445:17:10525)
at o (all.js?1708014445:4:128)
at all.js?1708014445:17:14028
at o.O (all.js?1708014445:4:398)
at all.js?1708014445:17:14048
at r (all.js?1708014445:4:1212)
at all.js?1708014445:17:56
649: (t,e,i)=>{
var s = i(1635)
, n = i(8681)
, r = i(6182)
, a = i(4865)
, o = i(9684)
, l = i(4129);
class d extends s.Z {
async init() {
await async function() {
var t, e;
if (window.threeJs || (window.threeJs = await import(`${window.themeAssetsPublicPath}js/three-js/build/three.module.min.js`)),
window.threeJsAddons || (window.threeJsAddons = {}),
null === (t = window.threeJsAddons) || void 0 === t || !t.OrbitControls) {
const {OrbitControls: t} = await import(`${window.themeAssetsPublicPath}js/three-js/examples/jsm/controls/OrbitControls.js`);
window.threeJsAddons.OrbitControls = t
}
if (null === (e = window.threeJsAddons) || void 0 === e || !e.GLTFLoader) {
const {GLTFLoader: t} = await import(`${window.themeAssetsPublicPath}js/three-js/examples/jsm/loaders/GLTFLoader.js`);
window.threeJsAddons.GLTFLoader = t
}
}();
const t = this.el.closest(".cms-spatial-viewer-container");
t.querySelector(".spatial-open-fullscreen-btn").addEventListener("click", this.openFullScreen.bind(this)),
t.querySelector(".spatial-close-fullscreen-btn").addEventListener("click", this.closeFullScreen.bind(this)),
this.$emitter || (this.$emitter = this.el.$emitter),
this.initViewer(!0)
}
closeFullScreen() {
var t, e;
null === (t = this.el.closest(".cms-spatial-viewer-container")) || void 0 === t || t.classList.remove("spatial-fullscreen-view"),
null === (e = this.el.closest("body")) || void 0 === e || e.classList.remove("spatial-viewer-remove-scroll-bars")
}
openFullScreen() {
var t, e;
null === (t = this.el.closest(".cms-spatial-viewer-container")) || void 0 === t || t.classList.add("spatial-fullscreen-view"),
null === (e = this.el.closest("body")) || void 0 === e || e.classList.add("spatial-viewer-remove-scroll-bars")
}
initViewer(t) {
var e, i, s, d, h;
(super.initViewer(t),
null === (e = this.renderer) || void 0 === e || e.setClearColor(16777215, 0),
null === (i = this.camera) || void 0 === i || i.position.set(0, .6, 1.2),
null === (s = this.camera) || void 0 === s || s.lookAt(0, 0, 0),
null === (d = this.spatialOrbitControlsUtil) || void 0 === d || d.dispose(),
this.camera && this.renderer && (this.spatialOrbitControlsUtil = new a.Z(this.camera,this.renderer.domElement)),
this.spatialMovementNoteUtil = new o.Z(this),
this.spatialCanvasSizeUpdateUtil = new n.Z(this),
null == this.spatialLightCompositionUtil || t) && (null === (h = this.spatialLightCompositionUtil) || void 0 === h || h.dispose(),
this.scene && (this.spatialLightCompositionUtil = new l.Z(this.scene)));
if ((null == this.spatialObjectLoaderUtil || t) && (this.spatialObjectLoaderUtil = new r.Z(this)),
null == this.model || t) {
var c;
const t = null === (c = this.el) || void 0 === c ? void 0 : c.dataset.spatialModelUrl;
if (null == t)
return;
this.spatialObjectLoaderUtil.loadSingleObjectByUrl(t, {
center: !0,
clampSize: !0,
clampMaxSize: {
x: 4 / 3,
y: 1,
z: 4 / 3
}
}).then((t=>{
var e, i, s;
this.model = t,
this.scene && this.scene.add(this.model),
null === (e = this.el) || void 0 === e || null === (i = e.closest(".cms-spatial-viewer-container")) || void 0 === i || null === (s = i.querySelector(".spatial-canvas-spinner")) || void 0 === s || s.classList.add("d-none"),
this.setReady(!0)
}
)).catch((()=>{
var t, e, i;
null === (t = this.el) || void 0 === t || null === (e = t.parentElement) || void 0 === e || null === (i = e.parentElement) || void 0 === i || i.classList.add("spatial-cms-canvas-disabled")
}
))
} else {
var u, p, v;
null === (u = this.el) || void 0 === u || null === (p = u.closest(".cms-spatial-viewer-container")) || void 0 === p || null === (v = p.querySelector(".spatial-canvas-spinner")) || void 0 === v || v.classList.add("d-none"),
this.setReady(!0)
}
super.startRendering()
}
preRender(t) {
var e, i;
null === (e = this.spatialCanvasSizeUpdateUtil) || void 0 === e || e.update(),
null === (i = this.spatialOrbitControlsUtil) || void 0 === i || i.update()
}
postRender(t) {}
}
window.PluginManager.register("SpatialCmsViewerPlugin", d, "[data-spatial-cms-viewer]")
}
at 649 (all.js?1708014445:17:10525)
at o (all.js?1708014445:4:128)
at all.js?1708014445:17:14028
at o.O (all.js?1708014445:4:398)
at all.js?1708014445:17:14048
at r (all.js?1708014445:4:1212)
at all.js?1708014445:17:56
649: (t,e,i)=>{
var s = i(1635)
, n = i(8681)
, r = i(6182)
, a = i(4865)
, o = i(9684)
, l = i(4129);
class d extends s.Z {
async init() {
await async function() {
var t, e;
if (window.threeJs || (window.threeJs = await import(`${window.themeAssetsPublicPath}js/three-js/build/three.module.min.js`)),
window.threeJsAddons || (window.threeJsAddons = {}),
null === (t = window.threeJsAddons) || void 0 === t || !t.OrbitControls) {
const {OrbitControls: t} = await import(`${window.themeAssetsPublicPath}js/three-js/examples/jsm/controls/OrbitControls.js`);
window.threeJsAddons.OrbitControls = t
}
if (null === (e = window.threeJsAddons) || void 0 === e || !e.GLTFLoader) {
const {GLTFLoader: t} = await import(`${window.themeAssetsPublicPath}js/three-js/examples/jsm/loaders/GLTFLoader.js`);
window.threeJsAddons.GLTFLoader = t
}
}();
const t = this.el.closest(".cms-spatial-viewer-container");
t.querySelector(".spatial-open-fullscreen-btn").addEventListener("click", this.openFullScreen.bind(this)),
t.querySelector(".spatial-close-fullscreen-btn").addEventListener("click", this.closeFullScreen.bind(this)),
this.$emitter || (this.$emitter = this.el.$emitter),
this.initViewer(!0)
}
closeFullScreen() {
var t, e;
null === (t = this.el.closest(".cms-spatial-viewer-container")) || void 0 === t || t.classList.remove("spatial-fullscreen-view"),
null === (e = this.el.closest("body")) || void 0 === e || e.classList.remove("spatial-viewer-remove-scroll-bars")
}
openFullScreen() {
var t, e;
null === (t = this.el.closest(".cms-spatial-viewer-container")) || void 0 === t || t.classList.add("spatial-fullscreen-view"),
null === (e = this.el.closest("body")) || void 0 === e || e.classList.add("spatial-viewer-remove-scroll-bars")
}
initViewer(t) {
var e, i, s, d, h;
(super.initViewer(t),
null === (e = this.renderer) || void 0 === e || e.setClearColor(16777215, 0),
null === (i = this.camera) || void 0 === i || i.position.set(0, .6, 1.2),
null === (s = this.camera) || void 0 === s || s.lookAt(0, 0, 0),
null === (d = this.spatialOrbitControlsUtil) || void 0 === d || d.dispose(),
this.camera && this.renderer && (this.spatialOrbitControlsUtil = new a.Z(this.camera,this.renderer.domElement)),
this.spatialMovementNoteUtil = new o.Z(this),
this.spatialCanvasSizeUpdateUtil = new n.Z(this),
null == this.spatialLightCompositionUtil || t) && (null === (h = this.spatialLightCompositionUtil) || void 0 === h || h.dispose(),
this.scene && (this.spatialLightCompositionUtil = new l.Z(this.scene)));
if ((null == this.spatialObjectLoaderUtil || t) && (this.spatialObjectLoaderUtil = new r.Z(this)),
null == this.model || t) {
var c;
const t = null === (c = this.el) || void 0 === c ? void 0 : c.dataset.spatialModelUrl;
if (null == t)
return;
this.spatialObjectLoaderUtil.loadSingleObjectByUrl(t, {
center: !0,
clampSize: !0,
clampMaxSize: {
x: 4 / 3,
y: 1,
z: 4 / 3
}
}).then((t=>{
var e, i, s;
this.model = t,
this.scene && this.scene.add(this.model),
null === (e = this.el) || void 0 === e || null === (i = e.closest(".cms-spatial-viewer-container")) || void 0 === i || null === (s = i.querySelector(".spatial-canvas-spinner")) || void 0 === s || s.classList.add("d-none"),
this.setReady(!0)
}
)).catch((()=>{
var t, e, i;
null === (t = this.el) || void 0 === t || null === (e = t.parentElement) || void 0 === e || null === (i = e.parentElement) || void 0 === i || i.classList.add("spatial-cms-canvas-disabled")
}
))
} else {
var u, p, v;
null === (u = this.el) || void 0 === u || null === (p = u.closest(".cms-spatial-viewer-container")) || void 0 === p || null === (v = p.querySelector(".spatial-canvas-spinner")) || void 0 === v || v.classList.add("d-none"),
this.setReady(!0)
}
super.startRendering()
}
preRender(t) {
var e, i;
null === (e = this.spatialCanvasSizeUpdateUtil) || void 0 === e || e.update(),
null === (i = this.spatialOrbitControlsUtil) || void 0 === i || i.update()
}
postRender(t) {}
}
window.PluginManager.register("SpatialCmsViewerPlugin", d, "[data-spatial-cms-viewer]")
}
5.0
Funktionalität
5.0
Bedienung
5.0
Dokumentation
5.0
Support
test
5.0
von p625885 User
8. Januar 2024 14:53
-
5.0
Funktionalität
5.0
Bedienung
5.0
Dokumentation
5.0
Support
Funktioniert leider nicht mehr unter 6.5.6.1
5.0
von Roman Herbig
2. November 2023 22:32
Ich nutze das Plugin sehr gerne. Unter der 6.5.6.1 erscheint das Menü zum Plugin nicht mehr unter dem linken Seitenmenü - das Custom Template Modul dagegen schon. Daher gerne ein Update nachschieben. Danke für die stetige Entwicklung!
5.0
Funktionalität
5.0
Bedienung
5.0
Dokumentation
5.0
Support
Absolut top!
5.0
von Michael
19. September 2023 18:44
Ein Must-Have in jeder Shopware-Installation ?
5.0
Funktionalität
5.0
Bedienung
5.0
Dokumentation
0.0
Support
Nützlich
5.0
von Impuls
3. August 2023 10:07
-
5.0
Funktionalität
5.0
Bedienung
5.0
Dokumentation
0.0
Support
Sehr nützliches Tool. Vielen Dank dafür!
5.0
von Marco Beckmann
2. November 2022 08:31
-
5.0
Funktionalität
5.0
Bedienung
5.0
Dokumentation
0.0
Support
Perfekt
5.0
von DK
27. September 2022 10:03
Tut was es soll und das ohne Fehler. Danke!!
5.0
Funktionalität
5.0
Bedienung
5.0
Dokumentation
0.0
Support
Macht was es soll
5.0
von Steffen Brüggemann
28. Juli 2022 11:41
Danke
5.0
Funktionalität
5.0
Bedienung
5.0
Dokumentation
5.0
Support
Über den Extension Partner
PremSoft
Partner Status
-
Shopware
Bronze Partner -
Shopware
Premium Extension Partner
Details
- Ø-Bewertung: 5
- Partner seit: 2015
- Erweiterungen: 33
- Zertifizierungen: Zertifizierungen
Support
- Land: Germany
- Spricht: Deutsch, Englisch
- Reaktionszeit: Sehr schnell
Shopware 6 zertifiziert
Dieser Extension Partner wurde von unserer Academy für Shopware 6 zertifiziert.