Thema: Zusätzliche Felder für Liefer-/Abholinformationen im Shopify-Checkout und Alternativen.
Aktueller Stand:
E-Mail-Benachrichtigungen:
Dropdown/Optionen:
Buy Button:
Status/Outcome:
Hallo zusammen
für die Abwicklung der Lieferung (Container), benötigen wir vom Kunden weitere Infos…wie zum Beispiel (wo darf der Container abgestellt werden, wann soll er wieder abgeholt werden etc).
Habe ich die Möglichkeit im Checkout Prozess solche Inhalte abzufragen?
Danke.
Hey @CichonTrautmann
Danke für die Frage und der Checkout ist leider sehr beschränkt was Extrafelder anbelangt. Bald aber kommt der neue Checkout wie du in unserem EN YouTube Video hier verfolgen kannst. Dieser wird skalierbarer, erweiterbarer, und vertrauenswürdiger also watch this space!
Bis dahin gibt es ein paar Workarounds die vielleicht helfen können, wie z. B. di folgenden:
Hallo
ich habe nun ein paar Felder in das CART Template eingefügt. Das klappt super. Danke.
Nur, wie bekomme ich nun eine Ausgabe im E-Mail Template hin?
Feld:
Wie muss ich das ins Template schreiben?
{{ cart.attributes["Ansprechpartner vor Ort"] }}
Das geht nicht
Das wäre sowas wie das folgende aber das müsste man vor Ort testen was ich derzeit nicht kann.
Lösung: Einer unserer Experten kann deine E-Mail Vorlage anschauen und das ggf. für dich basteln gegen eine kleine Spende, wie Mario ( @r8r )
<p class="cart-attribute__field">
<label for="your-name">Dein Ansprechpartner</label>
<input id="dein-ansprechpartner" type="text" name="attributes[Your name]" value="{{ cart.attributes["Dein Ansprechpartner"] }}">
</p>
@CichonTrautmann – ich müsst mir das selber ansehen … @Gabe hat da wirklich recht: das ist aus der Ferne leider gar nicht gut zu dabuggen. Wenn Du Interesse daran hast, lass es mich bitte einfach wissen.
Liebe Grüße,
Mario
Ja sehr gerne @r8r
Aber ich dachte das diese funktion bereits besteht. Was brauchst du von mir?
@CichonTrautmann – ich hab Dir eine PN geschrieben!
LG, Mario
Die Lösung mit den Kundenfeldern sieht für mich gut aus, jedoch unterstützt es keine Dropdownfelder.
Ich würde dem Kunden eine Auswahl mit vordefinierten Werten geben, aus denen er wählen kann.
Ist das möglich?
Hey @brandy_000
Das wäre eigentlich nur über eine benutzerdefinierte App und unser API möglich. Um die Shopify API zu nutzen, um benutzerdefinierte Felder in den Standard-Checkout-Prozess zu integrieren, braucht man ein Entwicklerkonto bei Shopify um eine eigene Shopify-App zu erstellen.
Damit kann man calls über dem API machen, um Bestellinformationen und zusätzliche Felder zu speichern und abzurufen. Die Shopify API bietet eine Vielzahl von Endpunkten, die man verwenden kann, um die Informationen abzurufen und der Checkout API ermöglicht es, zusätzliche Felder im Checkout-Prozess hinzuzufügen und dann diese Informationen in der Bestellübersicht und in anderen Abschnitten Ihres Shopify-Adminbereichs anzuzeigen.
Oder du verwedest unsere neue Checkout Extensions, wie du hier lesen kannst. Gerne kann ich Experten empfehlen die das für euch machen können!
Aber einfache Eingabefelder zu integrieren ist einfacher?
Es braucht damit dann nichts passieren, außer dass es im Email angezeigt wird!
Und welche App wäre das, welche das erledigen könnte?
Die Shopify API ist frei zu verwenden?
Ich bin mit der aktuellen Lösung eigentlich schon sehr zufrieden:
https://vulcania300.bike/de/shop/
Wichtig wäre nur ein Feld, wo die Leute ihr Paket abholen können - ein Dropdown mit vorgegebenen Werten wäre optimal, die dann auch in der Bestellung wiedergegeben werden.
Hey @brandy_000
Ich glaube du bist sehr nahe am Ziel also nicht aufgeben!
Du hast also bereits die richtige Methode verwendet, um benutzerdefinierte Felder in das Cart-Template einzufügen. Um die eingegebenen Informationen in der Bestätigungs-E-Mail anzuzeigen, einfach das E-Mail-Template anpassen.
Da das E-Mail-Template auf der Bestellinformation basiert und nicht direkt auf dem Warenkorb, sollte man line_item.properties anstelle von cart.attributes verwenden.
Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen! Hier ein Beispiel einer FOR-Loop:
{% for line_item in line_items %}
{% for p in line_item.properties %}
{% if p.first == 'Ansprechpartner vor Ort' %}
Ansprechpartner vor Ort: {{ p.last }}
{% endif %}
{% endfor %}
{% endfor %}
Füge den obigen Code in das E-Mail-Template ein, wo du die Informationen anzeigen möchtest. Der Code durchläuft alle Artikel in der Bestellung und zeigt den Wert des benutzerdefinierten Felds “Ansprechpartner vor Ort” an, falls vorhanden.
Um ein Dropdown-Feld mit vordefinierten Werten in Ihrem Cart-Template hinzuzufügen, können Sie folgenden Code verwenden:
Nicht vergessen, den Code im E-Mail-Template anzupassen, um den Wert dieses Dropdown-Felds anzuzeigen:
{% for line_item in line_items %}
{% for p in line_item.properties %}
{% if p.first == 'Paketabholort' %}
Paketabholort: {{ p.last }}
{% endif %}
{% endfor %}
{% endfor %}
Dadurch werden die benutzerdefinierten Felder in der Bestätigungs-E-Mail korrekt angezeigt, einschließlich eines Dropdown-Felds mit vordefinierten Werten.
Vielen Dank für deine Hilfe, aber mir ist etwas unklar:
Ich hab es mit dem App Magic Fields in dieser Version eingefügt:
https://shop.vulcania300.bike/
Aber in der BuyButton-Version - https://vulcania300.bike/de/shop/ - bekomme ich kein Feld rein.
Hey @brandy_000
Ist die Buy Button Version ein drittanbieter Shop? Wenn ja, dann bitte dich mit dem Provider dieses Shops in Verbindung setzen.
Nein, den Buybutton, den Shopify mitausliefert:
Da erhält man dann einen Code, den man in seinen Templates einfügen kann und fertig.
Das wäre cool, wenn das Feld dort aufscheinen würde!
Bei Magicfields, das App, das ich gerade dafür nutze schreibt er mir, dass das mit dem App nicht funktioniert!
Vielen Dank!
Hey @brandy_000
Kann Ich verstehen, dass du extra Infos vom Kunden über den Buy Button sammeln möchtest, aber leider werden Custom fields derzeit nicht vom Buy Button unterstützt.
Ggf. kann man das über eine komplexe Programmierung erreichen wie man hier lesen kann, und über die Ressourcen die ich weiter unten im O-Ton gepostet habe. Siehe weitere Leitfäden zum Thema hier.
Füge die Shopify Buy Button JS-Bibliothek in deinem HTML-Code ein:
Füge ein HTML-Element hinzu, in dem der Buy Button angezeigt wird, z. B.:
Füge das benutzerdefinierte Feld direkt in den HTML-Code ein, z. B.:
Passe das Shopify Buy Button-Script an, um das benutzerdefinierte Feld zu erfassen und als Line Item Property zu speichern. Hier ist ein Beispiel-Script:
document.addEventListener("DOMContentLoaded", function() {
var client = ShopifyBuy.buildClient({
domain: 'your-shop.myshopify.com',
storefrontAccessToken: 'your_storefront_access_token',
});
var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
id: 'your_product_id',
node: document.getElementById('product-component'),
options: {
// Ihre Buy Button-Optionen hier
}
});
// Event-Listener für den 'Add to Cart'-Button
document.querySelector('.shopify-buy__btn').addEventListener('click', function() {
var customField = document.getElementById('custom-field').value;
if (customField) {
// Aktualisieren Sie die Line Item Properties mit dem Wert des benutzerdefinierten Felds
var cart = ui.getCart();
var lineItems = cart.model.lineItems;
if (lineItems.length > 0) {
lineItems[0].properties = {
'Your custom field name': customField
};
cart.updateModel();
}
}
});
});
Ersetze ‘dein-shop.myshopify.com’ durch eure eigene Shopify-URL und ‘your_storefront_access_token’ durch deinen Storefront-Zugangstoken. Ersetze außerdem ‘your_product_id’ durch die ID des gewünschten Produkts.
Wenn der Kunde auf den Buy-Button klickt, wird der Wert des benutzerdefinierten Felds als Line Item Property gespeichert. Man kann diese Information dann in der Bestellung im Shopify-Adminbereich einsehen und bearbeiten.
Das obige Beispiel-Script dient lediglich als Ausgangspunkt und muss möglicherweise an eure spezifischen Anforderungen angepasst werden.
Gerne kann ich Agenturen empfehlen die dabei helfen können! 
The JS Buy SDK is a lightweight library that allows you to build ecommerce into any website. It’s based on Shopify’s Storefront API and provides the ability to retrieve products and collections from your shop, add products to a cart, and checkout.
Full API docs are available here. View our Changelog for details about our releases.
Sehr cool, vielen Dank!
Ich verstehe den Code und ich müsste die Zeilen mit den Custom Fields hinzufügen!
Aber da bei mir die Zeit sehr begrenzt ist - bis wann könnte es eine Agen(du)r erledigt haben und wieviel würde es kosten?
Hierfür werde ich einen unserer Experten hier taggen der dir das besser erklären kann → @soenmez . Diese Agentur leistet gute Arbeit.
@Finer und @r8r sind weitere Experten die tolle Arbeit auch leisten.
Okay er zeigt mir den Quelltext jetzt besser an - ich schau mal was ich zusammenbringe!
Danke vorerst - ich melde mich!