Shopify App - Produkt Preisanpassung

[Rofl]

Hallo, 

hat jemand Erfahrung mit der Entwicklung von einer Shopify App mit der man den Preis eines Produktes anpassen kann?

Ich möchte das Produkt an sich nicht verändern ich möchte anhand von Felder/Extras den Preis individuell anpassen und auch keine weitere Varianten erstellen.

Danke schon mal! 🙂 

[Gabe]

Hey @Rofl 

Danke für die Frage und du möchtest eine Shopify App entwickeln ist das richtig? Bist du Shopify Partner oder unseren Partner Program beigetreten um eine App zu entwickeln? Das Shopify-Partnerprogramm ist ein Netzwerk aus Entwicklern, Designern und Marketern, die Apps, Themes und E-Commerce-Websites mit Shopify erstellen. Partner haben Zugang zu Ressourcen, Support und verschiedenen Möglichkeiten, Geld zu verdienen. Weitere Details findest du in diesem Artikel.

Deine App soll auch den Preis eines Produktes anpassen. Was genau meinst du damit denn dies ist nicht ganz klar, wie z. B. wenn du sagst: "das Produkt an sich nicht verändern ich möchte anhand von Felder/Extras den Preis individuell anpassen und auch keine weitere Varianten erstellen"

Um eine Shopify-App zu entwickeln, die es dir ermöglicht, den Preis eines Produktes anzupassen, ohne das Produkt selbst oder seine Varianten zu verändern, hast du dich mit der Shopify API schon vertraut gemacht? Das und andere wichtige Details konnte ich deiner Beschreibung nicht entnehmen.

Die Shopify API ermöglicht es dir, auf Backend Produktdaten eines Shops zuzugreifen und diese zu modifizieren. Sie ermöglicht es dir auch, eine eigene benutzerdefinierte oder public App für Shopify-Shops zu erstellen. Um zu beginnen, hole dir einen API-Key und Password und erstelle einen gratis Entwicklershop. Erfahre mehr in unsere Englischen Anleitung für den Einstieg hier.

Erstelle eine GUI, die es Shop-Besitzern ermöglicht, zusätzliche Optionen oder Extras zu ihren Produkten hinzuzufügen. Diese Oberfläche sollte möglichst in das Shopify Admin integriert sein. Entwickle auch die Logik, die den Preis des Produkts basierend auf den ausgewählten Extras anpasst. Dies könnte über Skripte oder durch Anpassung des Preises im Warenkorb erfolgen. 

Du kannst Shopify Webhooks verwenden, um über Änderungen an Produkten informiert zu werden. Nutze Webhooks, um den Preis anzupassen, wenn bestimmte Bedingungen erfüllt sind. Webhooks sind Tools zum Abrufen und Speichern von Daten aus bestimmten Ereignissen. Sie senden Daten im JSON- oder XML-Format an eine bestimmte URL. Weitere Details findest du in diesem Artikel über Webhooks.

---
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.

[Rofl]

Hallo Gabe,

danke für die schnelle Antwort.
Ich schau mir dein Infos alle in Ruhe an vllt helfen mir diese schon weiter 🙂

Genau mit der Shopify API hab ich schon gearbeitet ebenso hab ich schon eine App für den Checkout erstellt (Checkout Extenion).

Aktuell geht es aber darum, dass ein Kunde z.B. ein Bild hat und hier Extras anbietet diese sollen aber nicht als Extra Variante sein sondern wirklich einfach extra (auch nicht als weiteres Produkt). Je nach ausgewähltem extra bzw ggf. auch mehreren soll sich der Preis des Grundprodukte ändern.

Beispiel ich kaufe ein Bild und sag dieses soll einen speziellen Rahmen bekommen, eine spezielle Beschichtung usw.... Dann soll auf das Bild z.B, für 50€ + +15€ (Rahmengebühr) + 5€ Beschichtungsgebühr drauf kommen.
Ich möchte aber das Produkt an sich nicht ändern und auch kein neues anlegen.... (das würde ich ja über die Admin-API machen können).

