Brands Page

From i.STAR Help

Display more than 99 items

If you want the brands template to display more than 99 items, when you click on More Brands, you'll need to use a custom include. In the DeptBrands template find and replace <isinclude name="/stock/deptListings/deptBrands.include"> with <isinclude name="/custom/deptListings/deptBrands.include">. This code will work with up to 499 brands per category. After this, you'll have to create the custom include with the following content:

<isif expr="varexists('$numPerRow') == 0">
	<isexpr expr="$numPerRow = 2">
</isif>

<isif expr="varexists('$numBrands') == 0">
	<isexpr expr="$numBrands = 5">
</isif>

<script language="JavaScript">
	var deptCategories = new Array();

	function toggleMoreCategories(categoryType, categoryName, deptCode, toggleNum) {


		var categories = deptCategories[deptCode];


		if(!categories) {
			categories = new Array();
			deptCategories[deptCode] = categories;
		}

		var showStatus = categories[categoryType];

		if(!showStatus) {
			showStatus = false;
		}
		
		var newText;
		var newDisplayStatus;

		if(showStatus) {
			// currently showing
			newDisplayStatus = false;
			newText = 'More ' + categoryName + ' (' + toggleNum + ')';
		} else {
			// currently hiding
			newDisplayStatus = true;
			newText = 'Hide ' + categoryName;
		}


		for(var i=0; i < 500; i++) {
			var o = document.getElementById(categoryType + '-' + deptCode + '-' + i);
			if(o) {
				if(showStatus) {
					o.style.display = 'none';
				} else {
					o.style.display = 'block';
				}
			}
		}
		// change text to hide
		var o = document.getElementById(categoryType + 'Button-' + deptCode);
		if(o && o.firstChild) {
			o.firstChild.nodeValue = newText;
		}

		if(showStatus) {
			categories[categoryType] = false;
		} else {
			categories[categoryType] = true;
		}
		
		return false;
	}
</script>

<isexpr expr="$divWidth = (100 / $numPerRow) - 1">

<div id="deptBrands">
	<isloop name="$departments">
		<div style="float:left; width:150px; margin-right:40px" class="departmenttext departmentListing">
			<div class="departmentName">
				<a href="<isvar name="$deptBrowseURL">"><isvar name="$deptName"></a>
			</div>
			<ul class="brands">
				<li class="brandHeader">Brands:</li>
				<isloop name="$manufacturers">
					<isif expr="$_loopiteration_ <= $numBrands">
						<li class="brandListing">
					<iselse>
						<li class="brandListing" id="mfg-<isvar name="$deptCode">-<isvar expr="$_loopiteration_">" style='display: none;'>
					</isif>

						<a href="<isvar name="$mfgBrowseURL">"><isvar name="$mfgName"></a>
					</li>
				</isloop>
				<isif expr="collcount($manufacturers) > $numBrands">
					<li class="moreBrandsButton"><a id="mfgButton-<isvar name="$deptCode">" href="#" onClick="return toggleMoreCategories('mfg', 'Brands', '<isvar name="$deptCode">', <isvar expr="collcount($manufacturers) - $numBrands">);">More Brands (<isvar expr="collcount($manufacturers) - $numBrands)">)</a></li>
				</isif>
			</ul>

		</div>
	</isloop>

</div>

If you want to display more than 499 brands per category, modify this line in the code, replacing "500" with your choice of numbers.

for(var i=0; i < 500; i++) {

Please note: this include has to be saved as deptBrands.include, and uploaded to the templates/custom/deptListings directory.

[edit]

Display Brand images on a custom DeptBrand page

To create a custom DeptBrands page that displays brand images and brand names neatly organized, use this code in the content area of your deptbrands.template:


<div id="container">		
			
	<isexpr expr="$ctr = 0"> 	

	<isloop name="$global_manufacturers">																									
				
		<div id="innercontainer">
			<table cellpadding="10" cellspacing="5"><tr><td valign="bottom"  style="width:210px; height:240px;"><a class="classtext" href="/istar.asp?a=29&manufacturer=<isvar name="$mfgCode">"><img src="images/<isvar name="$mfgCode">.gif" border="0" alt="" style="width:175px; height:auto"></a><BR><CENTER><a class="leftnavitem" href="/istar.asp?a=29&manufacturer=<isvar name="$mfgCode">"><isvar name="$mfgName"></A></CENTER></td></tr></table>
		</div>			
				
	<isif expr="$ctr > 20">					
		<isexpr expr="$ctr = 0"> 
	</isif>	

	<isexpr expr="$ctr = $ctr + 1"> 				

</isloop>
</div>

The above example used these css settings:

#container {display:inline; width:640px; float:left; position:relative;}
#innercontainer {float:left; display:inline; text-align:center; width:210px; height:240px; border:0px solid white; vertical-align:bottom; border-bottom:1px solid #d0cab7; border-left:1px solid #d0cab7}

Retrieved from "http://manual.istarhelp.com/wiki/index.php/Brands_Page"