Shopify Question posted in
The Shopify help center can be found here.

Shopify: Metafield API — is it possible to allow users to edit metafields from the account page?

I’ve successfully created a customer metafield: customer.metafields.c_f.proxy

Goal is allow the customer (while logged in) from the account.liquid template, edit the value of the metafield with a form. I’m trying to use some jquery and the Metafield API to POST the change from the user:

<form action="/admin/customers/{{ customer.id }}/metafields.json" method="POST" id="custmeta">
  <input type="hidden" name="customer[id]" value="{{ customer.id }}" />
  <input type="text" name="metafield[c_f.proxy]" value="{{ customer.metafields.c_f.proxy }}" placeholder="{{ customer.metafields.c_f.proxy }}" />
  <input type="submit" value="Edit"/>
</form>

<script>
$('form#custmeta').submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: "POST",
    dataType: "json",
    data: $(this).serialize(),
    url: $(this).attr('action'),
    success: function (data) {
      var formValid = (data.status === 'OK');
      if (formValid) {
        var msgs = '';
        for (var i=0;i<data.messages.length;i++) {
          msgs += '-- ' + data.messages[i] + 'n';
        }
        if (msgs > '') {
          alert('SUCCESS WITH MESSAGES:nn' + msgs);
        }
        else {
          alert('SUCCESS!');
        }
      }
      else {
        alert('Status: ' + data.status + 'nMessage: ' + data.message);
      }
    },
    error: function (jqXHR, textStatus, errorThrown) {
      alert('AJAX or Server 500 error occurred');
    }
  });
  return false;
});
</script>

Currently throwing an AJAX or Server 500 error occurred.

Edit to include an answer from another forum:

what you’re doing won’t work. You’re sending data from a page to the API via JS in a browser. You’ll be sending cookies in that request. Any request that updates/adds data will be blocked if it contains cookies.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've found a workaround to this solution using customer.tags

    Here's a look at my code:

    {% form 'customer' %}

  {{ form.errors | default_errors }}

  {% if form.posted_successfully? %}
    <div class="form--success">
      <span>Thank you, we added that name and they can pick it up for you.</span> <!-- This might interfere with your newsletter signup, you can try remove this section and add < input type="hidden" name="redirect" value="https://www.yoursite.com/pages/success"> for redirecting to success URL -->
    </div>
  {% else %}

    <input type="hidden" id="proxyTag" name="contact[tags]" value="Proxy Pickup - ">

    {% comment %}
    <label for="proxyTag" class="label--hidden">Proxy Pickup -- </label>
    {% endcomment %}

    <input type="hidden" name="contact[email]" id="Email" class="input-group__field" placeholder="Email" value="{{ customer.email }}">

    <input type="text" id="userTag" name="contact[name]" placeholder="John Smith" required>

    <span class="input-group__btn">
      <button type="submit" name="commit" class="btn">
        <span>Save</span>
      </button>
    </span>

  {% endif %} 
{% endform %}

<script>
  $(function () {
    $('#userTag').on('change', function () {
      $('#proxyTag').val($(this).val() + ' - Proxy Pickup');
    })
  })
</script>


  2. 0

    Tags workaround can be useful and tricky.
    A proper way would be to use an app which allow users to update metafields from the storefront, like MetaFields2 or Custom Fields.

    Those apps are paying, so you can also implement it yourself easily.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search