3 Pflichtfelder zum auswählen im Checkout

[WWC2023]

Hi zusammen, 

Nach dem der Kunde seine Bestellung in den Warenkorb hinzugefügt hat, soll er die Möglichkeit erhalten nochmal 2 Service Optionen auszuwählen. 

Service 1 = 3% Serviceaufschlag auf die Bestellsumme 

Service 2 = 5% Serviceaufschlag auf die Bestellsumme

Das sind keine Up-Sell Produkte, sondern ein Service, welcher angeklickt wird.

Also muss irgendwo im Checkout 2 Zeilen mit den oben genannten Service Optionen stehen, die der Kunde anklicken kann. Dann soll automatisch der Service Preis anhand der Bestellsumme berechnet werden. 

Mit welchem Kostenlosen Tool kann ich das umsetzten ? 

Vielen Dank 

[Gabe]

Hey @WWC2023 

Danke für die Frage und mit einem kostenlosen Tool - das wäre eine Fehlanzeige so wie es aussieht, da erstens die Integration von zusätzlichen Service-Optionen mit prozentualen Aufschlägen auf die Bestellsumme im Checkout-Prozess auf Shopify komplex sein wird, und zweitens da Shopify von Haus aus ziemlich eingeschränkte Anpassungsmöglichkeiten für den Checkout bietet, insbesondere ohne den Zugriff auf das checkout.liquid was ja auf einem Non-Plus Plan nicht geht.

Ich werde zwei Optionen hier vorschlagen - einmal die Apps und dann es DIY machen mit einem unserer Experten:

Für normale Shopify-Konten könntest du nach Apps im Shopify App Store suchen, die ähnliche Funktionen bieten. Einige Apps ermöglichen es, zusätzliche Gebühren oder Optionen im Warenkorb hinzuzufügen, bevor der Kunde zum Checkout geht.

• Cart Attributes: Du kannst Cart Attributes verwenden, um benutzerdefinierte Informationen von Kunden im Warenkorb zu sammeln. Dies ist jedoch eher für Textinformationen und weniger für berechnete Aufschläge gedacht.
• Bold Product Options: Diese App (nicht kostenlos, aber mit einer kostenlosen Testversion) ermöglicht es, zusätzliche Optionen wie Aufschläge einzubinden. Kunden können diese Optionen vor dem Checkout auswählen, und die Aufschläge werden zur Bestellsumme hinzugefügt.
• Cart Convert App für Cross-Sells in deinem Fall, nicht Upsells - siehe meinen Video dazu hier, wo ich die Vorteile dieser App zeige.

Es DIY machen:

Wenn du keine passende kostenlose App findest und nicht bereit bist, für eine kostenpflichtige App zu zahlen, könntest du eine eigene kleine Lösung mittels eines benutzerdefinierten JavaScript-Skripts implementieren, das im Warenkorb-Seitentemplate eingefügt wird. Hier ist ein einfaches Beispiel, wie du es aufsetzen könntest:

• Füge Optionen im Warenkorb hinzu: Modifiziere das Warenkorb-Template, um Checkboxen oder Dropdown-Menüs für die Service-Optionen hinzuzufügen.
• Berechne die Aufschläge mit JavaScript:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const cartTotal = parseFloat(document.querySelector('.cart-total').textContent.replace('€', ''));
    const service1 = document.getElementById('service1');
    const service2 = document.getElementById('service2');
    const updateTotal = () => {
        let extraFee = 0;
        if (service1.checked) extraFee += 0.03 * cartTotal;
        if (service2.checked) extraFee += 0.05 * cartTotal;
        document.querySelector('.total-with-service').textContent = `Gesamt: €${(cartTotal + extraFee).toFixed(2)}`;
    };
    service1.addEventListener('change', updateTotal);
    service2.addEventListener('change', updateTotal);
});
</script>

Dieser Code geht davon aus, dass du Elemente mit den IDs service1 und service2 sowie ein Element zur Anzeige des Gesamtbetrags hast. Beachte auch, dass diese Methode lediglich den visuellen Teil abdeckt. Du musst sicherstellen, dass diese zusätzlichen Gebühren auch tatsächlich zur Bestellung hinzugefügt werden, was möglicherweise manuelle Anpassungen nach der Bestellung erfordert oder durch eine App, die mit dem Shopify-Checkout interagiert, automatisiert wird.

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.

[WWC2023]

Hallo Gabe, 

vielen Dank für dein Feedback und das Video. Super Service! 

Wichtig ist für mich dass es im Checkout stattfindet. Da einige Kunden den Warenkorb überspringen und direkt zum Checkout gehen. 