Aber kurz zusammengefasst geht es einfach darum, ein Grundprodukt mit einem neuen Preis in den Warenkorb zu legen, ohne weitere Produkte/Varianten anzulegen. 

Ich hoffe es ist nun verständlicher.

Beste Grüße
Rolf Steiger 

[Gabe · Accepted solution]

Hey Rolf! @Rofl 

Verstehe, und dein Vorhaben, den Preis eines Grundprodukts durch Hinzufügen von Extras individuell anzupassen, könnte durchaus im Code möglich sein.

Du möchtest somit dem Kunden es erlauben extra Product Options auf der PDP dem Grundprodukt hinzu zu ergänzen, was dann den Preis natürlich etwas erhöhen wird, je nach dem, wie in diesem Beispiel hier. Diese Optionen könnten somit als Dropdown-Menüs, Checkboxen, oder Radio-Buttons gestaltet werden usw.

Wenn der Kunde eine oder mehrere Optionen auswählt, passt die Bedingungslogik den Gesamtpreis des Produkts dann dynamisch an. Dies kann mit JavaScript realisiert werden, indem du auf Benutzereingaben hörst und den Preis entsprechend der ausgewählten Extras anpasst. Sobald der Kunde seine Auswahl getroffen hat und das Produkt zum Warenkorb hinzufügt, musst das System die Informationen über die ausgewählten Extras und den angepassten Preis an den Warenkorb übermitteln. Dies kann über eine Anpassung der Shopify-Cart-API erfolgen.

Shopify-Apps, die Produkt-Personalisierung ermöglichen, erstellen oft separate "virtuelle" Produkte für personalisierte Optionen. Dies liegt daran, dass Shopify's Standardfunktionalität normalerweise keine direkten Produktmodifikationen (wie Aufpreise für Personalisierung) unterstützt, ohne ein separates Produkt zu erstellen.

Wenn eine Bestellung somit vom Kunden erstellt wird mit so einer Personalisation, wird im System ein separates "virtuelle" Produkt für die personalisierte Optionen erstellt (was nicht gelöscht werden kann). Dieses virtuelle Produkt der "Item Personalization" ist somit ein notwendiger Bestandteil des Prozesses und kann nicht rückgängig gemacht werden, und es wird auch nicht im Inventar als Standalone Produkt gezählt.

Dein Ansatz, keine neuen Varianten oder Produkte zu erstellen, ist sinnvoll, um die Verwaltung zu vereinfachen, aber ob sie möglich ist ist eine andere Frage aufgrund des oben-beschrieben Sachverhalt. Die Herausforderung liegt darin, die Logik für die Preisberechnung und die Darstellung der Extras so zu implementieren, dass sie nahtlos in den bestehenden Shopify-Workflow integriert ist und mit dem Shopify Backend System kompatibel ist.

Die dynamische Anpassung des Gesamtpreises eines Produkts in Shopify auf Basis der Auswahl personalisierter Optionen kann, wie gesagt, mit JavaScript erreicht werden. Dabei hört das Code mit einem Event Listener auf die Benutzereingaben (wie z.B. Checkboxen oder Dropdown-Menüs für Extras) und passt den Preis entsprechend an. 

Hier ein HTML Beispiel:

<!-- Preis des Basisprodukts -->
<div id="product-price">Basispreis: €<span id="base-price">100</span></div>

<!-- Optionen für Extras -->
<div>
   <input type="checkbox" id="extra1" data-price="15"> Rahmen (+€15)
</div>
<div>
   <input type="checkbox" id="extra2" data-price="5"> Beschichtung (+€5)
</div>

<!-- Anzeige des Gesamtpreises -->
<div id="total-price">Gesamtpreis: €<span id="final-price">100</span></div>

Und hier das notwendige JS dazu:

// Funktion zur Berechnung des Gesamtpreises
function calculateTotalPrice() {
   var basePrice = parseFloat(document.getElementById("base-price").innerText);
   var totalPrice = basePrice;

   // Überprüfe jede Extra-Option
   document.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
       if (checkbox.checked) {
           totalPrice += parseFloat(checkbox.getAttribute('data-price'));
       }
   });

   // Aktualisiere den Gesamtpreis
   document.getElementById("final-price").innerText = totalPrice.toFixed(2);
}

