From c4f23e93c59ffa8978ce2f291eae2d1227a97467 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Fri, 2 Jun 2023 18:17:27 +0200
Subject: [PATCH] wip #5989 @4:00

---
 app/Http/Controllers/AjaxController.php       |   3 +-
 app/Models/Product.php                        |  32 +-
 resources/js/components/Configurator.vue      |  13 -
 resources/js/components/Panier.vue            |  23 -
 resources/js/components/ProductsFilters.vue   | 450 +++++++++---------
 resources/views/components/cart-add.blade.php |  40 +-
 .../views/components/item-cart.blade.php      |   2 +-
 resources/views/pages/category.blade.php      |   6 +-
 .../views/pages/product-detail.blade.php      |  53 ++-
 .../views/partials/product-link.blade.php     |  18 +-
 10 files changed, 322 insertions(+), 318 deletions(-)
 delete mode 100644 resources/js/components/Configurator.vue
 delete mode 100644 resources/js/components/Panier.vue

diff --git a/app/Http/Controllers/AjaxController.php b/app/Http/Controllers/AjaxController.php
index 691b89c..a17e9ae 100644
--- a/app/Http/Controllers/AjaxController.php
+++ b/app/Http/Controllers/AjaxController.php
@@ -653,7 +653,6 @@ class AjaxController extends CubistFrontController
             $request->session()->put('last_selection', intval($cartId));
             return "success";
         }
-        return false;
     }
 
     public function order(Request $request) {
@@ -677,6 +676,6 @@ class AjaxController extends CubistFrontController
         // Clear cart session
         $request->session()->forget('cart_items');
 
-        return __('Votre commande a bien été enregistrée.');
+        return __('Votre commande a bien été validée !');
     }
 }
diff --git a/app/Models/Product.php b/app/Models/Product.php
index bde024d..d3cac49 100644
--- a/app/Models/Product.php
+++ b/app/Models/Product.php
@@ -573,8 +573,10 @@ class Product extends CubistMagicPageModel
                 $values = [];
 
                 foreach ($products as $product) {
+
                     $pv = $product->get($spec_name);
 
+
                     if (is_array($pv) && $data->type === 'list') {
                         $pv = null;
                     }
@@ -603,7 +605,6 @@ class Product extends CubistMagicPageModel
 
                 }
 
-
                 foreach ($data->options as $index => $option) {
                     if (is_scalar($option)) {
                         $o = $option;
@@ -617,26 +618,24 @@ class Product extends CubistMagicPageModel
                         }
                     }
                 }
+
                 if (isset($values['-'])) {
                     $options['-'] = ['label' => 'Non défini', 'value' => '-', 'nb_products' => $values['-']];
                 }
