Fotos von ausverkauften Produkten ausblenden

Deutsch Diskussion Technische Fragen & Antworten
1

Hallo,

wie lassen sich denn die Fotos von ausverkauften Produkten innerhalb einer Variation ausblenden?

Die Texte und Auswahlmöglichkeit haben wir ausgeblendet, aber die Fotos werden dauerhaft angezeigt, was die Kunden verwirrt.

Empire Version 11.1.2

2

Hey, du hast jetzt nativ im Theme einige Einstellungen seitdem Update im Theme Editor, wie “Karussell mit Vorschaubildern” oder “Medien anderer Varianten ausblenden, sobald eine Variante ausgewählt wurde” usw. (diesen Feature verwenden wenn du weniger Fotos der Varianten anzeigen möchtest).

Tbh, die Fotos ausverkaufter Produkte ausblenden würde ich nicht empfehlen denn das kann deine Customer Returns Rates senken, denn wie der Spruch so schön geht: “out of sight, out of mind”.

Aber ausverkaufte Produktfotos ausblenden, verlangt etwas Programmierung auf der PDP, wie der folgende Code Beispiel. Du musst ja auch bedenken dass die Dropdowns der Varianten auch ausgeblendet oder ausgegraut werden müssen, also so einfach sind die UI und UX deines Ziels nicht:

document.addEventListener('DOMContentLoaded', function () {
    const productJsonElements = document.querySelectorAll('[id^=ProductJson-]');
    
    if (productJsonElements.length > 0) {
        productJsonElements.forEach(current => {
            const sectionId = current.id.replace('ProductJson-', '');
            const section = document.querySelector(`[data-section-id="${sectionId}"]`);
            const product = JSON.parse(current.text);

            const unavailableVariants = product.variants.filter(variant => !variant.available);
            
            // Bilder ausblenden, die zur nicht verfügbaren Variante gehören
            function hideUnavailableVariantImages() {
                unavailableVariants.forEach(variant => {
                    const variantMediaId = variant.featured_media?.id; // Prüfe, ob ein Medien-ID existiert
                    if (variantMediaId) {
                        const mediaElement = section.querySelector(`[data-media-id="${variantMediaId}"]`);
                        if (mediaElement) {
                            mediaElement.style.display = 'none';
                        }
                    }
                });
            }

            // Beobachter für Änderungen im DOM (z.B. beim Variantentausch oder Initialisierung)
            const observer = new MutationObserver(hideUnavailableVariantImages);
            observer.observe(section, { childList: true, subtree: true });
            
            // Rufe die Funktion sofort auf, um die Bilder initial auszublenden
            hideUnavailableVariantImages();
        });
    }
});

Deine Bilder sollten im HTML ein Attribut data-media-id haben, das der Medien-ID entspricht. Shopify fügt solche Attribute standardmäßig zu Medien hinzu, aber du solltest sicherstellen, dass dein Theme das auch tut. Bilder der nicht verfügbaren Varianten werden somit ausgeblendet, was die Kunden nicht verwirrt. Die Dropdown-Optionen für ausverkaufte Varianten werden ebenfalls unsichtbar gemacht.

Ansonsten gibt es auch Apps dafür, wie diese hier.

3

Das geht nur über Umwege und wenn du beim Bild ein entsprechenden alt-tag setzt. Dazu benötigst du auch einen entsprechenden einprogrammierten Code.

4

Wie ich gerade oben erklärt habe