an ASP.NET Open Source CMS & eCommerce platform
Search:
Skip Navigation Links
Tag: Customization
Add a Page Editor Enabled Custom Page to DotShoppingCart
Adding a custom page to DotShoppingCart is as simple as adding a page to any ASP.NET website. You can just create a page in folder that you like and start customizing your own content. If you wish to add a custom page that is integrated with DotShoppingCart e.g. page editor, theme etc, you will need to follow these steps.
 
1) Decide where you want to put the new page and create an entry in table DSC_Block_Type_lkp . And then retrieve the blockTypeId for the entry that has just been created.
e.g INSERT INTO DSC_Block_Type_lkp (Type, VirtualPath) VALUES ('My Page', '/Controls/Core/MyPage.ascx')
 
2) Add an entry to web\module.config to wire up the page url.
<add name="root" value="">
    <pages>
        <clear />
            <add name="MyPage" blockTypeId="99" />
    </pages>
</add>
 
3) Create a usercontrol under the path that you decided in step 1 e.g. web\controls\core\MyPage.ascx and make sure it's derived from PageBlockUserControl . You can take a look at any existing pages e.g. web\controls\UnSubscribe.ascx.cs for reference.
 
Add a custom ASP.NET UserControl into the DotShoppingCart (V2.5+)
There was an old blog entry talking about adding custom ASP.Net user control to DotShoppingCart. From DotShoppingCart V2.5 the page editor has been rewritten by using JQuery. As the result the way to integrate the custom ASP.NET user control is simplified.
 
1) Create a Standard ASP.NET stardard User Control and derive it from BlockUserControl
 
Check "Web/View/Blocks/TagCloud.ascx.cs" for the example.
 
using DotShoppingCart.Commercial.Core;
public partial class View_Blocks_TagCloud : BlockUserControl {
 
2) Hook up the new block type in DB
 
    a) Insert a new entry to dbo.DSC_Block_Type_lkp table
 
e.g. INSERT INTO DSC_Block_Type_lkp (type, virtualPath) VALUES ('My Block', '/Controls/Blocks/MyBlock.ascx')
 
    b) Insert a new entry to dbo.DSC_Block_Type_Group_Block_Type_Map
 
e.g. INSERT INTO DSC_Block_Type_Group_Block_Type_Map (BlockTypeGroupId, BlockTypeId, SortOrder) VALUES (3, <id that is created in step a>, 10)
 
To add your custom user control to page, just enable page edior and click "+" sign. Find the custom block in the proper group (which you add in the step b above).
Customize Product Summary Grid
DotShoppingCart allows you to customize the product summary easily. To do that just go to any product summary page and enable the page editor. Click "Edit" in the dropdown menu of the product summary block. See the image below.
 
 
Update the html code in "Product Summary Template". Notice there are tokens wrapped by %% e.g. %%ProductName%%. These tokens will be replaced by the product properties during the runtime.
 
 
Replace Dynamic Block Header Background With the Customized Static Image
In DotShoppingCart themes and skins are dynamic. When you change the colors in site admin, all the images in the themes are created again by using GDI+ API.
 
Check the areas surrounded by the red rectangles below. These background images are created dynamically.
 
and
 
 
The bottom ones are called block headers. This article describes how you can replace the block headers with your customized static images.
 
The css class for the block headers is "blockHeader". If you search the "blockHeader" against your entire solution, you will find one in Default.css
 
div.blockHeader {
    text-align:center;
      font-weight: bold;
}
 
div.blockHeader a {
      text-decoration: none;
}
 
and the other one in web/controls/blocks/BlockContainer.ascx.cs.
 
header.Attributes.Add("class", "blockHeader");
header.Attributes.Add("style", string.Format(BlockHeaderFormat, buc.HeaderData.Height - 6, buc.HeaderData.Width, buc.HeaderData.Height));
header.InnerText = buc.HeaderData.Title;
blockDiv.Controls.Add(header);
 
To use your customized static image as the block header background, please do
 
1) Add your background image to the div.blockHeader css style e.g. background-image:url(<your image url>);
2) Remove the code adding the inline style
header.Attributes.Add("style", string.Format(BlockHeaderFormat, buc.HeaderData.Height - 6, buc.HeaderData.Width, buc.HeaderData.Height));
 
Here is an example of the customzed header blocker.
 
 
Use Advanced Menu in Block Container to Achieve Another Layer of Customization
After you enable page editor, you will find a special menu item "Adavanced" in the dropdown menu of any block container. After you click it, you will see a warning sign "Note: please stop if you don't know HTML! Do not touch anything inside %% or you will get your site screwed up." As the general rule, if you are not familar with the raw HTML editing then please don't use this feature. Also you don't want to touch anything wrap around %%.
Disable or remove certain UI pieces

I had people asking how to disable some UI pieces in some pages. Here are some detail questions and my answers.

1) how do I disable the action buttons e.g. "Ask a Question", "Update Alert", "Tell a Friend" in product detail page?

In web\store\ProductAction.aspx, find <asp:ImageButton id="btnAskQuestion", <asp:ImageButton id="btnUpdateAlert", <asp:ImageButton id="btnTellFriend" and put visible="false" inside the tag.

2) Remove register link

In web\controls\blocks\LoginMenu.ascx, remove line <li><a href="<%=SiteNavigation.RegisterPage %>">Register</a></li>.

In web\controls\core\Login.ascx, remove these lines.

<td class="logincell">

    <asp:Button id="btnRegister" runat="server" text="Create New Account" />
</td>

In web\controls\core\Login.ascx.cs, remove these lines.

btnRegister.OnClientClick = string.Format("window.open('{0}{1}', '_self'); return false;",

    SiteNavigation.RegisterPage, string.IsNullOrEmpty(returnUrl) ? "" : "?ReturnUrl=" + returnUrl);

3) Remove customer Reviews in product detail page

In web\store\Product.aspx, remove those lines

<tr>

    <td colspan="2">
         <dsc:ProductReviews id="prvReview" runat="server" />
    </td>
</tr>

In web\store\Product.aspx.cs, remove those lines

prvReview.Product = product;
prvReview.DataBind();

4) Remove Redeem Gift Certificate in shopping cart page

In web\store\Cart.aspx, find <asp:Panel id="pnlGiftCertificate" runat="server"> and put visible="false" inside the tag.