Product variants code

[sagabikes]

I am currently using a code snippet on my Shopify store to display the delivery time for my products. However, the code does not account for different delivery times for various product variants. Instead, it shows the same delivery time regardless of the selected variant.

Here is the current code I am using for reference:

{% if product.handle == "quartz-elcykel" or product.handle == "2nd-product-handle" %}
<div id="product-delivery" style="font-size: 14px;">
<img src="https://cdn-icons-png.flaticon.com/512/709/709790.png" style="height:20px;float:left;margin-right:10px;padding-bottom: 4px;"/>
På lager - levering <strong><span id="fromDate"></span> - <span id="toDate"></span></strong>
</div>
{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
<script>
(function() {
var fromDate = Date.today().addDays(2);
if (fromDate.is().saturday() || fromDate.is().sunday()) {
fromDate = fromDate.next().monday();
}

var toDate = Date.today().addDays(7);
if (toDate.is().saturday() || toDate.is().sunday()) {
toDate = toDate.next().monday();
}

// Formatering af datoerne til dansk ved hjælp af toLocaleDateString
var options = { weekday: 'long', day: 'numeric', month: 'long' };
document.getElementById('fromDate').innerHTML = fromDate.toLocaleDateString('da-DK', options);
document.getElementById('toDate').innerHTML = toDate.toLocaleDateString('da-DK', options);
})();
</script>
{% endif %}

I would like to modify this code to display specific delivery times for each product variant. Could you please provide guidance on how to adjust the code to accommodate variant-specific delivery times?

Thank you for your assistance.

[devmont-digital]

Hello @sagabikes,

To display unique delivery times for each variant, follow these steps:

Go to Dashboard -> Settings -> Custom Data. Navigate to Variants, add a definition, and name it "Variant Message". Select the type "Single Line Text".

Next, go to the products where you want to display delivery times. Open any product, select a variant, click on Bulk Edit, then add a new column for "Variant Message". Enter the desired delivery time for each variant and save the product.

Finally, go to Online Store -> Edit Code. Add a new snippet file named variant-message.liquid, and paste the relevant code into this file. Then, search for the main-product.liquid file, open it, find the word "buy", and paste the code there. You can refer to the screenshot for guidance.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
  .variantMessage {
    color: #629638;
    font-size: 10px;
    font-weight: 700;
    text-transform: capitalize;
  }
  p.variantMessage {
    display: none;
  }
  .variantMessage.defaultVariantMessage {
    display: block;
  }
</style>

<div class="varMessageWrap">
  {% for variant in product.variants %}
  {% if variant.id == product.selected_or_first_available_variant.id %}
  {% assign default_variant = variant %}
  <p class="variantMessage defaultVariantMessage" data-text="{{ default_variant.id }}">
    {{ default_variant.metafields.custom.variant_message }}
  </p>
  {% else %}
  <p class="variantMessage" data-text="{{ variant.id }}">
    {{ variant.metafields.custom.variant_message }}
  </p>
  {% endif %}
  {% endfor %}
</div>

<script>
  $(document).ready(function () {
    $('.product-variant-id').on('change', function () {
      var sltVariant = $(this).val();
      console.log(sltVariant);
      
      $('.variantMessage').each(function () {
            $(this).hide(); // Equivalent to element.style.display = 'none';
            var messageValue = $(this).data('text'); // Equivalent to element.getAttribute('data-text');
            if (sltVariant == messageValue) {
                $(this).show(); // Equivalent to element.style.display = 'block';
              }
            });
    });
  });
</script>

 {% render 'variant-message' %}