jump to navigation

How to close common nopCommerce Gaps for .NET e-commerce providers December 6, 2012

Posted by fofo in asp.net, ASP.NET 4.0, ASP.Net MVC.
Tags: , ,
4 comments

For those of you, who do not know nopCommerce, let me first say that it is probably the best .NET e-commerce system out there with a comprehensive set of features and extensible architecture. .NET developers interested in e-commerce will certainly be more than happy to learn that nopCommerce is developed using .NET 4.5, EF 5 and MVC 4.

NopCommerce should certainly be in the toolbox of every .NET web company but as feature-rich and as extensible as it might be, you cannot offer the system to clients as it is, at least not with the default Dark Orange theme. But this is a normal part of the open source model and that is why every such system has a network of third party vendors to fill the gaps in the free software.

NopCommerce has quite a lot of customization partners and a few product vendors. But one particular set of products stand out from the rest.

In this blog post and the posts to follow I will try to show you how you can use the nopCommerce themes and extensions from Nop-Templates.com to build a solution for your e-commerce clients in literary minutes.

Looking at the default nopCommerce installation , http://demo.nopcommerce.com/,the first thing that I would like to have on my e-shop and probably the first thing that my e-commerce client will ask me for is how to put banners on the web site.  As a .NET web developer you have two options. Go out and find a sliding JQuery script, write some MVC code to integrate the JQuery script in wherever is appropriate in nopCommerce, and hard code some sliding images. This solution while possible will certainly require time researching and developing the code. If you are not familiar with nopCommerce you will have to factor in the learning curve too.

Fortunately we have the Nop Anywhere Sliders from Nop-Templates which will not only do all this but will also offer you a set of features, which will empower your nopCommerce with the possibility to put sliding images on any page and on as many pages as you need.

As a nopCommerce savvy user I have found working with the Nop Anywhere Sliders quite easy and intuitive. First of all you need to install the plugin via the nopCommerce administration:installPlugins

It is important that the SevenSpikes.Core plugin is installed before the Nop Anywhere Sliders.

Once you have the Nop Anywhere Sliders installed you can go to the administration of the plugin by clicking on the Plugins -> Nop  Anywhere Sliders -> Manage Sliders:

manageSlidersMenu

A slider according to the Nop-Templates terminology is a set of images and settings, which are setup to slide in one place. You can define as many of these sliders as you need and add them to any part of your web site. For example you can define a slider called HomePageMainSlider:

sliderSettings

Make sure that the slider dimensions are the same as the dimensions of your images. Most of the Slider Settings are self-explanatory and have a tooltip. If you need clarification on some of them you can visit the documentation page of the plugin which is also accessible via the Plugins -> Nop Anywhere Sliders -> Help Menu:

http://www.nop-templates.com/Help/NopAnywhereSliders/Version_2_7/lessons/Working_with_Nop_Anywhere_Sliders.html

Once you have configured your slider you can add some images to it by going to the Pictures tab:

sliderImages

For every image you can set the following settings:

sliderImageSettings

When you have you slider and images set up, what is left to do is to add it to your web site. You have several ways of doing this. The easiest way is add it via the predefined widget zones:

sliderWidgets

If we add the slider to the home_page_slider_top widget zone, it will appear on our home page just below the main menu. You have more than 20 predefined widget zones by default which should be plenty to position your sliders wherever you need on your nopCommerce web site. However if you do not find an appropriate widget zone you can manually integrate the slider. To do this you need to add the following line of razor code on the page where you want you slider to appear:

@Html.Action(“Slider”, “AnywhereSliders”, new { systemName = “HomePageMainSlider”})

Alternatively you can define your own widget zones and add them to the plugin so that you can use them for your sliders. For more information on this you can read the documentation:

http://www.nop-templates.com/Help/NopAnywhereSliders/Version_2_7/lessons/Integration.html

One of the coolest features that the Nop Anywhere Sliders is the ability to map sliders to categories:

sliderCategories

This is an important functionality for cases where you need a different slider for every category. The category page is the same for every category. It pulls the data for the category dynamically based on the id or name specified in the query string. Therefore you need this mapping so that the plugin knows when a specific category is being loaded which slider to add to the page. The category mapping is also supported by the manual integration of the plugin. If you are to add a slider manually to your category page you need to use the following line of Razor code:

@Html.Action(“CategorySlider”,”AnywhereSliders”, new { categoryId = Model.Id })

The category mapping of the plugin is quite a nifty feature, which can save you tons of coding and integration if you are to implement this from scratch.

I have covered the basics of working with the Nop Anywhere Sliders and I hope you will find this useful. The plugin is quite powerful and flexible and just does the job that it is supposed to do with very little effort required from the nopCommerce store owner or developer.

For more information do visit the product page:

http://www.nop-templates.com/p/4/nop-anywhere-sliders

Tableless menu control in ASP.Net 4.0 April 5, 2010

Posted by fofo in ASP.NET 4.0, Visual Studio 2010.
2 comments

One of the issues I really like to read and learn is client side technologies. I am an ASP.Net guy at heart but I find CSS particular useful and I have been blogging about CSS in my other  blog.

