Butten -Warenkorb umbennen

[Hamadi1]

Hallo zusammen,

ich möchte gerne in unserem Onlineshop den Warenkorb-Button für Produkte, bei denen der Lagerbestand = 0 ist, von "Ausverkauft" auf z.B. "Lieferbar in 2-3 Wochen" umbenennen.

Ich habe einen Code geschrieben, der leider nicht funktioniert bzw. beim Testen keine Änderungen bewirkt hat.

Ich komme nicht weiter und überleg was sein kann:

1. Der Code falsch aufgebaut ist.
2. Ich den Code im falschen Ordner platziert habe (er steht unter "cart-drawer").
3. Ich etwas anderes übersehen habe.

Der Code befindet sich im Anhang.

Unser Onlineshop verwendet das Dawn-Theme.

Über jeden Tipp wäre ich sehr dankbar.

Viele Grüße,

[Gabe]

Hey @Hamadi1 

Das kann ich nachvollziehen was du machen möchtest denn du möchtest die Kunden gerne behalten die ein Produkt kaufen wollen das ausverkauft ist.

Nur ist es so dass der ATC (add-to-cart) Button ausgegraut ist wenn ein Produkt ausverkauft ist:

Den Button Text und "Sold Out" Label kannst du aber gerne in den standard Theme Texte ändern. Das würde ich empfehlen denn Ä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 folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Siehe hier wie ich das gemacht habe:

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.

[Hamadi1]

Hallo Gabe,

vielen Dank für die schnelle Antwort. Leider hilft mir die Idee nicht ganz.

Ich möchte dass der Warenkorb-Butten "Lieferbar 2-3 Wochen" bei Produkte angezeigt wird die keinen Lagerbestand haben.

Und der Kunde die möglichkeit hat das Produkt vorab zu bestellen.

Bei der Idee von dir, wird der text angezeigt wenn die Ware ausverkauft steht - passt soweit. Der Kunde kann aber die Ware noch nicht bestellen. Hier war meine Idee das Produkt auf "Verkauf fortsetzten, auch wenn Produkt nicht lagerhaltig ist" zu setzten. Dann wird aber der Butten "Lieferbar 2-3 Wochen" nicht mehr angezeigt.

Hast du eine Idee wie man diese Bedienungen einstellen kann?

Grüße,

[Gabe]

Hey @Hamadi1 

Ah, eine Pre-order Funktion war nicht in deiner ursprünglichen Frage zu lesen also 👀 wir am besten wie du das lösen kannst. Hat dir unsere Anleitung diesbzgl. hier helfen können? Hier auch in einem 3P-Blog Piece von GemPages.

Um den "Warenkorb"-Button in deinem Shopify-Shop für Produkte ohne Lagerbestand auf "Lieferbar in 2-3 Wochen" umzubenennen und gleichzeitig die Vorbestellung zu ermöglichen, gibt es somit weitere Ansätze zur obigen Anleitung, die ich hier jetzt aufliste:

• Verwendung einer Pre-Order-App: Shopify bietet verschiedene Apps, die es ermöglichen, Produkte als Vorbestellungen einzurichten. Diese Apps erlauben es dir, spezifische Einstellungen für Produkte ohne Lagerbestand zu treffen, einschließlich der Anpassung von Schaltflächentexten wie "Lieferbar in 2-3 Wochen". Apps wie „PreOrder Now“ oder „PreProduct“ sind hierfür beliebt. Diese Apps bieten auch die Möglichkeit, Zahlungen sofort oder zu einem späteren Zeitpunkt zu erfassen, abhängig von deinen spezifischen Bedürfnissen.
• Anpassung über das Shopify-Admin-Panel: Falls du lieber keine zusätzlichen Apps verwenden möchtest, kannst du auch direkt im Shopify-Admin-Bereich Einstellungen vornehmen. Du müsstest eine neue Produktvorlage erstellen, die speziell für Vorbestellungen gedacht ist, und dort den Button-Text anpassen. Dies erfordert allerdings etwas technisches Know-how bezüglich der Bearbeitung von Shopify-Themes und Liquid-Templates.
• Fortsetzung des Verkaufs bei 0 Lagerbestand: Um sicherzustellen, dass Produkte, die auf 0 gesetzt sind, noch bestellt werden können, solltest du die Einstellung „Verkauf fortsetzen, auch wenn Produkt nicht lagerhaltig ist“ in den Produktvarianten aktivieren. Diese Option ermöglicht es den Kunden, Produkte zu bestellen, auch wenn sie nicht sofort verfügbar sind.
• In beiden Fällen ist es wichtig, dass du eine klare Kommunikation bezüglich der Lieferzeiten auf deiner Produktseite implementierst, um die Erwartungen der Kunden entsprechend zu managen. Ein klarer Hinweis auf die Lieferzeiten kann helfen, das Kundenerlebnis zu verbessern und Vertrauen aufzubauen.

Wenn du es DIY machen möchtest im Code

Wenn du es selber auf deiner PDP 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 folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Um den Button in deinem Shopify-Shop dynamisch zu aktualisieren, je nachdem ob ein Produkt verfügbar ist oder nicht, kannst du JavaScript verwenden, um die Logik basierend auf dem Lagerstatus der Produkte zu steuern. Hier ist ein einfaches Beispiel, wie du deinen vorhandenen Button-Code anpassen könntest, um den Text dynamisch zu ändern:
 

Schritt 1: Prüfe den Lagerstatus

Du müsstest eine Funktion implementieren, die den Lagerstatus des Produkts überprüft. Dies kann durch eine Abfrage der Shopify API oder durch das Einbetten des Lagerstatus direkt in die Seite über Liquid-Variablen erfolgen.
 

