Color mapping feature added

config/default.json

@@ -181,7 +181,12 @@
           "slug",
           "errors",
           "info",
-          "erinn_recommends",
+          "erin_recommends",
+          "special_from_date",
+          "news_from_date",
+          "custom_design_from",
+          "originalPrice",
+          "originalPriceInclTax",
           "parentSku",
           "options",
           "product_option",
@@ -232,6 +237,9 @@
       "filterFieldMapping": {
         "category.name": "category.name.keyword"
       },
+      "colorMappings": {
+        "Melange graphite": "#eeeeee"
+      },
       "sortByAttributes": {
         "Latest": "updated_at",
         "Price: Low to high":"final_price",

docs/guide/upgrade-notes/README.md

@@ -20,6 +20,8 @@ With 1.7 the number of attribute descriptors that are loaded on the product page
 
 Dynamic Categories prefetching (#2076). Starting with Vue Storefront 1.7 we've added a configuration option `config.entities.category.categoriesDynamicPrefetch` (by default set to `true`). This option switches the way the category tree is being fetched. Previously we were fetching the full categories tree. In some cases it can generate even few MB of payload. Currently with this option in place we're pre-fetching the categories on demand while user is browsing the category tree
 
+**NOTE:** Since we're no longer generating `category.slug` client's side - we need to have `category.url_key` field unique. If Your Magento2 url_keys are unique it will work without any changes. If not - please do use [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) to re-import the categories. There is a new `categories` importer option `--generateUniqueUrlKeys` which is set to true by default.
+
 With the new modules architecture available from 1.6 we've [updated the payment modules guide](https://github.com/DivanteLtd/vue-storefront/pull/2135). If You've used the custom payment (and basically any other) extensions please make sure You've already ported them to [new modules architecture](https://docs.vuestorefront.io/guide/modules/introduction.html).
 
 

src/themes/default/components/core/ColorSelector.vue

@@ -13,11 +13,17 @@
 
 <script>
 import GenericSelector from '@vue-storefront/core/compatibility/components/GenericSelector'
-
+import rootStore from '@vue-storefront/store'
 export default {
   mixins: [GenericSelector],
   methods: {
     colorFrom (label) {
+      if (rootStore.state.config.products.colorMappings) {
+        if (typeof rootStore.state.config.products.colorMappings[label] !== 'undefined') {
+          label = rootStore.state.config.products.colorMappings[label]
+        }
+      }
+      if (label.indexOf('/') >= 0) label = label.replace('/', ',') // to be honest - this is a hack for colors like "ink/white"
       if (label && label.toString().indexOf(',') >= 0) {
         return 'background: linear-gradient(' + label + ')'
       } else {