@mcs2
Aber gerne, so dass du das zusammen mit deinem Entwickler das näher 👁️ kannst!
Ganz so einfach wird das aber leider nicht sein (v. a. wenn man unsere Developer Doku liesst) und hier wäre nochmal zu erwägen ob die Apps das nicht besser und out-of-the-box können...
Wenn du es doch selber 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!
Füge zuerst einen Button zu deinem Produkt Template hinzu, wie z. B. mit einem Code wie folgt (wie gesagt, ohne Gewähr und Theme-abhängig):
<button id="customize-button">Customize</button>
Verberge die Variantenauswahlfelder über CSS:
.variant-selector {
display: none;
}
Füge JavaScript/jQuery hinzu, um die versteckten Variantenauswahlfelder anzuzeigen, wenn der "Customize"-Button geklickt wird:
$('#customize-button').on('click', function() {
$('.variant-selector').show();
});
Dann musst du sicherstellen, dass jQuery in deinem Theme enthalten ist. Wenn nicht, musst du es hinzufügen. Erstelle einen Event-Handler für die Variantenauswahl:
$('#variant-dropdown').on('change', function() {
var variantId = $(this).val();
fetchUpdatedVariantData(variantId);
});
Definiere die fetchUpdatedVariantData Funktion, um einen Ajax-Aufruf durchzuführen:
function fetchUpdatedVariantData(variantId) {
$.ajax({
type: 'GET',
url: '/products/' + {{ product.handle }} + '.js',
dataType: 'json',
success: function(product) {
var selectedVariant;
for (var i = 0; i < product.variants.length; i++) {
if (product.variants[i].id == variantId) {
selectedVariant = product.variants[i];
break;
}
}
if (selectedVariant) {
// Beispiel: Aktualisiere den Preis und die SKU
$('#price').text('$' + selectedVariant.price);
$('#sku').text(selectedVariant.sku);
// Wenn du Metafelder aktualisieren möchtest, musst du diese Daten vermutlich aus einer anderen Quelle beziehen, da der oben genannte Ajax-Aufruf nur die Standardprodukt- und Varianteninformationen zurückgibt.
}
}
});
}
- Dieser Code verwendet jQuery und geht davon aus, dass du ein Dropdown-Menü mit der ID
variant-dropdown für die Variantenauswahl und Elemente mit den IDs price und sku hast, um den Preis und die SKU anzuzeigen.
- Der Code ruft die Produktinformationen über Ajax im JSON-Format ab und aktualisiert dann die Seite mit den Informationen der ausgewählten Variante.
- Das obige Beispiel zeigt, wie du Preis und SKU aktualisierst. Wenn du Metafelder aktualisieren möchtest, benötigst du möglicherweise eine zusätzliche API-Abfrage oder ein Plugin, um diese Daten zu erhalten.
Das sind ziemlich einfache Implementierungen und je nach deinem genauen Setup müssen sie möglicherweise mit einem Experten angepasst werden.
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