Have a look here if you want to have a look at some interesting posts on CSS.

I believe in designing web applications and sites according to web standards. I do not think designing our websites with tables is correct.

Tables should be used for what they are good at doing, Display tabular data .

So if we are in charge of our web template we should use Divs and an external CSS file to style the main areas of our template.

When it comes to web server controls we have the issue of not being in charge of the HTML that is emitted from the asp.net engine.

In asp.net 4.0, we have more control of the HTML that is produced from the asp.net engine.

Let’s see a little example by using the ASP.Net menu web server control and how it renders its HTML in ASP.Net 4.0.

To follow along with this example you must have .Net framework and VS 2010 RC installed in your machine.

1) Launch VS 2010

2) Create a new web site by selecting ASP.Net website from the templates

3) Choose C# or VB as the development language.

4) Save your site with an appropriate filename in your local filesystem

5) Create an ASP.Net menu control on the default.aspx. Change the RenderingMode to Table. This is a new property in ASP.Net 4.0. What this makes is to instruct the asp.net engine to render HTML code for the menu control the old way.

Your code should be like this

<asp:Menu runat=”server” ID=”mymenu” RenderingMode=”Table”>
<Items>
<asp:MenuItem Text=”Orders” Value=”orders”>

</asp:MenuItem>

<asp:MenuItem Text=”Sales” Value=”Sales”>

</asp:MenuItem>
<asp:MenuItem Text=”Customers” Value=”Customers”>

</asp:MenuItem>
<asp:MenuItem Text=”Employees” Value=”Employees”>

</asp:MenuItem>
</Items>

</asp:Menu>

6) Save your application and run it. Go to View->Source in the IE browser menu and see the HTML emitted.

It should be something like this. So it is styled like a table.

<table id=”MainContent_mymenu” class=”MainContent_mymenu_2″ cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr onmouseover=”Menu_HoverStatic(this)” onmouseout=”Menu_Unhover(this)” onkeyup=”Menu_Key(this)” id=”MainContent_mymenun0″>
<td><table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”100%”>
<tr>
<td style=”white-space:nowrap;width:100%;”><a class=”MainContent_mymenu_1″ href=”javascript:__doPostBack(‘ctl00$MainContent$mymenu’,’orders’)”>Orders</a></td>
</tr>
</table></td>
</tr><tr onmouseover=”Menu_HoverStatic(this)” onmouseout=”Menu_Unhover(this)” onkeyup=”Menu_Key(this)” id=”MainContent_mymenun1″>
<td><table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”100%”>
<tr>
<td style=”white-space:nowrap;width:100%;”><a class=”MainContent_mymenu_1″ href=”javascript:__doPostBack(‘ctl00$MainContent$mymenu’,’Sales’)”>Sales</a></td>
</tr>
</table></td>
</tr><tr onmouseover=”Menu_HoverStatic(this)” onmouseout=”Menu_Unhover(this)” onkeyup=”Menu_Key(this)” id=”MainContent_mymenun2″>
<td><table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”100%”>
<tr>
<td style=”white-space:nowrap;width:100%;”><a class=”MainContent_mymenu_1″ href=”javascript:__doPostBack(‘ctl00$MainContent$mymenu’,’Customers’)”>Customers</a></td>
</tr>
</table></td>
</tr><tr onmouseover=”Menu_HoverStatic(this)” onmouseout=”Menu_Unhover(this)” onkeyup=”Menu_Key(this)” id=”MainContent_mymenun3″>
<td><table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”100%”>
<tr>
<td style=”white-space:nowrap;width:100%;”><a class=”MainContent_mymenu_1″ href=”javascript:__doPostBack(‘ctl00$MainContent$mymenu’,’Employees’)”>Employees</a></td>
</tr>
</table></td>
</tr>
</table>

7) Change the RenderingMode to List, and build again your site.Go to View->Source in the IE browser menu and see the HTML emitted.

Youw will not see any tables. In its place you will see a list.Here it is.

<ul class=”level1″>


<li><a class=”level1″ href=”http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts&sectionid=1153&postid=7430143#&#8221; onclick=”__doPostBack(‘ctl00$MainContent$mymenu’,’orders’)”>Orders</a></li>

<li><a class=”level1″ href=”http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts&sectionid=1153&postid=7430143#&#8221; onclick=”__doPostBack(‘ctl00$MainContent$mymenu’,’Sales’)”>Sales</a></li>

<li><a class=”level1″ href=”http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts&sectionid=1153&postid=7430143#&#8221; onclick=”__doPostBack(‘ctl00$MainContent$mymenu’,’Customers’)”>Customers</a></li>

<li><a class=”level1″ href=”http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts&sectionid=1153&postid=7430143#&#8221; onclick=”__doPostBack(‘ctl00$MainContent$mymenu’,’Employees’)”>Employees</a></li>


</ul>

It is so much easier to style menus with CSS when we have ul,li elements as the HTML semantic.

To see how to do that have a look here

Hope that helps!!!

Hidden Div elements in ASP.Net 4.0 April 5, 2010

