I am trying to merge storefront filtering and sorting in my custom theme collections page in Shopify.
Both things work, but the 'sort_by' parameters are overwriting the filtering ones when these are multiple.
i.e of how the URL should look once filtering with two parameters (sizes XXS and XL) and sorting by ascending price:
../collections/new-arrivals?filter.v.option.size=XXS&filter.v.option.size=XL&sort_by=price-ascending
But this is what happens when sorting:
../collections/new-arrivals?filter.v.option.size=XXS&sort_by=price-ascending
Second filtering parameter gets overwritten by the sorting one.
Pasting below my code for the JS piece that triggers the sorting behaviour.
// sortby
$(function() {
Shopify.queryParams = {};
if(location.search.length) {
for(var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
aKeyValue = aCouples[i].split('=');
if (aKeyValue.length > 1) {
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}
document.querySelector('.sort-by').addEventListener('change', function(e) {
var value = e.currentTarget.value;
Shopify.queryParams.sort_by = value;
location.search = new URLSearchParams(Shopify.queryParams).toString();
});
})
Has someone ever tried to achieve something like this?
I would appreciate any help.
Thanks in advance,
Related
Had a tough time with this so thought I would ask for a better solution than mine and also be able to post an answer for those it might help.
Problem:
Working with KendoUI JSP Grid. Goal add server side pagination and sorting
I need to be able to have a GET request as follows:
URL Expected by Spring Data Rest
http://localhost:8080/api/accounts?page=1&size=20&sort=firstName,desc -> or asc
URL Presented by default from KendoUI
http://localhost:8080/api/accounts?take=20&skip=0&page=1&pageSize=20&sort%5B0%5D%5Bfield%5D=firstName&sort%5B0%5D%5Bdir%5D=asc
This is for Server Side sorting for a Spring Data Rest project. Currently the Sorting portion is showing up as an array. How do you change the way the sorting URL is formed?
After a fair amount of coding by Google came up with this as a solution. Please correct me if this is not correct.
Within KendoUI Grid you can modify a URL via the parameterMap. Below is how this will format the KendoUI URL to what Spring Data Rest is expecting.
<script>
function parameterMap(data, operation) {
if (operation == "read") {
if (data.sort && data.sort.length > 0) {
var p = {};
if(!data.sort && data.sort.length < 0) {
p = data.page(1);
} else {
p = data.page
}
var values = {};
values["page"] = p;
values["size"] = data.pageSize;
values["sort"] = data.sort[0]['field'] + ',' + data.sort[0]['dir'];
return values;
} else {
var values = {};
values["page"] = data.page;
values["size"] = data.pageSize;
return values;
}
}
}
</script>
The else portion will ensure that pagination will still work. Also setting values["page"] = p; within the sorting portion ensures that when you sort it takes you to the 1st page of the sort.
The problem I still have is if you load the page then navigate to a page then hit sort it takes you to page 1 of the sorted data. If you now navigate to another page in the sorted data set and then choose to sort again it will not take you to page one of the new sort.
I have implemented a Web - Application which features a GridPanel which can be grouped or ungrouped and where the rows should be sorted alphanumerically (like the standard grid sorting function does) but with the exception that some rows which represent summary rows should not be sorted at all and should stay at the same row position.
To archieve this i wanted to write a custom row sorting function for the gridpanel. Can someone give me a hint how to archive this ? (overwrite which functions, how to implement). Or does anybody know literature, tutorials, examples etc. or could share source code on how this can be done ?
I am using ExtJs Version 3.4.
Many thanks in advance.
Cheers,
Seha
To sort the store data that underlies a gridpanel, the Ext.data.Store.sort() method is used. You can override that method in your particular store instance.
The other possibility is to set remoteSort to true and sort the data on the server.
Here is some sample code that worked for me in ExtJS 3.4.
You can use this in a GridPanel or EditorGridPanel, I placed it in the constructor using an inherited class, but you should be able to add it if you are instantiating a vanilla grid as well, just make sure you are not using the global variable scope.
Make sure the grid variable contains a reference to your grid (after it has been defined).
// Apply column 'sortBy' overrides
var column, columns = grid.getColumnModel() && grid.getColumnModel().config;
var sortColumns = {}, sortByInfo = {};
if (columns && columns.length) {
for (var i = 0; i < columns.length; i++) {
column = columns[i];
// Do we have a 'sortBy' definition on a column?
if (column && column.dataIndex && column.sortBy) {
// Create two hashmap objects to make it easier
// to find this data when sorting
// (using 'if (prop in object)' notation)
sortColumns[column.dataIndex] = column.sortBy;
sortByInfo[column.sortBy] = column.dataIndex;
}
}
if (!$.isEmptyObject(sortColumns)) {
// Override the 'getSortState()' helper on the store, this is needed to
// tell the grid how its currently being sorted, otherwise it
// will get confused and think its sorted on a different column.
grid.store.getSortState = function() {
if (this.sortInfo && this.sortInfo.field in sortByInfo)
return { field: sortByInfo[this.sortInfo.field], direction: this.sortInfo.direction || 'ASC' };
return this.sortInfo;
}
// Override the default sort() method on the grid store
// this one uses our own sorting information instead.
grid.store.sort = function(field, dir) {
var sort = this.constructor.prototype.sort;
if (field in sortColumns) {
return sort.call(this, sortColumns[field], dir);
} else {
return sort.call(this, field, dir);
}
}
}
}
Then just add a sortBy entry to your column definition:
colModel: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{
header: 'Name',
dataIndex: 'name',
width: 350
}, {
header: 'Code',
dataIndex: 'code_summary',
sortBy: 'code_sort_order',
width: 100
}, {
header: 'Start Date',
dataIndex: 'start_date',
width: 85
}]
}),
PS: dont forget to add the field you are sorting on (code_sort_order) to your data store.
is it possible to use the replication filter feature of couchdb (http://wiki.apache.org/couchdb/Replication#Filtered_Replication) by requesting a view, f.e.:
.../_view/candidates?filter=hrtool/myfilter
This would be nice to filter the documents based on the usersession or userrole
Thanks in advance
fadh
That is possible with a _list function.
List functions are Javascript code which pre-process the view output before sending it to the client. You can modify the view output in any way, such as by filtering some rows.
function(head, req) {
// lists.filtered: filter view output by using a replication filter.
var ddoc = this; // A common trick to explicitly identify the design document.
function error(reason) {
start({"code":400, "headers":{"content-type":"application/json"}});
send(JSON.stringify({"error":reason}));
}
var filter_name = req.query.filter;
if(!filter_name)
return error("Need filter_name parameter");
var filter_src = ddoc.filters[filter_name];
if(!filter_src)
return error("Invalid filter_name: " + filter_name);
// Not 100% sure on this, you could also use new Function(args, src);
// In the worst-case, the couchapp tool has the !code tool to copy code.
var filter = eval(filter_src); // Not 100% sure on this
var row;
start({"headers":{"content-type":"application/json"}});
send('{"rows":[\r\n');
var first = true;
while(row = getRow()) {
if(filter(row)) { // Or perhaps use include_docs=true and filter(row.doc)
if(! first)
send(",\r\n");
first = false;
send(JSON.stringify(row));
}
}
send("]}\r\n");
}
Use this list "filter" like any filter function:
GET /db/_design/example/_list/filtered/candidates?filter=myfilter&include_docs=true
I'm working on an ASP.Net MVC application. My action is returning a view with a model that is an array of objects (a class with properties like Name, ID, IsViewable).
var model = #Model.ToJson(); // done via extension call
I want to observe this array, so whenever it changes I can update a table that has been bound to a template.
var viewModel = {
accounts = ko.observableArray(model)
}
This works just fine for adding and deleting elements from the array. However, I also want the template to update when a property in one of the accounts changes (ie, Name or ID).
On the KnockoutJS website, it says: Of course, you can make those properties observable if you wish, but that’s an independent choice. This is what I cannot figure out how to do.
I tried something like this with no avail:
var viewModel = {
accounts = ko.oservableArray([])
}
for(var i = 0; i < model.length; i++) {
ko.observableArray(model[i]);
viewModel.accounts.push(model[i]);
}
I can post the template and the table if it's needed.
You should look into the knockout.mapping plugin. I think it does everything you are looking to do.
I ended up getting this to work, so I thought I would share with anyone that might have having the same problem.
You need to wrap your array items in a JavaScript class. Then in the constructor, set each property to obserable:
var model = #Model.ToJson();
var viewModel = {
accounts = ko.observableArray(ko.utils.arrayMap(model, function(account) {
return new AccountWrapper(account);
}))
};
function AccountWrapper(account) {
this.Property1 = ko.observable(account.Propery1);
this.Property2 = ko.observable(account.Propery2);
this.Property3 = ko.observable(account.Propery3);
}
ko.applyBindings(viewModel);
And if you want to modify one of the items directly to see the change, you could do something like:
viewModel.accounts()[3].Name('My Name Changed');
And you can still get notified when items are added or remove:
viewModel.accounts.remove(viewModel.accounts()[4]);
Here's another approach that works and doesn't require the mapping plugin:
var model = #Model.ToJson();
var viewModel = {
accounts: ko.observableArray([]),
fromJS: function(js) {
for (var i = 0; i < js.length; i++) {
this.accounts.push({
Property1: ko.observable(js[i].Property1),
Property2: ko.observable(js[i].Property2),
Property3: ko.observable(js[i].Property3)
});
}
}
};
viewModel.fromJS(model);
ko.applyBindings(viewModel);
I'm displaying a table with multiple rows and columns. I'm using a JQUERY plugin called uiTableFilter which uses a text field input and filters (shows/hides) the table rows based on the input you provide. All you do is specify a column you want to filter on, and it will display only rows that have the text field input in that column. Simple and works fine.
I want to add a SECOND text input field that will help me narrow the results down even further. So, for instance if I had a PETS table and one column was petType and one was petColor -- I could type in CAT into the first text field, to show ALL cats, and then in the 2nd text field, I could type black, and the resulting table would display only rows where BLACK CATS were found. Basically, a subset.
Here is the JQUERY I'm using:
$("#typeFilter").live('keyup', function() {
if ($(this).val().length > 2 || $(this).val().length == 0)
{
var newTable = $('#pets');
$.uiTableFilter( theTable, this.value, "petType" );
}
}) // end typefilter
$("#colorFilter").live('keyup', function() {
if ($(this).val().length > 2 || $(this).val().length == 0)
{
var newTable = $('#pets');
$.uiTableFilter( newTable, this.value, "petColor" );
}
}) // end colorfilter
Problem is, I can use one filter, and it will display the correct subset of table rows, but when I provide input for the other filter, it doesn't seem to recognize the visible table rows that are remaining from the previous column, but instead it appears that it does an entirely new filtering of the original table. If 10 rows are returned after applying one filter, the 2nd filter should only apply to THOSE 10 rows. I've tried LIVE and BIND, but not working.
Can anyone shed some light on where I'm going wrong? Thanks!
The uiTableFilter plugin doesn't support what you're trying to do. A quick look at the source reveals this:
elems.each(function(){
var elem = jQuery(this);
jQuery.uiTableFilter.has_words(getText(elem), words, false)
? matches(elem)
: noMatch(elem);
});
and that expands to (essentially) this:
elems.each(function(){
var elem = jQuery(this);
jQuery.uiTableFilter.has_words(getText(elem), words, false)
? elem.show()
: elem.hide();
});
So all it does is spin through all the rows, .show() those that match, and .hide() those that don't; uiTableSorter doesn't pay attention to the current shown/hidden state of the rows and there's no way to tell it to filter on multiple columns.
If you really need your desired functionality then you can modify the plugin's behavior (the code is pretty small and simple) or just write your own. Here's a stripped down and simplified version that supports multiple filters and is a more conventional jQuery plugin than uiTableFilter:
(function($) {
$.fn.multiFilter = function(filters) {
var $table = $(this);
return $table.find('tbody > tr').each(function() {
var tr = $(this);
// Make it an array to avoid special cases later.
if(!$.isArray(filters))
filters = [ filters ];
howMany = 0;
for(i = 0, f = filters[0]; i < filters.length; f = filters[++i]) {
var index = 0;
$table.find('thead > tr > th').each(function(i) {
if($(this).text() == f.column) {
index = i;
return false;
}
});
var text = tr.find('td:eq(' + index + ')').text();
if(text.toLowerCase().indexOf(f.word.toLowerCase()) != -1)
++howMany;
}
if(howMany == filters.length)
tr.show();
else
tr.hide();
});
};
})(jQuery);
I'll leave error handling and performance as an exercise for the reader, this is just an illustrative example and I wouldn't want to get in the way of your learning. You could wire it up something like this:
$('#type').keyup(function() {
$('#leeLooDallas').multiFilter({ column: 'petType', word: this.value });
});
$('#color').keyup(function() {
$('#leeLooDallas').multiFilter([
{ column: 'petType', word: $('#type').val() },
{ column: 'petColor', word: this.value }
]);
});
And here's a live example (which assumes that you're going to enter something in "type" before "color"): http://jsfiddle.net/ambiguous/hdFDt/1/