Cloud / Self-hosted
You can run Shopware in the cloud or use it as a self-hosted solution for your shop. Here you can check if a particular extension can be used in the cloud or self-hosted variant.
This extension cannot be used in a Shopware Cloud shop. Cloud Self-hosted
This app is available for Shopware 5
Details
- Order number: Dne5719820551438f
- Extension Partner: Open Source Plugins
- Version: 4.0.0
- Last update: 14 Mar 2024
- Language support:
- Self-hosted compatibility: 6.1.0 – 6.1.66.2.0 – 6.2.36.3.0.0 – 6.3.0.26.3.1.0 – 6.3.1.16.3.2.0 – 6.3.2.16.3.3.0 – 6.3.3.16.3.4.0 – 6.3.4.16.3.5.0 – 6.3.5.46.4.0.06.4.1.0 – 6.4.1.26.4.2.0 – 6.4.2.16.4.3.0 – 6.4.3.16.4.4.0 – 6.4.4.16.4.5.0 – 6.4.5.16.4.6.0 – 6.4.6.16.4.7.06.4.8.0 – 6.4.8.26.4.9.06.4.10.0 – 6.4.10.16.4.11.0 – 6.4.11.16.4.12.06.4.13.06.4.14.06.4.15.0 – 6.4.15.26.4.16.0 – 6.4.16.16.4.17.0 – 6.4.17.26.4.18.0 – 6.4.18.16.4.19.06.4.20.0 – 6.4.20.26.5.0.06.5.1.0 – 6.5.1.16.5.2.0 – 6.5.2.16.5.3.0 – 6.5.3.36.5.4.0 – 6.5.4.16.5.5.0 – 6.5.5.26.5.6.0 – 6.5.6.16.5.7.0 – 6.5.7.46.5.8.0 – 6.5.8.76.6.0.0
Product information
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
Description
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
This software was released open-source under MIT license. Regarding that license: THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
Customer reviews
As the owner of this app you can rate it in the Shopware account
Rate now in your accountAverage customer rating from 31 reviews:
Question
Do you also have error in admin panel?
mode-scss.js:1 Uncaught ReferenceError: ace is not defined
Liebe das Plugin, aber es erzeugt seit Version 6.5.8.4 einen Javascript-Fehler
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]")
}
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.
test
Funktioniert leider nicht mehr unter 6.5.6.1
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!
Tut mir leid zu hören, dass es da an etwas hakt. Ich habe es gerade auf einer frischen 6.5.6.1 Installation getestet und konnte das Problem nicht nachstellen. Ähnliche Probleme mit dem Menüeintrag gab es vereinzelt immer mal wieder in der Vergangenheit, unabhängig um welches Plugin es sich handelte. In der Regel hat ein wiederholtes De-/Reinstallieren dann doch geholfen. Eventuell sind auch die Assets des Plugins, wie auch immer, verändert oder gelöscht worden. Ich würde das Plugin einmal wie gewohnt deinstallieren (und auf Nachfrage die Daten nicht vollständig löschen). Anschließend kann das dann deinstallierte Plugin komplett entfernt werden in der Verwaltung der Erweiterungen. Das sollte den kompletten Ordner unter `custom/plugins/DneCustomCssJs` löschen und falls das nicht der Fall sein sollte, müsste der Order einmal manuell gelöscht werden. Abschließend kann das Plugin über den Store erneut heruntergeladen und installiert werden. Falls es dann immer noch nicht funktionieren sollte, bitte ich noch einmal Rückmeldung.
Absolut top!
Ein Must-Have in jeder Shopware-Installation ?
Nützlich
Danke
Sehr nützliches Tool. Vielen Dank dafür!
Perfekt
Tut was es soll und das ohne Fehler. Danke!!
Macht was es soll
Danke
perfekt
good
good
Funktioniert einwandfrei
Macht was es soll und funktioniert einwandfrei. Code highlighting im css und js geht ebenfalls.
Sehr zufrieden
Da es Shopware selbst wohl nicht hinbekommt das die Ansicht im Listing und so vielen anderen Details ideal an einen Shop angepasst sind, muss man dankbar sein für Entwickler die gewisse Tools bereitstellen und dies wie in diesem Fall kostenfrei.
Einen sehr großen Dank an den Entwickler bzw. das Unternehmen. Weiter so!
Tut es es soll. Einfache Möglichkeit, eigenes CSS einzubauen.
Für uns unverzichtbar
Für uns unverzichtbar - Mit diesem tollen Plugin werden viele Sachen wie Landingpages ohne Shopfunktion usw. erst möglich (kabelabroller24.de). Unsere Möglichkeiten sind dadurch extrem erweitert worden. Uneingeschränkte Empfehlung.
Sehr Gut
damit kann ich (ua.) in den Erlebniswelten die Abstände zwischen den einzelnen Elementen der Block-Kategorie Perfekt einstellen.
Tolle Arbeit!
Perfekt für User ohne SSH-Zugang
Da wir bei unserem Webhosting-Paket keinen SSH-Zugang haben, ist es extrem schwierig eigene CSS Befehle einzufügen. Mit diesem Plugin ist das Problem weg - einfach installieren und im Backend CSS Befehle etc. eingeben - einfacher geht es nicht :)
Perfekt! Ein großartiges Plug-In.
Es macht genau das, was und wie ich es mit vorgestellt habe. 1000 Dank für dieses super Plug-In und den hervorragenden Support von Herrn Neustadt. So kann ganz einfach etwas geändert werden, ohne Programmierer zu sein.
Perfekt. Mal eben schnell was testen mit SCSS/CSS …- genau was ich gesucht habe. Danke.
Genial
Hiermit hat Herr Neustadt eindrucksvoll demonstriert, dass es auch menschlich* (für echte Menschen geschaffen) und userfreundlich geht. Nichts gegen HardcoreHyperConsoleNerds... aber um einem DIV eine andere Farbe zu geben, muss man nicht gleich doktorieren (wie es vom Shopware 6 aufgezwungen wird).
Danke Herr Neustadt, das hier war ihr Doktorarbeit.
Ein wirklich großartiges Plugin. Vielen Dank dafür.
Very useful plugin and easy to use and fast for development use
Very useful plugin and easy to use and fast for development use
Top! Einfach Genial !
Macht vieles einfacher richtig nice.
Sehr Zufrieden
Dieses Plugin ist einfach und funktioniert genau wie es soll. Ich kann es nur empfehlen!
Super tolles Plugin, erleichtert die Arbeit enorm.
Super tolles Plugin, erleichtert die Arbeit enorm. Für kleine Anpassungen und Erweiterungen ideal. Vielen Dank an den Entwickler.
Hat auf Anhieb funktioniert!
Das war mein allererstes Shopware Plugin. Installation und Anwendung war easy und in wenigen Minuten erledigt. Mein Custom CSS funktioniert einwandfrei.
Perfekt!
Genau das was ich gesucht habe, so lässt sich einfach und bequem ohne der console das Theme kompilieren und kleinere Anpassungen durchführen. Danke dafür!
Tolles Plugin, herzlichen Dank!!!
Mein neustes Lieblings-Plugin
Endlich kann ich super schnell und einfach selber CSS & JS Änderungen machen ohne dafür aufs Template Zugriff zu haben. Ideal für kleine Hacks. ;-) Super Stark!
Funktioniert einwandfrei!
(v6.2.2)
Changelog
Version 4.0.0
- Release and changes for Shopware 6.6
Version 3.0.0
- Compatibility to Shopware 6.5 RC1
Version 2.0.3
- Recompiled assets for 6.4.10.0
Version 2.0.2
- Fixes script errors in the administration of the production template
Version 2.0.1
- Added ACL role permissions
- Moved menu entry to extensions
Version 2.0.0
- Shopware 6.4.x is required for this version
- JS/CSS Containers can now be restricted to specific sales channels
- Color picker for fast insert of hex codes within the CSS field
- Additional columns for activity and associated sales channels in listing of containers
- Optimised implementation
Version 1.0.8
The plugin menu entry was moved. It can now be found in the sub-menu under "Settings".
- More robust implementation of extension for future Shopware updates
- Display detailed error messages when compiler fails due to syntax errors
- Re-compile theme when container is deleted in listing
- Changes for Shopware Community Store requirements (icon, menu)
Version 1.0.7
Changes for Shopware 6.3
Version 1.0.6
Fixes possible issues with multi-line comments at the start of SCSS containers
Version 1.0.5
New version for 6.2 RC1
Version 1.0.3
- Allow use of HTML tags in CSS and JavaScript fields
Version 1.0.2
- Editor with support for SCSS syntax highlighting
Version 1.0.1
- Validation of fields in the administration
- Fixed compiling being skipped for new containers being saved the first time
Version 1.0.0
First Release for Shopware 6
About the Extension Partner
Open Source Plugins Shopware Extension Partner 5 Extensions 5 Ø RatingCurrent version:
Without support