Custom Code - metafields für variable PDF-Downloads auf Produktseite

[123rolli]

Hallo, 

ich möchte bei allen Produktvarianten ein eigenes PDF-Dokument (Einzeldatei / oder auch Dateiliste) zu Download auf der entsprechenden Produktseite anzeigen lassen. Der Code wird über ein benutzerdefiniertes Liquid auf der Produktseite eingebunden. Bisher habe ich folgenden Code erstellt, jedoch das Problem, dass bei Auswahl einer neuen Variante sich der Linkinhalt nicht verändert. Erst bei Page Refresh wird die korrekte Verlinkung entsprechend der ausgewählten Variante angezeigt. Zudem funktioniert das lediglich bei einem ersten Durchgang, nach weiterer Varianten-Auswahl über ein DropDown-Menü aktualisiert sich die Verlinkung wieder nicht.

Hier der Code der im Moment eingefügt ist:

{% assign selected_variant = product.selected_or_first_available_variant %}

<strong>Druckvorlage
<a id="druckvorlage-link" href="{{ selected_variant.metafields.custom.beachflag_druckvorlagen | file_url }}">
{{ selected_variant.title }}!
</a>
</strong>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Varianten mit allen relevanten Daten als JSON ins JavaScript laden
var variants = {{ product.variants | json }};
console.log("Varianten geladen:", variants); // Debugging: Ausgabe der Varianten in der Konsole

// Event Listener für Variantenwechsel
$('#variant-selects-template--22474109681929__main select').on('change', function() {
// Holen der Werte der ausgewählten Optionen
var option1Value = $('#Option-template--22474109681929__main-0').val(); // Größe
var option2Value = $('#Option-template--22474109681929__main-1').val(); // Bodenbefestigung
var option3Value = $('#Option-template--22474109681929__main-2').val(); // Fahnenform

console.log("Ausgewählte Optionen:", option1Value, option2Value, option3Value); // Debugging

// Suchen der Variante, die den ausgewählten Optionen entspricht
var selectedVariant = variants.find(function(variant) {
return variant.options[0] === option1Value &&
variant.options[1] === option2Value &&
variant.options[2] === option3Value;
});

// Überprüfen, ob die Variante gefunden wurde
if (selectedVariant) {
console.log("Ausgewählte Variante gefunden:", selectedVariant); // Debugging

// Überprüfen, ob das Metafield vorhanden ist
var metafieldUrl = selectedVariant.metafields?.custom?.beachflag_druckvorlagen || null;
console.log("Metafield URL:", metafieldUrl); // Debugging

if (metafieldUrl) {
// Den Link aktualisieren
$('#druckvorlage-link').attr('href', metafieldUrl);
$('#druckvorlage-link').text("PCS are available in " + selectedVariant.title + "!");
} else {
// Wenn kein Metafield vorhanden ist, den Link anpassen
$('#druckvorlage-link').attr('href', '#');
$('#druckvorlage-link').text("Keine Vorlage verfügbar für " + selectedVariant.title);
}
} else {
console.error("Keine Variante mit den ausgewählten Optionen gefunden: ", option1Value, option2Value, option3Value);
}
});
});
</script>

Danke für eure Hilfe!

[Ben310]

Der Event-Listener zielt scheinbar auf eine statische Selektions-ID, die sich möglicherweise ändert, wenn eine Variante ausgewählt wird. Außerdem gibt es möglicherweise Probleme wie die Metafelder der Varianten geladen werden.

Probiere mal folgenden Code (aber ohne Gewähr):

Spoiler

{% assign selected_variant = product.selected_or_first_available_variant %}

<strong>Druckvorlage:
<a id="druckvorlage-link" href="{{ selected_variant.metafields.custom.beachflag_druckvorlagen | file_url }}">
{{ selected_variant.title }}!
</a>
</strong>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
    var variants = {{ product.variants | json }};
    console.log("Varianten geladen:", variants); 

    function updateDownloadLink(selectedVariant) {
        if (selectedVariant) {
            console.log("Ausgewählte Variante gefunden:", selectedVariant); 
            var metafieldUrl = selectedVariant.metafields?.custom?.beachflag_druckvorlagen || null;
            console.log("Metafield URL:", metafieldUrl); 

            if (metafieldUrl) {
                $('#druckvorlage-link').attr('href', metafieldUrl);
                $('#druckvorlage-link').text(selectedVariant.title + " - Druckvorlage herunterladen");
            } else {
                $('#druckvorlage-link').attr('href', '#');
                $('#druckvorlage-link').text("Keine Vorlage verfügbar für " + selectedVariant.title);
            }
        } else {
            console.error("Keine Variante mit den ausgewählten Optionen gefunden.");
        }
    }

    $('[name="id"]').on('change', function() {
        var selectedVariantId = $(this).val();
        var selectedVariant = variants.find(variant => variant.id == selectedVariantId);

        updateDownloadLink(selectedVariant);
    });

   updateDownloadLink(variants.find(variant => variant.id == $('[name="id"]').val()));
});
</script>

Weitere threads zum Thema:

• Shopify Community
• Shopify Community
• Ecommerce Pot
• Shopify Community

[Nordalux]

Direkt auf dem ersten Blick sehe ich, dass du keine DOM-Abfrage machst. Hier musst du nicht nur dein Javascript, sondern auch etwas am Liquid anpassen.