From 5956918dadc86ab782e13380f4fb3d5a91c1492d Mon Sep 17 00:00:00 2001
From: A1Gard <a1gard@4xmen.ir>
Date: Thu, 1 Aug 2024 00:58:14 +0330
Subject: [PATCH] complete meta filter

---
 app/Http/Controllers/ClientController.php     |  63 ++++
 resources/js/client-custom/assetsNode.js      |   2 +-
 resources/js/client-vue/MetaFilter.vue        | 267 +++++++++++++++
 .../js/client-vue/SearchableMultiSelect2.vue  | 314 ++++++++++++++++++
 resources/js/client-vue/meta-filter.vue       | 131 --------
 resources/js/components/MetaInput.vue         |   2 +-
 .../SubCategoriesGrid/SubCategoriesGrid.scss  |   1 +
 .../group/SubGroupsGrid/SubGroupsGrid.scss    |   1 +
 .../inc/product-sidebar.blade.php             |   8 +-
 routes/web.php                                |   5 +-
 10 files changed, 659 insertions(+), 135 deletions(-)
 create mode 100644 resources/js/client-vue/MetaFilter.vue
 create mode 100644 resources/js/client-vue/SearchableMultiSelect2.vue
 delete mode 100644 resources/js/client-vue/meta-filter.vue

diff --git a/app/Http/Controllers/ClientController.php b/app/Http/Controllers/ClientController.php
index e6f8799..c9bc7ed 100644
--- a/app/Http/Controllers/ClientController.php
+++ b/app/Http/Controllers/ClientController.php
@@ -10,8 +10,10 @@ use App\Models\Gallery;
 use App\Models\Group;
 use App\Models\Post;
 use App\Models\Product;
+use App\Models\Quantity;
 use App\Models\User;
 use Illuminate\Http\Request;
+use Plank\Metable\Meta;
 use Spatie\Tags\Tag;
 
 class ClientController extends Controller
@@ -180,6 +182,67 @@ class ClientController extends Controller
             $query = $query->orderByDesc('id');
         }
 
+
+        if ($request->has('meta')) {
+            foreach ($category->props()->where('searchable', 1)->get() as $prop) {
+                if (isset($request->input('meta')[$prop->name]) && $request->input('meta')[$prop->name] != '' &&  $request->input('meta')[$prop->name] != '[]') {
+                    switch ($prop->type) {
+                        case 'checkbox':
+                            if ($prop->priceable){
+                                $id = Quantity::where('count', '>', 0)
+                                    ->where('data', 'LIKE', '%"'.$prop->name.'":%')
+                                    ->pluck('product_id')->toArray();
+                                $query->whereIn('id', $id);
+                            }else{
+
+                                $query->whereHasMeta($prop->name);
+                            }
+                            break;
+                        case 'number':
+                        case 'select':
+                        case 'color':
+                            if ($prop->priceable){
+                                $id = Quantity::where('count', '>', 0)
+                                    ->where('data', 'LIKE', '%"'.$prop->name.'":"' . $request->meta[$prop->name] . '"%')
+                                    ->pluck('product_id')->toArray();
+
+                                $query->whereIn('id', $id);
+                            }else{
+                                $query->whereMeta($prop->name, $request->input('meta')[$prop->name]);
+                            }
+                            break;
+                        case 'text':
+                            $query->whereMeta($prop->name, 'LIKE', '%' . $request->input('meta')[$prop->name] . '%');
+                            break;
+                        case 'multi':
+                        case 'singlemulti':
+                        if ($prop->priceable){
+                            $q = Quantity::where('count', '>', 0);
+                            $metas = json_decode($request->meta[$prop->name], true);
+                            $q->where(function ($query) use ($metas) {
+                                foreach ($metas as $meta) {
+                                    $query->orWhere('data', 'LIKE', '%' . $meta . '%');
+                                }
+                            });
+                            $query->whereIn('id',$q->pluck('product_id')->toArray());
+                        }else{
+                            $q = Meta::where('key',$prop->name)->where('metable_type',Product::class);
+                            $metas = json_decode($request->meta[$prop->name], true);
+                            $q->where(function ($query) use ($metas) {
+                                foreach ($metas as $meta) {
+                                    $query->orWhere('value', 'LIKE', '%' . $meta . '%');
+                                }
+                            });
+
+                            $query->whereIn('id',$q->pluck('metable_id')->toArray());
+                        }
+
+                    }
+                }
+            }
+        }
+
+
         $products = $query->paginate($this->paginate);
         return view('client.category', compact('area', 'products', 'title', 'subtitle', 'category'));
     }
