Cart Icon ändern

[mastahlb]

Guten Tag,

ich möchte gerne ein eigenes Icon für den Warenkorb haben. Hierzu habe ich mit Hilfe von Adobe Illustrator ein Icon im SVG Format erstellt. Dieses möchte ich nun gerne für meinen Store benutzen. Ich benutze das Motion Theme von ArchetypeTheme. Wie gehe ich am besten vor?

Mit freundlichen Grüßen

[Gabe]

Hey @mastahlb 

Danke für die Angaben und 👀 wir wie du deinen eigenen Icon im svg Filetype als Cart Icon verwenden kannst im Motion Theme. Du musst auch überlegen, dass das Cart Icon sich auch ändern muss wenn ein Kunde ein Produkt im Cart hat, wie eine 1 oder 2 oder einen roten Punkt an das Bild dranhängen usw. Wie hast du dir das genau überlegt?

1. Du musst die Datei finden, in der das aktuelle Icon eingefügt ist. Oft ist dies eine Datei wie header.liquid oder eine spezifische Icon-Datei. In deinem Fall könnte es die header-icons.liquid sein.

2. Ersetze das SVG-Icon: Innerhalb der Datei, suche nach dem <svg>-Tag, das das aktuelle Warenkorb-Icon darstellt. Ersetze den bestehenden SVG-Code durch den SVG-Code deines neuen Icons. Achte darauf, dass du die Klasse beibehältst, die für das Styling verwendet wird, zum Beispiel class="icon icon-cart".

Hinweise:

• Es ist wichtig, dass du den ViewBox-Parameter deines SVGs korrekt einstellst, damit das Icon richtig skaliert.
• Stelle sicher, dass das neue SVG-Icon dieselben Dimensionen wie das alte Icon hat, um Layout-Probleme zu vermeiden.
• Wenn du nur die Umrisse des Icons benötigst (nicht gefüllt), musst du sicherstellen, dass dein SVG fill="none" und möglicherweise stroke="currentColor" (oder eine spezifische Farbe) für die Linien verwendet.

Um in deinem Shopify-Store das Warenkorb-Icon dynamisch zu aktualisieren, wenn Produkte hinzugefügt oder entfernt werden, kannst du eine Kombination aus Liquid, HTML, CSS und JavaScript verwenden. Shopify's Liquid Template-Sprache bietet vielfältige Möglichkeiten, um auf Daten wie die Anzahl der Artikel im Warenkorb zuzugreifen und diese im Frontend darzustellen.

Hier ist ein allgemeiner Ansatz, wie du das Icon so anpassen kannst, dass es die Anzahl der Artikel im Warenkorb anzeigt:

1. Anpassen des SVG-Icons:

   • Integriere dein eigenes SVG-Icon, wie ich es zuvor beschrieben habe, und stelle sicher, dass es als Teil des Warenkorb-Links im HTML platziert ist.
2. Anzeigen der Artikelanzahl:
   • Füge innerhalb des <a> Tags für den Warenkorb ein <span> Tag hinzu, das zur Anzeige der Artikelanzahl dient. Dieses Tag sollte sichtbar gemacht werden, wenn Artikel im Warenkorb sind.

Beispiel Code:

<a href="/cart" class="site-nav__link site-nav__link--icon js-drawer-open-cart js-no-transition">
  <svg class="icon icon-cart"><!-- Dein SVG-Code hier --></svg>
  <span class="cart-link__bubble{% if cart.item_count > 0 %} is-visible{% endif %}">
    {{ cart.item_count }}
  </span>
</a>

• Verwende CSS, um die Anzeige der Artikelanzahl zu gestalten. Zum Beispiel könnte das span-Element mit der Klasse .cart-link__bubble nur angezeigt werden, wenn Artikel im Warenkorb sind.

Beispiel CSS:

.cart-link__bubble {
  display: none;
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 2px 5px;
  font-size: 0.75rem;
}

.cart-link__bubble.is-visible {
  display: block;
}

• Wenn du AJAX verwendest, um Artikel zum Warenkorb hinzuzufügen, stelle sicher, dass das JavaScript, das die Warenkorbfunktion steuert, auch die Anzahl in der .cart-link__bubble aktualisiert. Shopify bietet hierfür oft schon eingebaute Methoden, oder du kannst einfache jQuery/JavaScript verwenden, um den Inhalt dieses Elements zu aktualisieren.

Beispiel Javascript:

document.addEventListener('cart:updated', function(event) {
  var cartCount = event.detail.cart.item_count;
  var cartBubble = document.querySelector('.cart-link__bubble');
  if (cartCount > 0) {
    cartBubble.textContent = cartCount;
    cartBubble.classList.add('is-visible');
  } else {
    cartBubble.classList.remove('is-visible');
  }
});

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.