How to add a weight column to the cart page to display total weight per line item

Technical Q&A
1

Hello All,

I’d like to add a weight column to my cart page, such that it displays the total weight of each added item (i.e. item.quantity * item.grams).

So far, i’ve achieved this using the code below (which works fine too, when the page loads)

<dd> {%- assign my_variable = item.grams | times: item.quantity -%} {{ my_variable | weight_with_unit }} </dd>

However, I need the weight to change when the item quantity changes as well. I know i’ll need to tweak theme.js for this, I’ve tried what I could, but I am getting lost amongst the countless Jquery selectors in there. Has anyone managed to do this, and doesn’t mind sharing how they have achieved it please?

2

seems like you can use the answer here to reload the cart when a quantity changes

https://community.shopify.com/c/Technical-Q-A/Reload-Cart-Page-When-Product-Quantity-is-Changed/td-p/849640

3

Thanks for the help @ChuckWatson . But this solution will reload my cart, which can be slightly annoying to our users.

What I had in mind was to tweak the script that changes the price per-line-item on quantity change to also change the weight per line item.

4

Ok that makes sense, don’t want to disrupt the ux. Editing javascript is easy but you didn’t post the javascript code so I just went with what I saw as a one shot solution.

5

@ChuckWatson ..my bad for not posting the javascript.

So here goes…

The _createLineItemList function creates each line item in the cart when the cart is created; and the cart is created whenever the cart page is loaded and whenever the cart is updated. So I reckon this is best place to tweak code.

_createLineItemList: function(state) {
      return $.map(
        state.items,
        function(item, index) {
          var $item = this.$itemTemplate.clone();
          var $itemPriceList = this.$itemPriceListTemplate.clone();

          this._setLineItemAttributes($item, item, index);
          this._setLineItemImage($item, item.featured_image);

          $(selectors.cartItemTitle, $item)
            .text(item.product_title)
            .attr('href', item.url);

          var productDetailsList = this._createProductDetailsList(
            item.product_has_only_default_variant,
            item.options_with_values,
            item.properties
          );
          this._setProductDetailsList($item, productDetailsList);

          this._setItemRemove($item, item.title);

          $itemPriceList.html(
            this._createItemPrice(
              item.original_price,
              item.final_price,
              this.$itemPriceListTemplate
            )
          );

          if (item.unit_price_measurement) {
            $itemPriceList.append(
              this._createUnitPrice(
                item.unit_price,
                item.unit_price_measurement,
                this.$itemPriceListTemplate
              )
            );
          }

          this._setItemPrice($item, $itemPriceList);

          var itemDiscountList = this._createItemDiscountList(item);
          this._setItemDiscountList($item, itemDiscountList);

          this._setQuantityInputs($item, item, index);

          //Added to manipulate weight
          $("[data-cart-lineitem-weight]",$item).text( item.quantity *  item.grams);

          var itemLinePrice = this._createItemPrice(
            item.original_line_price,
            item.final_line_price,
            this.$itemLinePriceTemplate
          );
          this._setItemLinePrice($item, itemLinePrice);

          return $item[0];
        }.bind(this)
      );
    },

I was playing around and thought may be this would work, although not sure if this is right way to update html content and honestly I am just shooting in the dark.

$(“[data-cart-lineitem-weight]”,$item).text( item.quantity * item.grams);

My corresponding HTML looks like this:


                <dl>
                  <dd>
                    {%- assign my_variable = item.grams | times: item.quantity -%}
                     {{ my_variable | weight_with_unit }}
                  </dd>
                </dl>
6

So for anyone who may be interested, I fixed this by adding this line of code to my _createLineItemList function.

$(selectors.cartLineItemWeight,$item).html(((item.quantity * item.grams)/1000).toFixed(1) + " kg");

1 Like