Help with a product selector


(Evan) #1

Hey guys. I am working on a product selector…

It asks you a bunch of questions, then shows you 3 or 4 products (out of total 10)
I have it pretty much done, except for the results page.

What would be the best way to generate and display the results?
Currently I have a string of product names, that I can loop through in js.
And I have a bunch of product images with ID names that match product names in the string.

Ideally I want it to loop through the string, and show each product it finds, and position them nicely next to each other, and center all of the results on the stage…

I can get them to show, but whats the best way to position them all neatly on the center of the page?

Ta


(Evan) #2

So, ended up doing this programmatically. and setting position with Jquery CSS like this:

pwidth = 166;
swidth = 768;

centreStage = swidth/2;

resultsArr  = productString.split(",");

totalWidth = (resultsArr.length -1) * pwidth;


l = centreStage - totalWidth/2;

console.log(resultsArr);


console.log("total w" + totalWidth + "starting l:"+l);

for (var i=0; i<resultsArr.length; i++) {
        
	if (resultsArr[i]=="") {
	
		// do nothing
		
		} else {
			var thisOne = "#"+resultsArr[i];
 	       
  	      	$(thisOne).css('left', l+'px');    
 	       
    	    console.log(l);
    	    
    	    l = l+pwidth;
        
        	
      

    }
    
    }