changing line item ids to use keys (#562)

Changing line item ids to use keys
Shopify · Aug 10, 2016 · 2b73e42 · 2b73e42
1 parent cb51f0d
commit 2b73e42
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/assets/ajax-cart.js.liquid b/assets/ajax-cart.js.liquid
@@ -317,7 +317,7 @@ var ajaxCart = (function(module, $) {
 
       // Create item's data object and add to 'items' array
       item = {
-        id: cartItem.variant_id,
+        key: cartItem.key,
         line: index + 1, // Shopify uses a 1+ index in the API
         url: cartItem.url,
         img: prodImg,
@@ -473,7 +473,7 @@ var ajaxCart = (function(module, $) {
         var source   = $("#AjaxQty").html(),
             template = Handlebars.compile(source),
             data = {
-              id: $el.data('id'),
+              key: $el.data('id'),
               itemQty: itemQty,
               itemAdd: itemAdd,
               itemMinus: itemMinus
@@ -504,7 +504,7 @@ var ajaxCart = (function(module, $) {
         var source   = $("#JsQty").html(),
             template = Handlebars.compile(source),
             data = {
-              id: $el.data('id'),
+              key: $el.data('id'),
               itemQty: itemQty,
               itemAdd: itemAdd,
               itemMinus: itemMinus,

diff --git a/snippets/ajax-cart-template.liquid b/snippets/ajax-cart-template.liquid
@@ -38,13 +38,13 @@
                 <div class="grid--full display-table">
                   <div class="grid__item display-table-cell one-half">
                     <div class="ajaxcart__qty">
-                      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}" data-line="{{line}}">
+                      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}" data-line="{{line}}">
                         <span class="icon icon-minus" aria-hidden="true"></span>
                         <span class="fallback-text" aria-hidden="true">&minus;</span>
                         <span class="visually-hidden">{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}</span>
                       </button>
-                      <input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">
-                      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{id}}" data-line="{{line}}" data-qty="{{itemAdd}}">
+                      <input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{key}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">
+                      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{key}}" data-line="{{line}}" data-qty="{{itemAdd}}">
                         <span class="icon icon-plus" aria-hidden="true"></span>
                         <span class="fallback-text" aria-hidden="true">+</span>
                         <span class="visually-hidden">{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}</span>
@@ -110,13 +110,13 @@
   <script id="AjaxQty" type="text/template">
   {% raw %}
     <div class="ajaxcart__qty">
-      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}">
+      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}">
         <span class="icon icon-minus" aria-hidden="true"></span>
         <span class="fallback-text" aria-hidden="true">&minus;</span>
         <span class="visually-hidden">{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}</span>
       </button>
-      <input type="text" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*">
-      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{id}}" data-qty="{{itemAdd}}">
+      <input type="text" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{key}}" aria-label="quantity" pattern="[0-9]*">
+      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{key}}" data-qty="{{itemAdd}}">
         <span class="icon icon-plus" aria-hidden="true"></span>
         <span class="fallback-text" aria-hidden="true">+</span>
         <span class="visually-hidden">{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}</span>
@@ -127,13 +127,13 @@
   <script id="JsQty" type="text/template">
   {% raw %}
     <div class="js-qty">
-      <button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}">
+      <button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}">
         <span class="icon icon-minus" aria-hidden="true"></span>
         <span class="fallback-text" aria-hidden="true">&minus;</span>
         <span class="visually-hidden">{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}</span>
       </button>
-      <input type="text" class="js-qty__num" value="{{itemQty}}" min="1" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*" name="{{inputName}}" id="{{inputId}}">
-      <button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text" data-id="{{id}}" data-qty="{{itemAdd}}">
+      <input type="text" class="js-qty__num" value="{{itemQty}}" min="1" data-id="{{key}}" aria-label="quantity" pattern="[0-9]*" name="{{inputName}}" id="{{inputId}}">
+      <button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text" data-id="{{key}}" data-qty="{{itemAdd}}">
         <span class="icon icon-plus" aria-hidden="true"></span>
         <span class="fallback-text" aria-hidden="true">+</span>
         <span class="visually-hidden">{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}</span>

diff --git a/templates/cart.liquid b/templates/cart.liquid
@@ -79,7 +79,7 @@
               </span>
             </td>
             <td data-label="{{ 'cart.label.quantity' | t }}">
-              <input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0">
+              <input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="0">
             </td>
             <td data-label="{{ 'cart.label.total' | t }}" class="text-right">
               {% if item.original_line_price != item.line_price %}

diff --git a/templates/customers/order.liquid b/templates/customers/order.liquid
@@ -34,7 +34,7 @@
         </thead>
         <tbody>
           {% for line_item in order.line_items %}
-          <tr id="{{ line_item.id }}">
+          <tr id="{{ line_item.key }}">
             <td>
               {{ line_item.title | link_to: line_item.product.url }}
               {% if line_item.fulfillment %}