introducing custom attributes for cart and line items

Author: mahlingam

src/components/cart.js

@@ -420,14 +420,14 @@ export default class Cart extends Component {
    * @param {Object} variant - variant object.
    * @param {Number} [quantity=1] - quantity to be added.
    */
-  addVariantToCart(variant, quantity = 1, openCart = true) {
+  addVariantToCart(variant, quantity = 1, customAttributes = [], openCart = true) {
     if (quantity <= 0) {
       return null;
     }
     if (openCart) {
       this.open();
     }
-    const lineItem = {variantId: variant.id, quantity};
+    const lineItem = {variantId: variant.id, quantity, customAttributes};
     if (this.model) {
       return this.props.client.checkout.addLineItems(this.model.id, [lineItem]).then((checkout) => {
         this.model = checkout;
@@ -444,6 +444,7 @@ export default class Cart extends Component {
         lineItems: [
           lineItem,
         ],
+        customAttributes: this.options.customAttributes || [],
       };
       return this.props.client.checkout.create(input).then((checkout) => {
         localStorage.setItem(this.localStorageCheckoutKey, checkout.id);

src/components/product.js

@@ -85,6 +85,7 @@ export default class Product extends Component {
     this.modalProduct = Boolean(config.modalProduct);
     this.updater = new ProductUpdater(this);
     this.view = new ProductView(this);
+    this.customAttributes = config.customAttributes || [];
   }
 
   /**
@@ -248,6 +249,7 @@ export default class Product extends Component {
       buttonDisabled: !this.buttonEnabled,
       selectedVariant: this.selectedVariant,
       selectedQuantity: this.selectedQuantity,
+      customAttributes: this.customAttributes,
       buttonText: this.buttonText,
       imgStyle: this.imgStyle,
       quantityClass: this.quantityClass,
@@ -651,7 +653,7 @@ export default class Product extends Component {
     } else if (this.options.buttonDestination === 'cart') {
       this.props.closeModal();
       this._userEvent('addVariantToCart');
-      this.props.tracker.trackMethod(this.cart.addVariantToCart.bind(this), 'Update Cart', this.selectedVariantTrackingInfo)(this.selectedVariant, this.selectedQuantity);
+      this.props.tracker.trackMethod(this.cart.addVariantToCart.bind(this), 'Update Cart', this.selectedVariantTrackingInfo)(this.selectedVariant, this.selectedQuantity, this.customAttributes);
       if (!this.modalProduct) {
         this.props.setActiveEl(target);
       }
@@ -677,6 +679,7 @@ export default class Product extends Component {
           {
             variantId: this.selectedVariant.id,
             quantity: this.selectedQuantity,
+            customAttributes: this.customAttributes,
           },
         ],
       };

test/unit/cart/cart.js

@@ -694,10 +694,11 @@ describe('Cart class', () => {
     const modelId = 135;
     const variantId = 1111;
     const quantity = 2;
+    const customAttributes = [];
     const variant = {
       id: variantId,
     };
-    const lineItem = {variantId, quantity};
+    const lineItem = {variantId, quantity, customAttributes};
     let cartOpenStub;
     let setFocusStub;
     let addLineItemsStub;
@@ -741,13 +742,13 @@ describe('Cart class', () => {
     });
 
     it('calls open on cart if openCart parameter is true', () => {
-      return cart.addVariantToCart(variant, quantity, true).then(() => {
+      return cart.addVariantToCart(variant, quantity, [], true).then(() => {
         assert.calledOnce(cartOpenStub);
       });
     });
 
     it('does not call open on cart if openCart parameter is false', () => {
-      return cart.addVariantToCart(variant, quantity, false).then(() => {
+      return cart.addVariantToCart(variant, quantity, [], false).then(() => {
         assert.notCalled(cartOpenStub);
       });
     });
@@ -758,7 +759,7 @@ describe('Cart class', () => {
       };
 
       return cart.addVariantToCart(variant).then(() => {
-        assert.calledWith(addLineItemsStub, modelId, [{variantId, quantity: 1}]);
+        assert.calledWith(addLineItemsStub, modelId, [{variantId, quantity: 1, customAttributes: []}]);
       });
     });
 
@@ -779,13 +780,13 @@ describe('Cart class', () => {
       });
 
       it('does not call setFocus if the openCart parameter is true', () => {
-        return cart.addVariantToCart(variant, quantity, true).then(() => {
+        return cart.addVariantToCart(variant, quantity, [], true).then(() => {
           assert.notCalled(setFocusStub);
         });
       });
 
       it('calls setFocus if the openCart parameter is false', () => {
-        return cart.addVariantToCart(variant, quantity, false).then(() => {
+        return cart.addVariantToCart(variant, quantity, [], false).then(() => {
           assert.calledOnce(setFocusStub);
         });
       });
@@ -805,19 +806,19 @@ describe('Cart class', () => {
       it('creates a checkout with line item and returns the updated checkout if cart model is null', () => {
         return cart.addVariantToCart(variant, quantity).then((checkout) => {
           assert.calledOnce(checkoutCreateStub);
-          assert.calledWith(checkoutCreateStub, {lineItems: [lineItem]});
+          assert.calledWith(checkoutCreateStub, {lineItems: [lineItem], customAttributes: []});
           assert.deepEqual(checkout, mockCheckout);
         });
       });
 
       it('does not call setFocus if the openCart parameter is true', () => {
-        return cart.addVariantToCart(variant, quantity, true).then(() => {
+        return cart.addVariantToCart(variant, quantity, [], true).then(() => {
           assert.notCalled(setFocusStub);
         });
       });
 
       it('calls setFocus if openCart parameter is false', () => {
-        return cart.addVariantToCart(variant, quantity, false).then(() => {
+        return cart.addVariantToCart(variant, quantity, [], false).then(() => {
           assert.calledOnce(setFocusStub);
         });
       });

test/unit/product/product-component.js

@@ -676,6 +676,7 @@ describe('Product Component class', () => {
           assert.calledWith(createCheckoutStub, {lineItems: [{
             variantId: 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8xMjM0NQ==',
             quantity: selectedQuantity,
+            customAttributes: [],
           }]});
         });
       });