I've created a JavaScript Filter object and including it in laravel blade.php file. When trying to access the object on windows 10 Chrome it works, but on IOS Safari or Chrome i still get undefined.
var filter = new Filter();
var handlesSlider = document.getElementById('filter-price');
var min = parseInt(handlesSlider.dataset.min);
var max = parseInt(handlesSlider.dataset.max) + 1;
noUiSlider.create(handlesSlider, {
start: [min, max],
tooltips: true,
connect: true,
margin: 5,
range: {
'min': min,
'max': max
},
format: {
// 'to' the formatted value. Receives a number.
to: function (value) {
return `${Math.round(value)}€`
},
// 'from' the formatted value.
// Receives a string, should return a number.
from: function (value) {
return Number(value.replace(',-', ''));
}
}
});
var json = {!! $json !!};
handlesSlider.noUiSlider.on('change.one', function (e) {
const min = e[0].replace("€", "");
const max = e[1].replace("€", "");
var filteredProducts = json
.filter(product =>
parseInt(product.price) >= min &&
parseInt(product.price) <= max);
filter.render(document.querySelector("{{ $selector }}"), filteredProducts);
});
filter.render(document.querySelector("{{ $selector }}"), json);
alert(filter);
And Including it in another file as:
@include('components.filter', ['min' => $min, 'max' => $max, 'json' =>
$products->toJson(), 'selector' => '.product-list__products'])
On desktop i get clear alert object object, but on mobile undefined or no alert at all.
The solution was that, ios 13.1.3 cannot understand JS Arrow functions and also modules.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With