In my previous Ajax cart I used a lot of JavaScript and jQuery to circumvent the code that is already in nopCommerce and recreate its functionality in a different way- basically I was reinventing the wheel. This version there is NO JavaScript or jQuery, just some slight changes to the code and some minor additions. This version fits a whole lot better into the existing framework and uses the code that is already there for everything so this version supports everything that nopCommerce has to offer - product attributes, gift cards, etc.
Here it is:
List of pages that need to be updated/changed:
Root.Master
OneColumn.Master/TwoColumn.Master/ThreeColumn.Master
ProductBox1.ascx/ProductBox2.ascx
ProductVariantsInGrid.ascx/OneVariant.ascx
The first step is the change the ScriptManager. The ScriptManger is what allows scripts to be run (such as JavaScripts, jQuery, etc.) on the website as well as allowing other Ajax components (such as an UpdatePanel) to work. By default, the ScriptManager code can be found in six files (excluding administration files), they are:
CheckoutOnePage.ascx
OneVariant.ascx
VariantsInGrid.ascx
ForumPostEdit.ascx
Account.aspx
PrivateMessages.ascx
Deletions
Because we're going to be adding a script manager to the root.master file we need to delete (or comment out) the script manager in the pages listed above. You can only have one script manager per page and since we'll be adding one to the master it will already be there. The code to delete looks like this:
<ajaxToolkit:ToolkitScriptManager runat="server" ID="sm1" EnableScriptGlobalization="true" EnableScriptLocalization="true" ScriptMode="Release" CompositeScript-ScriptMode="release"/>
Root.Master
Next we add the script manager to root.master, right after "<div class="master-wrapper-content"> place this code:
<ajaxToolkit:ToolkitScriptManager runat="server" ID="smRoot" EnableScriptGlobalization="true" EnableScriptLocalization="true" ScriptMode="Release" CompositeScript-ScriptMode="release"/>
Next we are going to add an update panel that will update the header so we can see the number of items in the cart and wishlist change in the header. Right after the script manager code do this:
Locate this code:
<nopCommerce:Header ID="ctrlHeader" runat="server"/>
And replace it with this code:
<asp:UpdatePanel runat="server" ID="HeadPanel" UpdateMode="Conditional">
<ContentTemplate>
<nopCommerce:Header ID="ctrlHeader" runat="server"/>
</ContentTemplate>
</asp:UpdatePanel>
Now we go to the code behind file for root.master (Root.Master.cs) and register the ContentPlaceHolder "cph1" as an asynchronous postback control. Add this code to the "protected override void OnLoad" method:
smRoot.RegisterAsyncPostBackControl(cph1);
This will allow all controls (buttons) in that ContentPlaceHolder to be able to update the update panels using the .Update() method.
Next we move to the designer file for root.master (Root.Master.designer.cs) and change the update panel from "protected" to "public", because we want to be able to access it from other pages in order to update it.
OneColumn/TwoColumn/ThreeColumn.Master
We are going to add another update panel to the other master files. If you're only going to be using one of these for your site then you only need to update that particular page. If you plan on having a mix, then you may want to update all of the master files.
Locate the code that looks like this:
<nopCommerce:MiniShoppingCartBox ID="ctrlMiniShoppingCartBox runat="server"/>
And replace it with this:
<asp:UpdatePanel runat="server" ID="CartPanel" UpdateMode="Conditional">
<ContentTemplate>
<nopCommerce:MiniShoppingCartBox ID="ctrlMiniShoppingCartBox runat="server"/>
</ContentTemplate>
</asp:UpdatePanel>
Next we go to the desiger file for whichever master file you're updating and change "CartPanel" from "protected" to "public" so we can access it from other pages to update it.
ProductVariantsInGrid.ascx.cs and OneVariant.ascx.cs
Add this to the "using" section of these pages:
using NopSolutions.NopCommerce.Web.MasterPages;This will allow us to see the master pages so we can update the panels on them.
Next we add the update code that will update the panel. You must find the code that says:
Response.Redirect("~/shoppingcart.aspx")And replace it with this:
((OneColumn)Page.Master).CartPanel.Update();
((TwoColumn)Page.Master).CartPanel.Update();
((ThreeColumn)Page.Master).CartPanel.Update();
((root)Page.Master.Master).HeadPanel.Update();
You only need to add update code for whichever master page(s) you are using.
You can skip this next step if you don't want stuff added to the wishlist this way or if you don't use the wishlist of course.
Next find the code that says:
Response.Redirect("~/wishlist.aspx")And replace it with this:
((root)Page.Master.Master).HeadPanel.Update();
ProductBox1.ascx.cs and ProductBox2.ascx.cs
Add this to the "using" section of these pages:
using NopSolutions.NopCommerce.Web.MasterPages;This will allow us to see the master pages so we can update the panels on them.
Next we add the update code that will update the panel. You must find the code that says:
Response.Redirect("~/shoppingcart.aspx")And replace it with this:
((OneColumn)Page.Master).CartPanel.Update();
((TwoColumn)Page.Master).CartPanel.Update();
((ThreeColumn)Page.Master).CartPanel.Update();
((root)Page.Master.Master).HeadPanel.Update();
You only need to add update code for whichever master page(s) you are using.
We now have an Ajax cart! When the user clicks on the "Add to Cart" button the item will be added to their cart and the mini cart box will be updated along with the number at the top of the screen - all without leaving the page or refreshing the whole page.
Hope this is less confusing than my other Ajax cart solution.
Andrei,
How about adding this to nopCommerce 1.90? Configurable, disabled by default??
C'mon Andrei, what do you say???