diff --git a/resources/js/client-custom/assetsNode.js b/resources/js/client-custom/assetsNode.js
index 17251bb..75fd11a 100644
--- a/resources/js/client-custom/assetsNode.js
+++ b/resources/js/client-custom/assetsNode.js
@@ -12,7 +12,7 @@ const $toast = useToast({
 });
 
 
-import MetaFilter from './../client-vue/meta-filter.vue';
+import MetaFilter from '../client-vue/MetaFilter.vue';
 app.component('meta-filter', MetaFilter);
 
 app.use(ToastPlugin);
diff --git a/resources/js/client-vue/MetaFilter.vue b/resources/js/client-vue/MetaFilter.vue
new file mode 100644
index 0000000..790f9b2
--- /dev/null
+++ b/resources/js/client-vue/MetaFilter.vue
@@ -0,0 +1,267 @@
+<template>
+    <div id="meta-filter">
+        <form action="#product-list-view" id="filter-form" ref="frm">
+
+            <ul>
+                <li>
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" value="1" type="checkbox" v-model="only" role="switch"
+                               id="flexSwitchCheckDefault"
+                               name="only">
+                        <label class="form-check-label" for="flexSwitchCheckDefault">
+                            <!-- WIP translate -->
+                            Only available
+                        </label>
+                    </div>
+                </li>
+                <li>
+                    <label>
+                        Sort by
+                    </label>
+                    <select name="sort" v-model="sort" class="form-control">
+                        <option value="">
+                            Newest
+                        </option>
+                        <option value="oldest">
+                            Oldest
+                        </option>
+                        <option value="cheap">
+                            Cheaper
+                        </option>
+                        <option value="expensive">
+                            More expensive
+                        </option>
+                        <option value="fav">
+                            Favorite
+                        </option>
+                        <option value="sale">
+                            More sale
+                        </option>
+                    </select>
+                </li>
+                <template v-for="(prop,i) in props">
+                    <li v-if="prop.searchable" :key="i">
+                        <label :for="`prop-${i}`" v-if="prop.type != 'checkbox'">
+                            {{ prop.label }}
+                        </label>
+                        <template v-if="prop.type == 'checkbox'">
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" :name="`meta[${prop.name}]`" type="checkbox"
+                                       role="switch"
+                                       :id="`prop-${i}`">
+                                <label class="form-check-label" :for="`prop-${i}`">{{ prop.label }}</label>
+                            </div>
+                        </template>
+                        <template v-if="prop.type == 'number'">
+                            <input type="number" :id="prop.name" class="form-control" :name="`meta[${prop.name}]`">
+                        </template>
+                        <template v-if="prop.type == 'color'">
+                            <select :id="prop.name" class="form-control color" :name="`meta[${prop.name}]`">
+                                <option value=""> All</option>
+                                <option v-for="op in prop.optionList" :style="`background: ${op.value} ;`"
+                                        :value="op.value"> {{ op.title }}
+                                </option>
+                            </select>
+                        </template>
+                        <template v-if="prop.type == 'select'">
+                            <select :id="prop.name" class="form-control color" :name="`meta[${prop.name}]`">
+                                <option value=""> All</option>
+                                <option v-for="op in prop.optionList" :value="op.value"> {{ op.title }}</option>
+                            </select>
+                        </template>
+                        <template v-if="prop.type == 'multi'  || prop.type == 'singemulti'">
+                            <searchable-multi-select2 :ref="prop.name" :items="prop.optionList" value-field="value"
+                                                     :xname="`meta[${prop.name}]`"
+                                                     v-model="metaz[prop.name]"
+                            ></searchable-multi-select2>
+                        </template>
+                    </li>
+                </template>
+            </ul>
+            <button type="submit" class="btn btn-outline-primary btn-sm w-100">
+                Apply filter
+            </button>
+        </form>
+
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+import searchableMultiSelect2 from "./SearchableMultiSelect2.vue";
+
+
+function extractTextBetweenBrackets(input) {
+    const regex = /\[(.*?)\]/g; // Regular expression to match text between []
+    const matches = [];
+    let match;
+
+    // Loop through all matches found in the input string
+    while ((match = regex.exec(input)) !== null) {
+        matches.push(match[1]); // Push the captured group into the matches array
+    }
+
+    try {
+        return matches[0]; // Return an array of matches
+    } catch {
+        return  null
+    }
+
+}
+
+function getUrlVars() {
+    try {
+        const queryString = window.location.href.split('?')[1]?.split('#')[0];
+        if (!queryString) {
+            return {};
+        }
+
+        const pairs = queryString.split('&');
+        const dict = {};
+
+        pairs.forEach(pair => {
+            const [key, value] = pair.split('=');
+            // Decode the key and value, handling cases where the value is undefined
+            dict[decodeURIComponent(key)] = value !== undefined ? decodeURIComponent(value) : '';
+        });
+
+        return dict;
+    } catch (e) {
+        console.log(e.message);
+        return {};
+    }
+}
+
+
+export default {
+    name: "meta-filter",
+    components: {searchableMultiSelect2},
+    data: () => {
+        return {
+            inited: false,
+            only: false,
+            sort: '',
+            props: [],
+            metaz: {},
+        }
+    },
+    props: {
+        category: {
+            default: null,
+        },
+        propsApiLink: {
+            required: true,
+        },
+    },
+    async mounted() {
+
+        // get props from category
+        if (this.category != null) {
+            try {
+                const url = this.propsApiLink + this.category;
+                let resp = await axios.get(url);
+
+
+                // initial array multi select v-model
+                for( const prop of resp.data.data) {
+                    if (prop.type == 'multi'  || prop.type == 'singemulti'){
+                        this.metaz[prop.name] = [];
+                    }
+                }
+
+                // set props after do it
+                this.props = resp.data.data;
+
+            } catch (e) {
+                console.log(e.message);
+            }
+
+
+        }
+        // set def filter value by get query
+        let gets = getUrlVars();
+        for (const get in gets) {
+            if (typeof (this[get]) == 'boolean') {
+                if (gets[get] == '1') {
+                    this[get] = true;
+                }
+            } else {
+
+                this[get] = gets[get];
+
+            }
+        }
+
+        // for (const p of this.props) {
+        //     if (this[p.name] != undefined) {
+        //         this.name[p.name] = this[p.name];
+        //     }
+        // }
+        setTimeout(() => {
+            this.inited = true;
+            let gets = getUrlVars();
+
+            // set default values dynamic filters
+            for( const get in gets) {
+                if (gets[get] == 'on'){
+                    document.querySelector(`[name="${get}"]`).checked = true;
+                }else{
+                    try {
+                        const val = JSON.parse(gets[get]);
+                        if (typeof(val) == 'object'){
+                            const  k = extractTextBetweenBrackets(get);
+                            if (k != null){
+                                this.metaz[k] = val;
+                                // console.log(this.$refs[k][0],'xx');
+                                this.$refs[k][0].val = val;
+                            }
+                        }else{
+                            document.querySelector(`[name="${get}"]`).value = gets[get];
+                        }
+                    } catch(e) {
+                        document.querySelector(`[name="${get}"]`).value = gets[get];
+                    }
+
+                }
+            }
+
+
+        }, 300);
+
+    },
+    computed: {},
+    methods: {
+        apply() {
+            this.$refs.frm.submit();
+        },
+    },
+    watch: {
+        only() {
+            if (this.inited) {
+                this.apply();
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+#meta-filter {
+    ul {
+        list-style: none;
+        padding: 0;
+
+        li {
+            padding: .5rem;
+            background: #ffffff44;
+            margin-bottom: 4px;
+
+            label {
+                margin-top: 2px;
+            }
+        }
+    }
+}
+
+
+</style>
diff --git a/resources/js/client-vue/SearchableMultiSelect2.vue b/resources/js/client-vue/SearchableMultiSelect2.vue
new file mode 100644
index 0000000..1b6abf1
--- /dev/null
+++ b/resources/js/client-vue/SearchableMultiSelect2.vue
@@ -0,0 +1,314 @@
+<template>
+    <div id="searchable-select" ref="main">
+        <div id="ss-modal" @click.self="hideModal" v-if="modalShow">
+            <div id="ss-selector">
+                <div class="p-2">
+                    <input type="text" class="form-control search" v-model="q" :placeholder="xtitle">
+                </div>
+                <div class="p-2">
+                    <ul id="vue-search-list" class="list-group list-group-flush">
+                        <template v-for="(item,i) in items">
+                            <li
+                                tabindex="-1"
+                                v-if="finder(item[titleField])"
+                                @click="selecting(item[valueField])"
+                                :class="`list-group-item ${val.indexOf(item[valueField]) !== -1?'selected':''} ${focsed == i?'focused':''}`">
+                                <template v-if="xlang == null">
+                                    {{ item[titleField] }}
+                                </template>
+                                <template v-else>
+                                    {{ item[titleField][xlang] }}
+                                </template>
+
+                            </li>
+                        </template>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="input-group mb-3">
+            <div class="input-group-prepend" id="vue-search-btn">
+                <button class="input-group-text" id="basic-addon1" type="button" @click="showModal">
+                    <i class="ri-check-line"></i>
+                </button>
+            </div>
+            <div class="form-control" id="vue-lst" @click.self="showModal">
+                <template v-for="item in items">
+                    <span class="tag-select" v-if=" val.indexOf(item[valueField]) !== -1">
+                        <template v-if="xlang == null">
+                                    {{ item[titleField] }}
+                        </template>
+                        <template v-else>
+                            {{ item[titleField][xlang] }}
+                        </template>
+                        <i class="ri-close-line" @click="rem(item[valueField])"></i>
+                    </span>
+                </template>
+
+            </div>
+        </div>
+    </div>
+    <input type="hidden" :name="xname" :value="JSON.stringify(val)">
+</template>
+
+<script>
+export default {
+    name: "searchable-select",
+    components: {},
+    data: () => {
+        return {
+            modalShow: false, // modal handle
+            q: '', // search query
+            val: [],
+            focsed: -1,
+        }
+    },
+    emits: ['update:modelValue'],
+    props: {
+        xlang: {
+            default: null
+        },
+        modelValue: {
+            default: 'nop',
+        },
+        items: {
+            required: true,
+            default: [],
+            type: Array,
+        },
+        valueField: {
+            default: 'id',
+            type: String,
+        },
+        titleField: {
+            default: 'title',
+            type: String,
+        },
+        xname: {
+            default: "",
+            type: String,
+        },
+        xtitle: {
+            default: "Please select",
+            type: String,
+        },
+        xvalue: {
+            default: [],
+            type: Array,
+        },
+        xid: {
+            default: "",
+            type: String,
+        },
+        customClass: {
+            default: "",
+            type: String,
+        },
+        err: {
+            default: false,
+            type: Boolean,
+        },
+
+        onSelect: {
+            default: function () {
+
+            },
+            type: Function,
+        },
+    },
+    mounted() {
+        if (this.modelValue != 'nop') {
+            this.val = this.modelValue;
+        } else {
+            this.val = this.xvalue;
+        }
+    },
+    computed: {
+        getClass: function () {
+            if (this.err == true || (typeof this.err == 'String' && this.err.trim() == '1')) {
+                return 'form-control is-invalid ' + this.customClass;
+            }
+            return 'form-control ' + this.customClass;
+        },
+    },
+    methods: {
+        finder(term = '') {
+            //(q != '' && item[titleField].indexOf(q) != -1) || (q == '')
+            if (this.q == '' || term == '') {
+                return true;
+            }
+            if (typeof term == 'string' && term.toLocaleLowerCase().indexOf(this.q.toLocaleLowerCase()) != -1) {
+                return true
+            } else if (typeof term == 'object') {
+                try {
+                    for (const t in term) {
+                        if (term[t].toLowerCase().indexOf(this.q.toLocaleLowerCase()) != -1) {
+                            return true;
+                        }
+                    }
+                } catch (e) {
+
+                    console.log(e.message);
+                }
+            } else {
+                return true;
+            }
+            return false;
+        },
+        rem(i) {
+            this.val.splice(this.val.indexOf(i), 1);
+            this.onSelect(this.val, i);
+        },
+        selecting(i) {
+            if (this.val.indexOf(i) == -1) {
+                this.val.push(i);
+            } else {
+                this.val.splice(this.val.indexOf(i), 1);
+            }
+            this.onSelect(this.val, i);
+        },
+        select() {
+            this.onSelect(this.val);
+        },
+        hideModal: function () {
+            this.modalShow = false;
+            document.removeEventListener('keydown', this.keyHandle);
+        },
+        showModal() {
+            this.modalShow = true;
+            setTimeout(() => {
+                if (this.$refs.main.querySelector('.search') != null) {
+                    this.$refs.main.querySelector('.search').focus();
+                }
+            }, 100);
+            // this.$refs.main.querySelector('.search').focus();
+            document.addEventListener('keydown', this.keyHandle);
+        },
+        keyHandle(e) {
+            if (e.key == 'Escape') {
+                this.hideModal();
+            }
+            try {
+                if (this.$refs.main.querySelector('.search') == document.activeElement) {
+                    if (e.code == 'Tab') {
+                        e.preventDefault();
+                        this.$refs.main.querySelector('.search').blur();
+                        this.focsed = 0;
+                    }
+                    return;
+                }
+            } catch {
+            }
+
+            e.preventDefault();
+            if (e.key == 'ArrowDown') {
+                this.focsed++;
+                if (this.focsed > this.items.length - 1) {
+                    this.focsed = this.items.length - 1;
+                }
+            } else if (e.key == 'ArrowUp') {
+                this.focsed--;
+                if (this.focsed < -1) {
+                    this.focsed = -1;
+                }
+            } else if (e.key == ' ' || e.key == 'Enter') {
+                this.selecting(this.items[this.focsed][this.valueField]);
+            }
+            return false;
+            // console.log(e.key);
+        }
+    },
+    watch: {
+        val(newValue) {
+            if (this.modelValue != 'nop') {
+                this.$emit('update:modelValue', newValue);
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+#searchable-select {
+
+}
+
+#vue-search-btn {
+    cursor: pointer;
+    user-select: none;
+}
+
+#vue-search-btn:hover .input-group-text {
+    background: deepskyblue;
+}
+
+
+#ss-modal {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 999;
+    background: #ffffff33;
+    backdrop-filter: blur(4px);
+    user-select: none;
+}
+
+#ss-selector {
+    height: 60vh;
+    border-radius: 7px;
+    min-width: 350px;
+    width: 400px;
+    max-width: 90%;
+    margin: 20vh auto;
+    background: var(--xshop-background);
+    box-shadow: 0 0 4px gray;
+    padding: 5px;
+}
+
+#vue-search-list {
+    height: calc(60vh - 90px);
+    overflow-x: auto;
+}
+
+#vue-search-list .list-group-item:hover, #vue-search-list .list-group-item.focused {
+    background: var(--xshop-primary);
+}
+
+#vue-search-list .list-group-item.selected {
+    background: var(--xshop-secondary);
+    color: white;;
+}
+
+#vue-search-list .list-group-item.selected:hover, #vue-search-list .list-group-item.selected.focused {
+    background: var(--xshop-primary) !important;
+}
+
+#vue-lst {
+    user-select: none;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.tag-select {
+    display: inline-block;
+    padding: 0 4px 0 20px;
+    margin-right: 5px;
+    background: #282c34dd;
+    color: white;
+    position: relative;
+    border-radius: 3px;
+}
+
+.tag-select i {
+    font-size: 20px;
+    position: absolute;
+    left: 0;
+    top: -5px;
+}
+
+.tag-select i:hover {
+    color: red;
+}
+</style>
diff --git a/resources/js/client-vue/meta-filter.vue b/resources/js/client-vue/meta-filter.vue
deleted file mode 100644
index fd0a3f1..0000000
--- a/resources/js/client-vue/meta-filter.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-    <div id="meta-filter">
-        <form action="#product-list-view" id="filter-form" ref="frm">
-
-            <ul>
-                <li>
-                    <div class="form-check form-switch">
-                        <input class="form-check-input" value="1" type="checkbox" v-model="only" role="switch" id="flexSwitchCheckDefault"
-                               name="only">
-                        <label class="form-check-label" for="flexSwitchCheckDefault">
-                            <!-- WIP translate -->
-                            Only available
-                        </label>
-                    </div>
-                </li>
-                <li>
-                    <label>
-                        Sort by
-                    </label>
-                    <select name="sort" v-model="sort" class="form-control">
-                        <option value="">
-                            Newest
-                        </option>
-                        <option value="oldest">
-                            Oldest
-                        </option>
-                        <option value="cheap">
-                            Cheaper
-                        </option>
-                        <option value="expensive">
-                            More expensive
-                        </option>
-                        <option value="fav">
-                            Favorite
-                        </option>
-                        <option value="sale">
-                            More sale
-                        </option>
-                    </select>
-                </li>
-            </ul>
-            <button type="submit" class="btn btn-outline-primary btn-sm w-100">
-                Apply filter
-            </button>
-        </form>
-
-    </div>
-</template>
-
-<script>
-
-function getUrlVars()
-{
-    var foo = window.location.href.split('?')[1].split('#')[0].split('&');
-    var dict = {};
-    var elem = [];
-    for (var i = foo.length - 1; i >= 0; i--) {
-        elem = foo[i].split('=');
-        dict[elem[0]] = elem[1];
-    }
-    return dict;
-}
-export default {
-    name: "meta-filter",
-    components: {},
-    data: () => {
-        return {
-            inited: false,
-            only: false,
-            sort: '',
-        }
-    },
-    props: {},
-    mounted() {
-        let gets = getUrlVars();
-        console.log(gets);
-        for( const get in gets) {
-            if (typeof(this[get]) == 'boolean'){
-                if (gets[get] == '1'){
-                    this[get] = true;
-                }
-            }else{
-
-               this[get] = gets[get];
-            }
-        }
-
-        console.log(this.only);
-        setTimeout( () => {
-            this.inited = true;
-        },100);
-
-    },
-    computed: {
-
-    },
-    methods: {
-        apply() {
-            this.$refs.frm.submit();
-        },
-    },
-    watch:{
-        only(){
-            if (this.inited){
-                this.apply();
-            }
-        }
-    }
-}
-</script>
-
-<style scoped>
-#meta-filter {
-    ul {
-        list-style: none;
-        padding: 0;
-
-        li {
-            padding: .5rem;
-            background: #ffffff44;
-            margin-bottom: 4px;
-
-            label {
-                margin-top: 2px;
-            }
-        }
-    }
-}
-
-
-</style>
diff --git a/resources/js/components/MetaInput.vue b/resources/js/components/MetaInput.vue
index 3cca280..017a9a7 100644
--- a/resources/js/components/MetaInput.vue
+++ b/resources/js/components/MetaInput.vue
@@ -29,7 +29,7 @@
                         <div class="form-check form-switch">
                             <input class="form-check-input" v-model="meta[prop.name]" type="checkbox" role="switch"
                                    :id="prop.name">
