Checkbox erstellen

[leoenergy]

Hallo zusammen,

ich verkaufe Komponenten für Solaranlagen über meinen Shop.

Seit Januar 2023 gilt der 0% Steuersatz für Solaranlagen und dazugehörige Komponenten. Dies ist jedoch an Bedingungen geknüpft. Ich möchte eine Checkbox auf der Produktseite erstellen wo der Kunde bestätigen muss das er diese Bedingungen erfüllt, andernfalls wird beim Checkout die MwSt. zum Kaufpreis zusätzlich berechnet.

Lässt sich das realisieren? Und wenn ja, wie?

Vielen Dank schan mal!

LG

Peter

[Gabe]

Hey @leoenergy 

Der leichte schnelle Weg, das zu realisieren mit einer professionell-aussehenden Checkbox, wären die folgenden Apps von denen ich die Demos hier jetzt aufliste um dir den Aufwand zu reduzieren, und die meisten entweder eine free Plan haben oder mit €0.99/Monat anfangen und das per schnellen Drag & Drop einrichten lassen.

Lass mich wissen, falls eine davon für euch in Frage käme:

• Geschäftsbedingungen Pro+
• TnC: Terms and Conditions CBox App
• T&C Agree Terms and Conditions App
• Siehe sie alle hier

----
Habt ihr schon über Ostern nachgedacht? Warum nicht etwas "Easter Egg Gamification" im Vorfeld Osterns in den Shop einbauen? Man kann z. B. eine Annonce auf der Homepage zeigen, dass Oster Eier im Shop versteckt sind und wenn diese gefunden werden, werden sie automatisch als Geschenk zum Warenkorb ergänzt. Gerne können wir hier weiter darüber plaudern!

Lass wissen, wenn du weitere Fragen hast zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[leoenergy]

Vielen Dank für den Tipp!

Ich habe jetzt so ziemlich jede dieser Apps ausprobiert, und leider keine gefunden die mein Problem lösen kann.

[Gabe]

@leoenergy 

Also die Checkbox muss auch eine gecodete Logik auslösen, ist das richtig? Wenn der Besucher die Checkbox ankreuzt dann wird der Nettopreis im Warenkorb berechnet. Wenn er die Checkbox nicht ankreuzt dann wird der Bruttopreis berechnet, stimmt's?

Eine Checkbox in ein Code Block der Produktseite oder in eine Cart Vorlage (mehr dazu hier) händisch programmieren ist machbar - mehr dazu hier (bitte immer zuerst in einer Testumgebung testen bevor man es im Live Theme implementiert). Aber dann die folgende Bedingungslogik noch dazu wird schwierig wenn kaum machbar denn es verlangt einen Call an einen Tax Engine Endpoint im API:

• IF Checkbox = True
• THEN pull total gross price
• ELSE pull net price

Bitte alles weitere mit einem Experten besprechen:

Einen Code den du in den cart.js einbauen kannst um eine Checkbox an einer bestimmten Stelle erscheinen zu lassen die man bestätigen muss sähe wie das folgende Code aus (die Text Strings wie erforderlich anpassen):

Spoiler

$(document).ready(function() {
$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
if ($('#agree').is(':checked')) {
$(this).submit();
}
else {
alert("Hiermit bestätigen Sie, dass Sie die Bedingung erfüllen.....usw.");
return false;
}
});
});

Finde im main-cart-footer.liquid das HTML Code für den checkout button wie ein <button> oder <input> Element mit dem name attribute = checkout. Das Code könnte wie folgt aussehen:

<button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>

Auf einer frischen Zeile oberhalb des obigen Checkout Button Codes, füge den folgenden Code ein:

<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
  <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
  <label style="display:inline; float:none" for="agree">
    Ich stimme den......zu... <a href="/pages/terms-and-conditions">terms and conditions</a>.
  </label>
</p>

Verwende auch ggf. einen <a href="/pages/terms-and-conditions" target="_blank"> anstatt bloss <a href="/pages/terms-and-conditions"> so dass die ursprüngliche Warenkorbseite intakt bleibt. Bei dem Code öffnet sich auch die Seite mit den jeweiligen Geschäftsbedingungen in einem neuen Tab, das nach dem Lesen geschlossen werden kann, während das Fenster des Warenkorbs weiterhin für den Kunden zur Kasse bereitsteht. Dies ist notwendig so dass der Kunde darüber lesen kann bevor er zustimmt.