+
                 $f['options'] = $options;
             } else if ($data->type === 'numeric' || $data->type === 'range' || $data->type === 'numeric_list') {
-                //$checkV = array_filter($products, function($n) use($spec_name) { return $n->get($spec_name) !== null; });
-
-                //if($checkV) {
-                    $f['min'] = INF;
-                    $f['max'] = -INF;
-                    $f['unit'] = $data->unit;
-                    $f['type'] = 'range';
-                    $f['scale'] = $data->logarithmic_scale ? 'log' : 'linear';
-
-                    if ($data->type === 'numeric' || $data->type === 'numeric_list') {
-                        $f['prefix'] = $data['prefix'];
-                    } else {
-                        $f['prefix'] = '';
-                    }
-                //}
+                $f['min'] = INF;
+                $f['max'] = -INF;
+                $f['unit'] = $data->unit;
+                $f['type'] = 'range';
+                $f['scale'] = $data->logarithmic_scale ? 'log' : 'linear';
+
+                if ($data->type === 'numeric' || $data->type === 'numeric_list') {
+                    $f['prefix'] = $data['prefix'];
+                } else {
+                    $f['prefix'] = '';
+                }
 
                 foreach ($products as $product) {
                     $v = $product->get($spec_name);
@@ -646,6 +645,7 @@ class Product extends CubistMagicPageModel
                         continue;
                     }
 
+
                     if (null !== $filter_value) {
                         $fvmax = $filter_value[1];
                         $fvmin = $filter_value[0];
diff --git a/resources/js/components/Configurator.vue b/resources/js/components/Configurator.vue
deleted file mode 100644
index fa35921..0000000
--- a/resources/js/components/Configurator.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-    export default {
-        data() {
-            return {
-                price: ''
-            }
-        },
-
-        methods: {
-
-        }
-    }
-</script>
diff --git a/resources/js/components/Panier.vue b/resources/js/components/Panier.vue
deleted file mode 100644
index 4dbc425..0000000
--- a/resources/js/components/Panier.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-
-</template>
-
-<script>
-export default {
-    name: "Panier",
-
-    mounted() {
-      console.log('ok')
-    },
-
-    methods: {
-        store() {
-
-        }
-    }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/resources/js/components/ProductsFilters.vue b/resources/js/components/ProductsFilters.vue
index 7853294..ab25a46 100644
--- a/resources/js/components/ProductsFilters.vue
+++ b/resources/js/components/ProductsFilters.vue
@@ -4,7 +4,7 @@
 
         <!-- Filters column -->
         <div ref="filters"
-            class="products-filters-wrapper sticky sm:static top-60 mr-1v sm:mr-0 pt-4 whitespace-no-wrap float-left sm:float-none">
+             class="products-filters-wrapper sticky sm:static top-60 mr-1v sm:mr-0 pt-4 whitespace-no-wrap float-left sm:float-none">
 
             <!-- Filters panel -->
             <div class="bg-white p-4">
@@ -127,13 +127,13 @@
                           @click="changeViewStyle">
                     <svg viewBox="0 0 38 36">
                         <g>
-                            <polygon fill="currentColor" points="28,11 10,11 10,13 28,13 28,11 	"/>
+                            <polygon fill="currentColor" points="28,11 10,11 10,13 28,13 28,11  "/>
                         </g>
                         <g>
-                            <polygon fill="currentColor" points="28,17 10,17 10,19 28,19 28,17 	"/>
+                            <polygon fill="currentColor" points="28,17 10,17 10,19 28,19 28,17  "/>
                         </g>
                         <g>
-                            <polygon fill="currentColor" points="28,23 10,23 10,25 28,25 28,23 	"/>
+                            <polygon fill="currentColor" points="28,23 10,23 10,25 28,25 28,23  "/>
                         </g>
                     </svg>
                 </a>
@@ -171,273 +171,273 @@
 </template>
 
 <script>
-    import 'polyfill-array-includes' // For IE 11 and friends
-    import 'ie-array-find-polyfill'
-    import 'es7-object-polyfill'
-    import VueSlider from 'vue-slider-component' // See vue-slider.styl for CSS
+import 'polyfill-array-includes' // For IE 11 and friends
+import 'ie-array-find-polyfill'
+import 'es7-object-polyfill'
+import VueSlider from 'vue-slider-component' // See vue-slider.styl for CSS
 
 
-    export default {
+export default {
 
-        components: {
-            VueSlider
-        },
+    components: {
+        VueSlider
+    },
 
-        props: {
-            productType: {
-                required: true,
-            },
-            baseFilters: {
-                type: String,
-                default: '',
-            },
-            filterData: {
-                required: true,
-            },
-            resultData: {
-                required: true,
-            },
-            translations: {
-                type: Object,
-                required: true,
-            }
+    props: {
+        productType: {
+            required: true,
+        },
+        baseFilters: {
+            type: String,
+            default: '',
+        },
+        filterData: {
+            required: true,
         },
-        data: () => ({
-            viewStyle: 'grid',
-            filters: {},
-            filterWrappers: [], // All the sets of filters in the accordion
-            currentFilterIndex: 0, // Index of the filter group that is open
-            matches: {},
-            products: [],
-            log: function (v) {
-                var res = Math.pow(10, v);
-                var nbZeros = Math.max(-1, Math.round(v - 2));
-                var roundFactor = Math.pow(10, nbZeros);
-                var introunded = Math.round(res / roundFactor);
-                var rounded = introunded * roundFactor;
-                rounded = rounded.toFixed(Math.max(0, -nbZeros));
-
-                return rounded;
-            },
-            linear: function (v) {
-                return v;
+        resultData: {
+            required: true,
+        },
+        translations: {
+            type: Object,
+            required: true,
+        }
+    },
+    data: () => ({
+        viewStyle: 'grid',
+        filters: {},
+        filterWrappers: [], // All the sets of filters in the accordion
+        currentFilterIndex: 0, // Index of the filter group that is open
+        matches: {},
+        products: [],
+        log: function (v) {
+            var res = Math.pow(10, v);
+            var nbZeros = Math.max(-1, Math.round(v - 2));
+            var roundFactor = Math.pow(10, nbZeros);
+            var introunded = Math.round(res / roundFactor);
+            var rounded = introunded * roundFactor;
+            rounded = rounded.toFixed(Math.max(0, -nbZeros));
+
+            return rounded;
+        },
+        linear: function (v) {
+            return v;
+        }
+    }),
+
+    watch: {
+        // Whenever a filter is changed, update the querystring
+        filters: {
+            deep: true,
+
+            handler(oldFilters, newFilters) {
+                // Using square brackets in the URL can cause problems due to URL encoding and decoding
+                // so it's better to remove them while also shortening the URL to simply use Fx=...
+                const safeQuerystring = this.filterQuerystring.replace(/filter\[(\d+)]/g, 'F$1');
+                history.replaceState(newFilters, '', '?' + safeQuerystring);
             }
-        }),
-
-        watch: {
-            // Whenever a filter is changed, update the querystring
-            filters: {
-                deep: true,
-
-                handler(oldFilters, newFilters) {
-                    // Using square brackets in the URL can cause problems due to URL encoding and decoding
-                    // so it's better to remove them while also shortening the URL to simply use Fx=...
-                    const safeQuerystring = this.filterQuerystring.replace(/filter\[(\d+)]/g, 'F$1');
-                    history.replaceState(newFilters, '', '?' + safeQuerystring);
-                }
-            },
+        },
 
-            viewStyle(newStyle) {
-                localStorage.viewStyle = newStyle;
+        viewStyle(newStyle) {
+            localStorage.viewStyle = newStyle;
+        }
+    },
+
+    computed: {
+        resultsCount() {
+            let count = Object.keys(this.matches.hits).length;
+            let results = '';
+
+            // Handle pluralisation and localisation
+            if (count === 1) {
+                results = this.translations.result;
+            } else {
+                results = this.translations.results;
             }
+
+            return `${count} ${results}`;
         },
 
-        computed: {
-            resultsCount() {
-                let count = Object.keys(this.matches.hits).length;
-                let results = '';
+        noResults() {
+            return Object.keys(this.matches.hits).length === 0
+        },
 
-                // Handle pluralisation and localisation
-                if (count === 1) {
-                    results = this.translations.result;
-                } else {
-                    results = this.translations.results;
-                }
+        filterQuerystring() {
+            let filter_list = [];
 
-                return `${count} ${results}`;
-            },
+            Object.keys(this.filters).forEach(filterID => {
 
-            noResults() {
-                return Object.keys(this.matches.hits).length === 0
-            },
+                let filter = this.getFilter(filterID);
 
-            filterQuerystring() {
-                let filter_list = [];
+                // Don't include range values if they're unchanged (at min / max values)
+                if (filter.type === 'range'
+                    && filter.minscale === this.filters[filterID][0]
+                    && filter.maxscale === this.filters[filterID][1]) {
+                    return;
+                }
 
-                Object.keys(this.filters).forEach(filterID => {
+                if (this.filters[filterID].length > 0) {
+                    filter_list.push(`filter[${filterID}]=` + this.filters[filterID].join(';'));
+                }
+            });
 
-                    let filter = this.getFilter(filterID);
+            return filter_list.join('&');
+        },
+    },
 
-                    // Don't include range values if they're unchanged (at min / max values)
-                    if (filter.type === 'range'
-                        && filter.minscale === this.filters[filterID][0]
-                        && filter.maxscale === this.filters[filterID][1]) {
-                        return;
-                    }
+    created() {
 
-                    if (this.filters[filterID].length > 0) {
-                        filter_list.push(`filter[${filterID}]=` + this.filters[filterID].join(';'));
-                    }
-                });
+        // Initially, it will be all the IDs from the server
+        this.matches = this.resultData;
 
-                return filter_list.join('&');
-            },
-        },
+        // Create dynamic data so we can bind the filter fields via v-model for each option
+        let filters = {};
+        Object.values(this.filterData).forEach(filter => {
+            if (filter.type === 'range') {
+                filters[filter.id] = [filter.minscale, filter.maxscale];
+            } else {
+                filters[filter.id] = [];
+            }
+        });
 
-        created() {
+        this.filters = filters;
+        this.parseQuerystring();
+    },
 
-            // Initially, it will be all the IDs from the server
-            this.matches = this.resultData;
+    mounted() {
 
-            // Create dynamic data so we can bind the filter fields via v-model for each option
-            let filters = {};
-            Object.values(this.filterData).forEach(filter => {
-                if (filter.type === 'range') {
-                    filters[filter.id] = [filter.minscale, filter.maxscale];
-                } else {
-                    filters[filter.id] = [];
-                }
-            });
+        // Collect product elements from the default slot so we can handle them better as Vue objects
+        this.$slots.default[0].children.forEach(child => {
 
-            this.filters = filters;
-            this.parseQuerystring();
-        },
+            if (child.tag) { // Ensure it's a tag and not an empty text element
+                let product = child.elm;
+                let ID = parseInt(product.dataset.productId);
+                this.products.push({id: ID, html: product.outerHTML});
+            }
+        });
 
-        mounted() {
+        if (localStorage.viewStyle) {
+            this.viewStyle = localStorage.viewStyle;
+        }
 
-            // Collect product elements from the default slot so we can handle them better as Vue objects
-            this.$slots.default[0].children.forEach(child => {
+        // Gather all the filter sets for the accordion
+        this.filterWrappers = this.$refs.filters.querySelectorAll('.filters-wrapper');
 
-                if (child.tag) { // Ensure it's a tag and not an empty text element
-                    let product = child.elm;
-                    let ID = parseInt(product.dataset.productId);
-                    this.products.push({id: ID, html: product.outerHTML});
-                }
-            });
+        // Calculate the max-height of each filter set (required so accordion height animation can work)
+        this.filterWrappers.forEach(function(el) {
 
-            if (localStorage.viewStyle) {
-                this.viewStyle = localStorage.viewStyle;
+            let totalHeight = 0;
+            for (let i = 0; i < el.children.length; i++) {
+                totalHeight += el.children[i].clientHeight;
             }
 
-            // Gather all the filter sets for the accordion
-            this.filterWrappers = this.$refs.filters.querySelectorAll('.filters-wrapper');
+            el.style.maxHeight = totalHeight + 'px';
+        });
 
-            // Calculate the max-height of each filter set (required so accordion height animation can work)
-            this.filterWrappers.forEach(function(el) {
+        // Find the first filter set that has pre-selected filters and open it
+        let initialFilterIndex = 0;
+        for (let fi = 0; fi < this.filterData.length; fi++) {
+            let id = this.filterData[fi].id;
+            if (this.filters[id].length > 0 && this.filterData[fi].type !== 'range') {
+                initialFilterIndex = fi;
+                break;
+            }
+        }
+        this.expandFilters(initialFilterIndex);
 
-                let totalHeight = 0;
-                for (let i = 0; i < el.children.length; i++) {
-                    totalHeight += el.children[i].clientHeight;
-                }
+    },
 
-                el.style.maxHeight = totalHeight + 'px';
-            });
+    methods: {
 
-            // Find the first filter set that has pre-selected filters and open it
-            let initialFilterIndex = 0;
-            for (let fi = 0; fi < this.filterData.length; fi++) {
-                let id = this.filterData[fi].id;
-                if (this.filters[id].length > 0 && this.filterData[fi].type !== 'range') {
-                    initialFilterIndex = fi;
-                    break;
-                }
-            }
-            this.expandFilters(initialFilterIndex);
+        parseQuerystring() {
+            const $this = this;
+            const querystring = this.baseFilters + '&' + location.search.substring(1); // Get querystring minus first character (?)
+
+            if (querystring.length > 0) {
+                querystring.split('&').forEach(function (pair) {
+                    if (pair === '') {
+                        return;
+                    }
+
+                    let [key, value] = pair.split('=');
+
+                    // Key will be in the format of 'filter[x]' where 'x' is a number
+                    // We only need the numeric ID of the filter so strip everything else
+                    key = key.replace(/\D/g, '');
+
+                    // Values are a string delimited by ';' so split them into array
+                    // Values may be a number or a string ('-') so don't try to convert them to integers
+                    value = value.split(';');
+
+                    // Update the actual filter data if the key exists
+                    if ($this.filters.hasOwnProperty(key)) {
+                        $this.filters[key] = value;
+                    }
+                });
 
+                $this.updateFilters();
+            }
         },
 
-        methods: {
+        getFilter(id) {
+            // Find the filter by its ID in the array of filters
+            return this.filterData.find(filter => filter.id === parseInt(id)) || {};
+        },
 
-            parseQuerystring() {
-                const $this = this;
-                const querystring = this.baseFilters + '&' + location.search.substring(1); // Get querystring minus first character (?)
+        updateFilters() {
+            let $this = this;
+            let endpoint = `/ajax/filtercatalog/?productType=${this.productType}&${this.filterQuerystring}`;
 
-                if (querystring.length > 0) {
-                    querystring.split('&').forEach(function (pair) {
-                        if (pair === '') {
-                            return;
-                        }
+            axios.get(endpoint)
+                .then(function (response) {
+                    $this.matches = response.data.results;
+                })
+                .catch(function (error) {
+                    console.error('Error filtering products', error);
+                });
+        },
 
-                        let [key, value] = pair.split('=');
+        productVisible(id) {
+            return Object.values(this.matches.hits).includes(id)
+        },
 
-                        // Key will be in the format of 'filter[x]' where 'x' is a number
-                        // We only need the numeric ID of the filter so strip everything else
-                        key = key.replace(/\D/g, '');
+        productLoaded(id) {
+            console.log(id + ' loaded');
+        },
 
-                        // Values are a string delimited by ';' so split them into array
-                        // Values may be a number or a string ('-') so don't try to convert them to integers
-                        value = value.split(';');
+        removeFilter(filterID, optionID) {
+            let index = this.filters[filterID].indexOf(optionID);
 
-                        // Update the actual filter data if the key exists
-                        if ($this.filters.hasOwnProperty(key)) {
-                            $this.filters[key] = value;
-                        }
-                    });
+            if (index !== -1) {
+                this.filters[filterID].splice(index, 1);
+                this.updateFilters();
+            }
+        },
 
-                    $this.updateFilters();
-                }
-            },
-
-            getFilter(id) {
-                // Find the filter by its ID in the array of filters
-                return this.filterData.find(filter => filter.id === parseInt(id)) || {};
-            },
-
-            updateFilters() {
-                let $this = this;
-                let endpoint = `/ajax/filtercatalog/?productType=${this.productType}&${this.filterQuerystring}`;
-
-                axios.get(endpoint)
-                    .then(function (response) {
-                        $this.matches = response.data.results;
-                    })
-                    .catch(function (error) {
-                        console.error('Error filtering products', error);
-                    });
-            },
-
-            productVisible(id) {
-                return Object.values(this.matches.hits).includes(id)
-            },
-
-            productLoaded(id) {
-                console.log(id + ' loaded');
-            },
-
-            removeFilter(filterID, optionID) {
-                let index = this.filters[filterID].indexOf(optionID);
-
-                if (index !== -1) {
-                    this.filters[filterID].splice(index, 1);
-                    this.updateFilters();
-                }
-            },
+        changeViewStyle(event) {
+            if (event) {
+                event.preventDefault()
+            }
+            this.viewStyle = this.viewStyle === 'list' ? 'grid' : 'list';
+        },
 
-            changeViewStyle(event) {
-                if (event) {
-                    event.preventDefault()
-                }
-                this.viewStyle = this.viewStyle === 'list' ? 'grid' : 'list';
-            },
-
-            expandFilters(index) {
-                // For the accordion animation to work, overflow:hidden must be set on the wrapping element.
-                // However, some filter elements like sliders don't display properly if the overflow is hidden
-                // (due to tooltips etc), so we need to set the overflow to visible on the open set of filters
-                // immediately *after* the CSS transition (300ms) ends. When a new filter set is opened, the
-                // overflow:visible override needs to be removed immediately, before the transition accordion
-                // animation begins...
-                let $this = this;
-                let previousIndex = this.currentFilterIndex;
-                this.filterWrappers[previousIndex].style.removeProperty('overflow');
-                this.currentFilterIndex = index;
-                setTimeout(function() {
-                    $this.filterWrappers[index].style.overflow = 'visible';
-                }, 300); // Keep this value in sync with the CSS transition duration defined below!
-            },
+        expandFilters(index) {
+            // For the accordion animation to work, overflow:hidden must be set on the wrapping element.
+            // However, some filter elements like sliders don't display properly if the overflow is hidden
+            // (due to tooltips etc), so we need to set the overflow to visible on the open set of filters
+            // immediately *after* the CSS transition (300ms) ends. When a new filter set is opened, the
+            // overflow:visible override needs to be removed immediately, before the transition accordion
+            // animation begins...
+            let $this = this;
+            let previousIndex = this.currentFilterIndex;
+            this.filterWrappers[previousIndex].style.removeProperty('overflow');
+            this.currentFilterIndex = index;
+            setTimeout(function() {
+                $this.filterWrappers[index].style.overflow = 'visible';
+            }, 300); // Keep this value in sync with the CSS transition duration defined below!
         },
+    },
 
-    }
+}
 </script>
 
 <style lang="stylus" scoped>
diff --git a/resources/views/components/cart-add.blade.php b/resources/views/components/cart-add.blade.php
index 985fc04..16e3cc1 100644
--- a/resources/views/components/cart-add.blade.php
+++ b/resources/views/components/cart-add.blade.php
@@ -1,14 +1,40 @@
-<button data-ref="{{ $reference }}" data-product-id="{{ $id }}" class="btn cart-add" :class="{ 'pointer-events-none bg-grey-disabled' : (!isNaN(price) && !statusConfig) || (price && !user) }">
+@php
+    if(isset($price)) {
+        $btnText = __('Ajouter au panier');
+        if(isset($options) && $options)
+            $btnText = __('Configurer le produit');
+    } else {
+        $btnText = __('Ajouter à ma sélection');
+    }
+@endphp
+
+@if(\App\Models\Client::getClientConnected())
+    @if(isset($template) && $template === "product-detail")
+    <button data-ref="{{ $reference }}" data-product-id="{{ $id }}" class="btn cart-add" :class="{ 'pointer-events-none bg-grey-disabled' : (!isNaN(price) && !statusConfig) }">
+    @elseif(isset($template) && $template === "miniature" && $options)
+    <a href="{{ $link }}" class="btn text-center">
+    @else
+    <button data-ref="{{ $reference }}" data-product-id="{{ $id }}" class="btn cart-add">
+    @endif
         <span class="btn-text relative">
             <span class="add">
-                @if(isset($price))
-                    {{ __('Ajouter au panier') }}
-                @else
-                    {{ __('Ajouter à ma sélection') }}
-                @endif
+                {{ $btnText }}
             </span>
             <span class="added top-0 left-0 w-full h-full inline-flex items-center justify-center hidden" style="top:-2px;">
                 @svg('tick', 'w-4 mr-3 inline left-0') <span>{{ __('Produit ajouté') }}</span>
             </span>
         </span>
-</button>
+    @if(isset($template) && $template === "miniature" && $options)
+    </a>
+    @else
+    </button>
+    @endif
+@else
+    <button class="btn pointer-events-none bg-grey-disabled">
+        <span class="btn-text relative">
+            <span class="add">
+                {{ $btnText }}
+            </span>
+        </span>
+    </button>
+@endif
diff --git a/resources/views/components/item-cart.blade.php b/resources/views/components/item-cart.blade.php
index cda2bf1..f49baa4 100644
--- a/resources/views/components/item-cart.blade.php
+++ b/resources/views/components/item-cart.blade.php
@@ -87,7 +87,7 @@
                             {{ __('Modifier ce panier') }}
                         </a>
                         @isset($item['total'])
-                            <a href="" class="btn">{{ __('Passer commande') }}</a>
+                            <a href="#" class="btn" data-id="{{ $item['id'] }}" @click.self.prevent="savedCartToCurrent">{{ __('Passer commande') }}</a>
                         @else
                             <a href="" class="btn">{{ __('Demander un devis') }}</a>
                         @endisset
diff --git a/resources/views/pages/category.blade.php b/resources/views/pages/category.blade.php
index 98585be..201a937 100644
--- a/resources/views/pages/category.blade.php
+++ b/resources/views/pages/category.blade.php
@@ -1,9 +1,5 @@
 @extends('layouts/app')
 
-@php
-//    dd(json_encode($filters, JSON_THROW_ON_ERROR),json_encode($filter_results));
-@endphp
-
 @section('content')
 
     @intro(['padding' => 'pb-1v'])
@@ -23,7 +19,7 @@
                                     'results' => __('résultats'),
                                     'no_results' => __('Aucun produit ne correspond aux filtres sélectionnés')
                                 ])'>
-                    @endif
+                @endif
 
                     {{-- Product Grid --}}
                     <grid cols="auto" class="products-grid mt-6 sm:mt-2">
diff --git a/resources/views/pages/product-detail.blade.php b/resources/views/pages/product-detail.blade.php
index 81d395d..e3fa87c 100644
--- a/resources/views/pages/product-detail.blade.php
+++ b/resources/views/pages/product-detail.blade.php
@@ -1,6 +1,11 @@
 @php
     $technical_sheet = $product->getMediaUrl('technical_sheet', false);
     $specs = $product->json;
+    $template = $view_name;
+    $options = false;
+    if($product->basic_selling_price && $product->json) {
+        $options = true;
+    }
 @endphp
 
 @extends('layouts/app')
@@ -51,30 +56,32 @@
 
                 @auth('web-clients')
                     @if($product->basic_selling_price)
-                        <div class="opt-configurator bg-grey-200 p-12 mb-8">
-                            <div class="opt-group">
-                                @foreach($specs as $spec)
-                                    <div class="opt-group">
-                                        <label class="opt-name mb-2 inline-block">
-                                            {{  \Illuminate\Support\Str::ucfirst( $spec['name_fr']) }}
-                                        </label>
-                                        <div>
-                                            <select class="opt-select" v-on:change="changePrice">
-                                                <option selected disabled value="">Sélectionner</option>
-                                                @foreach($spec['options'] as $option)
-                                                    @if($option['name_fr'] != "")
-                                                        <option data-price="{{ $option['sale_price'] }}" data-ref="{{ $option['ref'] }}">
-                                                            {{ $option['name_fr'] }}
-                                                            {{ floatval($option['sale_price']) > 0 ? '(+'.$option['sale_price'].' € HT)' : '' }}
-                                                        </option>
-                                                    @endif
-                                                @endforeach
-                                            </select>
+                        @if($specs)
+                            <div class="opt-configurator bg-grey-200 p-12 mb-8">
+                                <div class="opt-group">
+                                    @foreach($specs as $spec)
+                                        <div class="opt-group">
+                                            <label class="opt-name mb-2 inline-block">
+                                                {{  \Illuminate\Support\Str::ucfirst( $spec['name_fr']) }}
+                                            </label>
+                                            <div>
+                                                <select class="opt-select" v-on:change="changePrice">
+                                                    <option selected disabled value="">Sélectionner</option>
+                                                    @foreach($spec['options'] as $option)
+                                                        @if($option['name_fr'] != "")
+                                                            <option data-price="{{ $option['sale_price'] }}" data-ref="{{ $option['ref'] }}">
+                                                                {{ $option['name_fr'] }}
+                                                                {{ floatval($option['sale_price']) > 0 ? '(+'.$option['sale_price'].' € HT)' : '' }}
+                                                            </option>
+                                                        @endif
+                                                    @endforeach
+                                                </select>
+                                            </div>
                                         </div>
-                                    </div>
-                                @endforeach
+                                    @endforeach
+                                </div>
                             </div>
-                        </div>
+                        @endif
                         <div class="opt-infos mb-8">
                             <div class="opt-ref text-navy" v-cloak>{{ __('Référence') }} : <span ref="refProduct" data-ref="{{ $product->reference }}">@{{ ref }}</span></div>
                             <div class="opt-price text-navy">
@@ -91,7 +98,7 @@
                 @endauth
 
                 @if(config('features.quote'))
-                    <cart-add :id="$product->id" :reference="$product->reference" :price="$product->basic_selling_price"></cart-add>
+                    <cart-add :id="$product->id" :reference="$product->reference" :price="$product->basic_selling_price" template="product-detail"></cart-add>
                     <span
                         data-tooltip="{{__('Ajoutez un ou plusieurs produits à votre sélection, ajustez les quantités et obtenez un devis.')}}"
                         class="font-display text-lg inline-block align-middle rounded-full border-grey-dark border-2 h-8 w-8 text-center ml-6">?</span>
diff --git a/resources/views/partials/product-link.blade.php b/resources/views/partials/product-link.blade.php
index d0c0029..5263a8b 100644
--- a/resources/views/partials/product-link.blade.php
+++ b/resources/views/partials/product-link.blade.php
@@ -1,6 +1,9 @@
 @php
-    $technical_sheet = $product->getMediaUrl('technical_sheet', false)
+    $technical_sheet = $product->getMediaUrl('technical_sheet', false);
+    $template = $view_name;
+    $options = false;
 @endphp
+
 <div data-product-id="{{ $id }}" class="product-grid-item bg-grey-200">
     {{-- Image holder --}}
     <a href="{{ $product->getEntity()->getURLAttribute() }}" class="">
@@ -13,14 +16,23 @@
     </a><!--
     There shoulln't be any space between closing of a and opening of div
     {{-- Product details --}}
-    --><div class="product-content p-4">
+    --><div class="product-content p-4 text-navy">
         <h3><a class="text-navy" href="{{ $product->getEntity()->URL }}">{{ $product->get('reference') }}</a>
         </h3>
         <div class="product-highlights text-sm">
             {{$product->get('name')}}
         </div>
+        <div class="product-price-info">
+            @if($product->basic_selling_price && $product->json)
+                @php($options = true)
+                <p class="no-m text-sm mt-5">{{ __('Produit configurable') }}</p>
+                <p>{{ __('A partir de :').' '.$product->basic_selling_price }}€ HT</p>
+            @elseif($product->basic_selling_price && !$product->json)
+                <p class="mt-5">{{ __('Votre prix :').' '. $product->basic_selling_price }}€ HT</p>
+            @endif
+        </div>
         @if(config('features.quote'))
-            <cart-add :id="$product->id" :reference="$product->reference"></cart-add>
+            <cart-add :id="$product->id" :reference="$product->reference" :link="$product->getEntity()->URL" :price="$product->basic_selling_price" :options="$options" template="miniature"></cart-add>
         @endif
         <div class="links mt-4">
             <div class="link">
-- 
2.39.5