Resolve swatches anywhere (#68)

rapidez · Sep 21, 2021 · c42bb54 · c42bb54
1 parent 8b02ab8
commit c42bb54
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 79 deletions.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -39,7 +39,6 @@ files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(
 Vue.component('cart', require('./components/Cart/Cart.vue').default)
 Vue.component('listing', require('./components/Listing/Listing.vue').default)
 Vue.component('query-filter', require('./components/Listing/Filters/QueryFilter.vue').default)
-Vue.component('swatch-filter', require('./components/Listing/Filters/SwatchFilter.vue').default)
 Vue.component('checkout', require('./components/Checkout/Checkout.vue').default)
 Vue.component('login', require('./components/Checkout/Login.vue').default)
 Vue.component('coupon', require('./components/Coupon/Coupon.vue').default)
@@ -114,6 +113,22 @@ document.addEventListener('turbolinks:load', () => {
             search(value) {
                 Turbolinks.visit('/search?q=' + value)
             }
+        },
+        asyncComputed: {
+            swatches () {
+                if (localStorage.swatches) {
+                    return JSON.parse(localStorage.swatches);
+                }
+
+                return axios.get('/api/swatches')
+                    .then((response) => {
+                        localStorage.swatches = JSON.stringify(response.data)
+                        return response.data
+                    })
+                    .catch((error) => {
+                        Notify(window.config.errors.wrong, 'error')
+                    })
+            }
         }
     })
 })
diff --git a/resources/js/components/Listing/Filters/SwatchFilter.vue b/resources/js/components/Listing/Filters/SwatchFilter.vue
diff --git a/resources/js/components/Product/AddToCart.vue b/resources/js/components/Product/AddToCart.vue
@@ -77,8 +77,8 @@
                 }
 
                 // Get value label using the swatches.
-                if (this.getSwatches().hasOwnProperty(code)) {
-                    let swatchOptions = this.getSwatches()[code].options
+                if (this.$root.swatches.hasOwnProperty(code)) {
+                    let swatchOptions = this.$root.swatches[code].options
                     let values = {}
 
                     Object.entries(this.product[code]).forEach(([key, val]) => {
@@ -92,14 +92,6 @@
 
                 return _.invert(this.product[code])
             },
-
-            getSwatches: function() {
-                if (localStorage.swatches) {
-                    return JSON.parse(localStorage.swatches)
-                }
-
-                return {}
-            }
         },
 
         computed: {

diff --git a/resources/views/listing/partials/filter/swatch.blade.php b/resources/views/listing/partials/filter/swatch.blade.php
@@ -1,38 +1,37 @@
-<swatch-filter v-else-if="filter.text_swatch || filter.visual_swatch" v-slot="slotProps">
-    <multi-list
-        :component-id="filter.code"
-        :data-field="filter.code"
-        :inner-class="{
-            title: 'capitalize font-semibold',
-            list: '!max-h-full flex flex-wrap',
-        }"
-        :title="filter.name.replace('_', ' ')"
-        :react="{and: filter.input == 'multiselect' ? reactiveFilters : reactiveFilters.filter(item => item != filter.code) }"
-        :query-format="filter.input == 'multiselect' ? 'and' : 'or'"
-        :show-search="false"
-        :show-checkbox="false"
-        u-r-l-params
+<multi-list
+    v-else-if="filter.text_swatch || filter.visual_swatch"
+    :component-id="filter.code"
+    :data-field="filter.code"
+    :inner-class="{
+        title: 'capitalize font-semibold',
+        list: '!max-h-full flex flex-wrap',
+    }"
+    :title="filter.name.replace('_', ' ')"
+    :react="{and: filter.input == 'multiselect' ? reactiveFilters : reactiveFilters.filter(item => item != filter.code) }"
+    :query-format="filter.input == 'multiselect' ? 'and' : 'or'"
+    :show-search="false"
+    :show-checkbox="false"
+    u-r-l-params
+>
+    <div
+        v-if="filter.visual_swatch"
+        slot="renderItem"
+        slot-scope="{ label, isChecked }"
+        class="w-6 h-6 border-black mr-1 mb-1 rounded-full hover:opacity-75"
+        :class="isChecked ? 'border-2' : 'border'"
+        :style="{ background: $root.swatches[filter.code].options[label].swatch }"
     >
-        <div
-            v-if="filter.visual_swatch"
-            slot="renderItem"
-            slot-scope="{ label, isChecked }"
-            class="w-6 h-6 border-black mr-1 mb-1 rounded-full hover:opacity-75"
-            :class="isChecked ? 'border-2' : 'border'"
-            :style="{ background: slotProps.swatches[filter.code].options[label].swatch }"
-        >
-            <x-heroicon-o-check v-if="isChecked"/>
-        </div>
+        <x-heroicon-o-check v-if="isChecked"/>
+    </div>
 
-        <div
-            v-else
-            slot="renderItem"
-            slot-scope="{ label, isChecked }"
-            class="border-black mr-1 mb-1 px-3 hover:opacity-75"
-            :class="isChecked ? 'border-2' : 'border'"
-            :style="{ background: slotProps.swatches[filter.code].options[label].swatch }"
-        >
-            @{{ slotProps.swatches[filter.code].options[label].swatch }}
-        </div>
-    </multi-list>
-</swatch-filter>
+    <div
+        v-else
+        slot="renderItem"
+        slot-scope="{ label, isChecked }"
+        class="border-black mr-1 mb-1 px-3 hover:opacity-75"
+        :class="isChecked ? 'border-2' : 'border'"
+        :style="{ background: $root.swatches[filter.code].options[label].swatch }"
+    >
+        @{{ $root.swatches[filter.code].options[label].swatch }}
+    </div>
+</multi-list>