Um den Netto- oder Bruttoproduktpreis und den Gesamtbetrag auf der Warenkorb-Seite anzuzeigen, je nachdem, ob ein Kunde das Kästchen ankreuzt oder nicht, muss man einige Anpassungen im Code vornehmen. Die gesamten Schritte dazu (in einer Testumgebung testen zusammen mit einem Experten):

1. Erstelle das Kontrollkästchen wie oben beschrieben mit dem der Kunde zwischen Netto- und Bruttopreisen umschalten kann.
2. Füge JavaScript hinzu, um die Umschaltung zw. Netto und Brutto zu steuern: Du musst JavaScript-Code schreiben, um die Umschaltung zu steuern und die Preise und den Gesamtbetrag zu aktualisieren, wenn das Kästchen markiert oder nicht markiert ist.
3. Aktualisiere die Liquid-Vorlage damit die Netto- oder Bruttopreise und die Gesamtsumme angezeigt werden, je nachdem, ob das Kontrollkästchen aktiviert ist oder nicht.

Hier ist ein Beispiel für JavaScript, dass du verwenden kannst, um das Umschalten des Kontrollkästchens zu steuern und die Preise und den Gesamtbetrag zu aktualisieren:

Spoiler

// Get the checkbox element
var checkbox = document.getElementById("toggle-prices");

// Listen for changes to the checkbox
checkbox.addEventListener("change", function() {
  // Get all the price elements on the page
  var prices = document.getElementsByClassName("price");

  // Loop through all the price elements
  for (var i = 0; i < prices.length; i++) {
    // Get the current price
    var price = parseFloat(prices[i].textContent.replace("$", ""));

    // Calculate the new price
    var newPrice = (checkbox.checked) ? price * 1.2 : price / 1.2;

    // Update the price element with the new price
    prices[i].textContent = "$" + newPrice.toFixed(2);
  }

  // Update the total amount
  var total = document.getElementById("total-amount");
  total.textContent = "$" + calculateTotal().toFixed(2);
});

// Calculate the total amount
function calculateTotal() {
  // Get all the price elements on the page
  var prices = document.getElementsByClassName("price");

  // Calculate the total amount
  var total = 0;
  for (var i = 0; i < prices.length; i++) {
    total += parseFloat(prices[i].textContent.replace("$", ""));
  }

  return total;
}

Hier ist ein Beispiel für Liquid, um die Netto- oder Bruttopreise je nach Zustand des Kontrollkästchens anzuzeigen:

<span class="price">{{ line_item.price | money }}</span>

Hier wird der price Wert wird mit 1,2 multipliziert oder durch 1,2 geteilt, je nach Zustand des Kontrollkästchens, der vom JavaScript-Code gesteuert wird.

Beachte, dass du das Kontrollkästchen in die Cart Vorlage einfügen und sicherstellen musst, dass es eine id des toggle-prices Wert für den JavaScript Code hat um korrekt zu funzen. Außerdem musst du sicherstellen, dass die Preiselemente eine price Klasse hat um den JavaScript zu finden und aktualisieren.

Das alles sind aber nur Ideen ohne Gewähr! Um letztendlich eine solche Lösung umzusetzen wirst du einen Programmierer heuern müssen und gerne kann ich welche empfehlen.

VG,

[leoenergy]

Vielen Dank!

Das hört sich super an. Nur habe ich so absolut keine Ahnung vom Programmieren.

Daher wäre ich über eine Empfehlung von einem Programmierer sehr Dankbar.

Gruß

Peter

[Gabe]

@leoenergy 

Ok der erste Ort einen Programmierer zu finden wäre unsere private FB Gruppe - poste deine Frage in unserer privaten FB Gruppe hier und da wird sich hoffentlich jemand melden.

Wenn nicht dann siehe unsere Experts Directory hier. Eine E-Mail an diese Experten kostet ja nichts und die antworten meistens auch ganz schnell.