Question

I am using nopCommerce to build my site and i have added a simple jquery slider to the HeaderMenu.ascx page.

However its showing up on everypage as the Master Page refers to the HeadMenu.ascx file.

Whats the best way to ONLY show it in the default page?

default page:

<%@ Page Language="C#" MasterPageFile="~/MasterPages/TwoColumn.master" AutoEventWireup="true"
    Inherits="NopSolutions.NopCommerce.Web.Default" CodeBehind="Default.aspx.cs"
     %>

<%@ Register TagPrefix="nopCommerce" TagName="HomePagePoll" Src="~/Modules/HomePagePoll.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageNews" Src="~/Modules/HomePageNews.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageCategories" Src="~/Modules/HomePageCategories.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageProducts" Src="~/Modules/HomePageProducts.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="BestSellers" Src="~/Modules/BestSellers.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="Topic" Src="~/Modules/Topic.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="RecentlyAddedProducts" Src="~/Modules/RecentlyAddedProducts.ascx" %>


<asp:Content ID="Content1" ContentPlaceHolderID="cph1" runat="Server">

    <nopCommerce:Topic ID="topicHomePageText" runat="server" TopicName="HomePageText"
        OverrideSEO="false"></nopCommerce:Topic>
    <div class="clear">
    </div>
    <nopCommerce:HomePageCategories ID="ctrlHomePageCategories" runat="server" />
    <div class="clear">
    </div>
    <nopCommerce:BestSellers ID="ctrlBestSellers" runat="server" />
    <div class="clear">
    </div>
    <nopCommerce:RecentlyAddedProducts ID="ctrlRecentlyAddedProducts" runat="server" />
    <div class="clear">
    </div>
    <nopCommerce:HomePagePoll ID="ctrlPolls" runat="server" />
    <div class="clear">
    </div>

</asp:Content>

The above then points to the TwoColumn master page:

<%@ Master Language="C#" MasterPageFile="~/MasterPages/Root.Master" AutoEventWireup="true" CodeBehind="TwoColumn.master.cs" Inherits="NopSolutions.NopCommerce.Web.MasterPages.TwoColumn" %>
<%@ Register TagPrefix="nopCommerce" TagName="MiniShoppingCartBox" Src="~/Modules/MiniShoppingCartBox.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="CategoryNavigation" Src="~/Modules/CategoryNavigation.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="ManufacturerNavigation" Src="~/Modules/ManufacturerNavigation.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="InfoBlock" Src="~/Modules/InfoBlock.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="LiveChatBlock" Src="~/Modules/LiveChatBlock.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="RecentlyViewedProducts" Src="~/Modules/RecentlyViewedProductsBox.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="PopularTags" Src="~/Modules/PopularTags.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="NewsLetterSubscriptionBoxControl" Src="~/Modules/NewsLetterSubscriptionBoxControl.ascx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cph1" runat="server">
    <div class="master-wrapper-side-2">
        <asp:ContentPlaceHolder ID="cph2" runat="server">
            <nopCommerce:NewsLetterSubscriptionBoxControl runat="server" ID="ctrlNewsLetterSubscriptionBoxControl" />
            <div class="clear">
            </div>

            <div class="clear">
            </div>

            <div class="clear">
            </div>
            <nopCommerce:CategoryNavigation ID="ctrlCategoryNavigation" runat="server" />
            <div class="clear">
            </div>

            <div class="clear">
            </div>

        </asp:ContentPlaceHolder>
    </div>
    <div class="master-wrapper-center-2">
        <div class="master-wrapper-cph-2">
            <asp:ContentPlaceHolder ID="cph1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
</asp:Content>

Which then points to the MasterPage:

The master page contains the reference “HeaderMenu” which contains my css horizontal menu and jquery slider:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Root.Master.cs" Inherits="NopSolutions.NopCommerce.Web.MasterPages.root" %>
<%@ Register TagPrefix="nopCommerce" TagName="Header" Src="~/Modules/Header.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HeaderMenu" Src="~/Modules/HeaderMenu.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="Footer" Src="~/Modules/Footer.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="GoogleAdsense" Src="~/Modules/GoogleAdsense.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <asp:PlaceHolder id="SCRIPTS" runat="server" />
    <asp:PlaceHolder id="phAnalyticsHead" runat="server" />


<script type="text/javascript" 
        src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    // You may specify partial version numbers, such as "1" or "1.3",
    //  with the same result. Doing so will automatically load the 
    //  latest version matching that partial revision pattern 
    //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.6.1).
    google.load("jquery", "1.6.1");

    google.setOnLoadCallback(function () {
        // Place init code here instead of $(document).ready()
    });