Posted by fofo in ASP.NET 4.0, Visual Studio 2010.
2 comments

This is a very short post for a new feature that ships with VS 2010 and ASP.Net 4.0.

It is about the hidden fields in ASP.Net 4.0. We do know that ASP.Net is using hidden fields as a state control mechanism. It is used to preserve viewstate and control state.

They are usually included in a div element, <div></div>.

So if you create a simple asp.net application with VS 2008 and .Net 3.5, run it, and view the source code from the browser,

you would see something like that

<div>
<input type=”hidden” name=”__EVENTTARGET” id=”__EVENTTARGET” value=”” />
<input type=”hidden” name=”__EVENTARGUMENT” id=”__EVENTARGUMENT” value=”” />
<input type=”hidden” name=”__VIEWSTATE” id=”__VIEWSTATE” value=”/wEPDwUKLTQ0NTA1MjAxMmRkjIozh8I5q9vNjFXLeK/1IBsUwBM=” />
</div>

Sometimes if you style your div elements in your external css file, those rules that apply for all div elementsin your code, will apply for that <div> that surrounds the hidden field elements that deal with the viewstate.

Sometimes you can end up having a result in your browser window that is different from what you expected. The guilty part for that outcome can be the styling of those div tags that surround viewstate.

We have a small but very welcome change in ASP.Net 4.0

If you create a simple asp.net application with VS 2010 and view the source code after you run it, you will see something like this

<div class=”aspNetHidden”>
<input type=”hidden” name=”__VIEWSTATE” id=”__VIEWSTATE” value=”/wEPDwUJNzM3NjE2MDI3ZGRgQNiFxlXngQrLz2ewgBmti+Ee0T+BGCrLcGwY5QJnmQ==” />
</div>

As we can clearly see, ASP.NET 4 renders the div element for hidden fields with a CSS class.

In that way we can differentiate the hidden fields div from others.

Hope it helps!!!

301 permanent redirects and ASP.Net 4.0 March 22, 2010

Posted by fofo in asp.net, ASP.NET 4.0, Visual Studio 2010.
add a comment

 Hello all,

In this post, I would like to talk about a new method of the Response object that comes with ASP.Net 4.0.

The name of the method is RedirectPermanent.

Let’s talk a bit about 301 redirection and permanent redirection.301 redirect is the most efficient and Search Engine Friendly method for webpage redirection.

Let’s imagine that we have this scenario. This is a very common scenario. We have redesigned and move folders to some pages that have high search engine rankings. We do not want to lose those rankings.

We can permanently redirect traffic to the new pages without losing page rankings by using the 301 permanent redirect. RedirectPermanent help us to achieve that.

In order to demonstrate this new helper method, I will create the default asp.net website that comes with asp.net 4.0.

1) Fire VS 2010 and create a new website. Choose the filesystem to save your website ann VB as the .net language for this website

This is a much richer template that the previous ones that were created with VS 2008.

We have a Home page and an About page.

2) Create a new page and call it NewAbout (NewAbout.aspx)

3) Write some dummy content on it like “This is our new About us page”

4) Move to the About.aspx.vb, and in the page load event, type the following

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Response.RedirectPermanent(“~/NewAbout.aspx”)
    End Sub

5)  Now run your application and then click “About” page. You will permanently redirect to the new “NewAbout” page.

Hope it helps!!!!

ASP.Net 4.0 and session state compression March 22, 2010

Posted by fofo in asp.net, ASP.NET 4.0, Visual Studio 2010.
add a comment

Hello folks,

In this post I would like to talk about a new feature of ASP.NET 4.0 –  easy state compression.

When we create web-asp.net applications the user must feel that whenever he interacts with the website, he actually interacts with something that can be safely described as an application.

What I mean by this is that is that during a postback the whole page is re-created and is sent back to the client in a fraction of a second. The server has no idea what the user does with the page.

If we had to work on that basis then we would not have an application but a series of disconnected web pages with no use at all.

In order to overcome this deficit, we do have various session state mechanisms that are well documented elsewhere on the internet.

ASP.NET session state can identify requests from the same user during a specified time interval and gives us a way to preserve variable values for the duration of that session-time interval.

Here come the obvious question. Where are all those variables stored?

ASP.NET session state supports several different storage options for session data. One of them is SQL Server.

All the variables data persist to a SQL Server database rather than being stored in memory.

We must create the tables and stored procedures that ASP.NET will look for on the SQL Server. Have a look here for more details on how to accomplish that.

So what happens is that Session state is serialised into bytes and stored in those sql server tables.

Now we must add some configuration to our application. and how do we do that?

We do add some lines in the web.config file.Have a look

<sessionState allowCustomSqlDatabase=”true” sqlConnectionString=”data source=local;Initial Catalog=sessionstatedb” compressionEnabled=”true” />

The important setting that was added in ASP.Net 4.0 is the last setting, compressionEnabled=”true”.

This means that all the session data that is transferred between the client and the server can now be compressed, resulting in better performance.

Hope it helps!!!

Follow

Get every new post delivered to your Inbox.

Join 1,794 other followers