Warenkorb (Canvas) eingeblendet?detektieren?

DannyBO · 4. Oktober 2024 um 05:46

Morgen Jungs
ich möchte detektieren ob der Warenkorb (das Canvas) eingeblendet ist.
Wenn dann soll ein anderers CSS-Element ausgeblendet werden.

Wie könnte ich das anstellen?

Danke!

chamaw · 4. Oktober 2024 um 08:40

Da der Off-Canvas Warenkorb mit display:none ausgeschaltet ist gibt es das Dom-Element erst wenn dieser sichtbar wird:

var offCanvasElement = document.querySelector('.offcanvas');

gibt nur was != null zurück wenn der WK sichtbar ist.

DannyBO · 4. Oktober 2024 um 09:54

danke das hilft schon weiter perfekt

DannyBO · 4. Oktober 2024 um 15:08

openOffCanvas(t, e, i) {
document.getElementById(„sidebar“).style.display = „none“;
o.Z.open(t, e, this._onOffCanvasOpened.bind(this, i), this.options.offcanvasPosition, !0), o.Z
.setAdditionalClassName(this.options.additionalOffcanvasClass)

hab es so gelöst danke

DannyBO · 5. Oktober 2024 um 09:12

verdamt das hätte ja so einfach sein können
jetzt muss das ausgeblendete css element wieder angezeigt werden wenn den cavas geschlossen wird.

es gibt keine closeOffCanvas

DannyBO · 5. Oktober 2024 um 10:48

***[quote=„DannyBO, post:6, topic:105417, full:true“]
hab es gelöst
„use strict“;
(self.webpackChunk = self.webpackChunk || ).push([
[„plugin_offcanvas_ajax-offcanvas_plugin_js-utility_loading-indicator_element-loading-indicator-c66bd6“], {
7: (e, t, s) => {
s.d(t, {
Z: () => r
});
var n = s(9062),
a = s(3107),
i = s(2363);
let o = null;
class r extends n.Z {
static open() {
let e = arguments.length > 0 && void 0 !== arguments[0] && arguments[0],
t = arguments.length > 1 && void 0 !== arguments[1] && arguments[1],
s = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null,
a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : „left“,
i = !(arguments.length > 4) || void 0 === arguments[4] || arguments[4],
o = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : n.Z.REMOVE_OFF_CANVAS_DELAY(),
r = arguments.length > 6 && void 0 !== arguments[6] && arguments[6],
l = arguments.length > 7 && void 0 !== arguments[7] ? arguments[7] : „“;
if (!e) throw Error(„A url must be given!“);
n.r._removeExistingOffCanvas();
let c = n.r._createOffCanvas(a, r, l, i);
this.setContent(e, t, s, i, o), n.r._openOffcanvas(c)
}
static setContent(e, t, s, n, l) {
let c = new a.Z;
super.setContent(‚

‘.concat(i.Z.getTemplate(), „

“), n, l), o && o.abort();
let d = e => {
super.setContent(e, n, l), „function“ == typeof s && s(e)
};
o = t ? c.post(e, t, r.executeCallback.bind(this, d)) : c.get(e, r.executeCallback.bind(this, d))
}
static executeCallback(e, t) {
„function“ == typeof e && e(t), window.PluginManager.initializePlugins()
}
}
},
9062: (e, t, s) => {
s.d(t, {
Z: () => c,
r: () => l
});
var n = s(5206),
a = s(9138),
i = s(3266);
let o = „offcanvas“;
class r {
open(e, t, s, n, a, i, o) {
document.getElementById(„sidebar“).style.display = „none“;
this._removeExistingOffCanvas();
let r = this._createOffCanvas(s, i, o, n);
this.setContent(e, n, a), this._openOffcanvas(r, t)
}
setContent(e, t) {
let s = this.getOffCanvas();
s[0] && (s[0].innerHTML = e, this._registerEvents(t))
}
setAdditionalClassName(e) {
this.getOffCanvas()[0].classList.add(e)
}
getOffCanvas() {
return document.querySelectorAll(„.“.concat(o))
}
close(e) {
document.getElementById(„sidebar“).style.display = „block“;
let t = this.getOffCanvas();
i.Z.iterate(t, e => {
bootstrap.Offcanvas.getInstance(e).hide()
}), setTimeout(() => {
this.$emitter.publish(„onCloseOffcanvas“, {
offCanvasContent: t
})
}, e)
}
goBackInHistory() {
window.history.back()
}
exists() {
return this.getOffCanvas().length > 0
}
_openOffcanvas(e, t) {
window.focusHandler.saveFocusState(„offcanvas“), r.bsOffcanvas.show(), window.history.pushState(„offcanvas-open“, „“), „function“ == typeof t && t()
}
_registerEvents(e) {
let t = n.Z.isTouchDevice() ? „touchend“ : „click“,
s = this.getOffCanvas();
i.Z.iterate(s, t => {
let n = () => {
setTimeout(() => {
t.remove(), window.focusHandler.resumeFocusState(„offcanvas“), this.$emitter.publish(„onCloseOffcanvas“, {
offCanvasContent: s
})
}, e), t.removeEventListener(„hide.bs.offcanvas“, n)
};
t.addEventListener(„hide.bs.offcanvas“, n)
}), window.addEventListener(„popstate“, this.close.bind(this, e), {
once: !0
});
let a = document.querySelectorAll(„.“.concat(„js-offcanvas-close“));
i.Z.iterate(a, s => s.addEventListener(t, this.close.bind(this, e)))
}
_removeExistingOffCanvas() {
r.bsOffcanvas = null;
let e = this.getOffCanvas();
return i.Z.iterate(e, e => e.remove())
}
_getPositionClass(e) {
return „left“ === e ? „offcanvas-start“ : „right“ === e ? „offcanvas-end“ : „offcanvas-“.concat(e)
}
_createOffCanvas(e, t, s, n) {
let a = document.createElement(„div“);
if (a.classList.add(o), a.classList.add(this._getPositionClass(e)), !0 === t && a.classList.add(„is-fullwidth“), s) {
let e = typeof s;
if („string“ === e) a.classList.add(s);
else if (Array.isArray(s)) s.forEach(e => {
a.classList.add(e)
});
else throw Error(‚The type "‘.concat(e, ‚" is not supported. Please pass an array or a string.‘))
}
return document.body.appendChild(a), r.bsOffcanvas = new bootstrap.Offcanvas(a, {
backdrop: !1 !== n || „static“
}), a
}
constructor() {
this.$emitter = new a.Z
}
}
let l = Object.freeze(new r);
class c {
static open(e) {
let t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null,
s = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : „left“,
n = !(arguments.length > 3) || void 0 === arguments[3] || arguments[3],
a = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : 350,
i = arguments.length > 5 && void 0 !== arguments[5] && arguments[5],
o = arguments.length > 6 && void 0 !== arguments[6] ? arguments[6] : „“;
l.open(e, t, s, n, a, i, o)
}
static setContent(e) {
let t = !(arguments.length > 1) || void 0 === arguments[1] || arguments[1],
s = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 350;
l.setContent(e, t, s)
}
static setAdditionalClassName(e) {
l.setAdditionalClassName(e)
}
static close() {
let e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 350;
l.close(e)
}
static exists() {
return l.exists()
}
static getOffCanvas() {
return l.getOffCanvas()
}
static REMOVE_OFF_CANVAS_DELAY() {
return 350
}
}
},
3107: (e, t, s) => {
s.d(t, {
Z: () => n
});
class n {
get(e, t) {
let s = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : „application/json“,
n = this._createPreparedRequest(„GET“, e, s);
return this._sendRequest(n, null, t)
}
post(e, t, s) {
let n = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : „application/json“;
n = this._getContentType(t, n);
let a = this._createPreparedRequest(„POST“, e, n);
return this._sendRequest(a, t, s)
}
delete(e, t, s) {
let n = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : „application/json“;
n = this._getContentType(t, n);
let a = this._createPreparedRequest(„DELETE“, e, n);
return this._sendRequest(a, t, s)
}
patch(e, t, s) {
let n = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : „application/json“;
n = this._getContentType(t, n);
let a = this._createPreparedRequest(„PATCH“, e, n);
return this._sendRequest(a, t, s)
}
abort() {
if (this._request) return this._request.abort()
}
setErrorHandlingInternal(e) {
this._errorHandlingInternal = e
}
_registerOnLoaded(e, t) {
t && (!0 === this._errorHandlingInternal ? (e.addEventListener(„load“, () => {
t(e.responseText, e)
}), e.addEventListener(„abort“, () => {
console.warn(„the request to „.concat(e.responseURL, " was aborted“))
}), e.addEventListener(„error“, () => {
console.warn(„the request to „.concat(e.responseURL, " failed with status „).concat(e.status))
}), e.addEventListener(„timeout“, () => {
console.warn(„the request to „.concat(e.responseURL, " timed out“))
})) : e.addEventListener(„loadend“, () => {
t(e.responseText, e)
}))
}
_sendRequest(e, t, s) {
return this._registerOnLoaded(e, s), e.send(t), e
}
_getContentType(e, t) {
return e instanceof FormData && (t = !1), t
}
_createPreparedRequest(e, t, s) {
return this._request = new XMLHttpRequest, this._request.open(e, t), this._request.setRequestHeader(„X-Requested-With“, „XMLHttpRequest“), s && this._request.setRequestHeader(„Content-type“, s), this._request
}
constructor() {
this._request = null, this._errorHandlingInternal = !1
}
}
},
3327: (e, t, s) => {
s.d(t, {
Z: () => i
});
var n = s(2363);
let a = „element-loader-backdrop“;
class i extends n.Z {
static create(e) {
e.classList.add(„has-element-loader“), i.exists(e) || (i.appendLoader(e), setTimeout(() => {
let t = e.querySelector(“.“.concat(a));
t && t.classList.add(„element-loader-backdrop-open“)
}, 1))
}
static remove(e) {
e.classList.remove(„has-element-loader“);
let t = e.querySelector(“.“.concat(a));
t && t.remove()
}
static exists(e) {
return e.querySelectorAll(“.„.concat(a)).length > 0
}
static getTemplate() {
return '\n

\n

\n <span class=“').concat(„visually-hidden“, ‚„>Loading…\n

\n

\n ')
}
static appendLoader(e) {
e.insertAdjacentHTML(„beforeend“, i.getTemplate())
}
}
},
2363: (e, t, s) => {
s.d(t, {
L: () => i,
Z: () => o
});
var n = s(3266);
let a = „loader“,
i = {
BEFORE: „before“,
AFTER: „after“,
INNER: „inner“
};
class o {
create() {
if (!this.exists()) {
if (this.position === i.INNER) {
this.parent.innerHTML = o.getTemplate();
return
}
this.parent.insertAdjacentHTML(this._getPosition(), o.getTemplate())
}
}
remove() {
let e = this.parent.querySelectorAll(“.„.concat(a));
n.Z.iterate(e, e => e.remove())
}
exists() {
return this.parent.querySelectorAll(“.„.concat(a)).length > 0
}
_getPosition() {
return this.position === i.BEFORE ? „afterbegin“ : „beforeend“
}
static getTemplate() {
return '

\n <span class=“‘).concat(„visually-hidden“, ‚">Loading…\n

‘)
}
static SELECTOR_CLASS() {
return a
}
constructor(e, t = i.BEFORE) {
this.parent = e instanceof Element ? e : document.body.querySelector(e), this.position = t
}
}
}
}
]);
[/quote]

„use strict“;
(self.webpackChunk = self.webpackChunk || ).push([
[„plugin_offcanvas_ajax-offcanvas_plugin_js-utility_loading-indicator_element-loading-indicator-c66bd6“], {
7: (e, t, s) => {
s.d(t, {
Z: () => r
});
var n = s(9062),
a = s(3107),
i = s(2363);
let o = null;
class r extends n.Z {
static open() {
let e = arguments.length > 0 && void 0 !== arguments[0] && arguments[0],
t = arguments.length > 1 && void 0 !== arguments[1] && arguments[1],
s = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null,
a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : „left“,
i = !(arguments.length > 4) || void 0 === arguments[4] || arguments[4],
o = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : n.Z.REMOVE_OFF_CANVAS_DELAY(),
r = arguments.length > 6 && void 0 !== arguments[6] && arguments[6],
l = arguments.length > 7 && void 0 !== arguments[7] ? arguments[7] : „“;
if (!e) throw Error(„A url must be given!“);
n.r._removeExistingOffCanvas();
let c = n.r._createOffCanvas(a, r, l, i);
this.setContent(e, t, s, i, o), n.r._openOffcanvas(c)
}
static setContent(e, t, s, n, l) {
let c = new a.Z;
super.setContent(‚

‘.concat(i.Z.getTemplate(), „

“), n, l), o && o.abort();
let d = e => {
super.setContent(e, n, l), „function“ == typeof s && s(e)
};
o = t ? c.post(e, t, r.executeCallback.bind(this, d)) : c.get(e, r.executeCallback.bind(this, d))
}
static executeCallback(e, t) {
„function“ == typeof e && e(t), window.PluginManager.initializePlugins()
}
}
},
9062: (e, t, s) => {
s.d(t, {
Z: () => c,
r: () => l
});
var n = s(5206),
a = s(9138),
i = s(3266);
let o = „offcanvas“;
class r {
open(e, t, s, n, a, i, o) {
document.getElementById(„sidebar“).style.display = „none“;
this._removeExistingOffCanvas();
let r = this._createOffCanvas(s, i, o, n);
this.setContent(e, n, a), this._openOffcanvas(r, t)
}
setContent(e, t) {
let s = this.getOffCanvas();
s[0] && (s[0].innerHTML = e, this._registerEvents(t))
}
setAdditionalClassName(e) {
this.getOffCanvas()[0].classList.add(e)
}
getOffCanvas() {
return document.querySelectorAll(„.“.concat(o))
}
close(e) {
document.getElementById(„sidebar“).style.display = „block“;
let t = this.getOffCanvas();
i.Z.iterate(t, e => {
bootstrap.Offcanvas.getInstance(e).hide()
}), setTimeout(() => {
this.$emitter.publish(„onCloseOffcanvas“, {
offCanvasContent: t
})
}, e)
}
goBackInHistory() {
window.history.back()
}
exists() {
return this.getOffCanvas().length > 0
}
_openOffcanvas(e, t) {
window.focusHandler.saveFocusState(„offcanvas“), r.bsOffcanvas.show(), window.history.pushState(„offcanvas-open“, „“), „function“ == typeof t && t()
}
_registerEvents(e) {
let t = n.Z.isTouchDevice() ? „touchend“ : „click“,
s = this.getOffCanvas();
i.Z.iterate(s, t => {
let n = () => {
setTimeout(() => {
t.remove(), window.focusHandler.resumeFocusState(„offcanvas“), this.$emitter.publish(„onCloseOffcanvas“, {
offCanvasContent: s
})
}, e), t.removeEventListener(„hide.bs.offcanvas“, n)
};
t.addEventListener(„hide.bs.offcanvas“, n)
}), window.addEventListener(„popstate“, this.close.bind(this, e), {
once: !0
});
let a = document.querySelectorAll(„.“.concat(„js-offcanvas-close“));
i.Z.iterate(a, s => s.addEventListener(t, this.close.bind(this, e)))
}
_removeExistingOffCanvas() {
r.bsOffcanvas = null;
let e = this.getOffCanvas();
return i.Z.iterate(e, e => e.remove())
}
_getPositionClass(e) {
return „left“ === e ? „offcanvas-start“ : „right“ === e ? „offcanvas-end“ : „offcanvas-“.concat(e)
}
_createOffCanvas(e, t, s, n) {
let a = document.createElement(„div“);
if (a.classList.add(o), a.classList.add(this._getPositionClass(e)), !0 === t && a.classList.add(„is-fullwidth“), s) {
let e = typeof s;
if („string“ === e) a.classList.add(s);
else if (Array.isArray(s)) s.forEach(e => {
a.classList.add(e)
});
else throw Error(‚The type "‘.concat(e, ‚" is not supported. Please pass an array or a string.‘))
}
return document.body.appendChild(a), r.bsOffcanvas = new bootstrap.Offcanvas(a, {
backdrop: !1 !== n || „static“
}), a
}
constructor() {
this.$emitter = new a.Z
}
}
let l = Object.freeze(new r);
class c {
static open(e) {
let t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null,
s = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : „left“,
n = !(arguments.length > 3) || void 0 === arguments[3] || arguments[3],
a = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : 350,
i = arguments.length > 5 && void 0 !== arguments[5] && arguments[5],
o = arguments.length > 6 && void 0 !== arguments[6] ? arguments[6] : „“;
l.open(e, t, s, n, a, i, o)
}
static setContent(e) {
let t = !(arguments.length > 1) || void 0 === arguments[1] || arguments[1],
s = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 350;
l.setContent(e, t, s)
}
static setAdditionalClassName(e) {
l.setAdditionalClassName(e)
}
static close() {
let e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 350;
l.close(e)
}
static exists() {
return l.exists()
}
static getOffCanvas() {
return l.getOffCanvas()
}
static REMOVE_OFF_CANVAS_DELAY() {
return 350
}
}
},
3107: (e, t, s) => {
s.d(t, {
Z: () => n
});
class n {
get(e, t) {
let s = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : „application/json“,
n = this._createPreparedRequest(„GET“, e, s);
return this._sendRequest(n, null, t)
}
post(e, t, s) {
let n = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : „application/json“;
n = this._getContentType(t, n);
let a = this._createPreparedRequest(„POST“, e, n);
return this._sendRequest(a, t, s)
}
delete(e, t, s) {
let n = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : „application/json“;
n = this._getContentType(t, n);
let a = this._createPreparedRequest(„DELETE“, e, n);
return this._sendRequest(a, t, s)
}
patch(e, t, s) {
let n = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : „application/json“;
n = this._getContentType(t, n);
let a = this._createPreparedRequest(„PATCH“, e, n);
return this._sendRequest(a, t, s)
}
abort() {
if (this._request) return this._request.abort()
}
setErrorHandlingInternal(e) {
this._errorHandlingInternal = e
}
_registerOnLoaded(e, t) {
t && (!0 === this._errorHandlingInternal ? (e.addEventListener(„load“, () => {
t(e.responseText, e)
}), e.addEventListener(„abort“, () => {
console.warn(„the request to „.concat(e.responseURL, " was aborted“))
}), e.addEventListener(„error“, () => {
console.warn(„the request to „.concat(e.responseURL, " failed with status „).concat(e.status))
}), e.addEventListener(„timeout“, () => {
console.warn(„the request to „.concat(e.responseURL, " timed out“))
})) : e.addEventListener(„loadend“, () => {
t(e.responseText, e)
}))
}
_sendRequest(e, t, s) {
return this._registerOnLoaded(e, s), e.send(t), e
}
_getContentType(e, t) {
return e instanceof FormData && (t = !1), t
}
_createPreparedRequest(e, t, s) {
return this._request = new XMLHttpRequest, this._request.open(e, t), this._request.setRequestHeader(„X-Requested-With“, „XMLHttpRequest“), s && this._request.setRequestHeader(„Content-type“, s), this._request
}
constructor() {
this._request = null, this._errorHandlingInternal = !1
}
}
},
3327: (e, t, s) => {
s.d(t, {
Z: () => i
});
var n = s(2363);
let a = „element-loader-backdrop“;
class i extends n.Z {
static create(e) {
e.classList.add(„has-element-loader“), i.exists(e) || (i.appendLoader(e), setTimeout(() => {
let t = e.querySelector(“.“.concat(a));
t && t.classList.add(„element-loader-backdrop-open“)
}, 1))
}
static remove(e) {
e.classList.remove(„has-element-loader“);
let t = e.querySelector(“.“.concat(a));
t && t.remove()
}
static exists(e) {
return e.querySelectorAll(“.„.concat(a)).length > 0
}
static getTemplate() {
return '\n

\n

\n <span class=“').concat(„visually-hidden“, ‚„>Loading…\n

\n

\n ')
}
static appendLoader(e) {
e.insertAdjacentHTML(„beforeend“, i.getTemplate())
}
}
},
2363: (e, t, s) => {
s.d(t, {
L: () => i,
Z: () => o
});
var n = s(3266);
let a = „loader“,
i = {
BEFORE: „before“,
AFTER: „after“,
INNER: „inner“
};
class o {
create() {
if (!this.exists()) {
if (this.position === i.INNER) {
this.parent.innerHTML = o.getTemplate();
return
}
this.parent.insertAdjacentHTML(this._getPosition(), o.getTemplate())
}
}
remove() {
let e = this.parent.querySelectorAll(“.„.concat(a));
n.Z.iterate(e, e => e.remove())
}
exists() {
return this.parent.querySelectorAll(“.„.concat(a)).length > 0
}
_getPosition() {
return this.position === i.BEFORE ? „afterbegin“ : „beforeend“
}
static getTemplate() {
return '

\n <span class=“‘).concat(„visually-hidden“, ‚">Loading…\n

‘)
}
static SELECTOR_CLASS() {
return a
}
constructor(e, t = i.BEFORE) {
this.parent = e instanceof Element ? e : document.body.querySelector(e), this.position = t
}
}
}
}
]);

Thema		Antworten	Aufrufe
Canvas und Modalwarenkorb entfernen Programmierung	3	479	26. August 2022
Off-Canvas Warenkorb editieren Themes & Design	2	1093	15. April 2016
Warenkorb: Offcanvas & Modal deaktivieren? Programmierung	10	3725	9. Oktober 2019
Warenkorb-Link im Header ohne Umweg über Offcanvas-Warenkorb? Allgemein	7	701	8. Juni 2017
Offcanvas Warenkorb abändern Themes & Design	16	2675	30. Januar 2017

Warenkorb (Canvas) eingeblendet?detektieren?

Verwandte Themen