Hey @Schäffer
Das hoert sich toll an die Lieferzeiten für verschiedene Produktvarianten in deinem Shopify-Onlineshop dynamisch anzuzeigen und die Seite automatisch neu zu laden, wenn du eine Variante auswählst. Man kann das entweder selber programmieren (mit Javascript um die Seite nicht immer wieder laden zu müssen, was keine tolle User Experience darstellen würde) oder eine App dafür verwenden, was dir viel Zeit sparen wird.
Hier habe ich ein paar App Demos für dich die du ausprobieren kannst und die teilweise einen Free Plan haben:
Wenn du es selber DIY machen möchtest
Du sagst "Ich habe es auch mehr oder weniger per benutzerdefiniertem Liquid hinbekommen die Lieferzeiten individuell auszugeben" aber der User muss nach Auswahl der Variante die Seite neu laden was natürlich eine verschlechterte UX (user experience) darstellt. Aber du hast nicht erklärt wie du das gemacht hast, was uns hier helfen könnte eine angepasste Lösung zu finden, oder nicht das Rad nochmal neu zu erfinden. Wenn du es selber auf deiner Produktseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen.
Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen, am besten mit einem unserer oben-verlinkten Shopify Experten!
Hier etwas HTML und Javascript
Eine Beispiel Liquid-IF-Statement, die du auf deiner PDP einbauen kannst (um die Lieferzeiten anzuzeigen), wäre etwas wie das folgende, es wäre aber nur statisch und würde, wie du gesagt hast, einen Refresh verlangen:
{% if product.available %}
<p>Lieferzeit: {{ product.variants[selected_variant].option1 }}</p>
{% else %}
<p>Das Produkt ist derzeit nicht verfügbar.</p>
{% endif %}
Füge JavaScript-Code hinzu, um die Seite automatisch neu zu laden, wenn du eine Variante auswählst. Hier ist ein einfaches Beispiel dessen Styling du anpassen muesstest, um die Lieferzeiten optisch ansprechend darzustellen.:
<script>
document.addEventListener('DOMContentLoaded', function() {
var variantSelect = document.getElementById('Varianten-Auswahl'); // Ändere 'Varianten-Auswahl' entsprechend deiner Auswahlfelder
variantSelect.addEventListener('change', function() {
location.reload(); // Seite neu laden, wenn eine Variante ausgewählt wird
});
});
</script>
Bitte beachte, dass dies ein einfaches Beispiel ist und du es anpassen musst. Der JavaScript-Code geht davon aus, dass dein Variantenauswahl-Element ein id mit dem Namen "Varianten-Auswahl" hat.
Ist das aber immer noch eine gute UX?
Das automatische Neuladen der Seite ist dennoch für die Benutzererfahrung eigentlich auch nicht ideal. Die Lieferzeitinformationen sollten sich normalerweise dynamisch mit JavaScript aktualisieren, ohne die gesamte Seite neu laden zu müssen. Das erfordert jedoch fortgeschrittenere JavaScript- und AJAX-Kenntnisse. Hier ein paar Beispiele wie man das erreichen könnte (ohne Gewähr) - bearbeite den Liquid-Code auf deiner Produktdetailseite, um einen Platzhalter für die Lieferzeit anzuzeigen, den du später mit AJAX aktualisieren wirst. Zum Beispiel:
<p id="lieferzeit-placeholder">Lieferzeit: <span id="lieferzeit">{{ product.variants[selected_variant].option1 }}</span></p>
Füge JavaScript-Code hinzu, um die Lieferzeitinformationen dynamisch zu aktualisieren, ohne die Seite neu zu laden. Hier ein Beispiel:
<script>
document.addEventListener('DOMContentLoaded', function() {
var variantSelect = document.getElementById('Varianten-Auswahl'); // Ändere 'Varianten-Auswahl' entsprechend deiner Auswahlfelder
variantSelect.addEventListener('change', function() {
// Hier kannst du AJAX verwenden, um die Lieferzeitinformationen basierend auf der ausgewählten Variante zu aktualisieren
var selectedVariant = variantSelect.value; // Annahme: die ausgewählte Variante wird durch den Wert des Auswahlfelds bestimmt
// Hier sollte der AJAX-Code stehen, der die Lieferzeitinformationen vom Server abruft und in das Lieferzeit-Platzhalterelement einfügt
// Beispiel-AJAX-Code:
fetch('/path/to/lieferzeit-endpoint?variant=' + selectedVariant)
.then(function(response) {
return response.text();
})
.then(function(data) {
document.getElementById('lieferzeit').innerText = data;
})
.catch(function(error) {
console.error('Fehler beim Abrufen der Lieferzeitinformationen: ' + error);
});
});
});
</script>
Du musst einen Server- oder Shopify-Endpoint erstellen, der die Lieferzeitinformationen basierend auf der ausgewählten Variante zurückgibt. In diesem Beispiel wird angenommen, dass der Endpunkt /path/to/lieferzeit-endpoint die Lieferzeitinformationen für die ausgewählte Variante zurückgibt.
Damit wird die Seite nicht neu geladen, wenn der Benutzer eine Variante auswählt. Stattdessen wird die Lieferzeitinformation dynamisch über AJAX abgerufen und aktualisiert, was die Benutzerfreundlichkeit verbessert.
Das obige ist, wie gesagt, Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen, am besten mit einem unserer oben-verlinkten Shopify 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
