BigCommerce: How to create custom filter? - javascript

I want to allow for checkbox-filtering, such that when a particular checkbox is 'checked', the page will only show the items corresponding to that checkbox property.
Example) I want only products that are 'new', so I check the box for new products.
How can I create this kind of a filter in BigCommerce? I have tried the url-api filter, granted I didnt expect it to do much, but I have at least tried it.
I am hoping for some way to 'hide' all other products if they dont fall under that checkbox's property.

You can write some javascript to do this for you, but the main thing you'd need here is to somehow differentiate between product types.
Example: what designates a product as 'new' vs 'old'?
I would be happy to help you write this script to react to the users interaction with checkboxes, but we need some HTMl here for the products themselves in order to have our javascript recognize them.
Can you update your question with some HTML examples of the products or items you want to hide/show based on user interaction with a checkbox selector?

Related

Sencha ExtJS skipping rows with Checkboxmodel's select all box

I am trying to make a checkbox grid that some of the values are read only (it is a list of features and some features are required but I want the user to be able to see them all in one place) and retrieved via an endpoint into a store.
I tried making the items unselectable, but I could not get it to function. So, I currently have the beforeselect listener returning false if a particular feature phrase pops up (voice in this instance) so that I can possibly add similar later. The problem with this is that the header select all box will not toggle since not every checkbox is checked. Looking at the JS in the browser shows me the checkbox is a span (which personally strikes me as an odd choice but nothing I can do about it), and I haven't been able to trace what is going on behind the scenes.
The question is this. Is there a better way to make some of the rows unselectable (and thereby uneditable) while keeping the select all working properly, or is there a way to manually toggle the header checkbox since all it does is enumerate through the grid and either check or uncheck based on its state?
Thanks.

Dynamically add objects to list from dropdown

I'm going to try and put this in the simplest terms and hopefully someone can help me. I'm new to MVC and i'm trying to learn the ropes.
I have an dropdown that is populated with tenant objects.
I want a user to be able to select a tenant in the drop down, and have that tenant added to a list (Enumerable of Tenant objects) and displayed below the dropdown in a section called "Added Tenants" while also removing the selected tenant from the dropdown.
I don't want these tenants added to the database until later because this is a form creating a lease, and i want them to finish filling out the rest of the lease and create it all at once.
I'm hoping someone can help me or at least point me in the right direction. Yes i have done searches but haven't found anything yet that will help me or that i understood.
Edit: The list can be of object, just an id, or even a select list. The end game is to use that list to add them to the collection which is a 1 to many relationship. That list will also be used to populate partial views with the tenant information, kind of like how the tags work in stack overflow.
While it's not clear what the "list" is that you want added to (i.e. a UL or a form select list), but this solution is going to be done in javascript, not ASP.
Try doing a few searches on SO. Such as:
jQuery moving MultiSelect values to another MultiSelect

Save sort order to hidden field with sortable jQuery plugin

I am using this plugin (http://farhadi.ir/projects/html5sortable/) to create a feature for a website where a user can add form fields on the fly.
The idea is that they will give the form a name (title), and then add a series for form fields. These form fields need to be drag and drop sortable (thus the plugin) so the user can rearrange the order.
Once they are satisfied with the order, they will click the "Create Form" button, and the data to create the form will be submitted.
The data itself will be stored in three tables. Table 1: Forms, Table 2: Fields, and Table 3: Forms_Has_fields. The Forms_Has_fields table will includes a sort_order column, which tells the system in what order to display the fields.
That's where this question is important: when a field is re-sorted using the drag and drop feature, I need a way to save the sort order in an or some other form control so I can parse it with PHP and create the fields properly.
If this was in PHP, I would just keep everything in an associative array: ($fieldname => $sortorder), but that doesn't seem like it's an option in javascript. Ideally, I could keep this in an array in Javascript, and then when sumit was clicked, dump that array as a JSON to an field, and POST it to PHP. But if that's possible, I don't know how to do it.
If there is another (more elegant) way to handle this, I am open to suggestions.
Turns out, I was making it more complicated than it needed to be. I am giving you the points because you answered my question; however I did find a more elegant way of doing it. The is, in fact, the order and array already. There is no reason to create a separate array to manage what is being saved in what order because the does it already. All you have to do is itterate through it with .each().
And, best of all, I didn't have to use global variables

About onSubmit and how I should use it

So I am trying to create four select menus within a form that give the user several item options/combinations.
So basically they can chose different values from all four select menus and onSubmit the user will be taken to the correct URL. Example (Agra -- Blue/Aqua -- Traditional -- $99-$199) and the url for that filter will direct the user.
The question I have is how should I go about defining a function for something like this?
I essentially need the form (we already have the URLS for every combo) to direct the user to the appropriate url when they click submit. Part of me thinks this is a very inefficient way of doing things and that I should be using jQuery or something.
Any help is appreciated
When using the drop down option each listing contains a value. depending on what values you set you could create a filter to locate the correct URL.
Also depending on ur URLS you could create them with the values of the drop down menu.
You might want to consider adding a search button so u know when the user has selected all of the options.

jQuery - Best way to populate a hidden field with list data?

I have two unordered lists populated with users. The idea is to drag users from one list to add them to a group in the other list. Each user also has a dropdown to select a role in the group.
I'd like to add to/remove from a hidden field with the values of the "added" users and their role. I'm not really sure though how to do that.
I have a jsfiddle showing the general idea here: http://jsfiddle.net/KPdAX/
Please see:
http://jsfiddle.net/KPdAX/1/
What I added based on your code are:
Use an array to keep track of both of the list items;
Print out the id/value pairs for both of the lists.
I don't know what you want a hidden field to keep track of the items. If you want to keep it in the HTML, you can easily create a hidden field, and dump the list strings in the hidden input tags.

Categories

Resources