product listing - Show list layout as default and make grid secondary

I am using a zencart monster template and I am trying to figure out how to make the product listing display "the list" as default rather than the grid. I have a file called jscript_xjscript.app.js
I have made the changes on the “function bindGrid()”. I—see below
Though for some reason if I search internally everything seems to work and the list is the primary and the grid is secondary. But when I go from outside the site www. It goes back to the grid being the default. Is there another locating I have to make a change in order for the list to be the default view

/* Catalog list/grid script */
var nbItemsPerLine = 4;
var nbItemsPerLineMobile = 3;
var nbItemsPerLineTablet = 2;

function display(view)
{
if (view == 'list')
{

    $('.grid-desc').css('display','none');
    $('.list-desc').css('display','block');
	$('ul.product_list').removeClass('grid').addClass('list row');
	$('.product_list > li').removeClass('col-xs-12 col-sm-'+12/nbItemsPerLineTablet+' col-md-'+ 12/nbItemsPerLine).addClass('col-xs-12');
	$('.product_list > li').each(function(index, element) {
		html = '';
		html = '<div class="product-col list">';
			html += '<div class="row">';
				html += '<div class="img col-xs-12 col-sm-4 col-md-4">' + $(element).find('.img').html() + '</div>';
				html += '<div class="center-block col-xs-12 col-sm-4 col-md-4">';
					html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
					html += '<div itemprop="description" class="text">'+ $(element).find('.text').html() + '</div>';
					html += '<ul class="options text"><li>'+ $(element).find('.model').html() +'</li><li>'+ $(element).find('.brand').html() +'</li><li>'+ $(element).find('.weight').html() +'</li></ul>';
				html += '</div>';	
				html += '<div class="right-block col-xs-12 col-sm-4 col-md-4">';
					var price = $(element).find('.content_price').html();       // check : catalog mode is enabled
					if (price != null) { 
						html += '<div class="content_price">'+ price + '</div>';
					}
				html += '</div>';
			html += '</div>';
			
		html += '</div>';
	$(element).html(html);
	});		
	$('.listing_view').find('li#list').addClass('active');
	$('.listing_view').find('li#grid').removeAttr('class');
	$.totalStorage('display', 'list');
}
else 
{

    $('.grid-desc').css('display','block');
    $('.list-desc').css('display','none');
	$('ul.product_list').removeClass('list').addClass('grid row');
	$('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-'+12/nbItemsPerLineTablet+' col-md-' + 12/nbItemsPerLine);
	$('.product_list > li').each(function(index, element) {
	html = '';
	html += '<div class="product-col maxheight">';
		html += '<div class="img">' + $(element).find('.img').html() + '</div>';
		html += '<div class="prod-info">';
			html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
			html += '<div itemprop="description" class="text">'+ $(element).find('.text').html() + '</div>';
			html += '<div class="product-buttons">';
				var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
				if (price != null) { 
					html += '<div class="content_price">'+ price + '</div>';
				}
			html += '</div>';
	html += '</div>';		
	$(element).html(html);
	});
	$('.listing_view').find('li#grid').addClass('active');
	$('.listing_view').find('li#list').removeAttr('class');
	$.totalStorage('display', 'grid');
}	

}
function bindGrid()
{
var view = $.totalStorage('display');

if (view && view != 'list') {
	display(view);
}
else {
    display(view);
	$('.listing_view').find('li#list').addClass('active');
}    

$(document).on('click', '#grid', function(e){
	e.preventDefault();
	display('grid');
});

$(document).on('click', '#list', function(e){
	e.preventDefault();
	display('list');
});

}

$(document).ready(function(){
bindGrid();
})

i figured it out. Anyone who is interested I had to change the function bind()

function bindGrid()
{
var view = $.totalStorage('display', 'list');

if (view && view != 'list') {
	display(view);
}
else {
    display(view);
	$('.listing_view').find('li#list').addClass('active');
}    

$(document).on('click', '#grid', function(e){
	e.preventDefault();
	display('grid');
});

$(document).on('click', '#list', function(e){
	e.preventDefault();
	display('list');
});

}

$(document).ready(function(){
bindGrid();
})

You will probably have to visit with the template's creator. As a custom item, we don't have the same access we would to the non-commercial files and I doubt they would want you to post the template files.
It's an unfortunate reality that most all of the commercial templates do not follow Zen Cart standard practices but become "creative" to make their templates "work." That very fact actually makes them very difficult to modify.