SKU pf

{%- assign current_variant = product.selected_or_first_available_variant -%}
<div class="vendor_name_box">
<b>Sku: </b><span class="variant-sku">{{ current_variant.sku }}</span>
</div>

// Update SKU when change the varaint, add this code in the custom code editor in the JS
const products = Array.from(document.querySelectorAll('[data-pf-type="ProductBox"]'));
    products.map(product => {
        const selects = product.querySelectorAll(".pf-variant-select");
        const swatches = product.querySelectorAll(".pf-option-swatches div[data-option-name]");
          const changeSku = () => {
            setTimeout(() => {
                const variantId = product.querySelector(
                    '[data-pf-type="ProductVariantSwatches"] input'
                ).value;
                const productId = product
                    .querySelector('[data-pf-type="ProductVariantSwatches"] input')
                    .getAttribute("data-product-id");
                const variant = __pageflyProducts[productId].variants.filter(
                    (item) => item.id === parseInt(variantId)
                );
                const sku = variant[0].sku;
                const variantSku = product.querySelector(".variant-sku")
                variantSku.innerText = sku;
            }, 0);
          }
          changeSku();
          swatches.forEach((swatch) => {
              swatch.addEventListener("click", changeSku);
          });
         selects.forEach((sel) => {
              sel.addEventListener("change", changeSku);
          });
    })