Hier sprechen Händler über Apps. Mit welchen Apps hast du gute Erfahrungen gemacht?
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.
Gelöst! Zur Lösung
Erfolg.
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:
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.
@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
Erfolg.
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:
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
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:
<p class="cart-attribute__field">
<label for="ansprechpartner-vor-ort">Vor- und Nachname</label>
<input required class="field-100 required" id="ansprechpartner-vor-ort" type="text" name="attributes[Ansprechpartner vor Ort]" value="{{ cart.attributes["Ansprechpartner vor Ort"] }}">
</p>
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>
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.
@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!
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
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' %}
<p>Ansprechpartner vor Ort: {{ p.last }}</p>
{% 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:
<p class="cart-attribute__field">
<label for="pickup-location">Paketabholort</label>
<select id="pickup-location" name="attributes[Paketabholort]">
<option value="">Bitte wählen Sie einen Abholort</option>
<option value="Abholort 1">Abholort 1</option>
<option value="Abholort 2">Abholort 2</option>
<option value="Abholort 3">Abholort 3</option>
<!-- Fügen Sie hier weitere Optionen hinzu -->
</select>
</p>
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' %}
<p>Paketabholort: {{ p.last }}</p>
{% endif %}
{% endfor %}
{% endfor %}
Dadurch werden die benutzerdefinierten Felder in der Bestätigungs-E-Mail korrekt angezeigt, einschließlich eines Dropdown-Felds mit vordefinierten Werten.
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
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.
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
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:
<script src="https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js"></script>
Füge ein HTML-Element hinzu, in dem der Buy Button angezeigt wird, z. B.:
<div id="product-component"></div>
Füge das benutzerdefinierte Feld direkt in den HTML-Code ein, z. B.:
<label for="custom-field">Ihre zusätzliche Information:</label>
<input type="text" id="custom-field" name="custom-field">
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.
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
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.
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
Okay er zeigt mir den Quelltext jetzt besser an - ich schau mal was ich zusammenbringe!
Danke vorerst - ich melde mich!
So, ich bin jetzt grad in der Materie:
Nur damit ich es richtig verstehe:
Ich brauche ja eigentlich nur das Feld in HTML einfügen und dann mit diesem Code von oben übergeben:
// 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();
}
}
});
});
Denn das restliche Material hab ich ja schon:
<div id='collection-component-*NUMMER*'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src=scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: '*DOMAIN*',
storefrontAccessToken: '*TOKEN*',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('collection', {
id: '*ID*',
node: document.getElementById('collection-component-*NUMMER*'),
moneyFormat: '%E2%82%AC%7B%7Bamount_with_comma_separator%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px",
"width": "calc(25% - 20px)"
},
"img": {
"height": "calc(100% - 15px)",
"position": "absolute",
"left": "0",
"right": "0",
"top": "0"
},
"imgWrapper": {
"padding-top": "calc(75% + 15px)",
"position": "relative",
"height": "0"
}
},
"button": {
":hover": {
"background-color": "#e69f00"
},
"background-color": "#ffb100",
":focus": {
"background-color": "#e69f00"
}
}
},
"buttonDestination": "modal",
"contents": {
"options": false
},
"text": {
"button": "View product"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
":hover": {
"background-color": "#e69f00"
},
"background-color": "#ffb100",
":focus": {
"background-color": "#e69f00"
}
}
},
"text": {
"button": "ZUM WARENKORB"
}
},
"option": {},
"cart": {
"styles": {
"button": {
":hover": {
"background-color": "#e69f00"
},
"background-color": "#ffb100",
":focus": {
"background-color": "#e69f00"
}
}
},
"text": {
"title": "Warenkorb",
"total": "Zwischensumme",
"empty": "Der Warenkorb ist leer",
"button": "Bezahlen"
},
"popup": false
},
"toggle": {
"styles": {
"toggle": {
"background-color": "#ffb100",
":hover": {
"background-color": "#e69f00"
},
":focus": {
"background-color": "#e69f00"
}
}
}
}
},
});
});
}
})();
/*]]>*/
</script>
Gut, ich habe das Feld mal eingefügt.
Das steht nun über allem. Direkt zu einem Produkte bekomme ich es nicht, oder?
Mit Javascript könnte man es hinzufuddeln, aber das wäre auch nicht die schöne Lösung oder was meinst du?
Vielen Dank!
Ich hab nun ein Dropdownfeld in den Code eingefügt:
<label for="abholung">Sie holen Ihr Startsackerl bei diesem Partner ab:</label>
<select id="abholung" name="abholung">
<option value="4">4</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Und dann habe ich folgenden Code im script-Tag eingefügt:
document.querySelector('.shopify-buy__btn').addEventListener('click', function() {
var customField = document.getElementById('abholung').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 = {
'abholung': customField
};
cart.updateModel();
}
}
});
Aber wo bekomme ich nun eine Ausgabe?
Kann ich Metafelder, die ich Produkten zuweise, beim Buybutton nicht durchschleusen?
Mir ist gerade eine weitere Möglichkeit eingefallen:
Ich könnte ja ein Modul installieren, welches mir eine Abholung ermöglicht und ich lege alle Abholstationen an - jedoch bräuchte ich die Kombination mit dem digitalen Produkt, weil ich meinen Kunden vorher schon was senden möchte!
Vielleicht hat da jemand eine Idee!
Vielen Dank!
Shopify unterstützt die weltweit innovativsten Marken und Unternehmer:innen. Um Unterne...
By SarahF_Shopify Mar 25, 2024Was ist ein kleines Element eines Shopify Shops mit großer Wirkung? Ein Element ganz we...
By Kai Mar 14, 2024Was genau ist POD? Von T-Shirts bis hin zu Plakaten, Kaffeetassen, Wandmatten, alles was m...
By Kai Feb 29, 2024