Question

I am trying to figure out how to change the default layout to 2 columns from 3 columns. I have been able to do it successfully on every page except for search results. I wouldn’t mind changing the default layout to 2 columns as I want it all to be uniform.

Here’s the catch, I am on a hosted solution (I hate it, but hey, I am just the developer). I have no access to the file system or individual files. I haven’t figured out a way to upload and replace any files, so all changes I make have to be done from the back end. I am really hoping this can be done.

Answer 1

Answer is, you can’t. Plain and simple.

However, you can hack the hell out of it using jQuery and get it to work right. Here is the code I used:

//Check for 3 col layout.
if($j('.col3-layout').length>0){
    //swap the 3 col layout for the 2 col layout
    $j('.col3-layout').addClass('col2-left-layout').removeClass('col3-layout');
    //grab all the code in the wapper, and place it in the main
    var html=$j('.col-wrapper').html();
    $j('.main').html(html);
    //If products are shown as a grid, reorder them.  If it is a list, leave it alone.
    if(!$j('.grid').attr('href')){
        //Grab all items in the list, push them into an array, and then remove all the data.
        var items=new Array();
        $j('.products-grid .item').each(function(){
            items.push($j(this).html());
        });
        $j('.products-grid').remove();
        //build your output
        var html='';
        var gridsize=4; //items per row
        for(var i=0;i<items.length;i++){
            if(i%gridsize==0){//start a new row
                html+='<ul class="products-grid '
                if(i/gridsize==0)//very first row
                    html+='first ';
                else if(i==items.length-gridsize)//last row
                    html+='last '
                if(i/gridsize%2==0)//even class
                    html+='even">';
                else
                    html+='odd">';//odd class
                html+='<li class="item first">'+items[i]+"</li>";
            }else if(i%gridsize==gridsize-1){//very item in row
                html+='<li class="item last">'+items[i]+"</li></ul>";
            }else
                html+='<li class="item">'+items[i]+"</li>";
        }
        $j('.category-products').html(html);  //populate the data.
    }
}