Hey @christianfrmlz
Haha ich wünschte ich könnte die Lösung schnell raushauen aber das wird etwas an Coding in einer Testumgebung auf deiner Seite verlangen. Eins steht fest - ein Refresh der Seite um die korrekten Angaben anzuzeigen ist keine gute UX und sollte nicht passieren. Hast du eine App wie Variant Image Automator erwägt? Die kann so etwas und vielleicht spart sie dir 'ne Menge Zeit, Arbeit und Entwicklungskosten.
Ansonsten wird das etwas AJAX verlangen. In deinem Beispiel wo es funzt, gibt es einen initialen Page Refresh bevor die Seite dann in den Browser gecacht wird, was auch nicht unbedingt die beste Lösung ist.
Somit um die PDP und den Produkttitel automatisch zu aktualisieren, wenn eine neue Variante ausgewählt wird, ohne die Seite neu zu laden, AJAX verwenden. Ein JavaScript-Snippet wie das folgende sollte den Artikelname, die URL und die Produktbeschreibung dynamisch aktualisieren können:
document.addEventListener('DOMContentLoaded', function() {
const variantSelectors = document.querySelectorAll('.product-variant__input');
variantSelectors.forEach(function(variantSelector) {
variantSelector.addEventListener('change', function(event) {
const selectedVariantId = event.target.value;
// Hier die URL der Produktvariante abrufen
const variantURL = `/products/products-whey-your-chocolate-dream-protein-600g?variant=${selectedVariantId}`;
// AJAX Anfrage senden, um die neue Variante abzurufen
fetch(variantURL)
.then(response => response.text())
.then(data => {
const parser = new DOMParser();
const htmlDocument = parser.parseFromString(data, 'text/html');
// Titel aktualisieren
const newTitle = htmlDocument.querySelector('.product__title').innerHTML;
document.querySelector('.product__title').innerHTML = newTitle;
// Beschreibung aktualisieren
const newDescription = htmlDocument.querySelector('.product__description').innerHTML;
document.querySelector('.product__description').innerHTML = newDescription;
// URL ohne Neuladen der Seite ändern
window.history.pushState({}, '', variantURL);
})
.catch(error => console.error('Error:', error));
});
});
});
Stelle sicher, dass die HTML-Elemente die richtigen Klassen haben, um von diesem JavaScript-Snippet angesprochen zu werden. Überprüfe auch, ob die Klassennamen im HTML mit denen im JavaScript übereinstimmen. Im obigen Beispiel wird angenommen, dass die Variantenauswahl-Inputs die Class .product-variant__input haben und dass der Titel und die Beschreibung die Klassen .product__title und .product__description haben.
Mit diesem Code sollte die Seite nicht neu geladen werden, sondern nur die relevanten Informationen (Titel, Beschreibung, URL) werden dynamisch aktualisiert, wenn der Benutzer eine neue Variante auswählt.
in meinen 
. Freut mich, dass das geklappt hat… 
