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.6.9.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: 3 December 2024
- Publication date: 20 February 2020
- Version: 4.0.2
- Category: Special features
Resources
Reviews (39)
tolles kleines Tool
5.0
by Markus Siwek
15 September 2024 09:16
tolles kleines Tool
5.0
Functionality
5.0
Usability
5.0
Documentation
5.0
Support
Great Support
5.0
by Samyra Fashion
14 August 2024 10:43
Very useful plugin and furthermore fast and great support if any problems occur.
5.0
Functionality
5.0
Usability
5.0
Documentation
5.0
Support
Funktioniert gut,
5.0
by Der neue Louven-Shop (LIVE) Shopware
13 August 2024 14:26
...zusammen mit den anderen Plugins von Premsoft eine perfekte Sache, um schnell Templates zu entwickeln und anzupassen. Der Hersteller reagiert sehr schnell auf Anfragen.
5.0
Functionality
5.0
Usability
5.0
Documentation
5.0
Support
Super Plugin
5.0
by Arend Goens
28 July 2024 18:00
Mit wenig Aufwand ganz viel erreichen. Das geht mit diesem Plugin. Kleiner Wunsch - wurde erfüllt :): Ein Kommentarfeld für jeden Block, um dort die Funktion genauer zu notieren. Ginge auch im Code, wäre aber ganz nett.
5.0
Functionality
5.0
Usability
5.0
Documentation
5.0
Support
Sehr praktisch ! Und läuft.
5.0
by Gero Pappert
29 May 2024 11:31
Ein kleiner Hinweis:
nach einem Shopware-Update hat sich die Variable zum Asset-Pfad geändert (von $asset zu $sw-asset-public-url). Ab diesem Moment konnte kein Template mehr kompiliert werden (bzw. Plugin deaktiviert werden). Die Fehlermeldung meldete: "$asset-Variable nicht definiert". Die Ursache war ein CustomCSS Eintrag, welche diese Variable verwendet. Für die Fehlersuche wäre der PluginName und der Name des fehlerhaften Custom-Eintrages in der Fehlermeldung hilfreich gewesen. Vielleicht läßt sich das ergänzen.
Unabhängig davon lässt sich mit diesem Modul fast alles erreichen !
nach einem Shopware-Update hat sich die Variable zum Asset-Pfad geändert (von $asset zu $sw-asset-public-url). Ab diesem Moment konnte kein Template mehr kompiliert werden (bzw. Plugin deaktiviert werden). Die Fehlermeldung meldete: "$asset-Variable nicht definiert". Die Ursache war ein CustomCSS Eintrag, welche diese Variable verwendet. Für die Fehlersuche wäre der PluginName und der Name des fehlerhaften Custom-Eintrages in der Fehlermeldung hilfreich gewesen. Vielleicht läßt sich das ergänzen.
Unabhängig davon lässt sich mit diesem Modul fast alles erreichen !
5.0
Functionality
5.0
Usability
5.0
Documentation
0.0
Support
Very good plugin by a very helpful developer, adding an extremely useful function
5.0
by Sebastian Eltermann
22 May 2024 16:18
Sorry for any confusion now, seems like the review was edited instead of sending a new one. Still a bit confused as to how the review system works.
My initial review was to mention few "flaws", that the plugin misses an easy way of delaying the execution of script code, or that it can be restricted to a certain page. And especially that I couldn't get an external script loaded with script-tags like used to.
Just wanted to leave a very big thank you for the response and help, it's more than I had hoped for. And it helps me enormously. Especially since I'm not very good with JS.
Like your suggestion with constricting code to certain Shopware pages. I already had that idea, but had problems coding it correctly. And hoped there would be a better solution, maybe even a future feature.
The thing with including an external script really stressed me out as that's the only way I can use to change a website in certain ways, as I have no direct access to the server files for some projects but have to manipulate a lot pages. But it just didn't work with the common script-tag-method. And I didn't know about your way, or rather, only managed to code part of it which didn't work.
I had to use the delay solution before, but found it too dirty, as it meant you were able to see UI-changes sometimes or if the page needed too much time to load they weren't even applied. And I just couldn't get the other solution with waiting for the DOM working by myself.
Finally, with your help, I got everything to work like a charm. I combined your solutions of waiting for the DOM and how to include an external script (and changed it a bit). So thank you very much, without you I would have needed ages or never got it.
I have a small suggestion for a future feature in your plugin: It would be very helpful, if those solutions would be included in the plugin. You know, just a button which pastes those dummy lines into the text field and a small tooltip explaining it. Because I can imagine those being common issues for people having to include JS that way. The need to delay the script, the need to include an external script, and assigning it to certain pages.
My initial review was to mention few "flaws", that the plugin misses an easy way of delaying the execution of script code, or that it can be restricted to a certain page. And especially that I couldn't get an external script loaded with script-tags like used to.
Just wanted to leave a very big thank you for the response and help, it's more than I had hoped for. And it helps me enormously. Especially since I'm not very good with JS.
Like your suggestion with constricting code to certain Shopware pages. I already had that idea, but had problems coding it correctly. And hoped there would be a better solution, maybe even a future feature.
The thing with including an external script really stressed me out as that's the only way I can use to change a website in certain ways, as I have no direct access to the server files for some projects but have to manipulate a lot pages. But it just didn't work with the common script-tag-method. And I didn't know about your way, or rather, only managed to code part of it which didn't work.
I had to use the delay solution before, but found it too dirty, as it meant you were able to see UI-changes sometimes or if the page needed too much time to load they weren't even applied. And I just couldn't get the other solution with waiting for the DOM working by myself.
Finally, with your help, I got everything to work like a charm. I combined your solutions of waiting for the DOM and how to include an external script (and changed it a bit). So thank you very much, without you I would have needed ages or never got it.
I have a small suggestion for a future feature in your plugin: It would be very helpful, if those solutions would be included in the plugin. You know, just a button which pastes those dummy lines into the text field and a small tooltip explaining it. Because I can imagine those being common issues for people having to include JS that way. The need to delay the script, the need to include an external script, and assigning it to certain pages.
5.0
Functionality
5.0
Usability
5.0
Documentation
5.0
Support
Gutes Tool
5.0
by Yannick Schneider
18 May 2024 12:39
An sich ein sehr gutes und hilfreiches Tool. Hat keinerlei Probleme!
Es wär noch schön, wenn es eine Möglichkeit gibt, bestimmte Container auf Erlebnisseiten einzuschränken.
Es wär noch schön, wenn es eine Möglichkeit gibt, bestimmte Container auf Erlebnisseiten einzuschränken.
5.0
Functionality
5.0
Usability
5.0
Documentation
5.0
Support
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
About the Extension Partner
PremSoft
Partner Status
-
Shopware
Bronze Partner -
Shopware
Premium Extension Partner
Details
- Ø-Rating: 4.9
- Partner since: 2015
- Extensions: 32
Support
- Based in: Germany
- Speaks: German, English
- Response time: Very quickly