Diese Seite ist auch auf Deutsch verfügbar.
Shopware 6 Shopware 5
⌘ Ctrl
Wishlist
PremSoft

Custom JavaScript/CSS Manager for Shopware 6

by PremSoft
Recommended
Rating: 4.9
(39 reviews)
Downloads: 9,423
DneCustomCssJs
DneCustomCssJs
DneCustomCssJs
DneCustomCssJs
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.
37.53% discount This is the combination of a 20.82% promotional discount and a 16.7% annual discount.
Add to cart
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

  • Code editor with syntax highlighting for JavaScript and SCSS
  • Management and structuring of multiple code snippets by separate containers
  • Compilation of themes including custom CSS/JavaScript via one click within the administration

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)

Average rating
4.9
Based on 39 reviews
5.0 Functionality
5.0 Usability
4.8 Documentation
1.9 Support
95 %
5 %
0 %
0 %
0 %
Write a review

If you downloaded this extension you can write a review in the Shopware Account.

Write a review
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 !
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.
5.0 Functionality
5.0 Usability
5.0 Documentation
5.0 Support
by PremSoft 22 May 2024 18:55
You can use the body classes to restrict execution of scripts or application of style rules to a certain page. E.g. on the product detail page only:
JS: `if (document.body.classList.contains('is-ctl-product')) { console.log('hello world'); }`
SCSS: `.is-ctl-product { .some-child-class { background: blue; } }`

As for inserting external scripts, this tool is not a markup editor. You can insert script tags to external sources via JavaScript dynamically:
`var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://example.com/path/to/your/script.js'; document.head.appendChild(script);`

As for delaying scripts there are multiple ways. A general delay:
`setTimeout(() => { console.log("Delayed for 1 second."); }, 1000);`
Or waiting for the DOM content to be loaded:
`document.addEventListener("DOMContentLoaded", () => { console.log("DOM fully loaded and parsed"); });`

There multiple more ways to achieve what you want to do for each of these problems. This plugin is more like a development tool, rather than being streamlined to do just one or another thing.
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.
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
5.0 Functionality
5.0 Usability
5.0 Documentation
5.0 Support
by PremSoft 31 March 2024 18:33
You can safely ignore this error. The editor in theory has some extended functionality, e.g. for SCSS auto completion. Shopware either doesn't ship with some of these optional assets or they may be outdated, as the code editor is mostly just used for HTML elsewhere. Basic syntax highlighting should still work though.
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]")
}
5.0 Functionality
5.0 Usability
5.0 Documentation
5.0 Support
by PremSoft 16 February 2024 15:35
Hey, kannst du die Fehlermeldung bitte entfernen? Habe die ja jetzt gesehen und die ist sehr lang, was die Seite ein bisschen unübersichtlich macht. ;) Das wird wohl ein Konflikt sein, den das SpatialCmsViewerPlugin verursacht. Ich glaub das ist Teil von kommerziellen Features, die in einem der Pläne enthalten sind. Auf die kommerziellen Closed-Source Features habe ich als Open-Source Entwickler keinen Zugriff und kann den Fehler daher nicht debuggen.

Update: Nach erneuter Betrachtung des Fehlers stellt sich heraus, dass es sich hier wohl um JavaScript handelt, das im Storefront ausgeführt wird. Dieses Plugin hier hat jedoch keinerlei Einfluss darauf. Es injiziert lediglich das selbstgeschriebene JavaScript des Nutzers. Letzteres kann natürlich ausschlaggebend sein. Vielleicht einfach mal das eigene JavaScript testweise entfernen und schauen ob es daran liegt. Abgesehen von Eingaben des Nutzers, dürfte dieses Plugin im Storefront jedoch keineswegs zu Fehlern führen. Wenn es nicht am eigenen Code liegt, am besten direkt an den Shopware-Support wenden.

About the Extension Partner

PremSoft

PremSoft

See all extensions

Partner Status

  • Shopware Bronze Partner Shopware
    Bronze Partner
  • Shopware Premium Extension 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