Apply multiple filters using the URL in KeystoneJS - keystonejs

I am just starting out with KeystoneJS. I have set up a section "items" and these have multiple relationships in it such as "manufacturer", "type", "category", etc.
While out of the box with Keystone you can filter by any one of these, I want to be able to filter by multiple params using the URL - e.g.
www.site.com/category/blinds/manufacturer/orion/
or
www.site.com/manufacturer/orion/type/venetian
Can anyone bump me in the right direction for how to accomplish this in keystone? Thanks.

app.get('/manufacturer/:manufact/category/:category/type/:type',function(req,res) {
var mymanufacturer= req.params.manufact;
var mycat= req.params.category;
var my type = req.params.type;
});
But the issue is that you must provide both category and type. So you can not use your 2nd url. for that you have to have categor like this.
www.site.com/manufacturer/orion/category/all/type/venetian
Instead You can use URL query like this
www.site.com?manufacturer=orion?category=blank&type= venetian
app.get('/', function(req, res) {
var mymanufacturer= req.query.manufacture;
var mycat= req.query.category;
var my type = req.query.type;
});

Related

The Prismic fulltext predicate keeps giving me errors about unexpected fields when I Use it to try to query

I am trying to query with the Prismic predicate.fulltext using Vuejs
this is the first time am using the predicate but the documentation about what the fulltext predicate needs seems to be confusing. Here is my code.
async searchByQuery(query) {
const fullTextResult = await this.$prismic.client.get({
predicates: this.$prismic.predicate.not("articles.article_title", query),
});
console.log(fullTextResult);
},
where articles is my custom type and article_title is a field in my custom type.
That is what I understood from the documentation on how to do it but then I get an unexpected error
I would like a clarification on why this does not work and what the documentation really mean.
Am Using Vue3 by the way and that means am using the updated prismicio/client
You are pretty close!
Using Vue 3, you're looking at something like that:
export default {
methods: {
async searchByQuery(query) {
const fullTextResult = await this.$prismic.client.get({
predicates:
this.$prismic.predicate.fulltext(
"my.articles.article_title",
query
)
});
console.log(fullTextResult);
}
}
};
Basically, you need to prefix articles.article_title with my. to indicate it's a field on one of your document type, and change the predicate you're using to precidate.fulltext instead of predicate.not (assuming you want to run a fulltext search)
Let me know if that helps :)

Algolia autocomplete - how to remove "administrative" municipalities/districts from autocomplete suggestions

I am integrating Algolia autocomplete and do not like the look of the autocomplete suggestions.
Specifically, I don't want the administrative municipalities and districts to appear in the suggestions, only address, city, country.
How can I omit the administrative query?
For example, if I type in "Sarajevo" the suggestions appear as "Sarajevo, Kanton of Sarajevo, Bosnia and Herzegovina" - I want it to appear as simply "Sarajevo, Bosnia and Herzegovina".
You should use the templates option of the Places constructor.
Here's a simple example:
const placesInstance = places({
...
templates: {
suggestion: function(s) {
return [s.highlight.name, s.highlight.city, s.highlight.country].join(', ');
}
}
});
Have a look at the function that is used by default for a more elaborate sample:
https://github.com/algolia/places/blob/master/src/formatDropdownValue.js
To solve the problem of once you select a 'place', the administrative level gets displayed in the search bar., you can leverage on jquery's focusout event.
Example
var cityCountry ,searchInput;
searchInput = $('#search-input'); //our search field
//Initialize
var placesAutocomplete = places({
// appId: 'YOUR_PLACES_APP_ID',
// apiKey: 'YOUR_PLACES_API_KEY',
container: document.querySelector('#search-input'),
});
//Attach required data to cityCountry
placesAutocomplete.on('change', function(e){
let suggestion,city,country;
suggestion = e.suggestion;
city = suggestion.name;
country= suggestion.country;
cityCountry = city+', '+country;
});
//Manipulate the search field on focusout
searchInput.on('focusout', function(){
setTimeout(function () {
searchInput.val(cityCountry);
},1)
});
Note, it won't work without the setTimeout().

Rendering results from an API after using a search function with Backbone.js

