formatting plugins added and some improvisation done

packages/Webkul/Core/src/Core.php

@@ -629,28 +629,6 @@ public function currencySymbol($currency)
         return $formatter->getSymbol(\NumberFormatter::CURRENCY_SYMBOL);
     }
 
-    /**
-     * Format and convert price with currency symbol.
-     *
-     * @return array
-     */
-    public function getAccountJsSymbols()
-    {
-        $formatter = new \NumberFormatter(app()->getLocale(), \NumberFormatter::CURRENCY);
-
-        $pattern = $formatter->getPattern();
-
-        $pattern = str_replace('¤', '%s', $pattern);
-
-        $pattern = str_replace('#,##0.00', '%v', $pattern);
-
-        return [
-            'symbol'  => $this->currencySymbol($this->getCurrentCurrencyCode()),
-            'decimal' => $formatter->getSymbol(\NumberFormatter::DECIMAL_SEPARATOR_SYMBOL),
-            'format'  => $pattern,
-        ];
-    }
-
     /**
      * Format and convert price with currency symbol.
      *

packages/Webkul/Shop/src/Resources/assets/js/app.js

@@ -3,15 +3,6 @@
  */
 import.meta.glob(["../images/**", "../fonts/**"]);
 
-/**
- * We'll load the axios HTTP library which allows us to easily issue requests
- * to our Laravel back-end. This library automatically handles sending the
- * CSRF token as a header based on the value of the "XSRF" token cookie.
- */
-import axios from "axios";
-window.axios = axios;
-window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
-
 /**
  * Main vue bundler.
  */
@@ -89,16 +80,18 @@ window.app = createApp({
 });
 
 /**
- * Global components registration;
+ * Global plugins registration.
  */
-app.component('VForm', Form);
-app.component('VField', Field);
-app.component('VErrorMessage', ErrorMessage);
+import Shop from "./plugins/shop";
+import Axios from "./plugins/axios";
+[Shop, Axios].forEach((plugin) => app.use(plugin));
 
 /**
- * Global properties registration.
+ * Global components registration;
  */
-app.config.globalProperties.$axios = axios;
+app.component("VForm", Form);
+app.component("VField", Field);
+app.component("VErrorMessage", ErrorMessage);
 
 /**
  * Load event, the purpose of using the event is to mount the application

packages/Webkul/Shop/src/Resources/assets/js/plugins/axios.js

@@ -0,0 +1,16 @@
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+import axios from "axios";
+window.axios = axios;
+window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+
+const Axios = {
+    install(app) {
+        app.config.globalProperties.$axios = axios;
+    },
+};
+
+export default Axios;

packages/Webkul/Shop/src/Resources/assets/js/plugins/shop.js

@@ -0,0 +1,27 @@
+const Shop = {
+    install(app) {
+        app.config.globalProperties.$shop = {
+            /**
+             * Generates a formatted price string using the provided price, localeCode, and currencyCode.
+             *
+             * @param {number} price - The price value to be formatted.
+             * @param {string} localeCode - The locale code specifying the desired formatting rules.
+             * @param {string} currencyCode - The currency code specifying the desired currency symbol.
+             * @returns {string} - The formatted price string.
+             */
+            formatPrice: (price, localeCode = null, currencyCode = null) => {
+                if (! localeCode) {
+                    localeCode = document.querySelector('meta[http-equiv="content-language"]').content ?? 'en';
+                }
+
+                if (! currencyCode) {
+                    currencyCode = document.querySelector('meta[name="currency-code"]').content ?? 'USD';
+                }
+
+                return new Intl.NumberFormat(localeCode, { style: 'currency', currency: currencyCode }).format(price);
+            },
+        };
+    },
+};
+
+export default Shop;

packages/Webkul/Shop/src/Resources/views/categories/filters.blade.php

@@ -102,6 +102,7 @@ class="w-full text-[16px] text-gray-900 p-2 pl-0 cursor-pointer"
             <template v-else>
                 <x-shop::range-slider
                     ::key="refreshKey"
+                    default-type="price"
                     ::default-allowed-max-range="allowedMaxPrice"
                     ::default-min-range="minRange"
                     ::default-max-range="maxRange"

packages/Webkul/Shop/src/Resources/views/components/layouts/index.blade.php

@@ -15,6 +15,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <meta name="base-url" content="{{ url()->to('/') }}">
+    <meta name="currency-code" content="{{ core()->getCurrentCurrencyCode() }}">
     <meta http-equiv="content-language" content="{{ app()->getLocale() }}">
 
     @stack('meta')

packages/Webkul/Shop/src/Resources/views/components/range-slider/index.blade.php

