FROM CACHE - en_header

Showing Total Order Weight on Cart Page

Mattdeevans
New Member
2 0 0

Hi guys

 

I am building a store on shopify and our shipping rates will be determined by the total weight of the order. I need to show the weight on the cart page so that customers know how much weight they have left before they reach the next shipping bracket. I am using the theme Brooklyn as this has a sliding cart as I don't want customers to leave the product page to check on their order weight. I am happy to change theme if there is a more suitable one that will allow the weight to be showed.

 

I am a complete novice when it comes to coding and have tried pasting a few lines of code in cart.liquid but with to no avail. If someone can tell me the line of code and exactly where to place it then I will have the final piece I need to launch.

 

Thanks in advance to anyone that can help!!

Replies 11 (11)
korokoro
Shopify Partner
23 2 7

Hi @Mattdeevans ,

 

Wow, I do like the way that sliding / drawer cart works (in Brooklyn), I have not checked it out before!

 

I do appreciate that people like to know exactly what's going on during the shopping experience and letting them know how the shipping price is shaping up is a great encouragement to build their cart.

 

I took a look inside the Brooklyn theme ("Edit Code" for geeks) and I managed to find how to adjust withing the javascript what appears inside the sliding cart - so there is hope for you! You just need to feel confident that you can apply a bit of javascript modification 🙂

 

I was 50% through the way to finding a solution and then Shopify my development store actually went down for which is *very suprising* !!!

 

Anyway, if you are still interested I will try again tomorrow?

PSD_Webdesigns
Shopify Partner
80 6 18

Hello @Mattdeevans 

 

You can use {{cart.total_weight}} object in "cart-template.liquid" to show the total weight. 

 

If you don't know about coding then please mail me at "support@psdwebdesigs.com" and i will fix that for you.

Regards,
PSD Webdesigns
support@psdwebdesigns.com
korokoro
Shopify Partner
23 2 7

Hi @Mattdeevans  ,

 

I have solved it in my test store! Here's what should get you going (you need to edit 2 template files).

 

NB: !! You should probably make a copy/backup of your current theme before you proceed in case something goes wrong - Admin -> Sales Channel -> Online Store -> Themes -> Current Theme -> Actions -> Duplicate

 

Go into Admin -> Sales Channel -> Online Store -> Themes -> Current Theme -> Actions -> Edit Code. This will bring up a list of folders/files that you can modify.

 

Scroll down to Assets folder and click on it to open. Then click on theme.js.liquid - this should open up a window of code (in the "javascript/liquid" language). Press Control+F, or Command+F on a Mac (to activate the Find feature) and type cartItem.vendor and hit enter. Hopefully it will find this (line 974 in my version);

 

        vendor: cartItem.vendor
      };

      items.push(item);
    });

You need to add 1 new line like this;

 

        vendor: cartItem.vendor
        ,weight: cartItem.grams/1000 // 2019-03-16 Add item weight in kgs to array
      };

      items.push(item);
    });

Now go down a few lines and change this;

 

      totalCartDiscount:
        cart.total_discount === 0
          ? 0
          : theme.strings.cartSavings.replace(
              '[savings]',
              theme.Currency.formatMoney(
                cart.total_discount,
                settings.moneyFormat
              )
            )
    };

To this (2 new lines);

 

      totalCartDiscount:
        cart.total_discount === 0
          ? 0
          : theme.strings.cartSavings.replace(
              '[savings]',
              theme.Currency.formatMoney(
                cart.total_discount,
                settings.moneyFormat
              )
            )
        // 2019-03-16 Save total weight in kgs
        ,totalCartWeight: cart.total_weight/1000
    };

Now click Save.

 