I am new to Backbone.js and I am trying to create an application that can check if you completed the videos games you control.
I am using an API to retrieve any information about videogames.
I want to be able to search for a game, for example "Zelda". It should then list every Zelda game.
I get stuck because I don't know how to get the search function to work properly with the API and I don't know how to render it properly. I have written a template for the games that should render.
I have no clue what to do know, or if I'm even on the right track. I am not asking for someone to code it completely, I am asking for a step in the right direction.
Let me know if you need more code.
library_view.js
var LibraryView = Backbone.View.extend({
el:$("#games"),
url: url = "http://www.giantbomb.com/api/search/?api_key=[KEY]",
events:{
"keypress input":"findGames"
},
findGames:function(e){
if(e.which == 13){
query = $(".searchfield").val()
field_list = "name,platforms"
resources = "game"
url = url +"&query="+ query +"field_list"+ field_list +"resources"+ resources
}
},
index.html
<input type="search" placeholder="Find a game" class="searchfield">
It looks like you are mashing together a View and a Model.
A view, for instance, shouldn't have URL inside it, it doesn't know what to do with it.
The correct path would be something roughly like so:
var SearchModel = Backbone.Model.extend();
var LibraryView = Backbone.View.extend({
el: $("#games"),
events:{
"keypress input":"findGames"
},
findGames: function(e){
// get query, field_list, resources
var searchModel = new SearchModel()
searchModel.fetch({
url: "http://www.giantbomb.com/api/search/?api_key=[KEY]"+"&query="+ query +"field_list"+ field_list +"resources"+ resources
});
// do something with searchModel
}
});
After the fetch, searchModel will hold the data Backbone Model style.
Let's say the returned value from the AJAX call is:
{
"answer": 42
}
Then:
searchModel.get("answer") // = 42
The SearchModel is just an abstraction here as you don't really need it (you can just ajax it). But I put it to help you understand what Model represents, it basically represents only data... It doesn't know what View is.

How to get filtering params for jquery datatable(datatables.net)?

I'm using jquery DataTables (from datatables.net) with server-side processing and ColumnFiltering add-on. I need to add a callback which will compute subtotals based on filtered data. In order to achieve this I want to make a separate ajax call. How can I extract the current ajax parameters?
Assign datatable object to a var on creation, for example:
var oTable = $("selector").dataTable({...});`
Later use this:
var params = oTable.oApi._fnAjaxParameters(oTable.dataTable().fnSettings());
it returns all ajax parameters which would be sent in a normal data loading request for datatables. Make your ajax call like this :
$.post("url",$.param(params),function(response){....});
If you're using DataTables 1.10 (the current version as of this answer), this is now a lot easier to access with the ajax.params() method.
Example from http://datatables.net/reference/api/ajax.params()
var table = $('#example').DataTable( {
ajax: "data.json",
serverSide: true
} );
table.on( 'xhr', function () {
var data = table.ajax.params();
alert( 'Search term was: '+data.search.value );
} );
Based on your question it looks like you might want the ajax ordering parameters as well. The code below assumes you have a datatable called 'your_table'.
$.ajax({
url: "your_url",
data: {
orderColumn: your_table.ajax.params().order[0]['column'],
orderDirection: your_table.ajax.params().order[0]['dir'],
searchText: your_table.ajax.params().search.value
}
});
Thank you MrDerp for your response - helped me with my own table! I had difficulty finding the other parameters so I thought I would share here.
Try this:
table.on( 'xhr', function () {
var data = table.ajax.params();
var filter_values = [];
//suppose you have 10 columns in your datatable
for(i=0;i<10;i++){
search_value = "sSearch_"+i;
filter_values.push(data[search_value])
}
console.log(filter_values);
});

Simple store connected list for dojo

Is there a simpler list type than DataGrid that can be connected to a store for Dojo?
I would like the data abstraction of the store, but I don't need the header and cell stucture. I would like to be more flexible in the representation of the datalines, where maybe each line calls an function to get laid out...
You ask a really good question. I actually have a blog post that is still in draft form called "The DataGrid should not be your first option".
I have done a couple thing using the store to display data from a store in a repeated form.
I have manually built an html table using dom-construct and for each.
var table = dojo.create('table', {}, parentNode);
var tbody = dojo.create('tbody', {}, table); // a version of IE needs this or it won't render the table
store.fetch({ // this is a dojo.data.ItemFileReadStore, but you cana dapt to the dojo.Store API
query: {},
onComplete: function(itms) {
dojo.forEach(itms, function(itm, idx) {
var tr = dojo.create('tr', {}, tbody);
// use idx to set odd/even css class
// create tds and the data that goes in them
});
}
});
I have also created a repeater, where I have an html template in a string form and use that to instantiate html for each row.
var htmlTemplate = '<div>${name}</div>'; // assumes name is in the data item
store.fetch({ // this is a dojo.data.ItemFileReadStore, but you cana dapt to the dojo.Store API
query: {},
onComplete: function(itms) {
dojo.forEach(itms, function(itm, idx) {
var expandedHtml = dojo.replace(htmlTemplate, itm);
// use dojo.place to put the html where you want it
});
}
});
You could also have a widget that you instantiate for each item.