// Event-Listener für die Auswahl der Extras
document.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
   checkbox.addEventListener('change', calculateTotalPrice);
});

// Initialer Aufruf zur Festlegung des Startpreises
calculateTotalPrice();

• HTML-Struktur: Hier sind Checkboxen für Extras mit einem data-price-Attribut, das den Preis des Extras angibt. Der Basispreis und der Gesamtpreis werden in separaten Elementen angezeigt.

• JavaScript-Funktion calculateTotalPrice: Diese Funktion berechnet den Gesamtpreis, indem sie den Basispreis nimmt und die Preise der ausgewählten Extras hinzufügt. Sie aktualisiert dann das innerText des Elements final-price mit dem neuen Gesamtpreis.

• Event-Listener: Die Event-Listener werden den Checkboxen hinzugefügt, um auf Änderungen zu reagieren. Bei jeder Änderung wird die Funktion calculateTotalPrice aufgerufen, um den Gesamtpreis neu zu berechnen.

Hoffe das hilft dir etwas weiter! 😉

[Rofl]

Hallo Gabe,

danke genau das Beispiel sieht sehr gut aus!

Aber kurz zum Verständnis, wenn ich den Js-Code anschauen ist es ja wie von dir beschrieben ein Event-Listner wenn die Checkboxen angepasst werden und natürlich einmal initial zum Start.

Das es bei der Produktseite somit geht verstehe ich, wie weiß aber der Warenkorb zum Schluss den neuen Preis bzw. die Bestellung? 

An sowas hatte ich nämlich auch gedacht, dachte aber dann muss ich den ganzen Warenkorb auch anpassen und schlussendlich muss ja auch in der Bestellung der richtige Preis drin stehen. Und wenn alles nur im Frontend passiert ändert es ja den Preis von dem "Produkt in der Bestellung" nicht war immer mein Gedanke.

Vielen dank für deine Mühe! 

[Gabe]

Hey @Rofl 

Wenn du den Preis nur im Frontend änderst, wird der Preis des Produkts in der Bestellung nicht unbedingt aktualisiert je nachdem wie du das programmierst. Um sicherzustellen, dass der richtige Preis in der Bestellung erscheint und dass die Bestellung den angepassten Preis enthält, musst du die Preisänderungen im Backend behandeln. Wie du bereits getan hast, kannst du im Frontend eine Benutzeroberfläche erstellen, die es den Kunden ermöglicht, Extras auszuwählen und den Preis basierend auf diesen Extras anzuzeigen. Dies kann mithilfe von JavaScript erfolgen, wie im vorherigen Codebeispiel gezeigt.

Wenn der Kunde seine Auswahl getroffen und das Produkt in den Warenkorb gelegt hat, musst du die Informationen über die ausgewählten Extras und den angepassten Preis an das Backend übermitteln. Hierfür kannst du AJAX-Anfragen verwenden, um die Daten an einen Server zu senden. Auf dem Server musst du die Bestellung erstellen oder aktualisieren, um den angepassten Preis zu berücksichtigen. Du kannst dies mithilfe der Shopify API tun. Beachte dabei, dass du das Produkt im Warenkorb nicht direkt ändern kannst, da Shopify Bestellungen auf der Grundlage von Produkten und Varianten erstellt. Stattdessen könntest du die ausgewählten Extras als "Line Items" in der Bestellung hinzufügen und den Preis für diese Line Items setzen.

Stelle sicher, dass die Bestellung den richtigen Gesamtpreis basierend auf den ausgewählten Extras enthält. Du kannst die Line Items in der Bestellung aktualisieren und den Gesamtpreis entsprechend berechnen.

Damit die Shop-Besitzer die Bestellung im Admin-Bereich korrekt sehen können, sollte der angepasste Preis und die ausgewählten Extras dort ebenfalls angezeigt werden. Dies erfordert eine Integration in den Shopify-Admin API.