Different variants having different delivery information on metafield

[Malleable]

I am trying to make it possible to have different shipping date estimates for different metal types of the same SKU. I have created three metafields with the metal type and their respective shipping dates however when I have added it in as dynamic content to my theme editor it is just showing all of the descriptions on the product page.

I don't know if it is due to our theme (Minimalista) but it only allows me to use single text line and any "type" doesn't populate on dynamic content.

[Priyanka_]

Hi @Malleable 
Could you provide a screenshot of how you're assigning the metafield values and the URL of the page where the metafields are displayed? This will help me review the issue and offer a solution.

[Malleable]

We are trying to assign the various delivery expectations for the drop down variants of karat

[Priyanka_]

Hi @Malleable 

Firstly, ensure that you create the metafields under the variant level rather than the product level.



Next, use the following code to display the delivery metafield for the initially selected variant:

<div id="metafield-display">
{% assign default_variant = product.selected_or_first_available_variant %}
<p id="delivery-date">Delivery Date: {{ default_variant.metafields.custom.delivery_date }}</p>
</div>

Then, implement this JavaScript to update the metafield value when the selection changes:

<script>
document.addEventListener('DOMContentLoaded', function() {
var radios = document.querySelectorAll('.variant-radio');
var deliveryDateElement = document.getElementById('delivery-date');

radios.forEach(function(radio) {
radio.addEventListener('change', function() {
if (this.checked) {
var selectedVariantId = this.value;
var metafieldContainer = document.getElementById('metafield-' + selectedVariantId);
var metafieldValue = metafieldContainer ? metafieldContainer.getAttribute('data-metafield') : 'Not available';

deliveryDateElement.textContent = 'Delivery Date: ' + metafieldValue;
}
});
});
});
</script>

Hope this will help. Please mark this as solution if this helpful.
If you need further assistance please share your store URL.

[Malleable]

I added a liquid box in our theme editor and added the metafield display after changing the under the variant level. When I went to add the code into our JSON it wasn't allowing to add the script.

[Priyanka_]

You can add JS to another file in product page such as "main-product.liquid" file.

Also, you can provide me your store URL and password if needed so that I can assist you.

[Malleable]

Could you send a collaborator request? I'll send along the code once received.

Thank you for your help Priyanka

[Priyanka_]

Hi @Malleable 
Go to theme Editor > theme.liquid file and paste the below code just before </body> tag:

{%- if template contains 'product' -%}
<script>

$('select[name="options[Karat]"]').on('change', function(){
var selected_value = $(this).find(':selected').val();
$('#availability').text('Availability: ' + selected_value);
})

</script>
{%- endif -%}

Hope this will be helpful!

Please mark this as solution. Thanks!

[Priyanka_ · Accepted solution]

I've added the below code to your store and now it's changing the availability according to selected variant:

---

<script>
document.addEventListener('DOMContentLoaded', function() {
  var selectElement = document.querySelector('select[name="options[Karat]"]');
  var availabilityElement = document.getElementById('availability');

  function handleSelectChange(event) {
    var selectedOption = event.target.options[event.target.selectedIndex];
    var availability = selectedOption.getAttribute('data-availability');
    console.log(availability);

    // Update the availability display
    availabilityElement.textContent = 'Availability: ' + availability;
  }

  if (selectElement) {
    selectElement.addEventListener('change', handleSelectChange);
    // Trigger the change event handler initially if needed
    handleSelectChange({ target: selectElement });
  }
});
</script>

Please mark this as solution. 

[Malleable]

You're a superstar thank you so much!

One last thing, do you know if there is a way of including the variant metafield in a csv export? I want to be able to bulk edit the information for all of our products instead of clicking individually or using the bulk editor as it is slow.

[Priyanka_]

You can use the Matrixify app for bulk importing and exporting products, including the ability to export metafields.

[Renars]

Hi @Priyanka_ 

Thank you for mentioning our app here!

You sure can use Matrixify to bulk export and import all Product and Variant Metafields.

Here you can find our tutorial on How to manage Shopify Metafields with Matrixify.

If you have any questions or concerns along the way, please reach out to our support directly.