Metafields in order

[Valeria_16]

Please help me figure out if I did the right thing. I need the data from the calendar to be transmitted in the meta field. Did I write the last piece of script correctly? I mean meta-note. I created metafields in order

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" />
    <span style="display:block" class="instructions">Minimum 24 hours notice for delivery please.</span>
  </p>
</div>

<style>
span.instructions {
  padding: 5px 0 0 0;
}
  .ui-icon.ui-icon-circle-triangle-e {
  width: 20px;
  height: 20px;
  padding-bottom: 15px;
  background-image: url('https://cdn.shopify.com/s/files/1/1577/3137/files/ios7-arrow-thin-down_icon-icons.com_50348.png?v=1692892517');
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
}

.ui-icon.ui-icon-circle-triangle-e:hover {
  transform: scale(1.1); 
}

  span.ui-icon.ui-icon-circle-triangle-w{
  width: 20px;
  height: 20px;
  padding-bottom: 15px;
  background-image: url('https://cdn.shopify.com/s/files/1/1577/3137/files/ios8-arrow-thin-down_icon-icons.com_50348.png?v=1692893173'); 
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
  }
  span.ui-icon.ui-icon-circle-triangle-w:hover{
      transform: scale(1.1); 
   }

</style>

<script defer src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
jQuery(function() {
  jQuery("#date").datepicker({
    minDate: 1,
    dateFormat: "mm/dd/yy",
    beforeShowDay: function(date) {
      var day = date.getDay();
      return [(day != 1), ''];
    }
  });
  jQuery("#date").attr("readonly", "readonly");
});

document.body.addEventListener("submit", function (e) {
  if (e.target.getAttribute("action") === "/cart") {
    var selectedDate = document.querySelector('#date').value;
    if (selectedDate === "") {
      e.preventDefault();
      e.stopPropagation();
      alert("Please select a delivery date");
      location.reload();
      return false;
    }
    
    var note = document.querySelector('textarea[name="note"]');
    if (note) {
      note.value += " *** Delivery Date: " + selectedDate;
    }

    
    var meta-note = document.querySelector('custom.delivery_date');
    if (meta-note) {
      meta-note.value += "Delivery Date: " + selectedDate;
    }
  }
});

  
</script>

[websensepro]

Hi @Valeria_16 ,

Update your script code after jQuery code with this: 

document.body.addEventListener("submit", function (e) {
  if (e.target.getAttribute("action") === "/cart") {
    var selectedDate = document.querySelector('#date').value;
    if (selectedDate === "") {
      e.preventDefault();
      e.stopPropagation();
      alert("Please select a delivery date");
      location.reload();
      return false;
    }

    var note = document.querySelector('textarea[name="note"]');
    if (note) {
      note.value += " *** Delivery Date: " + selectedDate;
    }

    var metaNote = document.querySelector('input[name="custom.delivery_date"]'); // Ensure the input field matches
    if (metaNote) {
      metaNote.value = selectedDate;
    }
  }
});

key Adjustments:

• Renamed 'meta-note' to 'metaNote' (JavaScript variable naming).
• The selector you're using for meta-note is incorrect. If you're targeting a metafield input, it should be a valid CSS selector. For example, document.querySelector('input[name="custom.delivery_date"]') would work if the input name matches that

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Valeria_16]

I did as you wrote and made a test order, the meta field is empty

[Valeria_16]

Sorry, but I'm not very comfortable chatting on instagram.

[Valeria_16]

why can't we continue here on Shopify?

[PaulNewton]

Because they didn't actually engage with the problem or it's chatgpt nonsense

[Valeria_16]

Oh, it's a pity. I really need help.

[websensepro]

I would need to take a look at your store's code. There might be some issues with your input or something else.

[PaulNewton]

Hi @Valeria_16 there are several fundamental misunderstanding of how shopify's apis work.

1. you can't submit arbitrary form information on the front end, either use line item properties, cart attributes, or contact form attributes.
2. Such information cannot connect to a metafield by itself, you either need to use shopify-flow to set up an automation, or another automation app like mechanic, or use a metafields app that has frontend form features such as the customer fields app, etc.
3. If you try to shunt one inputs info into the cart note your gonna create problems for yourself in the future , effectively making a customer features unusable for customers.
4. read the dev docs

When seeking issues with forms, etc omit most the styles it's just noise that clutters the issue.

Good Luck.

[Valeria_16]

but then why are there meta fields for order? how to work with them?

[Valeria_16]

Yes, well, thank you

[PaulNewton]

Metafields store data as a GENERAL feature for merchants to use, but merchants still have to BUILD their custom processes.

They are building blocks, not finished sculptures.

If you have the budget and need technical consulting/training, reachout contact info in sig or if you have access private message by clicking here (sloooower).-