Ad

Edit And Save Shopify Line Item Properties Directly In Cart

- 1 answer

I want to edit/save Shopify line item properties directly in the cart using /cart/change.js without having to go back to the product page to re-enter the info over again. The line item properties are made up of names/values.

Each cart item will have a maximum of 3 line item property names ('Occasion', 'Additional Comments', 'Enclosed Card') with each of their corresponding values being unique.

See this screenshot as example

I cannot seem to get it to work with multiple cart items or with more than one property name/value. Since each property value id is the property value itself, I have tried to create dynamic ids for each value so that I can target each cart item property uniquely and overwrite the exiting values. However, I can't seem to figure out how to do this.

For example purposes, to edit the property-name I would like to do something like this:

$('.cart-line-item-update').on('click', function() {
  const $this = $(this);
  const dataIndex = $this.data('index');
  const item = cart_items[dataIndex - 1];
  item.properties['property-name'] = $('#dynamic-property-value').val();
  jQuery.ajax({
    url: '/cart/change.js',
    dataType: 'json',
    data: {
      line: dataIndex,
      properties: item.properties
    }
  }).done(function() {
    window.location.reload()
  })
});

<script>
    var cart_items = {{cart.items | json}} 
</script>

{% if property_size > 0 %}
  {% assign loop_index = forloop.index %}
  {% for p in item.properties %}
    {% assign first_character_in_key = p.first | truncate: 1, '' %}
    {% unless p.last == blank or first_character_in_key == '_' %}
      <div class="accordion-container collapse-all cart-line-item-accordion">
        <input type="checkbox" title="Expand for more information" checked>
        <h2 class="accordion-title">
          <span id="{{ item.product_id }}-{{ p.first | handleize }}">{{ p.first }}:</span>
          <i class="accordion-icon"></i>
        </h2>
        <div class="accordion-content">

          <div class="saved-textarea visible">
            {{ p.last }}
          </div>
          <textarea id="{{ item.product_id }}-{{ p.first | handleize }}-textarea" class="update-textarea autosize new-property">{{ p.last }}</textarea>

          <div class="cart-line-item-btns">
            <a class="cart-item-remove cart-line-item-edit" title="Edit content">Edit</a>
            <a class="cart-item-remove cart-line-item-update" title="Save changes" data-index="{{loop_index}}">Update</a>
          </div>
        </div>
      </div>
    {% endunless %}
  {% endfor %}
{% endif %}

EXPECTED RESULT: Each cart item property value will be saved (overwriting existing json value).

ACTUAL RESULT: Will only update the first cart item property value and save it. If I have multiple items in the cart, each with their own value, it will not save subsequent instances of that property and will override them with the first instance.

The values already exist in json because they are created on the product page and transferred over to cart. I just don’t know how to target each old json value to override it with the new. This script seems to target all instances of the property-name and override them all with the first value.

Maybe I’m missing something obvious. Can anyone please help?

Ad

Answer

I have modified the codes, try this, it works at my end

At first I have modifed properties part, added some data and wrapper.

      {% if property_size > 0 %}
   <div class="propContainer">
  {% assign loop_index = forloop.index %}
  {% for p in item.properties %}
    {% assign first_character_in_key = p.first | truncate: 1, '' %}
    {% unless p.last == blank or first_character_in_key == '_' %}
      <div class="accordion-container collapse-all cart-line-item-accordion">
        <input type="checkbox" title="Expand for more information" checked>
        <h2 class="accordion-title">
          <span id="{{ item.product_id }}-{{ p.first | handleize }}">{{ p.first }}:</span>
          <i class="accordion-icon"></i>
        </h2>
        <div class="accordion-content">

          <div class="saved-textarea visible">
            {{ p.last }}
          </div>
          <textarea data-name="{{ p.first }}" id="{{ item.product_id }}-{{ p.first | handleize }}-textarea" class="propLine update-textarea autosize new-property">{{ p.last }}</textarea>

          <div class="cart-line-item-btns">
            <a class="cart-item-remove cart-line-item-edit" title="Edit content">Edit</a>
            <a class="cart-item-remove cart-line-item-update" title="Save changes" data-index="{{loop_index}}">Update</a>
          </div>
        </div>
      </div>
    {% endunless %}
  {% endfor %}
            </div>
{% endif %}

And put this at the end of cart template.

<script>

$('.cart-line-item-update').on('click', function() {
  const $this = $(this);
  const dataIndex = $this.data('index');
  var inputData = $this.closest('.propContainer').find('.propLine')

  var data = {
     line: dataIndex,
     properties: ''
   }
  var tempProperties = {}
  inputData.each(function(index, el) {
    tempProperties[$(el).data('name')] = $(el).val();
  });
  data.properties = tempProperties;

  jQuery.ajax({
    url: '/cart/change.js',
    dataType: 'json',
    data: data
  }).done(function() {
    window.location.reload()
  })
});
</script>
Ad
source: stackoverflow.com
Ad