Scroll up to the Snippets folder and click on it to open. Then click on ajax-cart-template.liquid - this should open up a window of code (in the "liquid" language). Press Control+F, or Command+F on a Mac (to activate the Find feature) and type ajax-cart-template.liquid and hit enter. Hopefully it will find this (line 22 in my version);

 

              <div class="grid__item three-quarters">
                <div class="ajaxcart__product-name--wrapper">
                  <a href="{{url}}" class="ajaxcart__product-name">{{{name}}}</a>
                  {{#if variation}}
                    <span class="ajaxcart__product-meta">{{variation}}</span>
                  {{/if}}

Change to be like this;

 

              <div class="grid__item three-quarters">
                <div class="ajaxcart__product-name--wrapper">
                  <a href="{{url}}" class="ajaxcart__product-name">{{{name}}} ({{weight}}&nbsp;kg)</a>
                  {{#if variation}}
                    <span class="ajaxcart__product-meta">{{variation}}</span>
                  {{/if}}

Now Press Control+F, or Command+F on a Mac and type cart.general.taxes_and_shipping_at_checkout and hit enter to find this (line 106 in my version);

 

              {{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
            {%- else -%}
              {{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
            {%- endif -%}
          {%- endcapture -%}

And add these lines;

 

              {{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
            {%- else -%}
              {{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
              {% raw %}
              	{{#if totalCartWeight}}
    	       	  ({{{totalCartWeight}}} kg)
		{{/if}}
              {% endraw %}
            {%- endif -%}
          {%- endcapture -%}

Click Save and check out your store to see if it worked - I hope so!

 

In the sliding / drawer cart you should see the weight of the single product item on each line, and the total weight at the bottom - e.g. "Taxes and shipping calculated at checkout (3.6 kg)". Hit the plus button and see it update the total weight automatically!

 

Let us know how it goes and please like/accept solution if it all looks ok 🙂

 

korokoro
Shopify Partner
23 2 7

Oh - just BTW this only affects the sliding / drawer cart - the normal shopping cart page is not changed yet but I am guessing it would be a very similar update or even easier (no javascript changes required), just an update to templates/cart.liquid.

Mattdeevans
New Member
2 0 0

Thank you so much korokoro for your help I have been without internet for the last week so I have only now had a chance to try the code. 

 

I have followed your steps (very easy to follow btw!) and can see the weight of the product is now shown on the cart page. 

 

The only issue is I need to show the total order weight and not just the weight of individual products. So for example if they add 2 items weighing 250g I need it to display 500g.

 

I don't know if this is a more complicated task but any help is much appreciated. 

 

Thanks Guys!

May
Shopify Staff
Shopify Staff
333 33 166

Hey, @Mattdeevans!

 

May here from Shopify.

 

In order to show the total cart weight, you do need to edit your theme code. I tried following @korokoro's tutorial and I was able to see the product's weight in the cart, but not a total weight. This is a great start because Korokoro figured out how to modify the JavaScript file, now we just need to make a minor change to your ajax-cart-template.liquid file.

 

After you follow Korokoro's tutorial above, you'll want to open up ajax-cart-template.liquid and search for 'cart.general.subtotal'. 

 

Below this line, add

 

<p>Total weight:</p>

Then search for '{{totalPrice}}'

 

Below this line, add

 

<p>{{totalCartWeight}} kg</p>

Click 'Save'.

 

 

After you save this, your cart drawer should look like this

 

For future reference, if you would like to change cart back to what you had before, you can always roll back to an older version of your theme. If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts.

 

Let me know if this helps! 

 

Cheers!

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

antonkogan
Excursionist
28 1 7

can you assist me with having my cart give total weight? 

 

it currently adds weight totals but when modify quantity the code doesnt multiply for accurate total 

 

antonkogan
Excursionist
28 1 7

can you assist me this code i entered only adds weights and does not adjust for quantities:

Capture.JPG

whiplash
Explorer
48 0 14

is this same for the debut theme ?

 

thunderfab
New Member
1 0 0

Hi All, does this "addition" to the code work across all themes or only the ones specified above? 

NathanaelNewton
New Member
4 0 0

Thanks for posting this, super helpful!