</script>


</head>
<body>
    <form id="form1" runat="server">
    <div class="master-wrapper-page">
        <div class="master-wrapper-content">
            <nopCommerce:Header ID="ctrlHeader" runat="server" />
            <nopCommerce:HeaderMenu ID="ctrlHeaderMenu" runat="server" />
            <asp:ContentPlaceHolder ID="cph1" runat="server">
            </asp:ContentPlaceHolder>
            <div class="clear">
            </div>
        </div>
        <nopCommerce:GoogleAdsense runat="server" ID="ctrlGoogleAdsense" />
        <nopCommerce:Footer ID="ctrlFooter" runat="server" />
    </div>
    </form>
<asp:PlaceHolder id="phAnalyticsBody" runat="server" />
</body>
</html>

AND finally below is my HeaderMenu page:

<%@ Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.HeaderMenuControl"
    CodeBehind="HeaderMenu.ascx.cs" %>
<%@ Register TagPrefix="nopCommerce" TagName="SearchBox" Src="~/Modules/SearchBox.ascx" %>
<script type="text/javascript">
    var page = window.location.pathname.split('/').pop();

    $('a[href$="' + page + '"]').parent().addClass('selected');


</script>
<script type="text/javascript">

    function slideSwitch() {
        var $active = $('#slideshow IMG.active');

        if ($active.length == 0) $active = $('#slideshow IMG:last');

        var $next = $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

        $active.addClass('last-active');

        $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1000, function () {
            $active.removeClass('active last-active');
        });
    }

    $(function () {
        setInterval("slideSwitch()", 5000);
    });


</script>




<div class="headermenu">
    <div class="searchbox">
        <nopCommerce:SearchBox runat="server" ID="ctrlSearchBox"></nopCommerce:SearchBox>
    </div>
    <div id="nav">
        <nav>
 <ul class="topmenu">
        <li><a id="current" href="<%=CommonHelper.GetStoreLocation()%>" class="home"><%=GetLocaleResourceString("Content.HomePage")%></a> </li>
        <% if (this.ProductService.RecentlyAddedProductsEnabled)
           { %>
        <li><a href="<%=Page.ResolveUrl("~/recentlyaddedproducts.aspx")%>">
            <%=GetLocaleResourceString("Products.NewProducts")%></a> </li>
        <%} %>
        <li><a href="<%=Page.ResolveUrl("~/search.aspx")%>">
            <%=GetLocaleResourceString("Search.Search")%></a> </li>
        <li><a href="<%= SEOHelper.GetMyAccountUrl()%>">
            <%=GetLocaleResourceString("Account.MyAccount")%></a> </li>
        <% if (this.BlogService.BlogEnabled)
           { %>
        <li><a href="<%= SEOHelper.GetBlogUrl()%>">
            <%=GetLocaleResourceString("Blog.Blog")%></a> </li>
        <%} %>
        <% if (this.ForumService.ForumsEnabled)
           { %>
        <li><a href="<%= SEOHelper.GetForumMainUrl()%>">
            <%=GetLocaleResourceString("Forum.Forums")%></a></li>
        <%} %>
        <li><a href="<%=Page.ResolveUrl("~/contactus.aspx")%>">
            <%=GetLocaleResourceString("ContactUs.ContactUs")%></a> </li>
    </ul>
    </nav>
    </div>
    <%-- add the slider below the headerMenu--%>

<div id="slideshow">
    <img src="../App_Themes/darkOrange/images/dc/slider2/1.jpg" alt="" class="active" />
    <img src="../App_Themes/darkOrange/images/dc/slider2/2.jpg" alt="" />
    <img src="../App_Themes/darkOrange/images/dc/slider2/3.jpg" alt="" />
    <img src="../App_Themes/darkOrange/images/dc/slider2/4.jpg" alt="" />
    <img src="../App_Themes/darkOrange/images/dc/slider2/5.jpg" alt="" />
    <img src="../App_Themes/darkOrange/images/dc/slider2/6.jpg" alt="" />
</div>

</div>

Sorry for the long email, couldnt explain it any other way…

Answer 1

I don’t now much about coding, but I had the same question a few weeks ago for a wordpress blog with a slider.
This was fixed by editing the index.php file with:

if(function_exists('wp_content_slider')) { 
       ?>
      <div id="slider"> 
        <?php wp_content_slider(); ?>  
      </div> <!-- #slider -->
      <?php } } ?>

So what this actualy does is only creating the slider on the index page of the website.
Maybe you can edit it to your needs and will it also work for nopCommerce.

Good luck 😉