feat(product): handle variants change.

packages/composables/src/hooks/useCms/index.ts

@@ -13,7 +13,20 @@ export const useCms = (): any => {
  const search = async (path: string) => {
  loading.value = true;
  try {
- const result = await getPage(path);
+ const result = await getPage(path, {
+ configuration: {
+ associations: [
+ {
+ name: "options",
+ associations: [
+ {
+ name: "group"
+ }
+ ]
+ }
+ ]
+ }
+ });
  vuexStore.commit("SET_PAGE", result);
  } catch (e) {
  error.value = e;

packages/composables/src/hooks/useProduct/index.ts

@@ -26,11 +26,29 @@ export const useProduct = (
  throw NO_PRODUCT_REFERENCE_ERROR;
  }
 
- const result = await getProduct(
+ const {
+ name,
+ description,
+ options,
+ media,
+ cover,
+ properties,
+ productReviews,
+ children
+ } = await getProduct(
  product.value.parentId || product.value.id,
  associations
  );
- product.value = result;
+ product.value = Object.assign({}, product.value, {
+ name,
+ description,
+ options,
+ media,
+ cover,
+ properties,
+ productReviews,
+ children
+ });
  };
 
  const search = async (path: string) => {

packages/default-theme/components/views/ProductView.vue

@@ -35,7 +35,7 @@
  <div class="product-details__action">
  <button class="sf-action" v-if="sizes.length > 0">Size guide</button>
  </div>
- <div class="product-details__section" v-if="isSimple">
+ <div class="product-details__section" v-if="!hasChildren">
  <SfProperty v-if="color"
  name="Color"
  :value="color.name"/>
@@ -52,8 +52,8 @@
  >
  <SfSelectOption
  v-for="size in sizes"
- :key="size.value"
- :value="size.value"
+ :key="size.code"
+ :value="size.code"
  >
  <SfProductOption :label="size.label" />
  </SfSelectOption>
@@ -66,10 +66,10 @@
  >
  <SfSelectOption
  v-for="color in colors"
- :key="color.value"
- :value="color.value"
+ :key="color.code"
+ :value="color.code"
  >
- <SfProductOption :label="color.label" :color="color.color" />
+ <SfProductOption :label="color.label" :color="color.label" />
  </SfSelectOption>
  </SfSelect>
  </div>
@@ -172,7 +172,9 @@ import {
  getProductReviews,
  getProductRegularPrice,
  isProductSimple, 
- getProductSpecialPrice} from "@shopware-pwa/helpers";
+ getProductSpecialPrice,
+ getProductOptionsUrl
+ } from "@shopware-pwa/helpers";
 import SwProductGallery from '../cms/elements/SwProductGallery'
 
 export default {
@@ -209,12 +211,12 @@ export default {
  return {
  productWithAssociations: null,
  relatedProducts: [],
- selectedSize: null,
- selectedColor: null
+ selectedColor: null,
+ selectedSize: null
  };
  },
- setup ({page}) {
- const {addToCart, quantity, getStock} = useAddToCart(page && page.product)
+ setup ({ page }) {
+ const { addToCart, quantity, getStock } = useAddToCart(page && page.product)
 
  return {
  quantity,
@@ -226,20 +228,25 @@ export default {
  // TODO remove when page resolver is fully done
  const associations = {
  "associations[media][]": true,
- "associations[options][associations][group][]": true,
+ //"associations[options][associations][group][]": true,
  "associations[properties][associations][group][]": true,
  "associations[productReviews][]": true, // can be fetched asynchronously
  "associations[manufacturer][]": true,
  "associations[children][associations][options][associations][group][]": true,
+ "associations[children][associations][seoUrls][]": true,
  }
 
  const { loadAssociations, product } = useProduct(this.page.product);
  this.productWithAssociations = product
- loadAssociations(associations)
+ await loadAssociations(associations)
+ const color = this.colors.find(color => this.product.optionIds.includes(color.code))
+ const size = this.sizes.find(size => this.product.optionIds.includes(size.code))
+ this.selectedColor = color && color.code
+ this.selectedSize = size && size.code
  },
  computed: {
  product() {
- return this.productWithAssociations && this.productWithAssociations.value || this.page.product
+ return this.productWithAssociations ? this.productWithAssociations.value : this.page.product
  },
  price() {
  return getProductRegularPrice({product: this.product})
@@ -258,14 +265,17 @@ export default {
  return this.product && this.product.ratingAverage
  },
  hasChildren() {
- return this.product && this.product.childCount > 0
+ return this.product && this.product.children && this.product.children.length
  },
  isSimple() {
  return isProductSimple({product: this.product})
  },
  properties() {
  return getProductProperties({product: this.product})
  },
+ selectedOptions() {
+ return [this.selectedColor, this.selectedSize]
+ },
  color() {
  if (!this.isSimple) {
  return ""
@@ -310,7 +320,14 @@ export default {
  toggleWishlist(index) {
  this.products[index].isOnWishlist = !this.products[index].isOnWishlist;
  }
+ },
+ watch: {
+ selectedOptions(selected) {
+ const url = getProductOptionsUrl({product: this.product, options: selected})
+ this.$router.push(url);
+ }
  }
+
 }
 </script>
 <style lang="scss" scoped>

packages/helpers/__tests__/product/getProductOption.spec.ts

@@ -21,15 +21,12 @@ describe("Shopware helpers - getProductOption", () => {
  ]
  };
 
- const productOption = getProductOption({
+ const productOption: any = getProductOption({
  product: productWithOptions,
  attribute: "color"
  });
  expect(productOption).toBeTruthy();
- expect(productOption).toHaveProperty("id");
- if (productOption && productOption.id) {
- expect(productOption.id).toEqual("04095b39ef07472ebd7547800c40bfd4");
- }
+ expect(productOption.id).toEqual("04095b39ef07472ebd7547800c40bfd4");
  });
 
  it("should returns null on no options available", () => {

packages/helpers/__tests__/product/getProductOptions.spec.ts

@@ -39,9 +39,9 @@ describe("Shopware helpers - getProductOptions", () => {
  attribute: "color"
  });
  expect(productOptions).toHaveLength(1);
- expect(productOptions[0]).toHaveProperty("color");
  expect(productOptions[0]).toHaveProperty("label");
  expect(productOptions[0]).toHaveProperty("value");
+ expect(productOptions[0]).toHaveProperty("code");
  });
 
  it("should returns return an empty array if no children", () => {

packages/helpers/__tests__/product/getProductOptionsUrl.spec.ts

@@ -0,0 +1,67 @@
+import { getProductOptionsUrl } from "@shopware-pwa/helpers";
+
+describe("Shopware helpers - getProductOptionsUrl", () => {
+ it("should return an empty string when no product", () => {
+ const result = getProductOptionsUrl();
+ expect(result).toEqual("");
+ });
+
+ it("should return product url when no options", () => {
+ const result = getProductOptionsUrl({
+ product: {
+ id: "123321"
+ }
+ } as any);
+ expect(result).toEqual("/detail/123321");
+ });
+
+ it("should return product url when has no children", () => {
+ const result = getProductOptionsUrl({
+ product: {
+ id: "123321"
+ },
+ options: ["qwe", "ewq"]
+ } as any);
+ expect(result).toEqual("/detail/123321");
+ });
+
+ it("should return product url when options don`t match", () => {
+ const result = getProductOptionsUrl({
+ product: {
+ id: "123321",
+ children: [
+ {
+ id: "qqq",
+ optionIds: ["foo", "bar"]
+ },
+ {
+ id: "eee",
+ optionIds: ["qwe", "ewq"]
+ }
+ ]
+ },
+ options: ["some", "other"]
+ } as any);
+ expect(result).toEqual("/detail/123321");
+ });
+
+ it("should return variant url when options match", () => {
+ const result = getProductOptionsUrl({
+ product: {
+ id: "123321",
+ children: [
+ {
+ id: "qqq",
+ optionIds: ["foo", "bar"]
+ },
+ {
+ id: "eee",
+ optionIds: ["qwe", "ewq"]
+ }
+ ]
+ },
+ options: ["qwe", "ewq"]
+ } as any);
+ expect(result).toEqual("/detail/eee");
+ });
+});

packages/helpers/src/product/getProductOptions.ts

@@ -4,8 +4,11 @@ import { UiProductOption } from "@shopware-pwa/helpers";
 export function getProductOptions({
  product,
  attribute
-}: { product?: Product; attribute?: string } = {}): UiProductOption[] {
- if (!product || !product.children || !attribute) {
+}: {
+ product?: Product;
+ attribute?: string;
+} = {}): UiProductOption[] {
+ if (!product || !product.children) {
  return [];
  }
 
@@ -14,14 +17,15 @@ export function getProductOptions({
  if (!variant || !variant.options || !variant.options.length) {
  return;
  }
+
  for (let option of variant.options) {
- if (option.group && option.group.name === attribute) {
+ if ((option.group && option.group.name === attribute) || !attribute) {
  if (!typeOptions.has(option.id)) {
  typeOptions.set(option.id, {
  label: option.name,
- value: variant.id,
- [attribute]: option.name
- });
+ code: option.id,
+ value: option.name
+ } as UiProductOption);
  }
  }
  }

packages/helpers/src/product/getProductOptionsUrl.ts

@@ -0,0 +1,24 @@
+import { Product } from "@shopware-pwa/shopware-6-client";
+import { getProductUrl } from "./getProductUrl";
+
+export function getProductOptionsUrl({
+ product,
+ options
+}: {
+ product?: Product;
+ options?: string[];
+} = {}): string {
+ if (!product) return "";
+ const variant =
+ options &&
+ product.children &&
+ product.children
+ .filter(
+ variant =>
+ variant.optionIds &&
+ variant.optionIds.every(optionId => options.includes(optionId))
+ )
+ .shift();
+ const result = variant || product;
+ return getProductUrl(result);
+}

packages/helpers/src/product/getProductUrl.ts

@@ -1,5 +1,12 @@
 import { Product } from "@shopware-pwa/shopware-6-client";
 
-export function getProductUrl(product: Product): string {
- return product ? `/detail/${product.id}` : `/`;
+export function getProductUrl(product: Product | null): string {
+ if (!product) return "/";
+ // TODO change after fixing URL resolver
+ // const seoUrl =
+ // product.seoUrls &&
+ // product.seoUrls.length &&
+ // product.seoUrls[0].seoPathInfo;
+ // return seoUrl ? `/${seoUrl}` : `/detail/${product.id}`;
+ return `/detail/${product.id}`;
 }

packages/helpers/src/product/index.ts

@@ -7,4 +7,5 @@ export * from "./getProductOption";
 export * from "./getProductRegularPrice";
 export * from "./getProductSpecialPrice";
 export * from "./isProductSimple";
+export * from "./getProductOptionsUrl";
 export * from "./getProductUrl";

packages/helpers/src/ui-interfaces.ts

@@ -10,6 +10,7 @@ export interface UiMediaGalleryItem {
 export interface UiProductOption {
  label: string;
  value: string;
+ code: string;
  [attribute: string]: string;
 }