直接在購物車中編輯和保存Shopify訂單項屬性

Question

我想使用/cart/change.js在購物車中直接編輯/保存Shopify訂單項屬性，而不必返回到產品頁面重新輸入信息。 訂單項屬性由名稱/值組成。

每個購物車項目最多具有3個訂單項屬性名稱（“場合”，“其他注釋”，“封閉卡”），它們各自的對應值是唯一的。

參見此屏幕截圖作為示例

我似乎無法使其與多個購物車項目或多個屬性名稱/值一起使用。 由於每個屬性值ID都是屬性值本身，因此我嘗試為每個值創建動態ID，以便可以唯一地定位每個購物車商品屬性並覆蓋現有值。 但是，我似乎無法弄清楚該如何做。

出於示例目的，要編輯property-name我想執行以下操作：

$('.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 %}

預期的結果：每個購物車商品屬性值將被保存（覆蓋現有的json值）。

實際結果：只會更新並保存第一個購物車項目的屬性值。 如果購物車中有多個項目，每個項目都有自己的值，它將不會保存該屬性的后續實例，而將第一個實例覆蓋它們。

這些值已經存在於json中，因為它們是在產品頁面上創建並轉移到購物車的。 我只是不知道如何針對每個舊的json值以新的值覆蓋它。 該腳本似乎以屬性名的所有實例為目標，並用第一個值覆蓋它們。

也許我缺少明顯的東西。 誰能幫忙嗎？

Answer 1

我已經修改了代碼，請嘗試一下，最終可以使用

首先，我修改了屬性部分，添加了一些數據和包裝器。

      {% 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 %}

並將其放在購物車模板的末尾。

<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>