Hey everyone,
I've already been active in the German forum, but now I need your collective knowledge for the following problem:
First, here is the link to our product page:
https://formulize.de/products/products-whey-your-chocolate-dream-protein-600g?variant=47641205965128
You can see a parent product with different variants. When you click on a variant, the product name (product description, etc) of the parent product remains the same.
What I want is for all the associated information (URL, product name, product description, etc.) to be updated when a variant is selected. To achieve this, I've set up each variant with its respective meta-fields as a separate product. Now, I just need the "connection" between these products.
Here is a concrete example from Vetain: https://vetain.de/products/vegan-protein-kakao
When you click on a variant, all other information (URL, product name, product description, etc.) is updated immediately.
I received the following response:
I wish I could quickly provide a solution, but this will require some coding in a test environment on your site. One thing is certain - refreshing the page to show the correct details is not good UX and should be avoided. Have you considered using an app like Variant Image Automator? It might save you a lot of time, work, and development costs.
Otherwise, this will require some AJAX. In your example where it works, there is an initial page refresh before the page is cached in the browser, which is also not the best solution.
To automatically update the PDP and product title when a new variant is selected without reloading the page, use AJAX. A JavaScript snippet like the following should dynamically update the product name, URL, and product description:
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));
});
});
});
Make sure that the HTML elements have the correct classes to be targeted by this JavaScript snippet. Also, check that the class names in the HTML match those in the JavaScript. In the example above, it is assumed that the variant selection inputs have the class .product-variant__input and that the title and description have the classes .product__title and .product__description.
With this code, the page should not reload, but only the relevant information (title, description, URL) will be dynamically updated when the user selects a new variant.
I've already tried the Variant Image Automator and another app, but they don't work as I'd like.
Does anyone have a solution for this? Does anyone need a development environment to test the code?
Thanks a lot!
Christian
