Shopify Lieferzeit auch für Varianten über Metafeld anzeigen

Damit das Liquid funktioniert, muss am Artikel ein Metafeld angelegt werden. Dieses heißt in meinem Beispiel Lieferzeit. Im Template, muss an der gewünschten Stelle ein Benutzerdefiniertes Liquid eingefügt werden und der Code unten eingefügt werden.

Folgendes Liquid muss eingefügt werden: (Für Variantenartikel und Artikel ohne Varianten)

{% comment %}
  Hier wird eine versteckte Vorlage für die Lieferzeit der einzelnen Varianten erstellt.
  {% endcomment %}
  {% for variant in product.variants %}
    <div class="variant-delivery-time-{{ variant.id }}" style="display:none;">
      {% if variant.available %}
 {{ product.metafields.custom.lieferzeit | replace: "[", "" | replace: "]", "" | replace: '"', '' | strip }}

      {% else %}
        Der Artikel ist derzeit ausverkauft
      {% endif %}
    </div>
  {% endfor %}

  {% comment %}
  Hier wird die Standard-Lieferzeit des Produkts angezeigt, wenn keine Variante ausgewählt ist.
  {% endcomment %}
  <p id="product-delivery-time">
    {% if product.selected_or_first_available_variant %}
{{ product.metafields.custom.lieferzeit | replace: "[", "" | replace: "]", "" | replace: '"', '' | strip }}


    {% else %}
      Es sind keine Varianten verfügbar.
    {% endif %}
  </p>

  {% comment %}
  Hier wird das Javascript für den Variantenwechsel hinzugefügt.
  {% endcomment %}
  <script>
    // Die IDs der HTML-Elemente für die Lieferzeit aktualisieren
    function updateDeliveryTime(variantId) {
      var variantDeliveryTime = document.querySelector('.variant-delivery-time-' + variantId);
      var productDeliveryTime = document.querySelector('#product-delivery-time');
      if (variantDeliveryTime) {
        productDeliveryTime.innerHTML = variantDeliveryTime.innerHTML;
      }
    }

    // Beim Laden der Seite die Lieferzeit für die ausgewählte Variante aktualisieren
    updateDeliveryTime('{{ product.selected_or_first_available_variant.id }}');

    // Beim Ändern der Variante die Lieferzeit aktualisieren
    document.addEventListener('change', function(event) {
      if (event.target && event.target.name === 'id') {
        updateDeliveryTime(event.target.value);
      }
    });
  </script>