Liquid, JavaScript, themes, sales channels
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?
seems like you can use the answer here to reload the cart when a quantity changes
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.
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.
@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:
<td class="cart__final-price text-right small--hide">
<dl>
<dd>
{%- assign my_variable = item.grams | times: item.quantity -%}
<span data-cart-lineitem-weight> {{ my_variable | weight_with_unit }}</span>
</dd>
</dl>
</td>
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");
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024