Build A Simple Wishlist Using Customer Metafields With MESA

Got a request recently for a very simple wishlist functionality that simply saved products to the customer account. Lord knows there are hundreds of wishlist apps in the app store, but sometimes someone just wants the simplest possible solution. And this just might be the simplest wishlist app ever created.

We’re using MESA web request triggers in order to read and write products to a customer wishlist metafield that we’ve created.

Watch The Demo

Product Page

Here is the Add to wishlist button we’ve created with some custom liquid:

<button id="mesa-wishlist-add-product" class="product-form__submit button button--full-width button--secondary" style="position: relative;">
  <span>Add to wishlist</span>
</button>

<script>
  document.getElementById('mesa-wishlist-add-product').addEventListener('click', function() {
      document.getElementById('mesa-wishlist-add-product').textContent = 'Adding to wishlist';
      fetch('https://webhooks.getmesa.com/v1/kalen-jordan-dev/webrequest/65b90010695f027f105335af/65b900137f610a6ee11b34dd.json?apikey=pobbFlA9BN73tE4gkbUsb5DLnZnwfIKi8g8UtM7U', {
          method: 'POST', // or 'POST', 'PUT', 'DELETE', etc.
          headers: {
              // Headers, if needed (e.g., content type, authorization)
          },
          body: JSON.stringify({
              "product_id": {{ product.id }},
              "customer_id": {{ customer.id }},
          })
      })
      .then(response => response.json()) // or .text(), etc., depending on the response type
      .then(data => {
        console.log(data);
        if (data.success) {
          document.getElementById('mesa-wishlist-add-product').textContent = 'Added to wishlist';
        }
      })
      .catch((error) => {
          console.error('Error:', error); // Handle any errors
      });
  });
</script>

Account Page

<div class="customer account">
  <h2>Wishlist</h2>
  <ul id="mesa-account-wishlist">
    {% for product in customer.metafields.custom.wishlist.value %}
      <li>
        <a href="{{ product.url }}" target="_blank">{{ product.title }}</a>
      </li>
    {% endfor %}
  </ul>
</div>

Preview Workflow: Add Product To Wishlist