Cart Convert App - Die App hilft leider nicht weiter, da die Kunden dann bei jedem Produkt den Service auswählen müssen. Teilweise werden 40 Produkte bestellet und dafür ist es dann zu umständlich. 

Ich habe vergessen zu erwähnen, dass die Serviceleistungen ein Pflichtfeld sein müssen. Das heißt, die Kunden müssen einen Service auswählen. 

Meine Kunden kennen auch den Service. Die wissen dass es den gibt, jedoch möchte ich jedem beim Check-out die Wahl lassen, welche Sie auswählen möchten. 

Ich wäre auch mit einer kostenpflichtigen App einverstanden. 

Bold Product Options - Diese App hört sich nach deiner Beschreibung richtig an, aber ich habe nichts im Shop gefunden. 

[Gabe]

Hey @WWC2023 

Ich glaube Bold Product Options heißen jetzt sogar anders. Klicke doch einfach mal durch die versch. Demos der Apps in diesem Thread. Und auch in diesem. 

Hoffe du findest etwas was deinem Use-Case passt. 

Noch ein schönes W-Ende! 😉

[WWC2023]

Hi Gabe, 

danke dir aber ich bin leider nicht fündig geworden. Die Apps sind meistens alle für Produktvarianten. 

Bei mir ist ganz simple. Einfach im Checkout 3% oder 5 % auf die Bestellsumme. Ich suche zwar weiter, aber hoffe dennoch dass du auch vielleicht eine Lösung hast

[Gabe]

Hey @WWC2023 

Hast du eine Lösung gefunden? Ich selber kann ja nur was ich oben bereits vorgeschlagen habe, anbieten sowie ein paar weitere Tipps unten:

Du benötigst ja eine spezifische Lösung für den Shopify-Checkout, bei der die Kunden die Wahl zwischen zwei Service-Optionen mit einem prozentualen Aufschlag auf die Bestellsumme haben müssen. Diese Anforderung direkt im Checkout umzusetzen ist ja nicht möglich wie wir bereits wissen. Und die SC Product Options App hat nicht helfen können da sie alle neue sog. "virtuelle" Produktvarianten erstellen, ist das richtig? Product Options by HulkApps ist eine weitere App, die ähnliche Funktionen wie Bold bietet und möglicherweise das Hinzufügen von prozentualen Aufschlägen erlaubt. Diese App ist gut bewertet und könnte eine brauchbare Alternative sein.

Es DIY machen

Wenn keine App deinen Anforderungen entspricht und du keine App finden kannst, die speziell im Checkout Zusatzoptionen erlaubt, könntest du, wie bereits oben erwähnt, in Betracht ziehen, eine maßgeschneiderte Lösung zu entwickeln. Einer unserer zertifizierte und erfahrene Shopify-Entwickler könnte dir helfen, eine Lösung zu bauen, die vor dem Checkout-Prozess Zusatzoptionen anbietet und diese in den Gesamtbetrag einrechnet.

Wenn du die Optionen im Warenkorb implementieren möchtest, kannst du beispielweise JS verwenden, um die Benutzerinteraktion zu verwalten und die Kosten dynamisch zu aktualisieren. Hier ist ein einfaches Beispiel für ein Skript, das du verwenden könntest:

document.addEventListener('DOMContentLoaded', function() {
  const cartTotalElement = document.querySelector('.cart-total');
  const serviceOption1 = document.querySelector('#service1');
  const serviceOption2 = document.querySelector('#service2');

  function updateTotal() {
    const cartTotal = parseFloat(cartTotalElement.textContent.replace('€', ''));
    let additionalFee = 0;

    if (serviceOption1.checked) additionalFee += 0.03 * cartTotal;
    if (serviceOption2.checked) additionalFee += 0.05 * cartTotal;

    cartTotalElement.textContent = `Gesamt: €${(cartTotal + additionalFee).toFixed(2)}`;
  }

  serviceOption1.addEventListener('change', updateTotal);
  serviceOption2.addEventListener('change', updateTotal);
});

Dieses Skript fügt Funktionen für zwei Service-Optionen hinzu, die jeweils 3% bzw. 5% zum Gesamtwert des Warenkorbs hinzufügen, wenn sie ausgewählt sind. Stelle sicher, dass die ausgewählten Optionen und die zusätzlichen Gebühren korrekt an das Checkout-System und die Bestellabwicklung übermittelt werden. Dies kann durch Anpassungen am Shopify Backend oder durch die Nutzung von Shopify Webhooks erreicht werden.

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.

[WWC2023]

Hallo Gabe, 

danke für deine Mühe. 

