Merge pull request #3692 from ResuBaka/fix/bundle-products-cases

Fixed a three problems that could happen when you have bundle products
vuestorefront · Oct 10, 2019 · b210500 · b210500
2 parents 239fcaa + 95c3bbd
commit b210500
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
  - Fixed deprecated getter in cmsBlock store - @resubaka (#3683)
  - Fixed problem around dynamic urls when default storeView is set with appendStoreCode false and url set to / . @resubaka (#3685)
+ - Fixed three problems you can run into when you have bundle products - @resubaka (#3692)
 
 ## [1.11.0-rc.1] - 2019.10.03
 

diff --git a/core/modules/cart/helpers/productsEquals.ts b/core/modules/cart/helpers/productsEquals.ts
@@ -15,8 +15,13 @@ const getProductType = (product: CartItem): string =>
 const getServerItemId = (product: CartItem): string | number =>
   product.server_item_id || product.item_id
 
-const isServerIdsEquals = (product1: CartItem, product2: CartItem): boolean =>
-  getServerItemId(product1) === getServerItemId(product2)
+const isServerIdsEquals = (product1: CartItem, product2: CartItem): boolean => {
+  const product1ItemId = getServerItemId(product1)
+  const product2ItemId = getServerItemId(product2)
+  const areItemIdsDefined = product1ItemId !== undefined && product2ItemId !== undefined
+
+  return areItemIdsDefined && product1ItemId === product2ItemId
+}
 
 const isChecksumEquals = (product1: CartItem, product2: CartItem): boolean =>
   getChecksum(product1) === getChecksum(product2)

diff --git a/core/modules/catalog/components/ProductBundleOption.ts b/core/modules/catalog/components/ProductBundleOption.ts
@@ -29,7 +29,11 @@ export const ProductBundleOption = {
       return `bundleOptionQty_${this.option.option_id}`
     },
     value () {
-      return this.option.product_links.find(product => product.id === this.productOptionId)
+      const { product_links } = this.option
+      if (Array.isArray(product_links)) {
+        return product_links.find(product => product.id === this.productOptionId)
+      }
+      return product_links
     },
     errorMessage () {
       return this.errorMessages ? this.errorMessages[this.quantityName] : ''
@@ -56,14 +60,19 @@ export const ProductBundleOption = {
   },
   methods: {
     setDefaultValues () {
-      if (this.option.product_links) {
-        const defaultOption = this.option.product_links.find(pl => { return pl.is_default })
-        this.productOptionId = defaultOption ? defaultOption.id : this.option.product_links[0].id
+      const { product_links } = this.option
+
+      if (product_links) {
+        const defaultOption = Array.isArray(product_links)
+          ? product_links.find(pl => pl.is_default)
+          : product_links
+
+        this.productOptionId = defaultOption ? defaultOption.id : product_links[0].id
         this.quantity = defaultOption ? defaultOption.qty : 1
       }
     },
     bundleOptionChanged () {
-      this.$emit('optionChanged', {
+      this.$emit('option-changed', {
         option: this.option,
         fieldName: this.productBundleOption,
         qty: this.quantity,

diff --git a/src/themes/default/components/core/ProductBundleOptions.vue b/src/themes/default/components/core/ProductBundleOptions.vue
@@ -1,7 +1,7 @@
 <template>
   <form class="custom-options">
     <div v-for="option in product.bundle_options" :key="('bundleOption_' + option.option_id)">
-      <product-bundle-option :option="option" @optionChanged="optionChanged" :error-messages="errorMessages" />
+      <product-bundle-option :option="option" @option-changed="optionChanged" :error-messages="errorMessages" />
     </div>
   </form>
 </template>