@@ -11,7 +11,7 @@
 
                 <p
                     class="text-[14px] font-semibold"
-                    v-text="`${minRange} - ${maxRange}`"
+                    v-text="rangeText"
                 >
                 </p>
             </div>
@@ -59,6 +59,7 @@ class="absolute w-full h-[4px] appearance-none pointer-events-none bg-transparen
             template: '#v-range-slider-template',
 
             props: [
+                'defaultType',
                 'defaultAllowedMinRange',
                 'defaultAllowedMaxRange',
                 'defaultMinRange',
@@ -69,6 +70,8 @@ class="absolute w-full h-[4px] appearance-none pointer-events-none bg-transparen
                 return {
                     gap: 0.1,
 
+                    supportedTypes: ['integer', 'float', 'price'],
+
                     allowedMinRange: parseInt(this.defaultAllowedMinRange ?? 0),
 
                     allowedMaxRange: parseInt(this.defaultAllowedMaxRange ?? 100),
@@ -79,11 +82,88 @@ class="absolute w-full h-[4px] appearance-none pointer-events-none bg-transparen
                 };
             },
 
+            computed: {
+                rangeText() {
+                    /**
+                     * If someone is passing invalid props, this case will check first if they are valid, then continue.
+                     */
+                    if (this.isTypeSupported()) {
+                        switch (this.defaultType) {
+                            case 'price':
+                                return `${this.$shop.formatPrice(this.minRange)} - ${this.$shop.formatPrice(this.maxRange)}`;
+
+                            case 'float':
+                                return `${parseFloat(this.minRange).toFixed(2)} - ${parseFloat(this.maxRange).toFixed(2)}`;
+
+                            default:
+                                return `${this.minRange} - ${this.maxRange}`
+                        }
+                    }
+
+                    /**
+                     * Otherwise, we will load the default formatting.
+                     */
+                    return `${this.minRange} - ${this.maxRange}`;
+                },
+            },
+
             mounted() {
                 this.handleProgressBar();
             },
 
             methods: {
+                getData() {
+                    return {
+                        allowedMinRange: this.allowedMinRange,
+                        allowedMaxRange: this.allowedMaxRange,
+                        minRange: this.minRange,
+                        maxRange: this.maxRange,
+                    };
+                },
+
+                getFormattedData() {
+                    /**
+                     * If someone is passing invalid props, this case will check first if they are valid, then continue.
+                     */
+                     if (this.isTypeSupported()) {
+                        switch (this.defaultType) {
+                            case 'price':
+                                return {
+                                    formattedAllowedMinRange: this.$shop.formatPrice(this.allowedMinRange),
+                                    formattedAllowedMaxRange: this.$shop.formatPrice(this.allowedMaxRange),
+                                    formattedMinRange: this.$shop.formatPrice(this.minRange),
+                                    formattedMaxRange: this.$shop.formatPrice(this.maxRange),
+                                };
+
+                            case 'float':
+                                return {
+                                    formattedAllowedMinRange: parseFloat(this.allowedMinRange).toFixed(2),
+                                    formattedAllowedMaxRange: parseFloat(this.allowedMaxRange).toFixed(2),
+                                    formattedMinRange: parseFloat(this.minRange).toFixed(2),
+                                    formattedMaxRange: parseFloat(this.maxRange).toFixed(2),
+                                };
+
+                            default:
+                                return {
+                                    formattedAllowedMinRange: this.allowedMinRange,
+                                    formattedAllowedMaxRange: this.allowedMaxRange,
+                                    formattedMinRange: this.minRange,
+                                    formattedMaxRange: this.maxRange,
+                                };
+                        }
+                    }
+
+                    /**
+                     * Otherwise, we will load the default formatting.
+                     */
+                    return {
+                        formattedAllowedMinRange: this.allowedMinRange,
+                        formattedAllowedMaxRange: this.allowedMaxRange,
+                        formattedMinRange: this.minRange,
+                        formattedMaxRange: this.maxRange,
+                    };
+                },
+
                 handle(rangeType) {
                     this.minRange = parseInt(this.$refs.minRange.value);
 
@@ -108,12 +188,14 @@ class="absolute w-full h-[4px] appearance-none pointer-events-none bg-transparen
 
                 change() {
                     this.$emit('change-range', {
-                        allowedMinRange: this.allowedMinRange,
-                        allowedMaxRange: this.allowedMaxRange,
-                        minRange: this.minRange,
-                        maxRange: this.maxRange,
+                        ...this.getData(),
+                        ...this.getFormattedData(),
                     });
                 },
+
+                isTypeSupported() {
+                    return this.supportedTypes.includes(this.defaultType);
+                },
             },
         });
     </script>