I build out a custom ecommerce store, which is exported as an theme for shopify! Love it
Everything MIXITUP 3 wise, works fine only one issue left:
Sorting isnāt working properly and Iām really strugling to figure it out ā¦ I tried out diffferent things, but canāt find a solution, Iām a little late on my deadline and guess that this is some small issue. Please help me out!
The sorting works, but it doesnāt sort price values, instead it sorts itās nameā¦
Read only: Read Only Razvajanja
MY CODE:
<script>
$(".input").on("keyup", function() {
var v = $(this).val();
$(".results").removeClass("results");
$(".noresults").removeClass("noresults");
$(".mix").each(function() {
if (v != "" && $(this).text().search(new RegExp(v, 'gi')) != -1) {
$(this).addClass("results");
} else if (v != "" && $(this).text().search(v) !=1) {
$(this).addClass ("noresults");
}
});
});
// Reusable function to convert any string/text to css-friendly format
var conv = function (str) {
if (!str) {
str = 'empty';
}
return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
.replace(/ /g, "-")
.toLowerCase()
.trim();
};
// Creating dynamic elements classes from its categories:
var catArray = document.querySelectorAll('.w-dyn-item .categ');
catArray.forEach( function(elem) {
var text = elem.innerText || elem.innerContent;
var className = conv(text);
if (!isNaN(parseInt(className.charAt(0), 10))) {
className = ("_" + className);
}
elem.closest(".mix").classList.add(className);
});
// Creating a custom data-order attributes from blog titles:
var sortArray = document.querySelectorAll('.prices');
sortArray.forEach( function(sortElem) {
var sortPrice = sortElem.innerText || sortElem.innerContent;
sortElem.closest(".mix").setAttribute('data-price', sortPrice);
});
var filterGroups = document.querySelectorAll('.filter-group');
filterGroups.forEach( function(group) {
group.setAttribute('data-filter-group','');
});
var textInputWrappeer = document.querySelector('.text-input-wrapper');
var containerEl = document.querySelector('.container');
var selectFilter = document.querySelector('.filter_select');
var selectSort = document.querySelector('.sort_select');
var mixer = mixitup(containerEl, {
multifilter: {
enable: true
}
});
// In this example, we must bind 'change' event handlers to
// our <select> elements, then interact with the mixer via
// its .filter() and .sort() API methods.
selectFilter.addEventListener('change', function() {
var selector = selectFilter.value;
mixer.filter(selector);
});
selectSort.addEventListener('change', function() {
var order = selectSort.value;
mixer.sort(order);
});
</script>
I tried out many things, but canāt figure it out, here are my guesses:
First try:
// Creating a custom data-order attributes from blog titles:
var sortArray = document.querySelectorAll(ā.pricesā);
sortArray.forEach( function(sortElem) {
var sortPrice = sortElem.innerText || sortElem.innerContent;
sortElem.closest(ā.mixā).setAttribute(ādata-priceā, sortPrice);
var sortPrice.value = āpriceā;
});
Second try:
// Creating a custom data-order attributes from blog titles:
var sortArray = document.querySelectorAll(ā.pricesā);
sortArray.forEach( function(sortElem) {
var sortPrice = sortElem.innerText || sortElem.innerContent;
sortElem.closest(ā.mixā).setAttribute(ādata-priceā, sortPrice);
sortElem.closest(ā.mixā).setValue(āpriceā);
});
Third try:
// Creating a custom data-order attributes from blog titles:
var sortArray = document.querySelectorAll(ā.pricesā);
sortArray.forEach( function(sortElem) {
var sortPrice = sortElem.innerText || sortElem.innerContent;
sortElem.closest(ā.mixā).setAttribute(ādata-priceā, sortPrice);
var priceValue = sortElem.innerText || sortElem.innerContent;
sortElem.closest(ā.mixā).setValue(āpriceā, priceValue);
});
Fourth try:
// Creating a custom data-order attributes from blog titles:
var sortArray = document.querySelectorAll(ā.pricesā);
sortArray.forEach( function(sortElem) {
var sortPrice = sortElem.innerText || sortElem.innerContent;
sortElem.closest(ā.mixā).setAttribute(ādata-priceā, sortPrice);
if (ādata-priceā) {
// Make a value to the atribute
const dataPrice = document.getElementById(ādata-priceā);
switch (ādata-priceā) {
dataPrice.value = āpriceā;
});
Fifth try:
// Creating a custom data-order attributes from blog titles:
var sortArray = document.querySelectorAll(ā.pricesā);
sortArray.forEach( function(sortElem) {
var sortPrice = sortElem.innerText || sortElem.innerContent;
sortElem.closest(ā.mixā).setAttribute(ādata-priceā, sortPrice);
if (ādata-priceā) {
// Make a value to the atribute
const dataPrice = document.getElementById(ādata-priceā);
switch (ādata-priceā) {
dataPrice.value = āpriceā;
});