Liquid, JavaScript, Themes
Hallo zusammen,
ich suche nach einer Möglichkeit die Checkout-Formularfelder für für bestimmte Produkte zu ändern. Zum Beispiel brauchen wir nur für bestimmte Produkte die Telefonnummer als Pflichtfeld. Ansonsten soll die Nummer kein Pflichtfeld sein. Gibt es hierzu entsprechende Möglichkeiten oder Apps? Vielen Dank schon mal für die Antworten!
Sabine
Gelöst! Zur Lösung
Erfolg.
@VMN der Checkout von Shopify ist leider sehr eingeschränkt anpassbar. Eine Funktion, wie du sie beschreibst, ist nicht möglich (außer bei Shopify Plus). Alternativ könntest du bei den Produkten, bei denen es nötig ist, auf der Produktseite ein Feld für eine Telefonnummer einbauen oder alternativ im Warenkorb das Formular einbauen.
Hierbei wird man aber etwas programmieren müssen, dass nach Abhängigkeit eines TAGs o.Ä. eine Telefonnummer abfragt. Diese wird dann bei der Bestellung oder dem Produkt im Check-out angezeigt.
Aus reiner Neugier:
Welchen Grund hat es den, dass die Kunden eine Rufnummer hinterlegen müssen?
Erfolg.
Hey Sabine! @VMN
Es ist wie @Finer sagt aber lass uns weiter nach Lösungen suchen so dass ihr die Telefon Nr. für Coaching Zwecke von euren Kunden mehr automatisiert abfragen könnt wenn bestimmte Produkte in den Warenkorb gelegt werden. Sind das alle Kunden oder nur bestimmte "VIP" Kunden, oder handelt es sich nur um bestimmte Produkte?
Ihr könnt eine benutzerdefinierte App oder einen benutzerdefinierten Code in eurem Theme verwenden, um die Telefon Nr. für bestimmte Produkte abzufragen. Eine andere Möglichkeit wäre, eine App aus unserem App Store zu verwenden, das extra Produktoptionen auf der Produktseite anbietet. Oder eben eine Page Builder App.
Die Logik?
Man kann ein Feld für die Telefonnummer als Pflichtfeld nur für die entsprechenden Produkte auf der Produktseite anzeigen lassen indem man in das Code eine Conditional Logic einbaut.
Dazu kann man eine Bedingung im Code verwenden, die überprüft, ob das Produkt eine Telefonnummer erfordert oder nicht. Wenn ja, wird das Feld für die Telefonnummer als Pflichtfeld angezeigt. Wenn nicht, wird das Feld für die Telefonnummer optional gemacht oder ganz ausgeblendet.
Unsere "Custom Fields" Apps erlauben es dir zusätzliche Felder hinzuzufügen und diese Felder für bestimmte Produkte als Pflichtfelder zu markieren.
DIY - abhängig vom Theme
Wenn du es selber auf deiner Warenkorbseite programmieren möchtest dann haben wir eine ausführliche Developer Doku die euch dabei weiterhelfen kann hier. Das folgende auch bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer, wie @Finer. Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist auch ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu verweisen!
Um ein Telefonnummer-Pflichtfeld nur für bestimmte Produkte auf der Produktseite oder im Warenkorb anzuzeigen, kann man einen Code wie den folgenden verwenden. Die entsprechenden Produkte müssen mit einem Tag wie Telefonnummer erforderlich
versehen sein.
Gehe zu Theme -> Aktionen -> Duplizieren -> Code bearbeiten, und navigiere zur cart.liquid
-Datei und füge ein Code Schnipsel wie den folgenden da ein an der entsprechenden Stelle im Code um das Telefonnummerfeld im Warenkorb anzuzeigen (muss man ausprobieren - bitte nicht im Live Theme machen!):
{% if cart.item_count > 0 %}
{% for item in cart.items %}
{% if item.product.tags contains 'Telefonnummer erforderlich' %}
<label for="Telefonnummer">Telefonnummer:</label>
<input type="tel" id="Telefonnummer" name="properties[Telefonnummer]" value="{{ cart.attributes.Telefonnummer }}" required>
{% endif %}
{% endfor %}
{% endif %}
Und/oder füge einen Code Schnipsel wie den folgenden in der product.liquid
-Datei an der entsprechenden Stelle ein, um das Telefonnummerfeld auf der Produktseite anzuzeigen:
{% if product.tags contains 'Telefonnummer erforderlich' %}
<label for="Telefonnummer">Telefonnummer:</label>
<input type="tel" id="Telefonnummer" name="properties[Telefonnummer]" value="{{ cart.attributes.Telefonnummer }}" required>
{% endif %}
Dieser Code prüft, ob das Produkt den Tag "Telefonnummer erforderlich" hat. Wenn ja, wird das Telefonnummer-Pflichtfeld auf der Produktseite oder im Warenkorb angezeigt. Wenn nein, wird das Telefonnummerfeld nicht angezeigt.
Das wird dir hoffentlich weiterhelfen können. Bei weiteren Fragen hilft dir gerne einer unserer Experten!
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Erfolg.
@VMN der Checkout von Shopify ist leider sehr eingeschränkt anpassbar. Eine Funktion, wie du sie beschreibst, ist nicht möglich (außer bei Shopify Plus). Alternativ könntest du bei den Produkten, bei denen es nötig ist, auf der Produktseite ein Feld für eine Telefonnummer einbauen oder alternativ im Warenkorb das Formular einbauen.
Hierbei wird man aber etwas programmieren müssen, dass nach Abhängigkeit eines TAGs o.Ä. eine Telefonnummer abfragt. Diese wird dann bei der Bestellung oder dem Produkt im Check-out angezeigt.
Aus reiner Neugier:
Welchen Grund hat es den, dass die Kunden eine Rufnummer hinterlegen müssen?
Vielen Dank für die schnelle Antwort. Schade, aber dann ist es halt so. Wir schauen mal, wie wir das lösen können. Wir brauchen die Telefonnummer für Coaching-Gespräche. Aber die können wir dann auch später per E-Mail abfragen. Danke dir!
Erfolg.
Hey Sabine! @VMN
Es ist wie @Finer sagt aber lass uns weiter nach Lösungen suchen so dass ihr die Telefon Nr. für Coaching Zwecke von euren Kunden mehr automatisiert abfragen könnt wenn bestimmte Produkte in den Warenkorb gelegt werden. Sind das alle Kunden oder nur bestimmte "VIP" Kunden, oder handelt es sich nur um bestimmte Produkte?
Ihr könnt eine benutzerdefinierte App oder einen benutzerdefinierten Code in eurem Theme verwenden, um die Telefon Nr. für bestimmte Produkte abzufragen. Eine andere Möglichkeit wäre, eine App aus unserem App Store zu verwenden, das extra Produktoptionen auf der Produktseite anbietet. Oder eben eine Page Builder App.
Die Logik?
Man kann ein Feld für die Telefonnummer als Pflichtfeld nur für die entsprechenden Produkte auf der Produktseite anzeigen lassen indem man in das Code eine Conditional Logic einbaut.
Dazu kann man eine Bedingung im Code verwenden, die überprüft, ob das Produkt eine Telefonnummer erfordert oder nicht. Wenn ja, wird das Feld für die Telefonnummer als Pflichtfeld angezeigt. Wenn nicht, wird das Feld für die Telefonnummer optional gemacht oder ganz ausgeblendet.
Unsere "Custom Fields" Apps erlauben es dir zusätzliche Felder hinzuzufügen und diese Felder für bestimmte Produkte als Pflichtfelder zu markieren.
DIY - abhängig vom Theme
Wenn du es selber auf deiner Warenkorbseite programmieren möchtest dann haben wir eine ausführliche Developer Doku die euch dabei weiterhelfen kann hier. Das folgende auch bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer, wie @Finer. Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist auch ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu verweisen!
Um ein Telefonnummer-Pflichtfeld nur für bestimmte Produkte auf der Produktseite oder im Warenkorb anzuzeigen, kann man einen Code wie den folgenden verwenden. Die entsprechenden Produkte müssen mit einem Tag wie Telefonnummer erforderlich
versehen sein.
Gehe zu Theme -> Aktionen -> Duplizieren -> Code bearbeiten, und navigiere zur cart.liquid
-Datei und füge ein Code Schnipsel wie den folgenden da ein an der entsprechenden Stelle im Code um das Telefonnummerfeld im Warenkorb anzuzeigen (muss man ausprobieren - bitte nicht im Live Theme machen!):
{% if cart.item_count > 0 %}
{% for item in cart.items %}
{% if item.product.tags contains 'Telefonnummer erforderlich' %}
<label for="Telefonnummer">Telefonnummer:</label>
<input type="tel" id="Telefonnummer" name="properties[Telefonnummer]" value="{{ cart.attributes.Telefonnummer }}" required>
{% endif %}
{% endfor %}
{% endif %}
Und/oder füge einen Code Schnipsel wie den folgenden in der product.liquid
-Datei an der entsprechenden Stelle ein, um das Telefonnummerfeld auf der Produktseite anzuzeigen:
{% if product.tags contains 'Telefonnummer erforderlich' %}
<label for="Telefonnummer">Telefonnummer:</label>
<input type="tel" id="Telefonnummer" name="properties[Telefonnummer]" value="{{ cart.attributes.Telefonnummer }}" required>
{% endif %}
Dieser Code prüft, ob das Produkt den Tag "Telefonnummer erforderlich" hat. Wenn ja, wird das Telefonnummer-Pflichtfeld auf der Produktseite oder im Warenkorb angezeigt. Wenn nein, wird das Telefonnummerfeld nicht angezeigt.
Das wird dir hoffentlich weiterhelfen können. Bei weiteren Fragen hilft dir gerne einer unserer Experten!
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Oh Wow! Vielen Dank. Es handelt sich tatsächlich nur um einige Produkte - kein VIP Status. Das mit der App wäre für uns erstmal die einfachste Lösung. Wir müssen erst mal schauen, ob die Coachings so funktionieren. Falls wir dann die Testphase überstehen, kann man das ganze wie von dir beschrieben, ja immer noch einbauen lassen. Das mit dem Theme-Update wäre allerdings ein Nachteil. Vielen Dank nochmal!
Hallo Gabe,
hast du eine Lösung für ein ähnliches Problem? Bei mir sind es nicht bestimmte Produkte, die eine Telefonnummer erfordern, sondern Produktvarianten. In meinem Shop werden Bilder in einer Größe von bis zu 150 x 100 cm angeboten. Die Bilder / Kunstwerke sind die Hauptprodukte und die Größen die Produktvarianten. Ich brauche aber lediglich für die Produktvarianten der Größe 120 x 80 cm und 150 x 100 cm die Pflichteingabe einer Telefonnummer, da diese Größen per Spedition geliefert werden und der Kunde demnach telefonisch erreichbar sein muss. Hast du hierzu eine Lösung durch eine App oder in Form eines Codes wie oben?
VG Lukas
Hey @luukas_wi
Um Checkout-Formularfelder für bestimmte Produktvarianten in Shopify anzupassen, gibt es verschiedene Ansätze, aber leider keine native Shopify-Funktion, die dies direkt ermöglicht. Hier sind einige mögliche Lösungen, die du in Betracht ziehen kannst:
Shopify erlaubt es, benutzerdefinierte Skripte im Checkout zu verwenden, allerdings nur für Shopify Plus-Konten. Du könntest ein Skript schreiben, das prüft, ob eine der Produktvarianten, die eine Telefonnummer als Pflichtfeld erfordern, im Warenkorb liegt und dann das Telefonnummernfeld als Pflichtfeld setzt. Beispiel:
// Dieses Skript müsste im Checkout-Editor unter "Zusätzliche Skripte" eingefügt werden
document.addEventListener("DOMContentLoaded", function() {
const requiredVariants = ["variant-id-1", "variant-id-2"]; // IDs der Varianten, die eine Telefonnummer benötigen
const cartItems = Shopify.checkout.line_items;
let requiresPhone = false;
cartItems.forEach(item => {
if (requiredVariants.includes(item.variant_id.toString())) {
requiresPhone = true;
}
});
if (requiresPhone) {
const phoneField = document.querySelector("input#checkout_shipping_address_phone");
if (phoneField) {
phoneField.setAttribute("required", "required");
}
}
});
Es gibt verschiedene Shopify-Apps, die zusätzliche Checkout-Optionen und Bedingungslogik bieten. Einige dieser Apps ermöglichen es, benutzerdefinierte Felder hinzuzufügen und Regeln zu definieren, wann diese Felder angezeigt oder erforderlich sein sollen.
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024