Schritt 2: JavaScript hinzufügen

Füge folgenden JavaScript-Code hinzu, der auf Basis des Lagerstatus den Button-Text ändert im DAWN Theme:

<script>
document.addEventListener('DOMContentLoaded', function() {
  var productAvailability = {{ product.available }}; // Dies muss durch den tatsächlichen Code ersetzt werden, der den Verfügbarkeitsstatus prüft.

  var submitButton = document.getElementById('ProductSubmitButton-template--22571138220381__main');
  if (!productAvailability) {
    submitButton.disabled = false; // Aktiviert den Button, wenn das Produkt vorbestellt werden kann
    submitButton.querySelector('span').textContent = 'Lieferbar in 2-3 Wochen'; // Setzt den Button-Text
  } else {
    submitButton.disabled = true; // Deaktiviert den Button, wenn das Produkt nicht vorbestellt werden kann
    submitButton.querySelector('span').textContent = 'Ausverkauft'; // Setzt alternativen Text
  }
});
</script>

Dieser JavaScript-Code sollte innerhalb des <body>-Tags deiner Produktseitenvorlage eingefügt werden, idealerweise am Ende der Seite, um sicherzustellen, dass alle Elemente geladen sind, bevor das Skript ausgeführt wird.

Dieser Code ist ein grundlegendes Beispiel und muss möglicherweise an deine spezifischen Bedürfnisse und die Struktur deines Shopify-Themes angepasst werden. Wenn du Unterstützung bei der technischen Umsetzung benötigst, könnte es hilfreich sein, einen Shopify-Experten oder Entwickler zu konsultieren, um sicherzustellen, dass alles reibungslos funktioniert.

Hoffe das hilft dir weiter! 😉

[Hamadi1]

Hallo Gabe,

wenn ich die Pre-order Funktion im Shop programmieren möchte. Unter welchen Template würde das reingehören bzw. Datei? Bei "Dawn"-Theme.

Danke nochmal für deine Unterstützung.

Grüße,

[Gabe]

Hey @Hamadi1 

Du meinst nicht unsere Anleitung, die ich oben verlinkt hatte, folgen, und stattdessen es selber DIY einbauen? Tja, ganz einfach wird das nicht aber hier meine Tipps dazu und gerne kann ich einen unserer zertifizierten Shopify Experten dafür empfehlen.

Um den Button-Text in deinem Shopify-Shop dynamisch zu ändern, je nachdem ob ein Produkt verfügbar ist oder nicht, kannst du, wie gesagt, etwas Liquid und JS verwenden. Der Liquid-Code wird den Lagerstatus der Produkte überprüfen, während das JavaScript den Button-Text basierend auf diesem Status ändert.

Da dein aktueller Code ganz oben im cart-drawer Template platziert ist, und du sicherstellen möchtest, dass der Button-Text in deinem Shopify-Shop korrekt angezeigt wird, solltest du sicherstellen, dass der Code im richtigen Template ist und dass der JS korrekt ausgeführt wird.

Hier ist ein Beispiel wie du dies erreichen kannst:

Liquid-Code zur Überprüfung des Lagerstatus:

Im cart-drawer Template oder im relevanten Produkt-Template (product.liquid), überprüfe den Lagerstatus des Produkts. Dies kann wie folgt geschehen:

{% assign all_available = true %}
{% for item in cart.items %}
  {% unless item.variant.available %}
    {% assign all_available = false %}
  {% endunless %}
{% endfor %}

<button id="CartDrawer-Checkout" class="Cart__Checkout--button button" name="checkout" form="CartDrawer--form" {% if cart.item_count == 0 %}disabled{% endif %}>
  {% if all_available %}
    <span>Checkout</span>
  {% else %}
    <span>Lieferbar in 2-3 Wochen</span>
  {% endif %}
</button>

Füge den folgenden JS am Ende der Seite hinzu, um den Button-Text dynamisch zu ändern. Dies kann im theme.liquid Template direkt vor dem schließenden </body> Tag hinzugefügt werden:

<script>
document.addEventListener('DOMContentLoaded', function() {
  var productAvailability = {{ product.available }}; // Dies muss durch den tatsächlichen Code ersetzt werden, der den Verfügbarkeitsstatus prüft.

  var submitButton = document.getElementById('CartDrawer-Checkout');
  if (!productAvailability) {
    submitButton.disabled = false; // Aktiviert den Button, wenn das Produkt vorbestellt werden kann
    submitButton.querySelector('span').textContent = 'Lieferbar in 2-3 Wochen'; // Setzt den Button-Text
  } else {
    submitButton.disabled = true; // Deaktiviert den Button, wenn das Produkt nicht vorbestellt werden kann
    submitButton.querySelector('span').textContent = 'Ausverkauft'; // Setzt alternativen Text
  }
});
</script>

• Für das cart-drawer Template ist dein aktueller Platz wahrscheinlich korrekt, aber stelle sicher, dass der Button mit der ID CartDrawer-Checkout existiert.
• Für Produktseiten solltest du den entsprechenden Liquid- und JavaScript-Code im product-template.liquid hinzufügen.

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

[Hamadi1]

Das hat leider nicht geklappt. Habe ich was etwas übersehen?

Den Liquid-Code habe ich im "cart-drawer.liquid" eingefügt, anbei Auszug vom Code:

Den JS im "theme.liquid", anbei Auszug vom Code:

Die Template product.liquid oder product-template.liquid sind bei mir nicht vorhanden.

Grüße,