Wenn es im Checkout nicht funktioniert, fällt mir da noch eine Möglichkeit ein. Und zwar dass ich das ganze im Warenkorb darstelle. Und damit keine Kunden den Warenkorb überspringen können, könnte ich ja die Funktion, dass die Kunden direkt zum Checkout gehen deaktivieren. Das heisst, diese müssten dann zwangsweise über den Warenkorb gehen. Und könnte ich dann dort die Service Funktion durch eine Shopify App darstellen ? Wenn ja, hast du eine Idee, welche ? 

Folgend sende ich dir ein Foto von einem anderen Shop, bei dem es genau so ist, wie ich es möchte. Jedoch glaube ich, dass es kein Shopify Store ist. https://www.internationaltrading-sweets.de/

[Gabe]

Hey @WWC2023 

Das Shop wurde von https://cloud9dg.com/ gebaut und ist somit eine Custom Solution. Kostenschätzung - um die €10k-€30k.

Wie wäre es mit einer unserer Handling-Fees oder Surcharges Apps, die es ermöglichen, zusätzliche Gebühren basierend auf einem Prozentsatz anzupassen. Diese Apps bieten normalerweise Optionen für den Warenkorb, könnten aber auch Möglichkeiten für den Checkout bieten. Klicke in die App Demos hier. 

Wie du selbst sagst, könntest du eine App nutzen, um die Servicegebühren im Warenkorb zu integrieren und sicherzustellen, dass die Kunden nicht direkt zum Checkout gelangen können. Du könntest Apps wie "Cart Attributes" verwenden, um benutzerdefinierte Felder im Warenkorb zu erstellen, wo Kunden ihre Serviceoptionen auswählen können.

Wie könnte man diese logik DIY in den cart einbauen?

Du kannst benutzerdefinierte Attribute im Warenkorb verwenden, um die Serviceoptionen als Auswahlmöglichkeiten hinzuzufügen. Diese Attribute werden dann bei der Bestellung übertragen. Für die Preisberechnung der Servicegebühren auf Basis der gewählten Optionen kannst du ein kleines JavaScript-Snippet schreiben, das:

1. Die ausgewählten Optionen überwacht.
2. Die Gesamtsumme des Warenkorbs nimmt und den entsprechenden Prozentsatz berechnet.
3. Diese zusätzlichen Kosten dann als separate Linienposten oder als zusätzliche Information zur Bestellung hinzufügt.

4. Um sicherzustellen, dass ein Service gewählt werden muss, könntest du das Abschicken des Formulars verhindern, bis eine Auswahl getroffen wurde:

document.addEventListener('DOMContentLoaded', function() {
  updateCartTotal(); // Initialer Aufruf zur Aktualisierung der Kosten

  // Event-Listener für Service-Optionen
  document.querySelectorAll('.service-option-input').forEach(function(input) {
    input.addEventListener('change', function(e) {
      updateCartTotal();
    });
  });

  // Funktion zur Berechnung und Aktualisierung der Servicekosten
  function updateCartTotal() {
    var cartTotal = Shopify.checkout.subtotal_price; // Annahme: Shopify-Objekt verfügbar
    var serviceCharge = 0;

    // Prüfe, welche Serviceoption gewählt ist und berechne den Aufschlag
    if (document.getElementById('service-option-1').checked) {
      serviceCharge = cartTotal * 0.03; // 3% Aufschlag
    } else if (document.getElementById('service-option-2').checked) {
      serviceCharge = cartTotal * 0.05; // 5% Aufschlag
    }

    // Füge den Serviceaufschlag zum Gesamtpreis hinzu
    var newTotal = cartTotal + serviceCharge;
    document.getElementById('cart-total').textContent = `$${newTotal.toFixed(2)}`;
    
    // Aktualisiere verstecktes Feld für Servicegebühr, um es im Checkout zu übermitteln
    document.getElementById('service-charge-field').value = serviceCharge;
  }

  // Formular-Submit Event-Listener, um zu überprüfen, ob eine Serviceoption gewählt wurde
  document.getElementById('cart-form').addEventListener('submit', function(e) {
    if (document.querySelector('.service-option-input:checked') === null) {
      e.preventDefault(); // Verhindere das Absenden des Formulars
      alert('Bitte wähle eine Serviceoption.');
    }
  });
});

Diese Code-Schnipsel sind konzeptionell und basieren auf der Annahme, dass die entsprechenden HTML-Elemente und IDs vorhanden sind. Du müsstest sie auf deine spezifische Situation anpassen. Weiterhin solltest du die Berechnungen serverseitig bestätigen, um Manipulationen zu verhindern.

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