Anpassen des Symbols für den Warenkorb

Sie können das Aussehen des Einkaufstaschensymbols ändern, seine Position auf der Seite definieren, den leeren Warenkorb ausblenden oder animierte Effekte mit Hilfe spezieller Parameter, die dem Integrationscode hinzugefügt werden, hinzufügen.

Tipp: Wenn Sie das Warenkorbsymbol noch nicht zu Ihrer Webseite hinzugefügt haben, erfahren Sie, wie Sie es tun können, in der Anleitung Warenkorb zu Ihrem MyCOMMERCE Shop hinzufügen.

Hinweis: Beim Integrationscode handelt es sich um den Widget-Code, den Sie benötigen, um Ihren Shopkatalog in eine andere Webseite einzubinden. Lesen Sie mehr dazu.

Sie können mehrere Parameter innerhalb des Integrationscodes kombinieren, um das Warenkorbsymbol zu erstellen, das am besten zu Ihrem Website-Design passt.

In diesem Artikel:

Layout des Warenkorbsymbols ändern

Leeren Einkaufskorb ein- oder ausblenden
Einkaufskorb-Symbol ändern
Ändern der Grenzform der Einkaufstasche
Benutzerdefiniertes Warenkorbsymbol anwenden
Ändern der Position des Warenkorbs
Warenkorbanimation ein- oder ausblenden

Layout des Warenkorbsymbols ändern

Sie können das Layout des Warenkorbsymbols ändern, indem Sie den Parameter "data-layout" zum Container "ec-cart-widget" im Integrationscode hinzufügen, wie im folgenden Beispiel gezeigt:

<div data-layout="VALUE" class="ec-cart-widget">div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8">script><script>Ecwid.init();script>div>Kopieren

wo:
VALUE ist einer der unterstützten Werte für den Parameter data-layout;
STORE_ID ist die ID Ihres MyCOMMERCE-Shops.

Sie können die unterstützten Werte finden und sehen, wie jedes Layout in der folgenden Tabelle aussieht.

Leeren Einkaufskorb ein- oder ausblenden

Über den Parameter data-show-empty-cart, der für den Container "ec-cart-widget" im Integrationscode angegeben ist, können Sie den Einkaufskorb im leeren Zustand ein- oder ausblenden, wie im folgenden Beispiel gezeigt:

leerer warenkorb ausblenden oder einblenden

wo:
VALUE ist entweder TRUE oder FALSE;
STORE_ID ist die ID Ihres MyCOMMERCE-Shops.

Hinweis: Der Code funktioniert nur für schwebende Warenkorb.

Einkaufskorb-Symbol ändern

Sie können das Standard-Shopping Bag-Symbol ändern, indem Sie das Parameterdaten-Symbol zum Container "ec-cart-widget" im Integrationscode hinzufügen, wie im folgenden Beispiel gezeigt:

<div data-icon="VALUE" class="ec-cart-widget">div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8">script><script>Ecwid.init();script>div>Kopieren

wo:
VALUE ist einer der unterstützten Werte für den Datensymbolparameter;
STORE_ID ist die ID Ihres MyCOMMERCE-Shops.

Sie können die unterstützten Werte finden und sehen, wie jedes Symbol in der folgenden Tabelle aussieht.

Ändern der Rahmenform der Einkaufstasche

Sie können die Form der Umrandung um die Einkaufstasche herum ändern, indem Sie dem Container "ec-cart-widget" im Integrationscode die Parameter data-fixed-shape hinzufügen, wie im folgenden Beispiel gezeigt:

<div data-fixed-shape="VALUE" class="ec-cart-widget">div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8">script><script>Ecwid.init();script>div>Kopieren

wo:
WERT ist NONE (kein Rand) / RECT (Rechteckrand) / PILL (abgerundeter Rechteckrand);
STORE_ID ist die ID Ihres MyCOMMERCE-Shops.

Benutzerdefiniertes Warenkorbsymbol anwenden

Sie können ein benutzerdefiniertes Symbol für die Einkaufstasche verwenden, indem Sie den Parameter data-custom-icon-url zum Container "ec-cart-widget" im Integrationscode hinzufügen, wie im folgenden Beispiel gezeigt:

<div data-custom-icon-url="VALUE" 
class="ec-cart-widget">div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8">script><script>Ecwid.init();script>div>Kopieren

wo:
VALUE ist entweder eine URL zur benutzerdefinierten Symboldatei oder ein SVG-Markup;
STORE_ID ist die ID Ihres MyCOMMERCE-Shops.

Ändern der Position des Warenkorbs

Sie können die Position des Einkaufskorbs durch mehrere Parameter ändern, die dem Container "ec-cart-widget" im Integrationscode hinzugefügt wurden.

<div data-fixed="VALUE" 
data-fixed-position="VALUE"
data-fixed-shape="VALUE" 
data-horizontal-indent="VALUE" 
data-vertical-indent="VALUE" class="ec-cart-widget">div>
<div>
<script data-cfasync="false" type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8">script><script>Ecwid.init();script>div>Kopieren

wo:
VALUE ist einer der unterstützten Werte für jeden Parameter;
STORE_ID ist die ID Ihres MyCOMMERCE-Shops.

Die Parameter, die es ermöglichen, die Position des Warenkorbs und die unterstützten Werte zu ändern, finden Sie in der folgenden Tabelle.

Parameter	Wert	Beschreibung
datenfixiert	TRUE / FALSE	Sorgt dafür, dass der Warenkorb an einer bestimmten Stelle auf Ihren Seiten fixiert wird.
datenfixierte Position	TOP_LEFT / TOP_RIGHT / BOTTOM_LEFT / BOTTOM_RIGHT	Setzt den Warenkorb auf den Bildschirm und lässt das Symbol folgen, während Sie durch die Seite scrollen.
Daten-Horizontal-Einrückung	Positive integer including zero	Definiert den horizontalen Rand zwischen dem Warenkorb Widget und dem Rand des Bildschirms oder eines iframe Containers.
Daten-Vertikal-Einrückung	Positive integer including zero	Definiert den vertikalen Abstand zwischen dem Warenkorb Widget und dem Rand des Bildschirms oder einem Iframe-Container.

Warenkorbanimation ein- oder ausblenden

Sie können den animierten Effekt ein- oder ausblenden, wenn Artikel zum Einkaufskorb hinzugefügt werden, indem Sie den Parameter data-show-buy-animation verwenden, der für den Container "ec-cart-widget" im Integrationscode angegeben ist, wie im folgenden Beispiel gezeigt:

<div data-show-buy-animation="VALUE" 
class="ec-cart-widget">div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8">script><script>Ecwid.init();script>div>Kopieren

wo:
VALUE ist entweder TRUE oder FALSE;
STORE_ID ist die ID Ihres MyCOMMERCE-Shops.