An international version is available for our store.
Shopware 6 Shopware 5
⌘ Ctrl
Merkzettel
PremSoft

Custom JavaScript/CSS Manager für Shopware 6

von PremSoft
Empfehlung
Bewertung: 4.9
(39 Bewertungen)
Downloads: 9.438
DneCustomCssJs
DneCustomCssJs
DneCustomCssJs
DneCustomCssJs
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.
16.7% Rabatt Im Vergleich zum regulären Monatspreis
In den Warenkorb
Kompatibel mit:
6.1.0-RC1 - 6.6.9.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

  • Code-Editor mit Syntax-Highlighting für JavaScript und SCSS
  • Verwaltung und Strukturierung von Code-Snippets über separate Container
  • Kompilierung des Themes mitsamt Custom CSS/JavaScript per Click im Admin

Ü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: 3. Dezember 2024
  • Veröffentlicht: 20. Februar 2020
  • Version: 4.0.2
  • Kategorie: Sonderfunktionen

Ressourcen

Bewertungen (39)

Durchschnittliche Bewertung
4.9
Basiert auf 39 Bewertungen
5.0 Funktionalität
5.0 Bedienung
4.8 Dokumentation
1.9 Support
95 %
5 %
0 %
0 %
0 %
Bewertung schreiben

Wenn du diese Erweiterung heruntergeladen hast, kannst du diese im Shopware Account bewerten.

Bewertung schreiben
tolles kleines Tool
5.0
von Markus Siwek
15. September 2024 09:16
tolles kleines Tool
5.0 Funktionalität
5.0 Bedienung
5.0 Dokumentation
5.0 Support
Great Support
5.0
von Samyra Fashion
14. August 2024 10:43
Very useful plugin and furthermore fast and great support if any problems occur.
5.0 Funktionalität
5.0 Bedienung
5.0 Dokumentation
5.0 Support
Funktioniert gut,
5.0
von 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 Funktionalität
5.0 Bedienung
5.0 Dokumentation
5.0 Support
Super Plugin
5.0
von Arend Goens
28. Juli 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 Funktionalität
5.0 Bedienung
5.0 Dokumentation
5.0 Support
Sehr praktisch ! Und läuft.
5.0
von Gero Pappert
29. Mai 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 Funktionalität
5.0 Bedienung
5.0 Dokumentation
0.0 Support
Very good plugin by a very helpful developer, adding an extremely useful function
5.0
von Sebastian Eltermann
22. Mai 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 Funktionalität
5.0 Bedienung
5.0 Dokumentation
5.0 Support
von PremSoft 22. Mai 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
von Yannick Schneider
18. Mai 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 Funktionalität
5.0 Bedienung
5.0 Dokumentation
5.0 Support
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
5.0 Funktionalität
5.0 Bedienung
5.0 Dokumentation
5.0 Support
von PremSoft 31. März 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
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]")
}
5.0 Funktionalität
5.0 Bedienung
5.0 Dokumentation
5.0 Support
von PremSoft 16. Februar 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.

Über den Extension Partner

PremSoft

PremSoft

Alle Erweiterungen anzeigen

Partner Status

  • Shopware Bronze Partner Shopware
    Bronze Partner
  • Shopware Premium Extension Partner Shopware
    Premium Extension Partner

Details

  • Ø-Bewertung: 4.9
  • Partner seit: 2015
  • Erweiterungen: 32

Support

  • Land: Germany
  • Spricht: Deutsch, Englisch
  • Reaktionszeit: Sehr schnell