How To Make A Dropdown Box for Categories

by Oliver

A couple of affiliates have asked us how to make a "Switch Category" dropdown box like the one that can be found on the BET site:

When users select a video category from this dropdown box, the page refreshes, returning a list page composed of videos that belong to the selected category. While we don't yet offer a pre-built dropdown box for media categories like this one, it's easy to build one yourself!  Here’s a brief tutorial based on the process that we used to make the one for BET:

  1. Make the categories that you want to appear in this dropdown box in the Affiliate Center under Configure > Media Categories.
  2. Upload the media that you want to be accessible through your dropdown box, making sure to assign the proper category to each item. 
  3. After your media has been uploaded, pick an admin tag for each category. 
  4. Login to the Affiliate Center and browse to Manage > Media.
  5. For each of the pending media items that you see displayed, click Details, and on the page that comes up, fill in the admin tag that you’ve picked for the category that this media item has been assigned to (you’ll see the category on the left, a little beneath the admin tags box).
  6. In the right column on the same page, check to make sure that the Approve radio button under Current Status is selected.
  7. Click save.
  8. Now all we need to do is build the HTML dropdown box and write the JavaScript that will drive it. Fortunately, I've taken care of that for you:

    <script type="text/javascript">
    function switchcat(categories){

    var cat = (categories.options[categories.selectedIndex].value);

    if(cat!==''){ window.location="/kickapps/service/searchEverything.kickAction?keywords="+cat+" &as=AS_NUMBER&mediaType=MEDIA_TYPE_LOWERCASE&includeVideo=on";
    }
    }
    </script>

    <select name="categories" onChange="switchcat(this)" id="category_dropdown">
    <option value="" selected>Pick A Category</option>
    <option value="admintag1">Category1</option>
    <option value="admintag2">Category2</option>
    </select>

  9. Copy this code into your favorite text editor.
  10. Replace "Category1" with the name of the first category that you created in Step 1. Replace "admintag1" with the name of the admin tag that you picked in Step 3. Repeat for the rest of the <option>s, and make as many new <option>s as you need to cover all of the categories that you want in your dropdown box.
  11. Notice the very end of the window.location rule, where it says "&includeVideo=on". What this means is that this rule will pull up all of the videos that fall under the category that you select in the dropdown box.
  12. Once you've modified this code to your satisfaction, log back into the Affiliate Center and navigate to Configure > Pages > Global Page Template.
  13. Paste the code you just modified into the <head></head> section.
  14. Click save.
  15. View your site. You now have a BET-style dropdown box.

Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at support@kickapps.com.