Vendor on cart page and checkout

Highlighted
New Member
1 0 0

Hi, Could anyone advise how can I add vendor/brand to shopping cart page, at the moment there is only a product title.

0 Likes
Highlighted
Shopify Partner
2294 117 353

Go through the cart.items line_items in the cart to get the line_item.vendor or go through line_item.product to get the product.vendor

https://help.shopify.com/en/themes/liquid/objects/cart

https://help.shopify.com/en/themes/liquid/objects/line_item#line_item-vendor

https://help.shopify.com/en/themes/liquid/objects/line_item#line_item-product

https://help.shopify.com/en/themes/liquid/objects/product#product-vendor

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
New Member
2 0 0

Hi Paul!

I followed your instructions but was only able to get halfway there. Hopefully you can fill in the blanks.

I need to display VENDOR in my CART, so I added:

 

<p>{{ item.vendor }}</p>   

...below QUANTITY. this works as as soon as I load the cart and the Vendor for each line item is shown up.

 

But when I update by PLUS or MINUS any product in the cart, that content dissapears.

 

I realized that when pressing PLUS or MINUS the line items get updated, and I found where I would need to add more code for VENDOR to be included again after update, but adding the same code does not work there.

 

How can I make sure the VENDOR for each line item remains in the page after each update?

 

 

0 Likes
Highlighted
Excursionist
14 1 6

I just added a div with item.product.vendor under the div with item.product.title

 

<div class="list-view-item__title">
  <a href="{{ item.url }}" class="cart__product-title" data-cart-item-title>
    {{ item.product.title }}
  </a>
</div>
<div>{{ item.product.vendor }}</div>

vendor_in_cart.png

2 Likes
Highlighted
Shopify Partner
2294 117 353

@djar 

But when I update by PLUS or MINUS any product in the cart, that content dissapears.

item.vendor

depending on what the logic other parts of the code is doing that makes "item" this may need to be item.product.vendor

 

If this is on template pages other than /cart you will need to find the code used for the ajax cartthis may file names similar to ajax-cart.liquid, sidebar.liquid, or even in a seperate javascript file.

If this on /cart and html is disappearing without a page refresh when you take an action you will need to find that javascript being used to update that page.

Where this is varies wildly among themes, often in theme.js. Occasionally you will also need a data attribue on parts of the cart forms html.

If this happens on /cart with a page refresh something else is going on and someone would have to inspect what your doing for errors.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
New Member
13 0 0

Thank you RumiM

I put 

<div>{{ item.product.vendor }}</div>

in cart-template.liquid. When I look at the cart it's there and seems to be working. However if I adjust the quantity amount the vendor information changes to the wrong information. 

Can you help me solve this? I'm new at Shopify/HTML and I'm not quite sure what I'm doing.

Thank you.

 

0 Likes
Highlighted
Excursionist
14 1 6

Events like adjusting quantity and removing items trigger JavaScript to update the view. Some themes (Debut) have a complex way of rebuilding the same view through JS instead of simply re-applying the existing template to the whole cart. I don't know why they do it this way, maybe for some small runtime efficiency at the expense of code complexity?

I had to alter theme.js in several places to keep the vendor line intact. The code snippets are from Debut's version. Other themes may be different. Some of the lines are there just to help you figure out where in the code to go; don't duplicate those lines. Add in the new lines where they don't exist in the code. The ... represents other code in between that don't matter for this.

 

...
theme.Cart = (function() {
  var selectors = {
    cartItemVendor: '[data-cart-item-vendor]',
    ...
  };
  ...
  var attributes = {
    cartItemVendor: 'data-cart-item-vendor',
    ...
  };
  ...
  Cart.prototype = _.assignIn({}, Cart.prototype, {
    ...
    _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.cartItemVendor, $item)
            .text(item.vendor)
          	.attr('data-cart-item-variant-id', item.variant_id);
          ...
        }.bind(this)
      );
    },
    ...
  });
  ...
})();
...
theme.Product = (function() {
    ...
  Product.prototype = _.assignIn({}, Product.prototype, {
    ...
    _setupCartPopup: function(item) {
      this.$cartPopupVendor =
        this.$cartPopupVendor || $(this.selectors.cartPopupVendor);
      ...
    },
    _updateCartPopupContent: function(item) {
      var quantity = this.$quantityInput.length ? this.$quantityInput.val() : 1;

      this.$cartPopupVendor.text(item.product_vendor);
      ...
    },
    ...
  });
  ...
})();
...

 

I can't remember if a page refresh needs to be triggered for this to work. I don't think it does since the whole reason for doing this in JS is to avoid a page refresh. Anyways, the way Shopify handles this type of behavior and avoids simply applying a template snippet for view management, and had to create their own language when other solutions exist is beyond frustrating. It'll be nice when I finish building my own platform and I can get off this "hands tied and brain fried" mess of a platform.

1 Like