Help with a product selector

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

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;
        
        	
      

    }
    
    }
1 Like