ICAR - Apparal Data Dir

I only worked on the code part of this website and had no input on the content or design of this site.

This website is one of the two websites that I got to build from the beginning (not including the content or design).

The Search function

The main feature of this website is the directory page with search capabilities. The search funciton was made to work without the page reloading, so that meant that I couldn't use PHP or Twig to complete this task. I used flat JavaScript, because at the time I didn't know jQuery or Vue, (I learn both of those a few months after this project).

My main struggle with the search function was keeping all the data in the URL so if someone wanted to send their search results to someone else they could. This was challenged me because I had to base all the form data off the url and keep the url updated when the search results changed. This was also a challenge becuase of the different form inputs there are like radio buttons and checkboxes. This meant that I had to keep almost everything in arrays for the checkboxes. At the time of making this website there was also a string search function so you could search by company title. The search function can be viewed in action on the ApparelData Directory page.

WordPress

Becuase this website was made with wordpress and the client wanted to be able to add or remove any of the search terms and options from the checkboxes and radio buttons I had to load in the search options from WordPress and then import those search options into JavaScript. For this I believe I imported them through a Json object or normal JS object.

Search Results Pagination

The other challenging part of this project was adding in the pagination to the search results. This was challenging to add because I couldn't use the builtin WordPress pagination because everything ran from JavaScript. I had to look through the current array of search results then split them into pages by sliding through the results array.