display variant title

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<div class="variant-title">{{ variant.title }}</div>
{% endif %}
{% endfor %}

window.addEventListener("load", () => {
    const products = document.querySelectorAll('[data-pf-type="ProductBox"]');
    for (let i = 0; i < products.length; i++) {
    const selects = products[i].querySelectorAll(
        ".pf-option-swatches div[data-option-name]"
    );
    selects.forEach((sel) => {
        sel.addEventListener("click", () => {
            setTimeout(() => {
                const variantId = products[i].querySelector(
                    '[data-pf-type="ProductVariantSwatches"] input'
                ).value;
                const productId = products[i]
                    .querySelector('[data-pf-type="ProductVariantSwatches"] input')
                    .getAttribute("data-product-id");
                const variant = __pageflyProducts[productId].variants.filter(
                    (item) => item.id === parseInt(variantId)
                );
              let variantTitle = variant[0].title;
              const atc = sel.closest('[data-pf-type="ProductBox"]').querySelector('[data-pf-type="ProductATC"]');
              const unavailableVariant = atc.textContent.includes("Unavailable");
              if (unavailableVariant && atc.disabled) {
                  document.querySelector(".variant-title").setAttribute("unavailable", "")
                  products[i].querySelector(".variant-title").innerText = atc.textContent;
              } else {
                  document.querySelector(".variant-title").removeAttribute("unavailable", "")
                  products[i].querySelector(".variant-title").innerText = variantTitle;
              }
                  }, 0);
        });
    });
}
});