Skip to content

Commit

Permalink
Implemented: logic for dynamic support for product features (#166)
Browse files Browse the repository at this point in the history
  • Loading branch information
@amansinghbais
amansinghbais committed Apr 2, 2024
1 parent 6b8cf6c commit 402b1c4
Showing 1 changed file with 158 additions and 54 deletions.
212 changes: 158 additions & 54 deletions src/views/catalog-product-details.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,12 @@
</div>

<div class="product-features">
<ion-list v-if="selectedColor">
<ion-list-header>{{ $t("Colors") }}</ion-list-header>
<ion-list v-for="[feature, featureOptions] in Object.entries(features)" :key="feature">
<ion-list-header>{{ feature }}</ion-list-header>
<ion-item lines="none">
<ion-row>
<ion-chip :outline="selectedColor !== colorFeature" :key="colorFeature" v-for="colorFeature in Object.keys(features)" @click="selectedColor !== colorFeature && applyFeature(colorFeature, 'color')">
<ion-label class="ion-text-wrap">{{ colorFeature }}</ion-label>
</ion-chip>
</ion-row>
</ion-item>
</ion-list>

<ion-list v-if="selectedSize">
<ion-list-header>{{ $t("Sizes") }}</ion-list-header>
<ion-item lines="none">
<ion-row>
<ion-chip :outline="selectedSize !== sizeFeature" :key="sizeFeature" v-for="sizeFeature in features[selectedColor]" @click="selectedSize !== sizeFeature && applyFeature(sizeFeature, 'size')">
<ion-label class="ion-text-wrap">{{ sizeFeature }}</ion-label>
<ion-chip :outline="selectedFeatures[feature] !== option" :key="option" v-for="option in featureOptions" @click="selectedFeatures[feature] !== option && applyFeature(option, feature)">
<ion-label class="ion-text-wrap">{{ option }}</ion-label>
</ion-chip>
</ion-row>
</ion-item>
Expand Down Expand Up @@ -442,8 +431,6 @@ export default defineComponent({
return {
variantId: '',
productId: '',
selectedColor: '',
selectedSize: '',
features: [] as any,
currentVariant: {} as any,
poAndAtpDetails: {} as any,
Expand All @@ -455,7 +442,8 @@ export default defineComponent({
listingJobRunTime: 0,
backorderCategoryId: '',
preOrderCategoryId: '',
isCtgryAndBrkrngJobsLoaded: false
isCtgryAndBrkrngJobsLoaded: false,
selectedFeatures: {} as any
}
},
computed: {
Expand Down Expand Up @@ -491,57 +479,123 @@ export default defineComponent({
async getVariantDetails() {
await this.store.dispatch('product/setCurrentCatalogProduct', { productId: this.productId})
if (this.product.variants) {
this.getVariant()
this.getFeatures()
await this.updateVariant()
}
},
applyFeature(feature: string, type: string) {
if (type === 'color') this.selectedColor = feature
else if (type === 'size') this.selectedSize = feature
applyFeature(option: string, feature: string) {
const selectedFeatures = this.selectedFeatures
selectedFeatures[feature] = option
const variant = this.product.variants.find((variant: any) => {
let isVariantAvailable = true
Object.entries(this.selectedFeatures).map((currentFeature, currentFeatureIndex) => {

Check warning on line 493 in src/views/catalog-product-details.vue

View workflow job for this annotation

GitHub Actions / call-workflow-in-another-repo / reusable_workflow_job (18.x) 

'currentFeatureIndex' is defined but never used

Check warning on line 493 in src/views/catalog-product-details.vue

View workflow job for this annotation

GitHub Actions / call-workflow-in-another-repo / reusable_workflow_job (20.x) 

'currentFeatureIndex' is defined but never used
if(getFeature(variant.featureHierarchy, `1/${currentFeature[0]}`) != currentFeature[1]){
isVariantAvailable = false
}
})
return isVariantAvailable
})
if(!variant) {
const index = Object.keys(selectedFeatures).indexOf(feature)
const availableVariants = this.product.variants.filter((variant: any) => {
let isVariantAvailable = true
Object.entries(selectedFeatures).map((currentFeature, currentFeatureIndex) => {
if(currentFeatureIndex <= index && getFeature(variant.featureHierarchy, `1/${currentFeature[0]}`) != currentFeature[1]){
isVariantAvailable = false
}
})
return isVariantAvailable
})
availableVariants[0].featureHierarchy.map((featureItem: any) => {
if(featureItem.startsWith('1/')){
const featureItemSplitted = featureItem.split("/")
selectedFeatures[featureItemSplitted[1]] = featureItemSplitted[2]
}
})
this.currentVariant = availableVariants[0]
this.selectedFeatures = selectedFeatures
showToast(translate("Selected variant not available. Reseting to first variant."))
}
this.getFeatures()
this.updateVariant();
},
getVariant() {
let selectedVariant = this.product.variants.find((variant: any) => variant.productId === this.variantId)
let selectedFeatures = {} as any;
if(!selectedVariant) {
selectedVariant = this.product.variants[0]
showToast(translate("Selected variant not available. Reseting to first variant."))
this.$route.query.variantId !== selectedVariant.productId && (this.router.replace({path: this.$route.path, query: { variantId: selectedVariant.productId } }));
}
selectedVariant.featureHierarchy.map((featureItem: any) => {
if(featureItem.startsWith('1/')){
const featureItemSplitted = featureItem.split("/")
selectedFeatures[featureItemSplitted[1]] = featureItemSplitted[2]
}
})
selectedFeatures = Object.keys(selectedFeatures).sort().reduce((result:any, key) => {
result[key] = selectedFeatures[key];
return result;
}, {});
this.selectedFeatures = selectedFeatures
this.currentVariant = selectedVariant
},
getFeatures() {
const features = {} as any
const selectedFeatures = this.selectedFeatures
const firstFeature = Object.keys(selectedFeatures)[0]
const features = {} as any;
this.product.variants.map((variant: any) => {
const size = getFeature(variant.featureHierarchy, '1/SIZE/')
const color = getFeature(variant.featureHierarchy, '1/COLOR/')
if (!features[color]) features[color] = [size]
else if (!features[color].includes(size)) features[color].push(size)
const featureOption = getFeature(variant.featureHierarchy, `1/${firstFeature}`)
if(!features[firstFeature]){
features[firstFeature] = [featureOption]
} else{
if(!features[firstFeature].includes(featureOption)) features[firstFeature].push(featureOption)
}
})
Object.keys(features).forEach((color) => this.features[color] = sortSizes(features[color]))
Object.entries(selectedFeatures).map((feature, featureIndex) => {
const nextFeature = Object.entries(selectedFeatures).find((currentFeature, currentFeatureIndex) => currentFeatureIndex === featureIndex + 1)
let selectedVariant = this.product.variants.find((variant: any) => variant.productId === this.variantId)
if(nextFeature) {
const nextFeatureCategory = nextFeature[0]
if (!selectedVariant) {
// if the variant does not have color or size as features
selectedVariant = this.product.variants[0]
showToast(translate("Selected variant not available. Reseting to first variant."))
}
const availableVariants = this.product.variants.filter((variant: any) => {
let isVariantAvailable = true
Object.entries(this.selectedFeatures).map((currentFeature, currentFeatureIndex) => {
if(currentFeatureIndex <= featureIndex && getFeature(variant.featureHierarchy, `1/${currentFeature[0]}`) != currentFeature[1]){
isVariantAvailable = false
}
})
return isVariantAvailable
})
const nextFeatureOptions = [] as any
availableVariants.map((variant: any) => {
if(!nextFeatureOptions.includes(getFeature(variant.featureHierarchy , `1/${nextFeatureCategory}`))){
nextFeatureOptions.push(getFeature(variant.featureHierarchy , `1/${nextFeatureCategory}`))
}
})
if (selectedVariant) {
this.selectedColor = getFeature(selectedVariant.featureHierarchy, '1/COLOR/')
this.selectedSize = getFeature(selectedVariant.featureHierarchy, '1/SIZE/')
}
features[nextFeatureCategory] = nextFeatureCategory === 'SIZE' ? sortSizes(nextFeatureOptions) : nextFeatureOptions
}
})
this.features = features
},
async updateVariant() {
let variant
if (this.selectedColor || this.selectedSize) {
variant = this.product.variants.find((variant: any) => {
const hasSize = !this.selectedSize || (this.selectedSize && getFeature(variant.featureHierarchy, '1/SIZE/') === this.selectedSize)
const hasColor = !this.selectedColor || (this.selectedColor && getFeature(variant.featureHierarchy, '1/COLOR/') === this.selectedColor)
return hasSize && hasColor
})
// if the selected size is not available for that color, default it to the first size available
if (!variant) {
this.selectedSize = this.features[this.selectedColor][0];
variant = this.product.variants.find((variant: any) => getFeature(variant.featureHierarchy, '1/SIZE/') === this.selectedSize)
showToast(translate("Selected variant not available"))
}
}
// if the variant does not have color or size as features
this.currentVariant = variant || this.product.variants[0]
this.variantId = this.currentVariant.variantId
this.$route.query.variantId !== this.currentVariant.productId && (this.router.replace({path: this.$route.path, query: { variantId: this.currentVariant.productId } }));
await this.getPoDetails()
Expand All @@ -550,6 +604,56 @@ export default defineComponent({
await this.prepareShopListings()
await this.preparePoSummary()
},
// getFeatures() {
// const features = {} as any
// this.product.variants.map((variant: any) => {
// const size = getFeature(variant.featureHierarchy, '1/SIZE/')
// const color = getFeature(variant.featureHierarchy, '1/COLOR/')
// if (!features[color]) features[color] = [size]
// else if (!features[color].includes(size)) features[color].push(size)
// })
// Object.keys(features).forEach((color) => this.features[color] = sortSizes(features[color]))
// let selectedVariant = this.product.variants.find((variant: any) => variant.productId === this.variantId)
// if (!selectedVariant) {
// // if the variant does not have color or size as features
// selectedVariant = this.product.variants[0]
// showToast(translate("Selected variant not available. Reseting to first variant."))
// }
// if (selectedVariant) {
// this.selectedColor = getFeature(selectedVariant.featureHierarchy, '1/COLOR/')
// this.selectedSize = getFeature(selectedVariant.featureHierarchy, '1/SIZE/')
// }
// },
// async updateVariant() {
// let variant
// if (this.selectedColor || this.selectedSize) {
// variant = this.product.variants.find((variant: any) => {
// const hasSize = !this.selectedSize || (this.selectedSize && getFeature(variant.featureHierarchy, '1/SIZE/') === this.selectedSize)
// const hasColor = !this.selectedColor || (this.selectedColor && getFeature(variant.featureHierarchy, '1/COLOR/') === this.selectedColor)
// return hasSize && hasColor
// })
// // if the selected size is not available for that color, default it to the first size available
// if (!variant) {
// this.selectedSize = this.features[this.selectedColor][0];
// variant = this.product.variants.find((variant: any) => getFeature(variant.featureHierarchy, '1/SIZE/') === this.selectedSize)
// showToast(translate("Selected variant not available"))
// }
// }
// // if the variant does not have color or size as features
// this.currentVariant = variant || this.product.variants[0]
// this.variantId = this.currentVariant.variantId
// this.$route.query.variantId !== this.currentVariant.productId && (this.router.replace({path: this.$route.path, query: { variantId: this.currentVariant.productId } }));
// await this.getPoDetails()
// await this.getAtpCalcDetails()
// await this.prepareInvConfig()
// await this.prepareShopListings()
// await this.preparePoSummary()
// },
async getCtgryAndBrkrngJobs() {
const systemJobEnumIds = JSON.parse(process.env.VUE_APP_CTGRY_AND_BRKRNG_JOB)
this.store.dispatch('job/fetchCtgryAndBrkrngJobs', { systemJobEnumIds }).then(() => {
Expand Down

0 comments on commit 402b1c4

Please sign in to comment.