Custom JavaScript/CSS Manager for Shopware 6
by
PremSoft
Container manager to easily add custom JavaScript and/or SCSS to the theme compilation. The fastest way to make CSS and/or JavaScript changes to the storefront.
Compatible with:
6.1.0-RC1 - 6.7.3.0
Includes:
The subscription starts with a free trial month during which it can be canceled at any time.
During the subscription all released updates are included for free
In case you have any questions or problems with your extension you can always ask the Extension Partner for help during the subscription.
Description
Features
About the Extension
This plugin features a backend container manager to easily add custom JavaScript and/or CSS/SCSS to the theme compilation.
The plugin offers the following features:
- Create unlimited containers of JavaScript and/or CSS/SCSS
- SCSS variables and mixins are inherited from themes and plugins and can be accessed
- JS/CSS is injected into theme compilation. This means no dependency conflicts or additional resource requests.
The module will be accessible in the administration by a new menu entry called "Custom CSS/JS" under "Settings" within the sidebar.
If you are looking for a way to alter the HTML of the templates in your shop please see the plugin Custom Template Manager
Details
- Available: English, German
- Latest update: 30 September 2025
- Publication date: 20 February 2020
- Version: 5.0.3
- Category: Special features
Resources
Reviews (42)
Danke
5.0
by Alexander Lembert
13 April 2024 16:28
...war das hilfreichste überhaupt!
5.0
Functionality
5.0
Usability
5.0
Documentation
5.0
Support
Question
5.0
by Mateusz Zmuda
13 March 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
Functionality
5.0
Usability
5.0
Documentation
5.0
Support
Liebe das Plugin, aber es erzeugt seit Version 6.5.8.4 einen Javascript-Fehler
5.0
by Christian Lübke
15 February 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
Functionality
5.0
Usability
5.0
Documentation
5.0
Support
test
5.0
by p625885 User
8 January 2024 14:53
-
5.0
Functionality
5.0
Usability
5.0
Documentation
5.0
Support
Funktioniert leider nicht mehr unter 6.5.6.1
5.0
by 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
Functionality
5.0
Usability
5.0
Documentation
5.0
Support
Absolut top!
5.0
by Michael
19 September 2023 18:44
Ein Must-Have in jeder Shopware-Installation ?
5.0
Functionality
5.0
Usability
5.0
Documentation
0.0
Support
Nützlich
5.0
by Impuls
3 August 2023 10:07
-
5.0
Functionality
5.0
Usability
5.0
Documentation
0.0
Support
Sehr nützliches Tool. Vielen Dank dafür!
5.0
by Marco Beckmann
2 November 2022 08:31
-
5.0
Functionality
5.0
Usability
5.0
Documentation
0.0
Support
Perfekt
5.0
by DK
27 September 2022 10:03
Tut was es soll und das ohne Fehler. Danke!!
5.0
Functionality
5.0
Usability
5.0
Documentation
0.0
Support
Macht was es soll
5.0
by Steffen Brüggemann
28 July 2022 11:41
Danke
5.0
Functionality
5.0
Usability
5.0
Documentation
5.0
Support
About the Extension Partner
PremSoft
Partner Status
-
Shopware
Bronze Partner -
Shopware
Premium Extension Partner
Details
- Ø-Rating: 5
- Partner since: 2015
- Extensions: 33
- Certifications: Certifications
Support
- Based in: Germany
- Speaks: German, English
- Response time: Very quickly
Shopware 6 certified
This Extension Partner has been certified by our Academy for Shopware 6.