jQuery/PHP Mix and match e-commerce functionality

Question

I'm designing a shop and would like to incorporate sort of a "mix and match" functionality where customers can see which tops match with which bottoms and shoes. There'll be 3 levels and when a user finds the right mix/match then they click buy to add all items to a shopping cart.

I have drawn UI diagram to try to explain visually:

Anyone have an idea on how to do this functionality? I'm guessing jQuery would do it, but it needs integration with a shopping cart of some sort. Any help is greatly appreciated.

Answer 1

Custom functionality. Needs the whole 9 yards. Get the Shopping Cart installed. create a new table along side of it. Name the table 'levels' and in the table, give it 3 rows, 'id', 'sid', 'level'. Depending on the shopping cart you use, you can declare certain values within the shopping_cart table under the column 'extra'. Use static variables. 'Level1', 'Level2', 'Level3'. Then create a MySQL Trigger event. Each time an item is added to the shopping cart list (from the back-end, items to be sold). the Trigger will use the 'id' of that, insert it as the 'sid' in our new table of 'levels'. The 'id' in our new table of 'levels' is the unqieu auto-incrementing value. the 'sid' refers to the 'item id' that was in the original shopping cart table. Now use PHP and jQuery. PHP first to get the items from the database, select * from levels where level='Level1'. This will get all items that should be 'level1', which in your case should be things like hats, scarfs, etc i would imagine. Ensure you do the same for level2 and level 3. Of course create the HTML structure. Three 'rows' built with 'position:relative' and width of :10000em. Then each 'item' returned in PHP from our row request, something like:

echo '<ul>';
while($row = mysql_fetch_array($query)){ 
  echo '<li style"float:left;width:150px;height:85px;">'; 
} 
echo '</ul>';

You can use something like jQuery Tools slider to create this effect that you want per row.

http://jquerytools.org/demos/scrollable/index.html

You would need to include custom javascript/jquery to determine the position and ensure that the 'element that should have focus' always has the same width, height, margin, and padding as the one above/below it. Also, add something like a custom class of 'active-level1-item' to each item that is in view, active-level2-item, active-level3-item, etc.

For each of the items in View, use something like AJAX to send the values over to your shopping cart. you'll have to do some research to get comfortable with it's documentation.

something like.

var Level1Item = $(".activelevel1item").val/text/html();
var Level2Item = $(".activelevel2item").val/text/html();
var Level3Item = $(".activelevel3item").val/text/html();
var levelString = 'level1='+Level1Item+'&level2='+Level2Item+'&level3='+Level3Item;

$.ajax({
  url: 'process_shopping_items.php',
  type: 'POST',
  data: levelString,
  success: function(data){
    //do stuff with returned values in our process_shopping_items.php file
  },
  error: function(err){
    //there was an error, alert the user of our error.
    alert(err);
  },
  complete: function(){
    //our ajax request has completed processing. We can perform all callbacks here.
  }
});

You didn't provide much information so I gave you the down and dirty. While refinements need to be based on the 'tools' you choose to achieve this result, this is definitely a good direction to start in.