Thread: Display Root Categories On Homepage with Images and Category Names?

I am trying to figure out how to display a grid layout for all root level categories on the home page of my site. Layout: Grid Layout with the category image, category name.

The layout I am trying to achieve would look like "entity.rootlevel.xml" when applying that to a category. I have been able the bring in the browse categories XML by adding (!XmlPackage Name="rev.categories"!) to the hometopintro in the editor. I would like to do the same but with all of the categories and images.

I guess a custom XML Package is what I need to make. Has anyone been able to achieve this look I know this is a very popular layout for eCommerce websites.

Obviously I'm not wanting to hard code this and have this manageable by the client so when they add a new root category it will automatically display on the home page.

I also, will be getting rid of the out of the box left hand dynamic layout for "Browse Categories" only on the home page.

Any thoughts will help.

Thanks,
John Parker

Code:

<?xml version="1.0" standalone="yes" ?>
<!-- ##################################################################################	-->
<!-- Copyright AspDotNetStorefront.com. All Rights Reserved.							-->
<!-- http://www.aspdotnetstorefront.com													-->
<!-- For details on this license please visit the product homepage at the URL above.	-->
<!-- THE ABOVE NOTICE MUST REMAIN INTACT.												-->
<!-- ##################################################################################	-->

<package version="2.1" displayname="Categories" debug="false" includeentityhelper="true">
    <PackageTransform>
        <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:aspdnsf="urn:aspdnsf" exclude-result-prefixes="aspdnsf">
            <xsl:output method="html" omit-xml-declaration="yes"/>

            <xsl:param name="CategoryID">
                <xsl:choose>
                    <xsl:when test="/root/System/PageName = 'showmanufacturer.aspx' or /root/System/PageName = 'showsection.aspx' or /root/System/PageName = 'showdistributor.aspx' or /root/System/PageName = 'showvector.aspx' or /root/System/PageName = 'showgenre.aspx'">0</xsl:when>
                    <xsl:when test="/root/System/PageName = 'showcategory.aspx' and boolean(/root/QueryString/categoryid)">
                        <xsl:value-of select="/root/QueryString/categoryid"/>
                    </xsl:when>
                    <xsl:when test="(/root/System/PageName = 'showcategory.aspx' or /root/System/PageName = 'showproduct.aspx') and boolean(/root/Cookies/LastViewedEntityInstanceID) and /root/Cookies/LastViewedEntityName = 'Category'">
                        <xsl:value-of select="/root/Cookies/LastViewedEntityInstanceID"/>
                    </xsl:when>
                    <xsl:otherwise>0</xsl:otherwise>
                </xsl:choose>
            </xsl:param>

			<xsl:param name="AncestorID">
				<xsl:for-each select="/root/EntityHelpers/Category//Entity[EntityID = $CategoryID and Name = 'Consumer']">
					<xsl:value-of select="ancestor::*/EntityID"/>
				</xsl:for-each>
			</xsl:param>

            <xsl:param name="ParentID">
                <xsl:for-each select="/root/EntityHelpers/Category//Entity[EntityID = $CategoryID]">
                    <xsl:value-of select="parent::*/EntityID"/>					
                </xsl:for-each>
            </xsl:param>


            <xsl:template match="/">
                <xsl:element name="ul">
                    <xsl:attribute name="class">
                        <![CDATA[tame2]]>
                    </xsl:attribute>

					<xsl:apply-templates select="/root/EntityHelpers/Category/Entity">
						<xsl:with-param name="prefix" select="''"/>
						<xsl:with-param name="level" select="1"/>
					</xsl:apply-templates>

                </xsl:element>
            </xsl:template>

			<xsl:template match="Entity">
				<xsl:param name="prefix"></xsl:param>
				<xsl:param name="eName" select="aspdnsf:GetMLValue(Name)" />
				<xsl:param name="level"/>


                <li class="tame">
                    <xsl:value-of select="$prefix" />
	<xsl:value-of select="aspdnsf:LookupEntityImage(EntityID, 'Category', 'icon', 0, '')" disable-output-escaping="yes" />
                    <xsl:if test="number(ParentEntityID) != 0">
                        <span class="catMark">&gt;&gt;</span>&#160;
                    </xsl:if>
                    <a href="{aspdnsf:EntityLink(EntityID, SEName, 'Category', 0)}">
                        <xsl:if test="EntityID = $CategoryID or descendant::Entity/EntityID = $CategoryID">
                            <xsl:attribute name="style">font-weight:bold</xsl:attribute>
                        </xsl:if>
                        <xsl:value-of select="$eName"/>
                    </a>




                    <xsl:if test="count(child::Entity)&gt;0 and (EntityID = $CategoryID or descendant::Entity/EntityID = $CategoryID)">
                        <ul class="tame">
                            <xsl:apply-templates select="Entity">
                                <xsl:with-param name="prefix" select="concat($prefix, '&#160;&#0160;')"/>
                            </xsl:apply-templates>
                        </ul>
						
						<xsl:value-of select="aspdnsf:LookupEntityImage(EntityID, 'Category', 'icon', 0, '')" disable-output-escaping="yes" />
                    </xsl:if>
                </li>

            </xsl:template>

        </xsl:stylesheet>
    </PackageTransform>
</package>

You also could have modified the manufacturers.aspx page very slightly and it would have called the same XML package, but with different parameters and then would have shown categories instead. I saved the modified page as categories.aspx. I also took the code in categories.aspx and copied it to my default.aspx and I got categories on my home page. I'm sure you could have done something similar with copying the XML package call to hometopintro.