1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Conditional product menu

Discussion in 'JavaScript' started by bellcom, Apr 22, 2014.

  1. #1
    I saw a menu on this site http://www.royaltycore.com/
    scroll down where it says "Find your Grille"
    It populates the 2 menus based on previous selections.

    So before hiring someone I am trying to create something similar with different products so I copied the page and left all the scripts in tact since I wasn't sure on what was safe to remove.

    http://virtualgeorge.info/test2/menu-test.htm
    So I uploaded and loaded that page in chrome and it shows its trying to load from the originals site: http://www.royaltycore.com/listcats_17?stpl=getmodels

    Not sure how this works but viewing the source & the console in chrome, would this be easy to get working on another site or is there a lot missing?

    thanks!
     
    bellcom, Apr 22, 2014 IP
  2. Serinth

    Serinth Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    If you wanted to do it in pure javascript you would need to pre-store all the different combinations in variables and do the fetching based on events e.g. click events. Of course this means that it's not as flexible and you'll have to hand edit the combinations each time you have new products and implement some kind of versioning system on the javascript filename so that it loads the new combinations when an existing user hits the page.

    However, this looks like it has a backend that has the combinations loaded somewhere and it's requesting the results through an ajax call. This would be nicer since you can just simply add or remove products from a database somewhere. This way is a bit more involved than the first but more flexible. A copy and paste job won't work here if you're looking to use your own dataset and ui.
     
    Serinth, Apr 23, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    This is one of those things where the way most people go about it just pisses me off; the vast majority of implementations are inaccessible garbage because the people writing them never seem to remember the unwritten rule of JavaScript -- if you can't make the page work without scripting FIRST, you likely have no business adding scripting to it. They throw nonsense like AJAX at something that should be relatively simple by first making a useful page without scripting.

    I would probably just output all the options first as a list of anchors, with some form of delimiter (vertical break good as any) you can use to split them apart.

    Something like:
    <li><a href="ford_raptor_2009-2014.html">Ford | Raptor | 2009-2014</a></li>
    Code (markup):
    I would then getElementsByTagName('a') off the parent UL to grab those anchors, use SPLIT to break them apart, then plug them into an object by Make, then models inside each make via object, then year under make. Then I'd delete the original list to replace it with the scripted version built from those objects.

    This way you have your fancy script-tard menu when scripting is available, AND a flat menu of anchors for when scripting is disabled/unavailable and/or meaningless; screen readers, braille readers, and search engines being great examples of when that type of scripted drill-down is pretty much useless. It also means no need for goofy tricks like AJAX that would make the client side scripting AND server code more complex.

    That page for example has what? ~40 possible outcomes? 40 sets of LI/A won't even break 3k of markup. Most people piss away more than that on a single presentational image in the theme. Even 400 possibilities would be ~30k; still smaller than that fat bloated train wreck of idiocy known as jQuery compressed!

    It's why I laugh when people make endless pointless scripttard bull, throwing more scripttard nonsense at it, when their entire data set can usually be sent in less code.

    I'm busy today (at least I will be assuming I get the phone call I'm SUPPOSED to get the next hour or so), but I'll try to squeeze in the time to put together a quick demo showing my approach in action.
     
    deathshadow, Apr 23, 2014 IP
  4. bellcom

    bellcom Well-Known Member

    Messages:
    218
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    120
    #4
    Here is what I have so far after getting some help from someone here:
    http://racemeshtrucks.com/layout/make-menu/menu-test.htm

    Here is the code he gave me:
    http://jsfiddle.net/zKyKQ/

    There are a couple commented area for retrieving the data to be displayed but I don't know what is needed?
    //Here you would usually do an ajax request to retrieve the children based on parent,
    //Below is just a faked version.

    Then another:
    /* Could Use something like this retrieve the html you want to display */
    function requestDataFor2(parentID,target) {
    $(target).load('[URL TO GET THE DATA]/id='+parentID);

    Any help appreciated!!!!
    Thanks!
     
    bellcom, Apr 25, 2014 IP
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #5
    You create some files like data-0.php to store data you want to display on click or pull it from database.
    And this is the laziest way to get it done (just for example) ;)
    
    $('ul li').click(function() {
       $('#level2').load('data-' + $(this).index() + '.php');
       console.log('data-' + $(this).index() + '.php'); // just to see which file data is from
    });
    
    Code (markup):
    No need to append those lists to your div
     
    ketting00, Apr 25, 2014 IP
  6. bellcom

    bellcom Well-Known Member

    Messages:
    218
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    120
    #6
    So I changed the javascript to what is below and loads the "model" menu with data from the data-0.php files.
    Now how do I get my "Model" links to populate the next "Year" menu?
    Here is a test page:
    http://racemeshtrucks.com/layout/make-menu/menu-test2.htm

    $('ul li').click(function() {
       $('#level2').load('data-' + $(this).index() + '.php');
       console.log('data-' + $(this).index() + '.php'); // just to see which file data is from
    });
    
    function requestDataFor(parentID,target) {
        //Here you would usually do an ajax request to retrieve the children based on parent,
        //Below is just a faked version.
       
        var res = '<ul>';
        for(var i =0; i<20; i++) {
            res += '<li><a href="#" data-id="'+(i*parentID*5)+'">Model '+(i*parentID)+'</a></li>';
        }
        res += '</ul>';
       
        $(target).html(res);
    }
    
    
    /* Could Use something like this retrieve the html you want to display */
    function requestDataFor2(parentID,target) {
        $(target).load('[URL TO GET THE DATA]/id='+parentID);
    }
    Code (markup):
    thanks!!!
     
    bellcom, Apr 25, 2014 IP
  7. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #7
    @bellcom You may put everything you want to display in the file which is loaded and style them with CSS (the level3 div). You don't need to keep that requestDataFor function.

    If you want to copy the features exactly off royaltycore.com you may do something like this:
    
    <!DOCTYPE html>
    <html language="en">
    <head>
       <style>
         ul#myUL li {
           display:inline-block;
           padding:5px;
           height:80px;
           width:80px;
           border:#ccc solid 1px;
         }
         .hide {
           display:none;
         }
       </style>
       <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    </head>
       <body>
         <h2>Make</h2>
         <div>
           <ul id="myUL">
             <li><a href="#" data-id="1">Make 1</a></li>
             <li><a href="#" data-id="2">Make 2</a></li>
             <li><a href="#" data-id="3">Make 3</a></li>
             <li><a href="#" data-id="4">Make 4</a></li>
           </ul>
         </div>
         <h2>Model</h2>
         <div id="level2">
           <div id="box1" class="hide">
             List 1
           </div>
           <div id="box2" class="hide">
             List 2
           </div>
           <div id="box3" class="hide">
             List 3
           </div>
           <div id="box4" class="hide">
             List 4
           </div>
         </div>
         <h2>Year</h2>
         <div id="level3">
         </div>
         <script>
           $('#myUL li').click(function() {
             $('#box' + ($(this).index() + 1)).show().siblings("div").hide();
             $('#level3').load('data-' + $(this).index() + '.php');
           });
         </script>
       </body>
    </html>
    
    Code (markup):
    To show detail of each model and year, you might want to repeat the step above and create level4 div. This simple demo does not cover all the thing you need. It just shows how it might have worked.

    Maybe @deathshadow may come up with better solution.
     
    Last edited: Apr 26, 2014
    ketting00, Apr 25, 2014 IP