fix(default-theme): color filter type depending on options format (#1038

)

api/helpers.api.md

@@ -22,6 +22,8 @@ import { StoreNavigationElement } from '@shopware-pwa/commons/interfaces/models/
 
 // @alpha (undocumented)
 export interface CategoryFilterEntityValue {
+ // (undocumented)
+ colorHexCode: null | string;
  // (undocumented)
  customFields: any;
  // (undocumented)
@@ -354,6 +356,8 @@ export interface UiProductOption {
  // (undocumented)
  code: string;
  // (undocumented)
+ color: string;
+ // (undocumented)
  label: string;
  // (undocumented)
  value: string;

packages/composables/__tests__/useProductSearch.spec.ts

@@ -132,7 +132,7 @@ describe("Composables - useProductSearch", () => {
  name: "manufacturer",
  options: [
  {
- color: false,
+ color: undefined,
  label: "DivanteLtd",
  value: "123456",
  },

packages/default-theme/components/SwProductColors.vue

@@ -4,7 +4,7 @@
  <SfColor
  v-for="(color, code) in colors"
  :key="code"
- :color="color.value"
+ :color="color.color"
  :aria-label="color.label"
  :selected="value === color.code"
  @click="$emit('input', color.code)"

packages/default-theme/components/SwProductDetails.vue

@@ -21,10 +21,12 @@
  :key="productType"
  >
  <SwProductColors
- v-if="productType === 'color'"
+ v-if="
+ getAllProductOptions[productType].find(({ color }) => !!color)
+ "
  :colors="getAllProductOptions[productType]"
  :value="selected[productType]"
- label="Color:"
+ :label="productType"
  @input="handleChange(productType, $event)"
  />
  <SwProductSelect
@@ -226,7 +228,7 @@ export default {
 
  &__loaded {
  @include for-desktop {
- height: 120px;
+ height: auto;
  }
  }
 }

packages/default-theme/components/SwProductSelect.vue

@@ -13,10 +13,7 @@
  :value="option.code"
  >
  <slot v-bind="option">
- <SfProductOption
- :label="option.label"
- :color="label == 'color' ? option.label : null"
- />
+ <SfProductOption :label="option.label" :color="option.color" />
  </slot>
  </SfSelectOption>
  </SfSelect>

packages/default-theme/components/listing/types/entity.vue

@@ -2,15 +2,15 @@
  <div
  v-if="filter.options && filter.options.length"
  :class="{
- 'filters__filter--color': filter.name && filter.name === 'color',
+ 'filters__filter--color': filter.options.find(({ color }) => !!color),
  }"
  >
  <SfFilter
  v-for="option in filter.options"
  :key="option.value"
  :label="option.label"
  :count="option.count"
- :color="option.color ? option.color : null"
+ :color="option.color"
  :selected="
  selectedValues &&
  !!selectedValues.find((propertyId) => propertyId === option.value)

packages/helpers/__tests__/listing/getListingAvailableFilters.spec.ts

@@ -33,7 +33,7 @@ describe("Shopware helpers - getListingAvailableFilters", () => {
  name: "manufacturer",
  options: [
  {
- color: false,
+ color: undefined,
  label: "Rolfson-Schuppe",
  value: "2cc7db79c4214b448df87fb6642ebc57",
  },
@@ -51,6 +51,7 @@ describe("Shopware helpers - getListingAvailableFilters", () => {
  options: [
  {
  name: "mediumblue",
+ colorHexCode: "#ffc",
  translated: {
  name: "mediumblue",
  },
@@ -68,7 +69,7 @@ describe("Shopware helpers - getListingAvailableFilters", () => {
  name: "color",
  options: [
  {
- color: "mediumblue",
+ color: "#ffc",
  label: "mediumblue",
  value: "e4af09b1c8ac463ca7a61fac99e71226",
  },

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

@@ -39,6 +39,7 @@ describe("Shopware helpers - getCategoryAvailableFilters", () => {
  values: {
  "085059f79c26400990d7b23eba0911fd": {
  name: "lightseagreen",
+ colorHexCode: "#fff",
  },
  },
  },

packages/helpers/src/category/getCategoryAvailableFilters.ts

@@ -22,6 +22,7 @@ export interface CategoryFilterEntityValue {
  name: string;
  description: string | null;
  customFields: any;
+ colorHexCode: null | string;
 }
 
 /**
@@ -59,19 +60,19 @@ const convertTermFilterValues = (values: CategoryFilterTermValue[]) => {
 };
 
 const convertEntityFilterValues = (
- values: CategoryFilterEntityValues,
- isColor: boolean
+ values: CategoryFilterEntityValues
+ //isColor: boolean
 ) => {
  return !values
  ? []
- : Object.entries(values).map(([valueId, { name }]) => {
+ : Object.entries(values).map(([valueId, { name, colorHexCode }]) => {
  let filterValue = {
  value: valueId,
  label: name,
  };
 
- if (isColor) {
- filterValue = Object.assign({}, filterValue, { color: name });
+ if (colorHexCode) {
+ filterValue = Object.assign({}, filterValue, { color: colorHexCode });
  }
 
  return filterValue;
@@ -81,17 +82,15 @@ const convertEntityFilterValues = (
 const convertOptionsByType = ({
  type,
  values,
- isColor,
 }: {
  type: string;
  values: any;
- isColor: boolean;
 }) => {
  switch (type) {
  case UiCategoryFilterType.term:
  return convertTermFilterValues(values);
  case UiCategoryFilterType.entity:
- return convertEntityFilterValues(values, isColor);
+ return convertEntityFilterValues(values);
  default:
  return values;
  }
@@ -106,17 +105,17 @@ export function getCategoryAvailableFilters({
  if (!filters) {
  return [];
  }
-
  const filtersTransformed = Object.entries(filters).map(
- ([filterCode, { name, values, type }]) => ({
- name: name || filterCode,
- type: type,
- options: convertOptionsByType({
- type,
- values,
- isColor: filterCode === "color",
- }),
- })
+ ([filterCode, { name, values, type }]) => {
+ return {
+ name: name || filterCode,
+ type: type,
+ options: convertOptionsByType({
+ type,
+ values,
+ }),
+ };
+ }
  );
 
  return filtersTransformed;

packages/helpers/src/listing/getListingAvailableFilters.ts

@@ -19,7 +19,7 @@ const extractEntityTypeFilter = (
  label: filterData.translated.name,
  value: filterData.id,
  // false when there's no color property is fine, UI accepts it
- color: name === "color" && filterData.name,
+ color: filterData.colorHexCode,
  })),
 });
 

packages/helpers/src/product/getProductOptions.ts

@@ -37,6 +37,7 @@ export function getProductOptions({
  label: option.name,
  code: option.id,
  value: option.name,
+ color: option.colorHexCode,
  } as UiProductOption);
  }
  }

packages/helpers/src/ui-interfaces.ts

@@ -22,6 +22,7 @@ export interface UiProductOption {
  value: string;
  code: string;
  attribute: string;
+ color: string;
  [attribute: string]: string;
 }