Title on Entity page in AspDotNetStoreFront

In this article, I am going to show you how to display entity (category,manufacture) name as a title in AspDotNetStorefront entity page.
Before

After

[ad#post]
To get entity title, need to edit following xml.config file code:

 
<xsl:template match="/">
        <div>
          <xsl:value-of select="<a title="aspdnsf" href="http://www.ashishblog.com/tag/aspdnsf/">aspdnsf</a>:EntityPageHeaderDescription($EntityName, $EntityID)" disable-output-escaping="yes" />
        </div>
        <xsl:value-of select="aspdnsf:EntityPageFilterOptions($EntityName, $EntityID, /root/Runtime/SecID, /root/Runtime/CatID, /root/Runtime/ManID, /root/Runtime/ProductTypeFilterID)" disable-output-escaping="yes" />

To

  <xsl:template match="/">
        <div>
          <h3 class="heading">
            <span>
              <xsl:value-of select="aspdnsf:GetMLValue(/root/EntityHelpers/*&#91;name()=/root/Runtime/EntityName&#93;/descendant::Entity&#91;EntityID=/root/Runtime/EntityID&#93;/Name)" disable-output-escaping="yes" />
            </span>
         </h3>
          <xsl:value-of select="aspdnsf:EntityPageHeaderDescription($EntityName, $EntityID)" disable-output-escaping="yes" />
        </div>
<xsl:value-of select="aspdnsf:EntityPageFilterOptions($EntityName, $EntityID, /root/Runtime/SecID, /root/Runtime/CatID, /root/Runtime/ManID, /root/Runtime/ProductTypeFilterID)" disable-output-escaping="yes" />

Thanks.
[ad#inpost]

Left Menu Accordion using jQuery in AspDotNetStoreFront

There are many AspDotNetStorefront web developer wondering how to implement accordion of categories, manufacture in left menu of AspDotNetStorefront.
In this article, I show you have to create category accordion in left menu of AspDotNetStorefront.
Left Menu Accordion using jQuery in AspDotNetStoreFront

Step 1: Edit rev.categories.xml.config file to display all sub-categories and appropriate accordion format.
Here is code:

In above code, line 30 < xsl:if test="count(child::Entity)&gt;0" > is display all sub category..

Step 2: Apply some style to your Menu using CSS

#accordion {
list-style: none;
padding: 0 0 0 0;
width: 170px;
}
#accordion div {
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
}
#accordion ul{
display: none;
}
#accordion ul li {
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}

Note that in above CSS code, we have applied Round Corner CSS to our menu to improve the look. Although this technique works with all the modern web browser, may be not work in some.

Step 3: Give life to your category menu using jQuery
now, we need jQuery code to make Accordion category menu. Put jQuery code below your XMLPackage Defination.

(!XmlPackage Name="rev.categories"!)
<script type="text/javascript" >
$("#accordion > li > div").click(function () {
if (false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
});

$('#accordion ul:eq(0)').show();
</script>

If you notice the above code, code Line 10 made the first menu item in accordion menu visible.

If you using AspDotNetStorefront v9 then put below code

<asp:Literal ID="leftNavCat" runat="server" Text="<%$ Tokens:XMLPACKAGE, rev.categories.xml.config%>" />
<script type="text/javascript" >
$("#accordion > li > div").click(function () {
if (false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
});

$('#accordion ul:eq(0)').show();
</script>

Note: Please don’t put jQuery code in . If you want to put there use event .live() instead of .click().
if its not working 4 you let me know by comment..
Thanks.