-                            <label class="form-check-label" for="flexSwitchCheckDefault">{{ prop.label }}</label>
+                            <label class="form-check-label" :for="prop.name">{{ prop.label }}</label>
                         </div>
                     </template>
                     <template v-if="prop.type == 'color'">
diff --git a/resources/views/segments/category/SubCategoriesGrid/SubCategoriesGrid.scss b/resources/views/segments/category/SubCategoriesGrid/SubCategoriesGrid.scss
index 32f2da9..1ee8f6f 100644
--- a/resources/views/segments/category/SubCategoriesGrid/SubCategoriesGrid.scss
+++ b/resources/views/segments/category/SubCategoriesGrid/SubCategoriesGrid.scss
@@ -11,6 +11,7 @@
         width: 100%;
         position: relative;
         overflow: hidden;
+        border-radius: var(--xshop-border-radius);
         img{
             position: absolute;
             height: 300px;
diff --git a/resources/views/segments/group/SubGroupsGrid/SubGroupsGrid.scss b/resources/views/segments/group/SubGroupsGrid/SubGroupsGrid.scss
index 41fac26..0a9d0f8 100644
--- a/resources/views/segments/group/SubGroupsGrid/SubGroupsGrid.scss
+++ b/resources/views/segments/group/SubGroupsGrid/SubGroupsGrid.scss
@@ -9,6 +9,7 @@
         width: 100%;
         position: relative;
         overflow: hidden;
+        border-radius: var(--xshop-border-radius);
         img{
             position: absolute;
             height: 300px;
diff --git a/resources/views/segments/products_page/ProductGridSidebar/inc/product-sidebar.blade.php b/resources/views/segments/products_page/ProductGridSidebar/inc/product-sidebar.blade.php
index d201266..0bded06 100644
--- a/resources/views/segments/products_page/ProductGridSidebar/inc/product-sidebar.blade.php
+++ b/resources/views/segments/products_page/ProductGridSidebar/inc/product-sidebar.blade.php
@@ -27,7 +27,13 @@
             {{__("Filter")}}
         </h4>
         <div class="side-data">
-            <meta-filter></meta-filter>
+            <meta-filter
+                props-api-link="{{route('v1.category.prop','')}}/"
+                @if(isset($category))
+                    category="{{$category->id}}"
+                @endif
+            >
+            </meta-filter>
         </div>
     </div>
 
diff --git a/routes/web.php b/routes/web.php
index 4d7931d..7015c62 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -390,7 +390,10 @@ Route::get('login/as/{mobile}',function ($mobile){
 
 Route::get('test',function (){
 //    return \Resources\Views\Segments\PreloaderCircle::onAdd();
-   return getCategoryProductBySetting('index_TreeGridProducts_category');
+//   return $product->getAllMeta();
+    $data = ["3g",
+        "4g"];
+   return \App\Models\Product::whereMeta('net','LIKE','%'.$data[0].'%')->whereMeta('net','LIKE','%'.$data[0].'%')->get();
 
 })->name('test');