N-webdesign blog

NopCommerce 2.3 (MVC) alternative product gallery

Tue, 10 Jan 2012 16:30:00 +0000

I had a request recently to change the thumbnail selections in the product detail screen from a popup (using Slimbox2) to an option that changes the main image when clicking a thumbnail.

This is pretty standard fayre and you can do the ajax stuff either by writing your own image swap script or using an existing gallery plugin.

I opted for changing from Slimbox to Galleriffic. This makes it really easy to do, gives a ton of options and is pretty easy to do.

Ok, on with the show...

This is probably a reasonably good guide to extending or changing NopCommerce 2+ (MVC) code, which is probably something a lot of people will be trying to do.

you'll need a working version of NopCommerce with source code and Galleriffic. Nop is here, Galleriffic is here. JQuery is already in Nop, so no need to worry about that.

First thing to do is find where the existing image pop-ups are generated?

If you look in ProductTemplates.VariantsInGrid.cshtml, you'll see a reference to _ProductDetailsPictures in a render call. This is probably where we need to look.

In _ProductDetailsPictures.cshtml, we see several really cool things.

A reference to AddScriptParts() with a call to Slimbox (Great, we now know where to inject our JQuery/Plugin stuff)
A reference to the default picture in a div (@Model.DefaultPictureModel etc)
A set of thumbnails in a table

So we know that Galleriffic [in our example] needs a reference to JQuery, itself and an initialiser. It also needs a div to target with the selected image (or the default) and a set of thunbs in a list with the correct #id.

JQuery is loaded already for this view.

Copy the Galleriffic script into the scripts folder (in Nop.Web).

Now, create an initialiser script in the scripts folder. Call it something like 'gallery.init.js'. Add the inititaliser as per Galleriffic. Mine looks like this:

jQuery(document).ready(function($) {
var gallery = $('#thumbs').galleriffic({
// delay: 3000, // in milliseconds
// numThumbs: 20, // The number of thumbnails to show page
// preloadAhead: 40, // Set to -1 to preload all images
// enableTopPager: false,
// enableBottomPager: true,
// maxPagesToShow: 7, // The maximum number of pages to display in either the top or bottom pager
imageContainerSel: '.picture', // The CSS selector for the element within which the main slideshow image should be rendered
controlsContainerSel: '#controls', // The CSS selector for the element within which the slideshow controls should be rendered
// captionContainerSel: '', // The CSS selector for the element within which the captions should be rendered
// loadingContainerSel: '', // The CSS selector for the element within which should be shown when an image is loading
renderSSControls: false, // Specifies whether the slideshow's Play and Pause links should be rendered
renderNavControls: false, // Specifies whether the slideshow's Next and Previous links should be rendered
// playLinkText: 'Play',
// pauseLinkText: 'Pause',
// prevLinkText: 'Previous',
// nextLinkText: 'Next',
// nextPageLinkText: 'Next ›',
// prevPageLinkText: '‹ Prev',
// enableHistory: false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
// enableKeyboardNavigation: true, // Specifies whether keyboard navigation is enabled
autoStart: false, // Specifies whether the slideshow should be playing or paused when the page first loads
syncTransitions: false, // Specifies whether the out and in transitions occur simultaneously or distinctly
defaultTransitionDuration: 1000, // If using the default transitions, specifies the duration of the transitions
onSlideChange: undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
onTransitionOut: undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
onTransitionIn: undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
onPageTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
onPageTransitionIn: undefined, // accepts a delegate like such: function() { ... }
onImageAdded: undefined, // accepts a delegate like such: function(imageData, $li) { ... }
onImageRemoved: undefined // accepts a delegate like such: function(imageData, $li) { ... }
});
});

(This shows all the available options with any unused ones commented out, so it's a bit messy here).

Now in the _ProductDetailsPictures.cshtml file, comment out or delete the reference to Slimbox.js and add these 2 references:

@{
Html.AddScriptParts(@Url.Content("~/Scripts/jquery.galleriffic.js"));
}
@{
Html.AddScriptParts(@Url.Content("~/Scripts/gallery.init.js"));
}

If you like, you can now F5 and check it all runs, and the 2 files are showing in the source.

We now need to add one thing to the 'model', so we can get a uniform display of product images, irrespective of size. Here's what I mean and why.

In the standard Slimbox presentation, it loads the default image into the picture div, which it gets from '@Model.DefaultPictureModel.FullSizeImageUrl'.

This formats the image based on 'Product detail image size' in Media Settings, which is in the DefaultPictureModel, which we don't have available in our PictureModel.

To fix this, we need to add a new field to the PictureModel which we can use in the controller to define a set of picture URLs that are set to the correct [and uniform] size.

This means that we can upload images of different sizes into the product details, but we can always rely on them being re-sampled to whatever our 'picture' div is set to, so we don't get unruly behaviour if someone uploads a 800 x 800 pixel image. We always get in bounced down to out defined setting.

Open PictureModel.cs [in Nop.Web/Models/Media. Add the line 'public string ProductImageURL { get; set; }' with all the other getters & setters. This just gives us a place to define a URL specifically for our uniform images.

(This really should be done as an extended partial class, so we retain the base code intact. It's cool if you want to do it that way, this is just a bit easier to manage for now).

Next, we need to amend the controller to add data into our new ProductImageURL. In theory, we could add a whole new controller for this, but just changing the existing one works. Open CatalogueController.cs (it's in Controllers) and find the ActionResult for Product (about line 1165).

The bit we need to amend is actually in the 'PrepareProductDetailsPageModel(product);' method, so navigate to there. Scroll down to the 'pictures' section, and there are 2 things it does. One is set the DefaultPictureModel and the other is to create a list of PictureModels based on the product model pictures.

Just add the line:

ProductImageURL = _pictureService.GetPictureUrl(picture, _mediaSetting.ProductDetailsPictureSize),

Into the model.PictureModels.add() call. Don't forget the trailing comma! This will give us a URL, with the correct picture size, to use as a reference in our thumbs list.

Now we need to remove the default picture reference from the picture div, plus create a list of thumbs in _ProductDetailsPictures.cshtml.

So comment out or remove the contents of the picture div, so it now looks like this:

[EDIT: You may want to call this div prod-picture, as I just noticed another div called picture if you add related products. Whatever you call it, don't forget to re-name the target 'imageContainerSel:' var in the gallery init script!]

This tells the initialiser where to put the images when we select them. You'll note it is regerenced in the initialiser script.

Now comment out or remove the table contining the thmbs and replace with:

<div id="thumbs">
@if (Model.PictureModels.Count > 0)
{
<ul class="thumbs noscript">
@foreach (var picture in Model.PictureModels)
{
<li>
<a
href="@picture.ProductImageURL"
rel="lightbox-p"
title="@Model.Name"
class="thumb">
<img src="@picture.ImageUrl" alt="@picture.AlternateText" title="@picture.Title" />
</a>
</li>
}
</ul>
}
</div>

This creates a div #thumbs that Galleriffic needs to find its content. You'll need to do some CSS to format the list how you like it.

Not, we've also changed the code above to '@if (Model.PictureModels.Count > 0)'. In the original, it only showed thumbnails if we had 2 or more images, but in this version, we need to show all the thumbs.

So there you have it. A pretty simple alternative to Slimbox2.

Enjoy :)

Gallery module for NopCommerce 1.90

Tue, 20 Dec 2011 11:35:00 +0000

I've updated our Gallery for NopCommerce to a 1.90 version.

It's basically the same thing as the earlier version, but works with 1.90.

Files are available on Sourceforge.

If you have any questions, comments or spot any omissions, please let us know.

Enjoy/

NopGallery - Update

Fri, 28 Oct 2011 10:22:00 +0000

I've added the BETA source for a NopCommerce popup gallery to Sourceforge.

It's basically the sode from the previous blog article.

Note, it's only written for < 1.7. A newer version (with more gallery providers) may turn up some day :)

/enjoy.

Better Google Base [Taxonomy] in nopCommerce 1.9

Wed, 25 May 2011 16:28:00 +0000

The time has come for me to add the taxomomy details to a nopCommerce 1.9 build. It wasn't in 1.9 by default, but [on the face of it] it seems pretty easy to add stuff in 1.8/1.9 with the introduction of the Entity Framework library, which makes naming convention important, but makes new objects and entities easier, once you figure out a few things.

This isn't a tutorial on ASP.NET or c#.

This isn't a how-to or turorial on Entity Frameworks.

This isn't a discussion of Google Merchant Centre, Taxonomy or why it's important.

This isn't a 'how to extend nopCommerce' tutorial per se, but you could use this example to extend it yourself for your own objects.

If you aren't familiar with c#, Entity Framework stuff and the workings of a .NET application, you probably need to take your time with this. I'm not going to hold your hand through things that aren't related to the broad strokes of this process. And remember, don't break what you can't fix, so back everything up first, so if it goes awry [and it probably will if you are new to all this] you can restore and start again.

This will be followed [hopefully next week] with a 1.9 version of the popup gallery, which will also be extended to allow 2 options for the gallery. One will be to show in a slimbox2 [LightBox] style, the other will be to display as an easySlider1.7 'scrolling' affair that I've used in nopCommerce 1.* with great effect. But more on that next week.

This article will show you how to add Taxonomy to products in nopCommerce 1.9 [and 1.8 with a few extra requirements for EF].

Here are a few notes on how we want the implementation to work:

We will download and create a 'taxonomy' table to store all out items. We'll grab the data itself from Google and do an import (or in my case, a copy from another project that I have it in).

Once we have the data, we want to be able to add our own categories/entries to it, so we want a new menu item [I'm putting it in products] to link to the list/add/edit/delete pages for taxonomy.

In the earlier version, I had set it to have a single selectable taxonomy with an additional textbox to manually add the extra text, but this is a bit restrictive, so I'm making it so you can select as many entries as you like for the product, and also as mentioned above, to add new taxonomy details fo your own to select from a drop down.

So we also need a custom property adding to product and a table for ProductID <-> GoogleTaxonomyID linking. This just means we can have as many Taxonomy categories per product and the pivot/link table stores them all, so we have less messing around in the core model. We just add an entry with ProductID and GoogleTaxonomyID, then retrieve any List<> by ProductID in the main product object.

So, first things first. Get the Google Taxonomy list and create a table from it in your nopCommerce database. See this post for how to download and set up the taxonomy table.

Ok, now we need to add our objects to the solution. I'm adding a sub-folder in products, called GoogleProductTypes. It kinda makes sense being in there.

Once added, you can add a Class called GoogleProduct.cs and add the ID(int) and Name(string) fields to it, using the same names as the corresponding fields in the Taxonomy table. This is fairly important, as the Entity Framework uses the call and datatable names to match objects. You can call one apples and one oranges, but it just means you have to edit the EF diagram manually, which is a bit pointless if you just name stuff the same from the off.

Your class should look something like:

//######################################

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace NopSolutions.NopCommerce.BusinessLogic.Products.GoogleProductTypes
{
public partial class GoogleProduct : BaseEntity
{

#region Properties

public int GoogleProductTypeID { get; set; }
public string GoogleProductType { get; set; }

#endregion

}
}

//#######################################

Next, open the Entity Framework diagram, and right click, then select update from the database. This will add the new taxonomy table to the model. You will need to edit the imported object, as it will come in called nop_GoogleProductType or similar, and we want it to be called 'GoogleProduct' to match our class name.

Once we have this set, we can now add out Service [manager] class and the interface. So, create a new interface in our GoogleProductTypes folder, next to our GooglePRoduct.cs and call it IGoogleProductService.cs.

We will be building this Interface up as we add new metthods but for now, we only need all the Taxonomy items in a list, so add: List<GoogleProduct> GetAllGoogleProducts();, so the Interface looks like...

//#######################################

using System;
using System.Collections.Generic;

namespace NopSolutions.NopCommerce.BusinessLogic.Products.GoogleProductTypes
{
public partial interface IGoogleProductService
{
#region Methods

List<GoogleProduct> GetAllGoogleProducts();

#endregion
}
}

//#######################################

Ok, now the actual class, called GoogleProductService as follows...

//#######################################

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using NopSolutions.NopCommerce.BusinessLogic.Caching;
using NopSolutions.NopCommerce.BusinessLogic.Data;

namespace NopSolutions.NopCommerce.BusinessLogic.Products.GoogleProductTypes
{
public partial class GoogleProductService : IGoogleProductService
{

#region Fields

/// <summary>
/// Object context
/// </summary>
private readonly NopObjectContext _context;

/// <summary>
/// Cache manager
/// </summary>
private readonly ICacheManager _cacheManager;

#endregion

#region Ctor

/// <summary>
/// Ctor
/// </summary>
/// <param name="context">Object context</param>
public GoogleProductService(NopObjectContext context)
{
this._context = context;
this._cacheManager = new NopRequestCache();
}

#endregion

#region Methods

public List<GoogleProduct> GetAllGoogleProducts()
{
var query = from p in _context.GoogleProduct
orderby p.GoogleProductType
select p;
var products = query.ToList();
return products;
}

#endregion
}
}

//#######################################

For now, we have a single method, GetAllGoogleProducts() that just does that. We are keeping it simple and building up from this slowly, so we know it all works as we go.

Now we want to add a new set of pages to admin, so we can manage these Taxonomy entries. We do this by adding a menu to admin.sitemap and then a set of pages, based on the current structure, to show, add, amend and delete items.

Open the admin sitemap, and in the catalog section under Manufacturers, add a line for Google Product Types. Just copy the manufacturers one and edit it.

I've pointed mine at ~/administration/googleproducttypes.aspx, so we now need to add the page. This is just a normal admin page, so go and add it now. make sure it uses the admin master page, then add a user control called GoogleProductTypes.ascx and add it to the page.

Now these pages need to use all the same base classes as the other pages and controls, so just copy any inheritance from other pages. I normally just pick a set of pages that is closest to the structure of what I' adding, so in this case I've copied the logic from the Manufacturers.aspx/ascx to give me my method prototypes and inheritance.

Once you've created the page and user control, just add the GoogleProductTypes.ascx control to the page. We'll now plumb in all the data and stuff.

First, add 'using NopSolutions.NopCommerce.BusinessLogic.Products.GoogleProductTypes;' to BaseNopUserControl.cs, then add the new service. Like:

public IGoogleProductService GoogleProductService
{
get { return IoC.Resolve<IGoogleProductService>(); }
}

This goes in with the other services. It just allows us to use tons of built-in libraries and methods without invocating the classes ourselves, as they are already in the scope.

Once this is done, we can reference our GoogleProductService directly from the user control class. The ascx file will look like this:

//##############################################

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GoogleProductTypes.ascx.cs" Inherits="NopSolutions.NopCommerce.Web.Administration.Modules.GoogleProductTypes" %>

<div class="section-header">
<div class="title">
<img src="Common/ico-catalog.png" alt="<%=GetLocaleResourceString("Admin.Manufacturers.Title")%>" />
<%=GetLocaleResourceString("Admin.GoogleProductTypes.Title")%>
</div>
<div class="options">
<input type="button" onclick="location.href='GoogleProductTypesAdd.aspx'" value="<%=GetLocaleResourceString("Admin.GoogleProductTypes.AddButton.Text")%>"
id="btnAddNew" class="adminButtonBlue" title="<%=GetLocaleResourceString("Admin.GoogleProductTypes.AddButton.Tooltip")%>" />
</div>
</div>
<table class="adminContent">
<asp:GridView ID="gvGoogleProductTypes" runat="server" AutoGenerateColumns="False" Width="100%"
OnPageIndexChanging="gvGoogleProductTypes_PageIndexChanging" AllowPaging="true" PageSize="15">
<Columns>
<asp:TemplateField HeaderText="<% $NopResources:Admin.GoogleProductTypes.Name %>" ItemStyle-Width="65%">
<ItemTemplate>
<%#Server.HtmlEncode(Eval("GoogleProductType").ToString())%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="<% $NopResources:Admin.GoogleProductTypes.Edit %>" HeaderStyle-HorizontalAlign="Center"
ItemStyle-Width="20%" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<a href="GoogleProductTypesDetails.aspx?GoogleProductTypeID=<%#Eval("GoogleProductTypeId")%>" title="<%#GetLocaleResourceString("Admin.GoogleProductTypes.Edit.Tooltip")%>">
<%#GetLocaleResourceString("Admin.GoogleProductTypes.Edit")%>
</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerSettings PageButtonCount="50" Position="TopAndBottom" />
</asp:GridView>
</table>

//##############################################

And the code behind (.cs) file will look like this:

//##############################################

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.IO;
using System.Text;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml;
using NopSolutions.NopCommerce.BusinessLogic.ExportImport;
using NopSolutions.NopCommerce.BusinessLogic.Manufacturers;
using NopSolutions.NopCommerce.Common.Utils;
using NopSolutions.NopCommerce.BusinessLogic.Infrastructure;
using NopSolutions.NopCommerce.BusinessLogic.Products.GoogleProductTypes;

namespace NopSolutions.NopCommerce.Web.Administration.Modules
{
public partial class GoogleProductTypes : BaseNopAdministrationUserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindGrid();
}
}

protected void BindGrid()
{
var googleproducttypes = this.GoogleProductService.GetAllGoogleProducts();
gvGoogleProductTypes.DataSource = googleproducttypes;
gvGoogleProductTypes.DataBind();
}

protected void gvGoogleProductTypes_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvGoogleProductTypes.PageIndex = e.NewPageIndex;
BindGrid();
}
}
}

//##############################################

Now if you F5, the app will run (this is good) but you'll get an error when you try to load the GoogleProductTypes page in admin. This is because you need to add an entry in the UnityDependancyResolver.cs file. This is in BusinessLogic/Infrastructure. Add the following line 'using NopSolutions.NopCommerce.BusinessLogic.Products.GoogleProductTypes;' to the using directive and add this to the page in the obvious place:

container.RegisterType<IGoogleProductService, GoogleProductService>(new UnityPerExecutionContextLifetimeManager());

Sorry about that. Please bear in mind, for speed rather than clarity, I'm adding this to a build as I write it up, so please bear with me. I'll provide all code in a file at the end, so don't panic about missing anything.

Ok, now F5 and navigate to administration, then the new section in Products, you'll see a big list of taxonomy details, ready to edit. You'll need to add localisation tokens etc, but the basics are there.

So what now?

Well, we need an add, an edit and a update for this bit, and then a way of adding a list of taxonomy names to products.

Ok, so the add facility. We need a page called 'GoogleProductTypesAdd.aspx'. Add this and a corresponding 'GoogleProductTypesInfo.ascx' user control. Do the same as we did with the main page and control, using a reference page. Again, I'm going to use Manufacturers, as that is a simple(ish) object. The only difference is, I'm adding an info control directly for add/edit, rather than as a control within the ad control, as on the Manufacturers usage. This is because we only want a really simple single textbox, no tabs or complex content.

GoogleProductTypesAdd.aspx is pretty simple. It just has the GoogleProductTypesInfo.ascx user control in it. The GoogleProductTypesInfo.ascx control looks as follows:

//#######################################

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GoogleProductTypesInfo.ascx.cs" Inherits="NopSolutions.NopCommerce.Web.Administration.Modules.GoogleProductTypesInfo" %>
<%@ Register TagPrefix="nopCommerce" TagName="SimpleTextBox" Src="SimpleTextBox.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="ToolTipLabel" Src="ToolTipLabelControl.ascx" %>
<div class="section-header">
<div class="title">
<img src="Common/ico-catalog.png" alt="<%=GetLocaleResourceString("Admin.GoogleProductTypesAdd.Title")%>" />
<%=GetLocaleResourceString("Admin.GoogleProductTypesAdd.Title")%><a href="Manufacturers.aspx"
title="<%=GetLocaleResourceString("Admin.ManufacturerAdd.BackToManufacturers")%>">
(<%=GetLocaleResourceString("Admin.GoogleProductTypesAdd.BackToManufacturers")%>)</a>
</div>
<div class="options">
<asp:Button ID="SaveButton" runat="server" Text="<% $NopResources:Admin.ManufacturerAdd.SaveButton.Text %>"
CssClass="adminButtonBlue" OnClick="SaveButton_Click" ToolTip="<% $NopResources:Admin.ManufacturerAdd.SaveButton.Tooltip %>" />

<asp:Button ID="SaveAndStayButton" runat="server" CssClass="adminButtonBlue" Text="<% $NopResources:Admin.ManufacturerAdd.SaveAndStayButton.Text %>"
OnClick="SaveAndStayButton_Click" />
</div>
</div>
<table class="adminContent">
<tr>
<td class="adminTitle">
<nopCommerce:ToolTipLabel runat="server" ID="lblName" Text="<% $NopResources:Admin.GoogleProductTypesInfo.Name %>"
ToolTip="<% $NopResources:Admin.GoogleProductTypesInfo.Name.Tooltip %>" ToolTipImage="~/Administration/Common/ico-help.gif" />
</td>
<td class="adminData">
<nopCommerce:SimpleTextBox runat="server" ID="txtName" CssClass="adminInput" ErrorMessage="<% $NopResources:Admin.GoogleProductTypesInfo.Name.ErrorMessage %>">
</nopCommerce:SimpleTextBox>
</td>
</tr>
</table>

//#####################################

And the GoogleProductTypesInfo.ascx.cs code behind is like:

//#####################################

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using NopSolutions.NopCommerce.BusinessLogic.Manufacturers;
using NopSolutions.NopCommerce.BusinessLogic.Media;
using NopSolutions.NopCommerce.BusinessLogic.Products;
using NopSolutions.NopCommerce.BusinessLogic.Templates;
using NopSolutions.NopCommerce.Common.Utils;
using NopSolutions.NopCommerce.Web.Administration.Modules;
using NopSolutions.NopCommerce.BusinessLogic.Infrastructure;
using NopSolutions.NopCommerce.BusinessLogic.Products.GoogleProductTypes;

namespace NopSolutions.NopCommerce.Web.Administration.Modules
{
public partial class GoogleProductTypesInfo : BaseNopAdministrationUserControl
{
private void BindData()
{
var googleproducttype = this.GoogleProductService.GetGoogleProduct(this.GoogleProductTypeId);

if (googleproducttype != null)
{
this.txtName.Text = googleproducttype.GoogleProductType;
}
}

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.BindData();
}
}

protected override void OnPreRender(EventArgs e)
{
BindJQuery();
BindJQueryIdTabs();

base.OnPreRender(e);
}

protected void SaveButton_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
try
{
GoogleProduct googleproduct = SaveInfo();
Response.Redirect("googleproducttypes.aspx");
}
catch (Exception exc)
{
ProcessException(exc);
}
}
}

protected void SaveAndStayButton_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
try
{
GoogleProduct googleproduct = SaveInfo();
Response.Redirect("GoogleProductTypesAdd.aspx?GoogleProductTypeID=" + googleproduct.GoogleProductTypeID);
}
catch (Exception exc)
{
ProcessException(exc);
}
}
}

public GoogleProduct SaveInfo()
{
var googleproducttype = this.GoogleProductService.GetGoogleProduct(this.GoogleProductTypeId);

if (googleproducttype != null)
{

googleproducttype.GoogleProductType = txtName.Text;
this.GoogleProductService.UpdateGoogleProductType(googleproducttype);
}
else
{
googleproducttype = new GoogleProduct()
{
GoogleProductType = txtName.Text,
};
this.GoogleProductService.AddGoogleProductType(googleproducttype);
}

return googleproducttype;
}

public int GoogleProductTypeId
{
get
{
return CommonHelper.QueryStringInt("GoogleProductTypeId");
}
}
}
}

//#####################################

So now, if we F5 and check it all out, we can add and edit new taxonomy entries here.

We might need to re-visit this bit to add better filtering and searching (like the options available in Localisation) but we'll worry about that later.

At this moment, we have about half of the structure we need for the complete implementation. Hopefully you've got here error free or have been able to fix anything that has arisen. It's pretty likely that you'll have some errors with the entity framework and other bits of the model process, but as a tip, make sure all your data tables have a primary key and an identity field, that the naming convention between the database and the classes we are adding in consistent and that you take small steps, especially when you are learning new stuff like Entity Framework models.

Ok, on to stage 2. Adding the mappings for google product types to our products.

We are going to add a mapping table in the database, with a ProductID and a GoogleProductTypeID, a new tab to the 'Products' section and some nifty selection options to add/remove entries with ease.

I considered either a dropdown selector with an add new, or a checkbox list stylee thing as in the categories tab, but aas there are nearly 4000 taxonomies, it was a no brainer. We will be adding a list of already available items, a dropdown for adding new ones and a linkbutton to delete existing ones.

This should be [in theory] fairly painless with the EF stuff, but here goes. (I've had a lot of trouble with it so far, as I tend to fight stuff like this, rather than accept it knws best :)).

So first, add the table to the database.

//################################

USE [my-database]
GO

/****** Object: Table [dbo].[Nop_GoogleProductTypeMapping] Script Date: 05/26/2011 16:38:38 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Nop_GoogleProductTypeMapping](
   [GoogleProductTypeMappingID] [int] IDENTITY(1,1) NOT NULL,
   [GoogleProductTypeID] [int] NULL,
   [ProductID] [int] NULL,
CONSTRAINT [PK_GoogleProductTypeMapping] PRIMARY KEY CLUSTERED
(
   [GoogleProductTypeMappingID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

//########################################

Next, add a GoogleProductTypeMapping.cs file to our GoogleProductTypes folder, like so:

//########################################

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace NopSolutions.NopCommerce.BusinessLogic.Products.GoogleProductTypes
{
public partial class GoogleProductTypeMapping : BaseEntity
{

#region Properties

public int GoogleProductTypeMappingID { get; set; }
public int GoogleProductTypeID { get; set; }
public int ProductID { get; set; }

#endregion

}
}

//#####################################

...then add these new methods to the IGoogleProductService.cs file:

void AddGoogleProductToProduct(GoogleProductTypeMapping googleproducttypemapping);

void RemoveGoogleProductFromProduct(int ProductID, int GoogleProductTypeID);

GoogleProductTypeMapping GetGoogleProductTypeMapping(int ProductID, int GoogleProductTypeID);

GoogleProductTypeMapping GetGoogleProductMapping(int GoogleProductTypeMappingID);

List<GoogleProductTypeMapping> GetGoogleProductTypeMapping(int ProductID);

...and also add them to the GoogleProductService.cs file as follows...

//######################################

public GoogleProductTypeMapping GetGoogleProductTypeMapping(int ProductID, int GoogleProductTypeID)
{
var query = from m in _context.GoogleProductTypeMapping
where m.ProductID == ProductID && m.GoogleProductTypeID == GoogleProductTypeID
select m;
var mapping = query.SingleOrDefault();

return mapping;
}

public GoogleProductTypeMapping GetGoogleProductMapping(int GoogleProductTypeMappingID)
{
var query = from m in _context.GoogleProductTypeMapping
where m.GoogleProductTypeMappingID == GoogleProductTypeMappingID
select m;
var mapping = query.SingleOrDefault();

return mapping;
}

public void AddGoogleProductToProduct(GoogleProductTypeMapping googleproducttypemapping)
{

_context.GoogleProductTypeMapping.AddObject(googleproducttypemapping);
_context.SaveChanges();

}

public void RemoveGoogleProductFromProduct(int ProductID, int GoogleProductTypeID)
{
var googlemapping = GetGoogleProductTypeMapping(ProductID, GoogleProductTypeID);
if (googlemapping == null)
return;

if (!_context.IsAttached(googlemapping))
_context.GoogleProductTypeMapping.Attach(googlemapping);
_context.DeleteObject(googlemapping);
_context.SaveChanges();
}

public List<GoogleProductTypeMapping> GetGoogleProductTypeMapping(int ProductID)
{
var query = from m in _context.GoogleProductTypeMapping
where m.ProductID == ProductID
select m;
var mapping = query.ToList();
return mapping;
}

//#####################################

Finally, do the 'update from database' on the NopModel.edmx file. Remember to rename the new mapping table to match the class we've just added.

We also need to expose the list in our Products.cs class, so in our extensions folder in Nop.BusinessLogic [make one if you haven't go one], extend our partial products class like so:

//#####################################

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using NopSolutions.NopCommerce.BusinessLogic.Infrastructure;
using NopSolutions.NopCommerce.BusinessLogic.Products.GoogleProductTypes;

namespace NopSolutions.NopCommerce.BusinessLogic.Products
{
public partial class Product : BaseEntity
{
public List<GoogleProduct> GoogleProducts
{
get
{
return IoC.Resolve<IGoogleProductService>().GetAllGoogleProductsByProduct(this.ProductId);
}
}
}
}

//#####################################

This just adds a property of type List of GoogleProducts, so we can reference them in the code later on.

Now we can add the section to the 'Products' tabs in the admin section.

In administration/modules, add a user control called 'ProductGoogleMappings.ascx'. It looks something like:

//#####################################

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProductGoogleMappings.ascx.cs" Inherits="NopSolutions.NopCommerce.Web.Administration.Modules.ProductGoogleMappings" %>
<%@ Register TagPrefix="nopCommerce" TagName="ToolTipLabel" Src="ToolTipLabelControl.ascx" %>

<asp:Panel runat="server" ID="pnlData">
<asp:GridView ID="gvwGoogleMappings" runat="server" AutoGenerateColumns="false" DataKeyNames="GoogleProductTypeMappingID"
OnRowDeleting="gvwGoogleMappings_RowDeleting" Width="100%">
<Columns>
<asp:TemplateField HeaderText="<% $NopResources:Admin.ProductGoogleMappings.GoogleMapping %>">
<ItemTemplate>
<%#Server.HtmlEncode(Eval("GoogleProduct.GoogleProductType").ToString())%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="<% $NopResources:Admin.ProductGoogleMappings.Delete %>"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="btnDeleteGoogleMappings" runat="server" CssClass="adminButton" Text="<% $NopResources:Admin.ProductGoogleMappings.Delete %>"
CausesValidation="false" CommandName="Delete" CommandArgument='<%# Bind("GoogleProductTypeMappingID") %>' ToolTip="<% $NopResources:Admin.ProductGoogleMappings.Delete.Tooltip %>" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<p>
<strong>
<%=GetLocaleResourceString("Admin.ProductGoogleMappings.AddNewGoogleMapping")%>
</strong>
</p>
<table class="adminContent">
<tr>
<td class="adminTitle">
<nopCommerce:ToolTipLabel runat="server" ID="lblSelectPicture1" Text="<% $NopResources:Admin.ProductGoogleMappingss.SelectMappings %>"
ToolTip="<% $NopResources:Admin.ProductGoogleMappings.SelectGoogleMappings.Tooltip %>" ToolTipImage="~/Administration/Common/ico-help.gif" />
</td>
<td class="adminData">
<asp:DropDownList ID="ddlGoogleMappings" CssClass="adminInput" runat="server"
ToolTip="<% $NopResources:Admin.ProductGoogleMappings.DropDownList %>" />
</td>
</tr>
<tr>
<td colspan="2" align="left">
<asp:Button runat="server" ID="btnAddGoogleMapping" CssClass="adminButton" Text="<% $NopResources:Admin.ProductGoogleMappings.Add.Text %>"
ToolTip="<% $NopResources:Admin.ProductGoogleMappings.Add.Tooltip %>"
onclick="btnAddGoogleMapping_Click" />
</td>
</tr>
</table>
</asp:Panel>

//#####################################

...and the 'ProductGoogleMappings.ascx.cs' code behind file as follows:

//#####################################

using System;
using System.Collections;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using NopSolutions.NopCommerce.BusinessLogic.Categories;
using NopSolutions.NopCommerce.BusinessLogic.Manufacturers;
using NopSolutions.NopCommerce.BusinessLogic.Media;
using NopSolutions.NopCommerce.BusinessLogic.Products;
using NopSolutions.NopCommerce.BusinessLogic.Products.Specs;
using NopSolutions.NopCommerce.BusinessLogic.Templates;
using NopSolutions.NopCommerce.Common.Utils;
using NopSolutions.NopCommerce.Web.Administration.Modules;
using NopSolutions.NopCommerce.BusinessLogic.Infrastructure;
using NopSolutions.NopCommerce.BusinessLogic.Products.GoogleProductTypes;

namespace NopSolutions.NopCommerce.Web.Administration.Modules
{
public partial class ProductGoogleMappings : BaseNopAdministrationUserControl
{
private void BindData()
{
var googlemapping = this.GoogleProductService.GetGoogleProductTypeMapping(this.ProductId);
if (googlemapping != null)
{
pnlData.Visible = true;

gvwGoogleMappings.Visible = true;
gvwGoogleMappings.DataSource = googlemapping;
gvwGoogleMappings.DataBind();

}
else
{
pnlData.Visible = false;
}
}

private void FillDropDown()
{
var googlemapping = this.GoogleProductService.GetAllGoogleProducts();
ddlGoogleMappings.DataSource = googlemapping;
ddlGoogleMappings.DataTextField = "GoogleProductType";
ddlGoogleMappings.DataValueField = "GoogleProductTypeID";
ddlGoogleMappings.DataBind();
}

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.BindData();
this.FillDropDown();
}
}

public void SaveInfo()
{
}

protected void gvwGoogleMappings_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
int GoogleProductTypeMappingID = (int)gvwGoogleMappings.DataKeys[e.RowIndex]["GoogleProductTypeMappingID"];
GoogleProductTypeMapping GoogleMapping = this.GoogleProductService.GetGoogleProductTypeMapping(ProductId, GoogleProductTypeMappingID);
if (GoogleMapping != null)
{
this.GoogleProductService.RemoveGoogleProductFromProduct(ProductId, GoogleProductTypeMappingID);
BindData();
}

}

protected void btnAddGoogleMapping_Click(object sender, EventArgs e)
{
GoogleProductTypeMapping googlemapping = new GoogleProductTypeMapping();

googlemapping.ProductID = ProductId;
googlemapping.GoogleProductTypeID = Convert.ToInt16(ddlGoogleMappings.SelectedValue);

this.GoogleProductService.AddGoogleProductToProduct(googlemapping);

BindData();
}

public int ProductId
{
get
{
return CommonHelper.QueryStringInt("ProductId");
}
}
}
}

//#####################################.

Then, in the 'ProductDetails.ascx', add a reference to the new user control like:

<%@ Register TagPrefix="nopCommerce" TagName="GoogleMappings" Src="~/Administration/Modules/ProductGoogleMappings.ascx" %>

...and add a new tab to the ajax tabb control:

<ajaxToolkit:TabPanel runat="server" ID="pnlGoogleMappings" HeaderText="<% $NopResources:Admin.ProductDetails.GoogleMappings %>">
<ContentTemplate>
<nopCommerce:GoogleMappings ID="ctrlGoogleMappings" runat="server" />
</ContentTemplate>
</ajaxToolkit:TabPanel>

That should be pretty straightforward. Now F5 again, login, navigate to a product and you should see a new tab with our newly added list [as yet unpopulated] of google product types and an add option.

I've glossed over some of the minor points of adding the logic and mechanics to the pages, but you can see whaer we add the google products list to the drop down and where we commit the add/update via the entity framework stuff.

Ok, so now we have a list of google product types, a way of adding them and managing them in products, and a way of exposing this information in the code.

All that is left now is to add them to the Froogle.ashx file.

So, open the FroogleService.cs file (Found in PromotionProviders/Nop.Froogle].

Now we have the data in our Product class ready to roll, we can be quite creative with how we use it, but I'm keeping it simple for this implementation.

We willl basically iterate through the 'GoogleProducts' List in the Product class and add this to the xml feed data. So first, add a reference to the Google Products library:

using NopSolutions.NopCommerce.BusinessLogic.Products.GoogleProductTypes;

Then add the following in the code at around line 97, just after the comments about google product type attributes.

string sout = "";

foreach (GoogleProduct c in product.GoogleProducts)
{
if (sout.Length > 0)
{
sout += ", ";
}

sout += "\"" + c.GoogleProductType + "\"";
}

if (sout.Length > 0)
{
writer.WriteStartElement("g", "product_type", googleBaseNamespace);
writer.WriteCData(sout);
writer.WriteFullEndElement();
}
.
This simply adds a list of taxonomy entries to the file.

And that's it. We're done.

Please be aware that this will probably have a few errors in it or the odd think I've missed, so please let me know if you spot anything and I'll amend it. Once I've got it in production somewhere, I'll add the complete code to SourceForge (which will be a lot easier for you!). If you have any other comments or suggestions, please let me know.

Enjoy. ed/

Better Google Base in nopcommerce

Thu, 03 Feb 2011 12:00:00 +0000

Following a read of a topic on the nopCommerce forum, and my own research into changes at Google for base/Merchant Centre, I've come to a few conclusions about the feed from nopCommerce and looking at ways to improve it.

I'm paralleling this blog with the work on a nopCommerce 1.6 site, but it should be fairly close to the requirements for earlier versions. I will then be applying it to a nopCommerce 1.8 site, which is similar in structure, but has several library changes and has introduced a lot more interfaces and other things (as .NET 4/VS2010 allows) that may confuse non-developers, so I'll do some notes on that when I get round to completing it.

The intention of this addition is to not be too fancy, make it meaningful and get it working in a few hours. You can really go to town on the features and functionality here, but all I'm really interested in doing is integrating a set of values that can be selected and applied to a category, then applied to a base feed. There will be loads of extras to add, like multiple product_types per category. There will be better places to put things and better ways to do this, but as long as it fits to nopCommerce programming style and gets info into Google base per product, that's enough for now.

It's likely that for v1.9, this will all be added to nopCommerce by default (they seem to be pretty good at adding things to new versions that I've added to older ones!) as IMHO, froogle/base is one of the most important aspects of selling products on-line.

Now, on with the show.

Get the taxonomy types download from here.

I got the text version, as I'm only going to add the data as rows, like 'Arts & Entertainment > Collectibles > Sports Collectibles > Sports Trading Cards > Soccer Trading Cards' in a single field.

Ok, lets import the data. I'm using SQLServer 2008 r2, which has a nice DTS (those were the days) style import feature. Right click on the nop db and select 'Tasks > Import Data'.

Select the file to import and just follow the wizard. I called the new table [Nop_GoogleProductTypes] but call it what you like.. If you have a problem with importing the text, just rename it as csv , open/save as excel (so you get a single column sheet) and import this. You'll also need to add an ID field to the table, and set this as the Identity field.

Ok, so we have the product_types. What is the best way to add these to the products and where is the best place to put the data?

My thoughts are that this should sit at the category level. This seems the most appropriate way to make the setting specific without being a nightmare to manage. And it's probably the most logical, but since when was that important :o

If you haven't extended a class object in nopCommerce before, it's a bit scary. Once you have got familiar with the structure of the code, it's really not that bad (apart from product variant attribute combinations, but that's another story!) and is mostly uniform in structure, so you get used to it pretty quickly.

What we are going to do, is add an identifier property for the product type (the ID of the newly imported product_type) to the category class, then add a custom property which will require a new but very simple object called 'GoogleProductType' or similar, then add the update/add fields to the existing nopCommerce admin area. We don't really need to add any manager classes for the new product types, but it'll need a collection object. If we add it to an existing class folder, we'll also avoid having to add a new provider.

So with this in mind, I'm going to add this to the categories folder. It's probably the best place, as it is only related to [in myinterpretation] categories.

Navigate to Solution > Libraries > Nop.BusinessLogic > Categories, right click on the categories folder and select Add > New Item. Add a new class called 'GoogleProductType.cs'.

Change the class definition to: public partial class GoogleProductTypes : BaseEntity. For completeness, I like to add a summary and regions as per nopCommerce standards, but it won't make the program work any better, so it isn't essential you do to.

Add a class initialiser inside the class definition.

public GoogleProductTypes()
{

}

Add 2 public properties, one for GoogleProductTypeID and one for GoogleProductTypeName, so your completed calss looks like:

using System;
using System.Collections.Generic;
using System.Text;

namespace NopSolutions.NopCommerce.BusinessLogic.Categories
{
/// <summary>
/// Represents a GoogleProductType
/// </summary>
public partial class GoogleProductTypes : BaseEntity
{
#region Ctor
/// <summary>
/// Creates a new instance of the Category class
/// </summary>
public GoogleProductTypes()
{

}
#endregion

#region Properties

/// <summary>
/// Gets or sets the GoogleProductType identifier
/// </summary>
public int GoogleProductTypeId { get; set; }

/// <summary>
/// Gets or sets the GoogleProductType name
/// </summary>
public string GoogleProductTypeName { get; set; }

#endregion

#region Custom Properties

#endregion
}
}

Now we need a collection class. Create a new class as above, called 'GoogleProductTypeCollection.cs'.

Collection classes are pretty boring these days, so just make it look like:

using System;
using System.Collections.Generic;
using System.Text;

namespace NopSolutions.NopCommerce.BusinessLogic.Categories
{
/// <summary>
/// Represents a GoogleProductType collection
/// </summary>
public partial class GoogleProductTypeCollection : BaseEntityCollection<GoogleProductTypes>
{

}
}

For the interested amongst you, the magic in these collections is done by inheriting from BaseEntityCollection and passing the object type. All the list add/remove stuff that does the work is referenced directly from in there.

Now this is the bit that probably makes most people who try to extend nopCommerce give up. It's the way nopCommerce references objects of type by expressing them in several places, in a seemingly confusing manner.

What we have done so far is create a partial class (and a collection for it) which means we will be defining other bits of this class structure elsewhere. See[url= http://msdn.microsoft.com/en-us/library/wa80x488%28v=vs.80%29.aspx]this for a better explanation than I can give.

Next, we go to Nop.DataAccess > Categories and add a 'DBGoogleProductType.cs' class. This is pretty much identical to the class we added to Categories, so make sure it looks like:

using System;
using System.Collections.Generic;
using System.Text;

namespace NopSolutions.NopCommerce.DataAccess.Categories
{
/// <summary>
/// Represents a GoogleProductType
/// </summary>
public partial class DBGoogleProductType : BaseDBEntity
{
#region Ctor
/// <summary>
/// Creates a new instance of the Category class
/// </summary>
public DBGoogleProductType()
{

}
#endregion

#region Properties

/// <summary>
/// Gets or sets the GoogleProductType identifier
/// </summary>
public int GoogleProductTypeId { get; set; }

/// <summary>
/// Gets or sets the GoogleProductType name
/// </summary>
public string GoogleProductTypeName { get; set; }

#endregion
}
}

Next add a collection for this, called 'DBGoogleProductTypeCollection.cs'. It'll look like:

using System;
using System.Collections.Generic;
using System.Text;

namespace NopSolutions.NopCommerce.DataAccess.Categories
{
/// <summary>
/// Represents a GoogleProductType collection
/// </summary>
public partial class DBGoogleProductTypeCollection : BaseDBEntityCollection<DBGoogleProductType>
{

}
}

Next, we need to add our product type to the category. This will actually give you a good idea of how nopCommerce objects knit together, as well as allowing you to do something useful with it.

Open the Category.cs file and add:

public int GoogleProductType { get; set; }

public string GoogleProductTypeText { get; set; }

To the properties region at the end. The reason for 2 fields is that we wand to get the id of the google product_type, but also to be able to add a free-form value of our own to append.

Now add the same 2 fileds to the DBCategory.cs' file, in the same place.

Now we need to add the 'custom' GoogleProductType object to the category. This might not seem necessary now, but when we use the category later in the actual feed, we'll be thankful we did. There is a fair bit of seemingly wierd code to add, but it's all necessary, so please bear with me.

If you have done this before, you'll know it's a bit of a wild journey through some odd places to add wierd code.

First, we need to add a method or two in the CategoryManager.css class. We need to get all the Google Product Types for adding to a drop down for selection, and also to return a single one for a category to call as a custom property.

Open DBCategoryProvider.cs and add:

public abstract DBGoogleProductType GetGoogleProductType(int GoogleProductTypeID);

...at the end of the methods already in there.

In CategoryManager.cs, add a method with the same name, like:

public static GoogleProductType GetGoogleProductType(int GoogleProductTypeID)
{
var dbitem = DBProviderManager<DBCategoryProvider>.Provider.GetGoogleProductType(GoogleProductTypeID);
var productType = DBMapping(dbitem);

// More code to go here...
}

This will give a few errors, but we'll deal with them as we go.

Now we need to add a DBMapping to tell the program which DB field matches which object property.

So at the end of the #region Utilities section, add a dbmapping like:

private static GoogleProductType DBMapping(DBGoogleProductType dbItem)
{
if (dbItem == null)
return null;

var item = new GoogleProductType();
item.GoogleProductTypeId = dbItem.GoogleProductTypeId;
item.GoogleProductTypeName = dbItem.GoogleProductTypeName;

return item;
}

This matches fields in the partial classes together later on when we have data from the db ready to build our object.

Next (I know, but please be patient!) we need to add the method signature from theDBCategoryProvider to the SQLCategoryProvider.cs file (Found in Nop.DataAccess.SQLServer).

public override DBGoogleProductType GetGoogleProductType(int GoogleProductTypeID)
{
DBGoogleProductType item = null;
Database db = NopSqlDataHelper.CreateConnection(_sqlConnectionString);
DbCommand dbCommand = db.GetStoredProcCommand("Nop_GoogleProductTypeGet");
using (IDataReader dataReader = db.ExecuteReader(dbCommand))
{
if (dataReader.Read())
{
item = GetGoogleProductTypeFromReader(dataReader);
}
}

return item;
}

Then add a method to get the data from the reader:

private DBGoogleProductType GetGoogleProductTypeFromReader(IDataReader dataReader)
{
var item = new DBGoogleProductType();
item.GoogleProductTypeId = NopSqlDataHelper.GetInt(dataReader, "GoogleProductTypeID");
item.GoogleProductTypeName = NopSqlDataHelper.GetString(dataReader, "GoogleProductType");
return item;
}

In Category.cs, add:

public GoogleProductType GoogleProductType
{
get
{
return CategoryManager.GetGoogleProductType(this.GoogleProductTypeID);
}
}

Which will get the underlying object from the product type id.

Now we need to reflect this new information in the database for categories, and add fields to the presentation layer in the admin section.

So, in Nop_Categories in the database, add 2 new fields. One called something like GoogleProductTypeID, type INT, one called GoogleProductType, type NVARCHAR(255). This will allow us to add a default Google Product Type, and also append our own bits to the taxonomy.

We now need to add methods to return the GoogleProductTypes in a collection that we can add to our Category Admin page(s).

To add the methods to get a collection of GooglePRoductTypes, we need to duplicate the same process as we added for a single object, so in the CategoryManager.cs file, add a new method below the GetGoogleProductType() method we created earlier, like this:

public static GoogleProductTypeCollection GetGoogleProductTypes()
{
var dbCollection = DBProviderManager<DBCategoryProvider>.Provider.GetGoogleProductTypes();
var productTypeCategoryCollection = DBMapping(dbCollection);

return productTypeCategoryCollection;
}

You'll get erros, but don't worry, we'll fix them now.

In DBCategoryProvider.cs, add the following abstract method definition at the end, just after the one we added earlier.

public abstract DBGoogleProductTypeCollection GetGoogleProductTypes();

Now back to the CategoryManager class, we need to add a DBMapping for the collection, so just below the GoogleProductType DBMapping we added earlier, add:

private static GoogleProductTypeCollection DBMapping(DBGoogleProductTypeCollection dbCollection)
{
if (dbCollection == null)
return null;

var collection = new GoogleProductTypeCollection();
foreach (var dbItem in dbCollection)
{
var item = DBMapping(dbItem);
collection.Add(item);
}

return collection;
}

Ok, so far, so good. We have fixed the errors, so all the methods match correctly. We added the method definition to the DBCategoryProvider.cs file, so we now need to add the actual method to the SQLCategoryProvider.cs file to get the stuff out of the DB and into the app.

Now create another stored proc called something like Nop_GoogleProductTypesGet and then add this method at the end of the SQLCategoryProvider.cs file:

public override DBGoogleProductTypeCollection GetGoogleProductTypes()
{
var result = new DBGoogleProductTypeCollection();
Database db = NopSqlDataHelper.CreateConnection(_sqlConnectionString);
DbCommand dbCommand = db.GetStoredProcCommand("Nop_GoogleProductTypesGet");

using (IDataReader dataReader = db.ExecuteReader(dbCommand))
{
while (dataReader.Read())
{
var item = GetGoogleProductTypeFromReader(dataReader);
result.Add(item);
}
}

return result;
}

(Note: I'm not adding the stored proc details here. They are pretty simple selects, so you should be able to figure out what to do with them).

Ok, time for a deep breath and a think about what we have done so far.

We've added a new table to the db for Google Product Types, added new fields to our Category object, added a new object type to represent GoogleProductTypes, made it all nopCommerce stylee and prepared some methods to retrieve and use this new info.

Ok, so let's do some actual work that people can see. (I often explain the iceberg principle, but it never makes sense to anyone!).

I'm going to add the 2 new fields to the SEO panel in the Category Details page. We could put it elsewhere, make our own panel or add it somehere odd, but the SEO panel works for me.

If you check in CategoryDetails.ascx, you'll see we need to edit CategorySEO.ascx. So open this in the editor.

In the table where the field values are listed, add 2 new rows, one for the dropdown and one for the text field. You should add all the localisation tokens etc, but I've essentially got 2 new controls. A DropDownList called ddlGoogleProductType and a textbox called txtGoogleProductType.

Now press F7 to see the codebehind.

We are interested in 3 things here. Getting the new data fields out of the DB and into the controls, filling the dropdownlist and writing data back in.

NOTE: There are references to Localised content here, but for the purpose of this document, I'm going to ignore them and just make amends to the SaveInfo() method. The localisation functionality is important to nopCommerce, but for now (as a proof of concept) I'm keeping it simple.

Now add:

this.txtGoogleProductType.Text = category.GoogleProductTypeText;

To the BindData() method, after the other calls to fill TextBoxes.

We'll be adding the dropdownlist stuff too now. Add this method to the CategorySEO.cs file:

protected void FillDropDown()
{
ddlGoogleProductType.DataSource = CategoryManager.GetGoogleProductTypes();
ddlGoogleProductType.DataTextField = "GoogleProductTypeName";
ddlGoogleProductType.DataValueField = "GoogleProductTypeID";
ddlGoogleProductType.DataBind();
}

Now add FillDropDown(); to the BindData() method. We will now 'find' the selected product type (if available).

Next, add:

ddlGoogleProductType.Items.Insert(0, "");

...to the BindData() method. This allows us to use 0 as the type (And we could also add a default value of zero to the GoogleProductID field in Nop_Category in the database).

Now add:

if (category.GoogleProductTypeID != null)
{
if (category.GoogleProductTypeID > 0)
{
ddlGoogleProductType.Items.FindByValue(category.GoogleProductTypeID.ToString()).Selected = true;
}
}

...to select the stored value. (It'll be null at the moment, because we've not added the field to the DBMapping for Category. It should be in the stored proc, because nopCommerce generally uses SELECT *.

So if we have a look, we see this uses GetCategoryByID() from the Category Manager.cs file, so we need to update the GetCategoryFromReader() method by adding:

item.GoogleProductType = NopSqlDataHelper.GetInt(dataReader, "GoogleProductTypeID");
item.GoogleProductTypeText = NopSqlDataHelper.GetString(dataReader, "GoogleProductType");

This will add the field values to the object.

EDIT: Some SP's aren't using SELECT *, so we need to add our new fields to them. The ones I've updated are:

[Nop_CategoryLoadAll]
[Nop_CategoryLoadByPrimaryKey]

I've just added the new field names to the selects. Namely:
,
c.GoogleProductType,
c.GoogleProductTypeID

Ok, now in the SaveInfo() method, add 2 new parameters to the UpdateCategory() method call, ', ddlGoogleProductType.SelectedValue, txtGoogleProductType.Text'.

Navigate to the method in CategoryManager and add the new parameters to the list, eg: ', int GoogleProductTypeID, string GoogleProductType'.

Then in the method, add them to the Provider.UpdateCategory() method, like ', GoogleProductTypeID, GoogleProductType'.

Now open DBCategoryProvider.cs and update the UpdateCategory() method by adding ', int GoogleProductTypeID, string GoogleProductType' to the parameters.

Next, we need to edit the UpdateCategory() method in SQLCategoryProvider.cs. Again, we add the 2 new parameters, like: ', int GoogleProductTypeID, string GoogleProductType'.

We then add 2 new parameters to the stored procedure parameter list and also to the stored proc itself. Add this to the UpdateCategoty() method:

db.AddInParameter(dbCommand, "GoogleProductTypeID", DbType.Int32, GoogleProductTypeID);
db.AddInParameter(dbCommand, "GoogleProductType", DbType.String, GoogleProductType);

Then add the 2 perameters and inserts in the stored procedure. (Nop_CategoryUpdate).

You'll also need to update the references to the UpdateCategory() method in MarkCategoryAsDeleted() and RemoveCategoryPicture(). Both of these are in the CategoryManager class. And also SaveInfo() in the CategoryInfo.ascx.cs file.

I also noticed I'd missed adding:

item.GoogleProductTypeID = dbItem.GoogleProductType;
item.GoogleProductTypeText = dbItem.GoogleProductTypeText;

to the Category DBMapping in CategoryManager(), so it was adding ok, but not returning. Ooops.

I also missed adding the parameter to GetGoogleProductType() in SQL CategoryProvider. Add

db.AddInParameter(dbCommand, "GoogleProductTypeID", DbType.Int32, GoogleProductTypeID);

Under the DBCommand dbcommand = statemnt.

Ok, so now, if you run the app (and fix a few likely errors that occur!) you can add a Google Product Type to a category.

Now, [and at last, the point of all this!] we can add this information to our froogle feed.

We see a few nuances and other things we now need to think about. A product has one or many categories, so we need to add them all to this feed.

For now, I've added this to the FroogleService.cs file, just after the commented out reference to product_type:

string sout = "";

foreach (ProductCategory c in product.ProductCategories)
{
if (c.Category.GoogleProductTypeID > 0)
{
if (sout.Length > 0)
{
sout += ", ";
}
sout += "\"" + c.Category.GoogleProductType.GoogleProductTypeName + " " + c.Category.GoogleProductTypeText + "\"";
}
}

if (sout.Length > 0)
{
writer.WriteStartElement("g", "product_type", googleBaseNamespace);
writer.WriteCData(sout);
writer.WriteFullEndElement(); // g:brand
}

This basically builds a list of comma-separated values, in quotes, as per the spec, to account for multiple categories.

Hopefully, this will be helpful to someone, or at least give a leg-up when adding it to your site.

It is by no means a complete solution and in reality, it needs a lot more functionality and features before it's commercial strength.

This works ok for me, but I accept you may have problems, or I've made some [very likely] typos and omissions, so please ask if you need help.

Thanks for reading.

/ed.

User-friendly pop-up image gallery for NopCommerce

Wed, 17 Nov 2010 12:19:00 +0000

The problem...

I have done several 'hacks' to nopCommerce to add galleries to pages. These normally involve a new page, a load of custom code and a very inflexible editing system for the CMS user.

This isn't a problem with nopCommerce, but the 'Topics' section (which is used to edit CMS style page content) is good but basic.

The solution

That's pretty easy [in theory]. Create something that lets you add some simple markup to a page, then the necessary Slimbox jQuery stuff, then somewhere to add the image files and then a widget/whoozip/thingymajig to knit it all together.

In practice, it's still pretty easy, but requires some thought and the scary prospect of adding some custom classes, objects and database stuff to nopCommerce.

The best part of all this is, it is written following nop style code, using 2 new tables in the db and about 10 new stored procs,so it'll be really easy to upgrade and it is written to run inside the Content Management section of nop admin so it'll be right where editors need it.

Actually, the best part is that once you have added images, which is just like adding an image to a product, the only thing you need to do is add

to the source in the topic and it adds the gallery right there.

Actually, it's not that scary really. Here's what I've done...

Breaking eggs...

Ok, we need a custom gallery class to store galleries, pics, titles and stuff.

The admin screens to manage it all.

We need a gallery popup/markup script to do the magic. (Slimbox in our case, but this could be adopted to anything JQuery/Prototype based really?).

We need some glue to fix it all together.

The bad news

Well, kinda bad news. I haven't got the gallery totally production ready, so you're going to have to wait a while for the full how-to, source files and changes.

I have got the gallery working in a live site that is soon to get Galleried up, so to get your juices running, here are some screenshots of the gallery in use.

The gallery editor, sitting happily in the Content menu...

The gallery listing. This will show as many galleries as you add...

Editing a single galley will show the images that are in the gallery. These will be cycled through as per SlimBox...

Here's a gallery item, shown on a topic page. Remember, 1 line of markup to add!

This shows the SlimBox rendering on the gallery image.

There are things to do...

As usual, test it. Then test it some more.

Document it and refine it a little.

This is in v1.6. Check it in v1.8

How do you add multiple galleries to a page? I dunno? I'll try it and see what happens.

If you are interested in using the gallery on your site, please let me know. I have a tendancy to make things work, then leave them as-is, which works for me, but can be a pain for other people. Shame me into writing these things up properly!

Adding a twitter feed to nop with twittertable

Fri, 08 Oct 2010 17:32:00 +0000

One great thing about writing software for the internet is the availability of really cool libraries and apps, often for free.

I've just added the really simple and effective Tweetable JQuery plugin to a nop build. It's so simple (mainly due to nop, JQuery and Tweetable) that you can be up and running with it in minutes.

Although I am talking about nop and .NET here, this can be added to anything really easily, it's just that I've added it to a nop build and many nop newbies struggle to get their head round adding bespoke content, so hopefully it will be useful for them to get something meaningful up on their site.

Ok, you need 3 things. A twitter account (actually, you don't log in or anything, so in theory, you could grab anyone's tweets), a nop site and the Tweetable files.

So, first things first.

Tweetable works by grabbing ajax data from twitter and making a list which it puts in a div. Just a normal UL/LI html list in a normal div.

This is great, because it means you can create a user control with hardly any markup that can go almost anythere on the page. It makes it easy to control the layout in CSS and in theory, you could have several tweet feeds on a page, all in different sizes and shapes. you wouldn't really do this, but you might want to show this in different places on several pages.

So for flexibility, add a new user control called Tweetable.ascx or whatever you like. In nop, it's best to add it in the Modules folder for consistency, but on other .NET builds, add it wherever you like.

No if you are using nop, open the Tweetable.ascx.cs file and inherit from BaseNopUsercontrol instead of the default System.Web.UserControl.

Next, we need to add the Tweetable JS file and JQuery references.

JQuery is used a lot in nop, so just if check it's referenced in the site. I find that Ctrl+U in Firefox, then F3 and type jquery in the find will show it it's there.

Now copy the jquery.tweetable.js file into your Scripts folder or wherever you normally store Javascript files.

In the Tweetable.ascx.cs file, add a ClientScriptInclude to the page inside the Page_Load() method. Something like:

if (!Page.ClientScript.IsClientScriptIncludeRegistered(this.GetType(), "Tweetable"))
{
Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "Tweetable", "../Scripts/jquery.tweetable.js");
}

Obviously change the target to match your script location.

If you need to add JQuery too, just add a reference before the above code, something like:

if (!Page.ClientScript.IsClientScriptIncludeRegistered(this.GetType(), "JQuery"))
{
Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "JQuery", "../Scripts/jquery-1.4.min.js");
}

This will make the necessary JQuery things available to the page.

Now we need to add the invocation and the target div for our tweets.

In the Tweetable.ascx file, add a script under the <%@ Control %> directive as follows.

This is pretty self explanatory, but basically this is calling the nwebdesign tweets, and getting 3 of them. You can get as many or as few as you like.

We then add a target div for Tweetable to fill. Add this directly under the script invocation as follows:

Once this is done, you can simply drag Tweetable.ascx from the Solution Explorer directly in to a page (or just type the include and control tag in manually) and you are ready to roll.

Once it is all working, you can copy the styles from the css file provided with Tweetable and edit it for your needs or just write your own styles.

If you want it to have a little more flexibility and take advantage of settings in nop, you can move the invocation script into the .ascx.cs file and build the javascript call dynamically.

Tweetable references 4 JSON style values: username:, time:, limit:, replies:.

Add 4 entries in the settings table:

Tweetable.TweetUser (The twitter user)
Tweetable.TweetTime (Set true/false whether we show time)
Tweetable.TweetLimit (The number of tweets to show)
Tweetable.TweetReplies (Set true/false whether we show replies)

These are all set as strings, as we will be using them in a StringBuilder().

Now we can create a StringBuilder object and build the javascript we need and add it in a ClientScriptInclude as we did with JQuery and the Tweetable plugin.

In the Tweetable.ascx.cs file, add this in the Page_Load() method following the JQuery and Tweetable includes:

if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), "Tweets"))
{
StringBuilder sb = new StringBuilder();

sb.Append("<script>");
sb.Append("$(function(){");
sb.Append("$('#tweets').tweetable({username: '" + SettingManager.GetSettingByName("Tweetable.TweetUser").Value + "', time: " + SettingManager.GetSettingByName("Tweetable.TweetTime").Value + ", limit: " + SettingManager.GetSettingByName("Tweetable.TweetLimit").Value + ", replies: " + SettingManager.GetSettingByName("Tweetable.TweetReplies").Value + "});");
sb.Append("});");
sb.Append("</script>");

string s = sb.ToString();

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Tweets", s, false);
}

This just builds the Tweetable invocation script dynamically and adds it to the markup.

Remember to remove the hard coded script from the Tweetable.ascx file. Also note that the settings for true/false will need to be lowercase, as they are used by JS.

That's it. Pretty simple, but a very useful plugin.

Have fun...

ePDQ intergration for nopCommerce part 2

Thu, 07 Oct 2010 16:20:00 +0000

Why this second blog?

Since adding my speculative blog post about there not being an ePDQ payment module available for nopCommerce, and me having to write one, I've had a few requests from people for the code.

Please note there is at least one commercial offering out there, so if you aren't a developer, want timely support or need some guaranteed level of maintenance, have a look at their offering. If you just want a minimal module with scant instructions and are happy to roll your sleeves up, then I have added a project on SourceForge so you can get the files.

Why do this when there is already a version out there?

Simply put, I didn't want to pay for it. Nop makes it pretty easy to add new payment modules to the system so I thought I'd just get on with it.

Why is your version being release for free?

There are two reasons.

One. I don't plan on spending the time to make it a 'commercial' product.

Two. Nop Commerce is open source, I have used it on many projects and I'd like to maintain the spirit of community by putting omething back in.

Things to be aware of with my ePDQ module

This has been developed on a nop 1.5 install. I have a 1.6 site I can test it on, but it should work without too many issues on older builds. i've not used > 1.6 yet, so I am unaware if the payment module structure (on which this relies) is different.

It has been 'ported' from another similar module, so potentially has some left over bits and bobs in there.

It is still considered a 'beta' project.

Some data, settings or functionality may be missing simply because I didn't need it.

The structure of the module follows nopCommerce styles and implemetation methods for payment modules. As such, it has all the admin options in the 'Payment Method' details screen etc.

We accept no responsibility for loss or problems you may incur with you using this modules or following the suggested implementation process in this blog. The module is intended as a demonstration of integrating an ePDQ payment module in to nopCommerce.

On with the show

Some prerequisites:

An ePDQ account.
A nop commerce web site.

Adding the module and setting it all up:

Step 1:

Configure your ePDQ CPI details. I won't be covering this here, so make sure you understand what needs to be done. Full details can be found in the integration guide from Barclays.

Step 2:

Download the sample ePDQ module files from SourceForge.

Unzip the files somewhere, ready to copy into the project.

Step 3:

Copy the Necesse.Payment.ePDQ folder from the ZiP file into the \Project\Payment folder.

In the solution explorer, find the payment projects folder, select add existing project and select the ePDQ module project.

Step 4:

From the ZiP file contents, copy the ePDQ folder from 'Administration/Payment' into the same folder in the nopCommerce store. (Or whatever you've called your site root folder in the solution).

This contains the admin config pages for the module. You should use 'Show all files' from the solution explorer and add these files to the project.

Step 5:

From the ZiP file, copy the ePDQ folder directly into the root of the web site. Add the files to the project as above.

These are the files that ePDQ uses to update payment status back to nop. If you don't set this option in ePDQ, they aren't needed. NOTE: the reason these files are in a folder is that ePDQ requires a digest protected file to post back payment statuses. It's all in the manual! For nop/Windows, this means adding a user to the Web Server and setting prmissions in IIS (NOT NT) for basic challenge/response on this folder.

Step 6:

From the ZiP, copy the Templates/Payment/ePDQ folder into the same path (Templates/Payment) inside nopCommerceStore (or whatever you've called your site).

Step 7:

Add a reference to the ePDQ module in the nopCommerce Store.

Run nopCommerce and make sure it all builds.

You can do this next bit in DEV up to a point (trying it in debug first is recommended), or just deploy the updated files to the web server and set it up there. In dev, ePDQ wil throw an invalid url error for localhost, even if you set it in the CPI admin tool.

Select 'Add New'.

Fill in the form as required. The important settings and values are:

Configuration template path: Payment\ePDQ\ConfigurePaymentMethod.ascx

User template path: ~\Templates\Payment\ePDQ\PaymentModule.ascx

Class name: Necesse.Payment.ePDQ.ePDQPaymentProcessor,Necesse.Payment.ePDQ

System keyword: EpDQ

Obviously set it to active and I just added ePDq for the display name and name values.

Once you have added this, select 'save' and you will now see a 'Configuration' tab in the module admin.

These are all settings that you need to define or get from ePDQ with the exception of 'Use test mode:'. This is simply a settings flag that writes the response from ePDQ to the nop log. It is handy for debugging and testing writeback actually happens. As you know, ePDQ is a bit 'underfacilitated' for us developers.

I think that's it?

I think that's everything. As I mentioned, this is a 'beta' module that has been tested only by me, so if you find anything awry or need something I've missed, just let me know.

Things to check when troubleshooting

In theory all the files are in the ZiP, my instructions are correct and my basic testing has covered all the reasonable bases.

If your site builds, I would imagine the majority of errors you may get will be in the ePDQ setup, but as convoluted and odd as it is, it's all in the manual. It's just really easy to miss something.

Have fun...

Social media is a toddler, apparently...

Mon, 04 Oct 2010 17:19:00 +0000

According to this great bbc article, businesses are slow to react to, don't understand or underestimate the power of social networking and media.

According to the article, a leading retailer heard about technical issues from journalists who had seen details on twitter! Why should we be suprised. There have been several well publicised outbursts from top [over] rated sportsmen lately about being dropped from teams and other issues with team selections for rugby games being 'leaked' unintentionally by players. Corrie, amongst others, have banned Twitter from sets. Where will it end?

So what does this mean for businesses, especially small businesses looking to use social networking as a marketing tool?

Twitter, FaceBook, YouTUBE and blogs (shall we call them social media tools from now on?) might be 'toddlers' but they are immensely powerful and useful business marketing tools. Used correctly, in a meaningful and structured way, within a marketing strategy, they can be immensely powerful and beneficial to businesses. Used incorrectly or without consideration, they can be an embarrassing and costly waste of time.

So how can we avoid, as small to medium business, getting egg on our social media faces?

The key to using social media correctly is in understanding the media, how it reflects our business, how it communicates to our stakeholders and most specifically how marketing works as a method of communication.

It has been suggested that 'marketeers need to completely change their techniques to make social media work'. i disagree, although it is important to understand how these new areas of communication media are acting as a conduit from businesses to consumers. It is, in essence, no different than the transition in marketing and advertising from newspaper to radio, radio to television and so on. For example, radio became a great new land of prospects for proactive marketing people, but we still spend on newspaper ads. The same is true of FaceBook, Twitter or whichever social media tool takes your fancy. The big change, and advantage, is the removal of the anonymity of a straight ad or marketing channel. Now the customer can bite back. That's where the power lies.

Like all things in this [marketing] business, it's very much a numbers game and it's sometimes difficult to decide on the chicken or the egg? You might have a great writing style and fill your tweets with humorous, insightful comment every 10 minutes, but if you aren't being read, it's just wasting your time. As we said, it's about understanding the media and working out what will work for you.

For example, you might have a new site, so work on building a blog and news rich content to grow the brand and drive up traffic up, then invest time in Twitter to build a buzz and gain a meaningful dialogue with clients and followers,

So you can see that by knowing what your starting point is, understanding the tools that are available and when it is appropriate to introduce new methods of communication, you can get the most from your time and efforts.

More mature or established businesses can use Twitter and other social media tools as hooks on their already busy websites. Moving direct communication with clients from email or chat apps to Twitter will leverage the vogue appeal of Twitter and allow your sales team to keep in touch with clients old and new.

So in summary, don't ditch the ads, email campaigns or SEO. Just take some time to know and understand each new or emerging social media tool and see how it can work for you and your business. As with all marketing, a little imagination, objectivity and time will go a long way. See how other businesses and institutions are introducing these new communication streams to get an idea on what could work for you.

2 week freeze on dev work

Wed, 01 Sep 2010 15:23:00 +0000

N Web Design and N Go will be freezing development work from 18th September 2010 until 4th October 2010.

What does this mean?

Well, we will be working on things as normal, but because of some commitment requirements for those 2 weeks, we won't be doing any roll outs or updates within these 2 dates.

We will be supporting you services, systems and applications as normal during this time, so don't worry.

If you have any questions, please get in touch.

Thanks.

ePDQ intergration for nopCommerce

Mon, 23 Aug 2010 15:29:00 +0000

One of the applications we use a lot is NopCommerce.

The reasons why are pretty obvious if you've used it or seen what it can do.

On a recent e-commerce project based around nopCommerce (1.6 on .NET 3.5) I needed to use ePDQ for the payment gateway.

This is all cool stuff, because I've done a lot in nopCommerce and also have done a few ePDQ integrations on bespoke dev in the past.

Another great reason for using nopCommerce is the community support, which is pretty big, normally helpful and good at sharing code. In actual fact nop themselves seem to do a pretty regular job of integrating common payment gateways and other items into the base build from user contributed code, so I was pretty confident of seeing ePDQ in there, or at least a project on GitHub or similar for it.

I was amazed that no one had actually contributed one to the project, but there were a few 'call for quote' options where people had written one and were offering it commercially.

Payment gateways in general and nop in particular are pretty easy to work with, so I wasn't going to pay for an option. If you are limited by time, want something of commercial strength or aren't really a .NET developer, the commercial offerings should be a good option, although I know noting about price, support or implementation, so check out the nopCommerce forum if you need details.

So, how do I go about adding ePDQ to nop?

Understanding ePDQ

First things first, you need to understand the payment gateway, what it expects and what it returns.

I had a little refresher on ePDQ and it all came flooding back.

Payment gateways work in one of several ways. The differences are normally in how they authenticate and secure your data, with writebacks all generally taking a familiar approach.

With ePDQ, you need to generate a secure post, send it to the encryption service on the gateway, along with a few other variables, then send the returned data to the actual gateway where the user puts in their card details.

Once payment has been made, a return url is used to update the order locally (in nopCommerce) and the user gets a nice redirect back to your site.

Understanding nopCommerce

NopCommerce is easy to use because it has a lot of in-built functionality, is well written with proper interfaces and inheritance (that most people seem to not bother with, but should) and [IMHO] has a nice usable project structure in the solution.

What makes nopCommerce scary as hell at first, is that it is quite huge. If you take a little time to understand how it all knits, it's pretty easy to just figure out the smaller pieces of code that do what you need to do.

So, nopCommerce payment types all have some big similarities that allow us to copy and complete the small difference that make up the payment methods.

All the payment methods live in their own project with a payment processor or two, have a configuration user control in the admin section of the store and a template in the templates section.

These are supplemented by response scripts that take the returned data from the gateway, update the order and do whatever you need to with the response.

Making a new payment type, eg: ePDQ

This is simply a matter or adding each required project, user control and writeback file based on the closest existing payment type.

For ePDQ, I have based my version on the SagePay processor.

The new payment type needs to inherit from IPaymentMethod and include all the required methods.

The ProcessPayment() and PostProcessPayment() methods do all the work. (I assume these are called from the checkout process once the payment method is selected. See, interfaces at work!).

My implementation creates a RemotePost object, adds some post fields, calls a local method that build the encrypted post fields via a WebClient() using a mix of data from the Order class and settings in the Settings management store (which are reflected in the payment configuration file in the Administration section of the store), then fires it all off to the gateway.

I've added most of the meaningful variables to the ePDQ configuration user control, and also added a TestMode setting, which takes the writeback values from the gateway and writes them to a log file.

One of the slighly annoying aspects of ePDQ is its lack of a test gateway or simulator, such as PagePay offers. Thinking around this for testing takes a bit of consideration, but if we take the rough process as follows:

Build an order string
Send to ePDQ
Get encrypted data back from ePDQ
Send the form post to the gateway with encrypted data enclosed
Get a writeback from ePDQ with status
Display a happy message to the user

We can see 3 or 4 meaningful places where data would be useful for debugging, so if necessary we could add logs for each step of the process. One of the big problems with debugging payment gateways is always the inability to return to a Localhost page. Having meaningful debug data will help.

So, where's the solution?

Good question. I'm writing it now, so it's not ready to be used in my projects or anyone else's just yet.

I'll probably offer it as a sample download and do a more in depth how-to at the same time.

An AJAX calendar, QTip, .NET and JSON

Wed, 11 Aug 2010 16:41:00 +0000

I recently needed to update a calendar on an old(ish) .NET 2.0 site.

It worked ok, but was based on the .NET calendar control and was showing its age.

I love writing cool new things, but I hate re-inventing the wheel, so I had a look at what was around in JQuery that migh do it?

For decent usability, I needed:

Rendering by month
Multiple events per day
No changes to the current event data
Something that can popup a div with more details and a link

There are a number of candidates for the calendar, but I selected fullCalendar as the most appropriate.

This looks pretty nice out of the box and has a load of callbacks for stuff so that I could hook in some click events for QTip and also had a really simple events model that would take a JSON feed.

This made it really easy to create data from the existing classes via a json parser that outputs data to a resource handler (.ashx) file for consumption by the calendar.

It was also quite straighforward to create some AJAX data for QTip, again in another Resource Handler (.ashx) file.

The demos and instructions for fullCalendar and QTip give you all you need to mash the two together, but there were a few things I struggled with.

QTip 1.01 like JQuery 1.3 but not 1.4. FullCalendar doesn't seem to care. There is a version based on 1.0.1 that uses 1.4 that fixed a load of errors in IE.

Actually, that was the only real issue.

A note on using a Resource Handler (.ashx) for ajax calls, rather than a, aspx page.

A while back, I found that calling AJAX data through Prototype where headers, body and html tags were added caused some issues with IE.

Using a .ashx file means you can do a simple Response.Write/Output which just sends raw data to the browser, which does half of AJAX's job for it, but stops IE playing up. This may have been specific to my implementation at the time, but .NET sends too much junk to the screen anyway, so I like the uncluttered rendering you get from a .ashx file. It's great for sending XML data out too.

In summary

You can save time by spending a little time on checking things out.

What is old may not be worthless.

It's always possible to get things working better without changing the underlying data or management of it, just the presentation.

Keep them wanting more

When this new calendar goes live, I'll post a link to it.

I'll also do a better 'how-to' so you can mash a calendar, a rollover and old data together in .NET.

Google AdWords, KeyWords and FWords

Wed, 09 Dec 2009 11:21:00 +0000

I get asked a lot about helping people with AdWords, keywords and managing their pay-per-click account.

Some people haven't got the time or the knowledge or the manpower to do it themselves, so they happily let other companies get involved.

Some people see pay-per-click as expensive and decide to reduce the overhead and manage it themselves. This is normally ok in principle, but if you've used AdWords, you'll know that it is far from setting a budget, creating an ad and clicking 'enabled'.

So, what is AdWords and PPC advertising? Well we probably already know. It's the process of paying a search engine [although we are talking mainly about the big player here, namely Google] to show your ad in sponsored links when someone searches for a keyword you have chosen. There is a lot more to it than that, but you get the idea.

That seems pretty straightforward. You choose keywords, and Google have a really simple keyword generator inside the AdWords app, you set a budget and you're selling. How cool is that. Except, it is normally followed by Google bursting your proud bubble and telling you your keywords are poor, your bids are too low and there are 100 other better keywords that will increase your chances of success.

Ok, so what does this mean? Does it mean I don't know what I'm doing and should get an expert on the case? Should I give up entirely? Well, no, it doesn't mean that at all. What Google is doing is trying to help you promote your web site better, smarter and more efficiently.

Here's what is going on.

You have a web site. It may or may not be optimised for keywords. You have 2 options.

You grab all the keywords you think match what your site is all about and add them, create an ad and get going.
You ask Google to get keywords for you from a page on your site, create an add and get going.

You wait a day or so, because AdWords stats aren't real time. You see what is happening.

It rarely makes great reading first time round. Even with a pretty well optimised site, you'll still get some criticism about your keywords and where the ad points.

So you have keywords, a budget, an ad. That's it isn't it?

No. It's just a toe in the water in reality.

Let's get serious about AdWords. It is all about choosing the keywords that match your business or product, testing them in real time and looking at the reports. You need to really understand what is coming back and how it relates to the keywords, your ads and the landing page you have chosen.

I'm sorry guys. Effective pay-per-click is all about analysis, number crunching and targetted keywords. It is time consuming and takes organisation and, like most marketing, it is trial and error, sometimes learning some harsh lessons. You need to be reflective, self critical and no too sensetive. After all, it's just a machine telling you that you [might] suck. Not a real person.

Understanding, at least superficially, what AdWords are doing is important. It is also useful to understand what is happening when you create an ad and how it is received.

Google is a search engine. It loves and respect meaningful content and information about a subject, based on a keyword. Although it's a commercial entity, it includes this ethos when processing pay-per-click.

The process of keyword -> ad -> web page is very simple to understand but very significant in how the keyword relates to the content.

A well chosen keyword that relates to a relevant page, based on Googles database ranking of course, means less cost per click, a better position in sponsored ads and a more effective pay-per-click performance.

So if there ever was a magic bullet or killer technique for better PPC performancee, this is it. Make sure keywords are relevant to the pages the ad points at. Simple. Actually, it may not be that simple.

A totally un-optimised site will still work in a pay-per-click environment, it will just cost more per click and will struggle to get high up in the searches it does qualify for. In some cases, theclicker will wonder what they are doing on your web site because it isn't close to what they were looking for? That isn't good.

Let's look at a simple example.

You sell widgets, gadgets and oozits.

The three best keywords are widgets, gadgets and oozits.

These are 3 different things but you sell them all, so they are relevant and as such, you have 3 web pages, one dedicated to each product.

We assume each is reasonably optimised for the target keyword.

Ok, what next. Well, you choose keywords related to each, but this now means that it is difficult to be precise and target all three effectively with one ad or page, so we deivide the keywords into 'sets'.

So we now have a set of widget keyowords, gadget and oozit ones too.

This means we need at least 3 ads but actally, it prompts us to consider 3 campaigns.

So we now have a widget a gadget and an oozit campaign. We can be more specific an target our keywords dorectly, more effectively and manage them better. We can also look at different ads for each campaign.

Let's think about widgets. We know from experience that people want different things and as such, search for different widget related keywords. Knowing our industry and looking at the keyword stats, we know the 3 best options are: 'cheap widgets', 'long lasting widgets' and just plain old 'widgets'.

We can now create three ads, select the keywords most appropriate to each ad and ensure we have better targetted and more effective keywords. We can word our ads accordingly, so when people enter the keyword, they see it in the ad title.

In reality, we could have tens of ads with tens of words each, but the principle is the same. Thought, understanding, analysis and objectivity make AdWords more efficient and therefore mor cost effective. Once you have analysed, optimised and structured your AdWords campains in collaboration with a better set of landing pages, managing them will become far easier and small adjustments will return bigger benefits.

That's all pretty clear now, but there are also obvious advantages elsewhere if we read between the lines.

First off, the keywords you have chosen for pay-per-click are also the keywords that you would like appear in natural searches for. Yep, you've got it. Google AdWords are giving you a rankings leg-up and also telling you which keywords you need to improve on in your web site. Time for some optimisation methinks. Now you can see why a good CMS is such a hot app for businesses.

Secondly, with pay-per-click, you only pay for a click. You'll notice in your stats that you get anywhere from .001% to 10% click throughs. At 1%, this is 100 impressions per click. This means your name and brand has been exposed 100 times for your £1 or whatever your CPC is. Ask your marketing guys about brand exposure. It takes someone seeing your brand about 30 times before they notice it in a conscious way. Pay-per-click is helping and, with good keywords, it's the right people seeing your name. Again, this makes the ad all important. They need to see certain things there, at least subconsciously.

So you are going to rip it all up and start again. What do you need to do?

Well, I'd say give us a call on 0161 298 3816 and relax, but there isn't any reason why you can't get meaningful advantages, both directly by click throughs and indirectl by improved page content, by doing it yourself. Here are a few tips:

1. Choose the keywords you want and let Google expand on the related ones. They know what is relevant and important. They respond to billions of searches every day. (I dread to think how big their databases are!).

2. Start small and organised. Blanket keywords will get impressions, but will soon burn up your budget on meaningless and ineffective exposure.

3. Organise keywords into 'sets' that relate well and target keyword relevant pages. Avoid 'carpet bombing'. Remember, AdWords will tell us when we need to work on a few things.

4. Use campaigns to help organise 'sets' more efficiently and effectively. Remember, different keywords need to point at keyword relevant pages. If you don't have them, create them. (See, a good CMS is again invaluable).

5. Read the results, the mesages and the status. This is easier in a well organised account.

6. Be self critical and prepare to adjust page content regularly, sometimes daily. (You already know, a good CMS...).

7. Build up keywords slowly and consider competition and monthly search volumes when choosing.

8. Hack out the dead wood regularly. This could be ads or keywords. Lots of impressions, no click throughs means the ad isn't working. Sort it out.

9. Use your keywords to constantly improve your web site and expand your content regularly. Yes, a CMS is perfect for this. Go on, you know you want one!

10. Add Google Analytics and monitor click throughs, bounce rates, new visitors and trends. That's another blog for another time, but the basics will show you how effective your campaigns are.

So there you have it. Far from exhaustive, but hopefully it'll give you some food for thought and help you get more from pay-per-click and even accidentally optimise your web site in the process.

Getting better keywords and pay per click management helps bring people to your web site but you still have much to do once they get there. I feel another blog coming on...

I know Google AdWords can be a little like the cockpit of the space shuttle to most people (I don't think many astronaughts read my blogs) but it can be quite easy, if time consming, to manage once you have an objective.

It will take time and will involve lots of work and analysis [PPC Management and SEO isn't expensive for nothing] but the 'feel good' at the end will be woth it.

Thanks for reading.

Ed/

Get going with Google Froogle...

Mon, 07 Dec 2009 15:33:00 +0000

It's probably more well known as Google Base or Google Shopping, but Froogle is still a hugely underused sales tool.

So, if you don't know, what IS Google Shopping/Base/Froogle?

It's essentially a way of you telling Google what you sell, so they can show your products when people search for them.

So why is it so good?

Froogle is good because you can tell Google what you want to sell on-line, and they list it on page 1 of their searches for any relevant search keyword or phrase that matches your product name or description.

I told you it was good, didn't I.

And best of all, it's free. So hang on, it's free and is a fast-track to page 1 listings, why isn't everyone doing it?

I think it is underused because :

1. People don't know about it
2. People don't tell their clients about using it because they don't know about it or can't manage data for it
3. It can be a bit time consuming to manage and uses a complicated Google schema for datafeeds

Well, I've debunked reason 1 & 2. Now you know about it, you should be getting pretty excited abut what it can do to help you.

So just what is involved with a Google Base listing?

You need a Googleaccount. They are free, so get one now.

You need to activate the business solutions base option. Again, this is free so you can go right ahead and get working.

Once you have a Google Base account set up, there are 3 ways you can manage your Google Base items.

1. Type them in manually
2. Upload an XML file with the product data in
3. Point Google at a live RSS/XML feed of your data

There is a time limit of 30 days before feed data expires, so you need to manage the information at least once a month. Any changes to prices and other important information wineed to be done mnually unless you have an automated feed.

The specifics of formatting your internal data in the required format are not within the scope of this blog, but once you have a Google account, you can get all the tips and tricks, as well as the full API specs from the business knowledgebase.

If you only have a small number of products, managing them directly through the Google Base console wil be fine.

If you have a lot of items, you probably want to automate an extract so you can upload or link directly to a feed.

Many E-Commerce applicaions have a Google Base export facility.

We have a .NET library that automates an RSS Feed from any data. Once it's stable, we'll be providing a download and documentation for our asp.net Google Base Module.

Well, that's it. Go get some Google Base if you haven't already.

Ed/

Surf the [Google] Wave...

Wed, 18 Nov 2009 09:33:00 +0000

I'm a bit of a cynic. No, I really am.

I also like really cool and useful new things, including gadgets and trinkets but especially software. And if it's in the clouds, even better...

I hate it when people come up with really obvious ideas, like Google have with Wave, because I get all bitter and twisted about why I didn't think of that.

Ok, I shouldn't beat myself up about it. After all, Google have an [almost] endless pot of resources, including the all important time and money. But this is just a simple mash up of a few aged concepts, a snappy title and a little sprinkle of the, ah yes, the endless Google marketing resource. See the cynic kicked n there.

I'm not sure this would get anywhere close to the heights it will achieve without the Google brand, but it's still a great idea and will be a really useful tool for networking.

So what exactly is Google Wave and why is it going to be good?

Well, Google Wave is a piece of software that runs in a browser, that allows more than one person to collaborate on a document that can include pictures, text, movies and, well, almost anything electronic.

Imagine MSN, Facebook, Twitter, Skype IM, well, it's like all those, except different.

It's different because it's been crafted and shaped to focus on, errmmm, well, focus. All communication and social networking style apps, like those mentioned above, have some kind of access permission. So does Google Wave. With Twitter you follow, MSN etc, you invite contacts and waffle about things, with Facebook, you just pop in and out and see other people's washing.

My take on social networking is that Twitter is someones opinion, rant or observation that others can read if they want to. That's cool. MSN et al are quite intimate, one to one, friends in the living room, chatting. Again, a great app and indeed the grandfather of IM/Social Networking. Facebook is great at helpin you organise your life a little better. It's quite irreverant, has fun things to do while you are there, so you hang around some more, bui essentially, a waste of time. Albeit a cool one.

So is Google Wave just another Social Networking app? Well, yes and no. It may well mature and grow into something as vast as Facebook and is probably as snappy as Twitter, although it is wrapped in that clean but rather sterile Google style GUI. What Google Wave has is that focus. There I go again. What I mean by that is, it is structured so precisely and finely tuned with exactly the right amount of meaningful functionality that it is almost perfect for any Social Networking task. It is also really well suited to collaborative brainstorming and teamwork. That is where I will be using it most.

Yes, you can distribute invites to your 21st birthday party, with maps and everything, but for me, it's going to save many trees because I won't need to 'brainstorm' with post it notes on a wall any more.

I've only had a very brief look at Google Wave, which is in Beta at the moment anyway, and I have no idea which direction Google will want it to go.

The 'product positioning' part of my brain, just next to the bit that likes motorbikes and Halo on the '360, says it will gather as much meaningful information as it can before launch, decide which demographic it is most popular with and steer gently in that direction without really lowering its appeal to other users and groups. This cynic feels his 'product positioning' centre may be moving slowly towards the bit at the back, next to canal boats and gardener's question time.

Read about Google Wave at: https://wave.google.com/wave/

Thanks for reading.

Ed/

Choosing the right CMS

Fri, 23 Oct 2009 10:52:00 +0000

This is a question you will see a lot on the web.

Ask a question like 'What is the best CMS?' and 101 people will give you 101 different answers.

The really simple answer is ask someone to provide one for you. If you want to do it yourself or utilise internal resources, that's cool too. Read on...

CMS applications and frameworks are divided into 2 distinct categories. Those that are free or open source and those that are paid for. Some offerings are free to use, but may charge for the source code. There are very few real differences between free and commercial CMS applications, other than the level of support they offer, the development opportunities available to the user and the cost.

I have checked out and evaluated many of the more popular offerings, most of which are really good. I do have my favourites and have strongly promoted several that cover both sides of the technology divide, differ in complexity and allow bespoke development without too many constraints.

I'm not going to tell you which one to use. After all, there is a champion for each and every available open source CMS so I don't need to get involved.

So how do you go about choosing one?

First of all, you need to ask yourself a few basic questions.

Asking which is the best CMS is like asking which in the best car or musical instrument. It all depends on what you are going to do with it. It mght well be a beutiful 1950's Sunburst Les Paul, but it's useless in the brass section.

So, in order to help you decide, you need to ask yourself:

Who will be administrating my CMS?
Where am I hosting it?
Who will be updating it?
What content will it need to have?
Will pages be added regularly?
Which technology path am I following?
How soon do I need to be up and running?

So why these questions?

Well, [in no particular order] you need to assess your level of competance or the level of competance of the person who will be installing, configuring and skinning the site.

Trust me, there is a steep learning curve with content management systems.

If you are a programmer or have a good knowledge of html/css and computers, you'll probably get to intermediate pretty quickly, so don't be put off by something that at first glance looks totally unfathomable. Just expect a few long, frustrating evenings.

If you are a developer or run web sites already, you'll probably have a pre-determined group of applications in mind. Yes, I'm talking about Microsoft v Linux. Or more specifically, .NET/MSSQL or PHP/MySql.

Ask this question 4 or 5 years ago, this would have be a no-brainer. If you wanted an open source anything, it was all PHP based. There were a few asp offerings, but they were nowhere near the maturity of the PHP based apps. Now that has all changed.

With a different attitude to open source software and with asp.net becoming more mature, we are seeing some really useful asp.net based CMS frameworks out there.

So, decide which technology works best for you. This is considering templating, hosting, administration, integration and most of all, comfort. After all, whatever you choose, it only sends out html, so as long as you are comfortable with the environment, that's a good choice.

Because many CMS applications are now quite mature, they offer so many things out of the box. You should get most things you need, including friendly urls, blogs, news, galleries and a lots more. This means you should be able to cater for most basic web site requirements by simply installing the cms, setting it up and skinning it.

If you or your clients want something a little bit extra, you need to consider a few more things.

You now start to see why your technology choice is important. If you need something out or the scope of the base install, modules or extensions, you'll probably need to roll your sleeves up and get stuck in with some dev work.

At this point, it's important to understand how your chosen CMS will react to changes. Can you work in modules or extensions without changing the underlying application? If not, you are slowly moving away from the project dev tree, which can mean you may be isolated and restricted when appling changes and updates. This is certainly a real consideration for users wishing to extend cms frameworks. Why is moving away from the base application a bad thing? Well, it means you lose the simplicity of upgrading based on the original source, which means you may miss important things like bug fixes, security enhancements and most of all, features and functionality. You can still make it all work, it'll just take some work to patch it all together.

So, we've highlighted some of the things for consideration. Here are the tips to help when choosing a CMS.

1. Make sure the chosen framework has everything, within reason, that you need to work for your site.

2. A good sign is an active group of contributors and good help resources, reflecting a well maintained application.

3. Check web sites that are using the CMS. Do they all look the same or are they truly expressive?

4. Play with the admin section. Does it make sense? Will the least experienced user be able to use it?

5. Can you add things to the CMS without changing the original code? Does it support modular development if I need to add to the site?

6. Will the site give me tools for SEO?

So there you have it. Far from a completely exhaustive list but hopefully there are some helpful things to consider.

Thanks for reading.

Code snippets: A really easy javascript accessibility text size selector

Wed, 14 Oct 2009 17:14:00 +0000

A client asked me recently about upgrades to a web application. One of the required upgrades was to add text sizing.

If you don't know what this is, it's just putting some options in place to allow the web site visitor to choose which font size they use to view your web site. You can see this example in action over there >>>

Many modern browsers let you do this, but adding the option to your web site alows the visitor easy access to the functionality.

So, we sat down and I discussed the presentation with the designer.

I suggested a little paragraph in the sidebar that said something like:

Text size: a b c.

We decided against the +/- option, as it can get a bit stupid and I think 3 presented sizes are enough.

I thought a little bit more about how to implement this, the requirements being:

Simple
Re-usable
Client side

So, the decision was to offer 3 links, one for each size option, set a cookie to remember the selection next time, and using javascript/css only.

Here's how we did it.

We use some prototype functions to help with events and element manipulation, so you need to get rototype and reference it in your html page.

You can download and read about prototype at http://www.prototypejs.org/

Reference it in your html page like:

So, you can make a test web page, referencing prototype, using the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A simple font re-sizer using prototype and js</title>
<script src="prototype.js" type="text/javascript"></script>
</head>

<body>
<p>Some content?</p>
</body>
</html>

Ok, so far, so good. Next we need to create our own javascript handler file and add some other stuff, such as cookie handling that I don't think prototype does? (but it might. I have never looked).

So, our file will need to have an event listener to check for the page loading. Create a file called something like resize.js. It will look something like:

Event.observe(window, 'load', function()
{
some-function-call-here();
});

You can also add a reference to this .js file in the html file by adding:

...to the head of the html example.

Next, we need to create a function that sets the font size based on a passed value. So, we add something like:

function setFontSize(size)
{
// Set the font size here...
}

So how do we change the global font size?

I decided that adding something like 'style="font-size:0.9em;"' in the body or main wrapper tag would work and also let us use some of prototype's great functionality to handle setting the style.

Now we are going to use prototype's $() method to help us, so we need to add something to the setFontSize function, so it uses the size passed in, like:

function setFontSize(size)
{
var sSize = size+"px";
$('app').style.fontSize = sSize;
}

This uses pixels, but you could use ems too (this site now uses this example based around ems).

Note we use $('app') to reference something that we set the style of. This is simply a shortcut, provided by prototype, to replace the getElementById() javascript function.

For our example, this means we are applying this style to an element in the dom called 'app', so we need to point it out in the htmlfor prototyp to find by giving something an id="app" attribute.

You can target anything in the html, but the body tag or an outer wrapper div will work best. If, for any reason, your body tag already has an id for something else, just use that in the function call instead of 'app'.

Either way, the body tag in your html should look something like:

So if we now update the main event handler to call the resizing function, we now have:

Event.observe(window, 'load', function()
{
setFontSize(12);
});

If you open the .html file in a browser, you should see some text and no errors. You can now see if the javascript we have added works. Simply change the parameter in the function call inside the event listener to something like 25. The text hould be huge. If it is, we know it's ok so far.

Great, that worked first time for me too.

Now we have done that, we have a few issues we need to resolve.

We need to add something to allow a resize to be done manually and also to 'remember' the size change.

Let's do the manual re-size first.

This is really simple.

In the body of the html file, add a paragraph like:

Now save and reload the html file. Click the link, the font size changes. Cool.

You can use your own formatting and presentation, but here is a nice sample, offering 3 size options. Remember, you can use as many as you like in your own apps:

Try it out. You get 3 options and it is updated immediately when you select. Excellent.

Ok, but each time we reload the page, it defaults back to the base font size, so we need to use cookies to check for any previous size selection and also to store any subsequent selections.

Here are some javascript cookie handlers. add them to your resize.js file above the current content:

function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');

   for(var i=0;i < ca.length;i++)
   {
      var c = ca;
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(nameEQ) == 0)
      {
         return c.substring(nameEQ.length,c.length);
      }
   }
   return null;
}

function eraseCookie(name)
{
createCookie(name,"",-1);
}

I'm not going to cover the cookie handling code apart from saying it allows us to check for and set a cookie using javascript.

We now need to do 2 things.

Check for any existing resize cookie and use the value if it's there.
Add or update the cookie when we call the resize function.

We will do the first requirement by checking for a valid cookie in the load event handler.

By adding an if/else statement, we can check for cookies and fall back on the default value if there isn't one. Change your resize.js so that the Event.observe handler looks like:

if (readCookie('resize') == null)
   {
      setFontSize(12);
   }
   else
   {
      var size = readCookie('resize');
      setFontSize(size);
   }

Now we have the ability to check for a cookie and use it, we need to add that little extra bit that sets the cookie for us for next time. Edit the setFontSize() function so it looks like:

function setFontSize(size)
{
   var sSize = size+"px";
   $('app').style.fontSize = sSize;
   createCookie('resize', size, 30);
}

Now reload the page and test it. You should have 3 opions to resize text which are remembered next time a visitor accesses the page

Here are the 2 pages we used in full.

resize.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>A simple font re-sizer using prototype and js</title>
   <script src="prototype.js" type="text/javascript"></script>
   <script src="resize.js" type="text/javascript"></script>
</head>

<body id="app">
<p>
Text:size: <a href="#" style="font-size:13px;" onclick="setFontSize(13);">13</a> <a href="#" style="font-size:18px;" onclick="setFontSize(18);">18</a> <a href="#" style="font-size:24px;" onclick="setFontSize(24);">24</a>
</p>
<p>Some content?</p>
</body>
</html>

resize.js

function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');

function eraseCookie(name)
{
createCookie(name,"",-1);
}

Event.observe(window, 'load', function()
{
   if (readCookie('resize') == null)
   {
      setFontSize(12);
   }
   else
   {
      var size = readCookie('resize');
      setFontSize(size);
   }
});

function setFontSize(size)
{
   var sSize = size+"px";
   $('app').style.fontSize = sSize;
   createCookie('resize', size, 30);
}

And that's it. Simple text re-sizing in the client using client side javascript which can be used in almost any web site, application and project.

It has been tested and works ok in IE7+ and Firefox but should also be fine in other versions plus Safari/Opera/IceWeasel etc.

Thanks for reading.

/ed.

Make sure you ask for what you want

Thu, 01 Oct 2009 12:46:00 +0000

This is a cautionary tale.

When somebody does something for you, make sure that you ask them for everything you want and need.

In a perfect world, anybody who uses a product or service should be able to rely on the provider to ensure they are getting everything they will need.

The provider should be able to fill in the gaps between the consumers' knowledge and the required skills, knowledge or experience required to get the most from their contract or purchase without actually knowing everything they are likely to need up front.

Unfortunately, this doesn't seem to happen as often as it should.

...and who are the losers? Well, our clients for one, but I am also frustrated by the damage it does to this unregulated and largely fragmented industry we work in.

I will be a little more specific.

I'm not really talking about products we sell but about services and what we need to provide to our clients to fill in the knowledge gaps.

I'm not talking about the 'This electric drill you sold me, nobody mentioned I needed electricity...' kind of scenario, but in cases where a client instructs you to create or build a web site, there is far more to this than just providing the html/css and walking away, no matter how good your work is. Clients deserve more from us. More clarity, more details and most of all, we should work harder for their trust.

Now I am being slightly unfair, as this isn't entirely the providers fault. Clients should be more insistent on getting information and explanations about anything they are unsure of.

So what are the common pitfalls in these situations?

The most common issue arises from ownership. This can be domains, hosting accounts, source code or nything else that is covered by copyright or intellectual property rights.

The finer points of ownership are beyond the scope of this post, but simply put, if you buy a domain, you own it. Not the person who holds its TAG or the reseller who sold it to you. You should ensure and insist that the domin is registered in your name or that of the entity you purchased it for.

The same goes for hosting. For the agreed period of your contract with the hosting company, you 'own' that part of the internet. You are permitted within the law, the hosting company's policy and the services the ISP provides, to do with it as you will. This includes access to any part that you would usualy and rightly expect.

Problems with hosting occur when the people who have done your web site suggest they will 'host it for you' or as an 'included' part of the job. This is fine, provided they manage it for you or extend to you the same access that you would normally require from a service provider. Some times, companies don't let you have access to hosting accounts because it is their policy. Again, as long as you know this and they are prepared to add analytics, give you stats or do anything else you might normally do with hosting, that's fine.

The biggest issue people have is with ownership of the code or website scripting. Again this is something outside the scope of this post and if you are in a situation where IP or copyright is in contention, you must consult a legal professional.

For ownership of a web site or source code, as a rule of thumb, if you instruct somebody to do work on your behalf, they are essentially creating something at your behest that will be passed to you as a finished product. To ensure there is no ambiguity or argument over the ownership of a web site or source code, you must ask the provider directly about this. It is often a good idea to receive a copy of the finished work on cd.

There are some exceptions to this of course.

Sometimes providers will use open source applications released under license into the public domain as the basis of a project, as we sometimes do.

This application and source code is as much yours as it is theirs, but you will need to check what restrictions are imposed on the templates and additional work carried out by the developer.

You may have work carried out that is based on a commercial application, such as Immediacy. In this case, you will not have any rights to the source code, but will most likely own the 'design' that is created for you. Again, ensure that you ask.

If I were a cynic, I would say that many companies attempt to tie you in with difficult, unclear or unmentioned clauses. If you don't insist on what you require before you start a project, it is unlikely that you will be able to get your requirements met once it has finished.

If you employ an I.T. development contractor, a freelance designer or copywriter, all the work they do on your behalf retains your intellectual property rights. This is normally stipulated by the terms of a contract. So if you have a company that does work for you that involves html, css or programming source, make sure that you know where you stand.

Some companies will charge more if you want the source code. Some will not want to or not be able to provide it. This isn't necessarilly a bad thing, as long as you are aware of this before you instruct them.

Don't get me wrong. There are some really great companies out there [like us. sic], lots of good ones too, but there are a small number who, either through ignorance, idleness or sheer over familiarity just gloss over the things that might be more significant to the client, who is blissfully unaware of it waiting to bite them in the proverbial in a few months time.

Most web design & development companies are open and clear about most of these things, including copyrights and ownership of source code.
Most web design & development companies will happily talk about the technology and libraries they are using.
Most web design & development companies will offer advice on your needs and will mention many things that you had not realised.

And remember, Make sure you ask for what you want...

Cloud computing

Thu, 17 Sep 2009 12:35:00 +0000

When you have been around for any length of time, you see many things being re-used, re-invented or re-invigorated.

Whether this is Kurasawa films into westerns, Shakespeare into contemporary dance spectaculars or some computer trend into , errrrmmm, another trend with a different name but essentially the same logical process, it's clear that what goes around comes around. And around. And around.

Is there truly anything that is new? Well, probably not a great deal. In technology, we get bigger, faster and lighter things, but essentially,there is input, processing and output.

All the really exciting things happen in the way we use these advances in technology. How we communicate to the user, where we store the data and where it is accessed from. Take, for example. cloud computing.

I know it's been around a while, but what is it and why is it so cool and why has technology suddenly allowed it to exist.

Actually, it's been around for almost 40 years, is quite a good idea and is just really a fancy name for remote applications.

It is cooler now, because of the changes in technology that have given us faster internet, cheap disk space, faster processors, Ajax, usable browsers and most importantly of all, huge corporations that only work in the on-line world.

So what exactly is cloud computing? It is essentially the storage and processing of documents and applications on a remote server, that can be opened, edited, manipulated and changed on line, normally through a web interface that runs in a browser.

But hold on, isn't that just like a mainframe used to work? Well, essentially, yes.

In the old days when you had to wear brown corduroys, have a beard and look like an extra from an OU program to work with computers, unless you had a big computer in a university somewhere, computers were really quite feeble. Something with the power of my mobile phone was as big as a house.

Necessity, being the mother of invention, made some bright sparks come up with X Windows, which was a way of using a small computer to connect to a large computer in a different romm, building or continent, which you could use to do your number crunching. This was essentially the idea behind cloud computing.

This is also the thing that led to mainframes, thin client systems, AS/400 minicomputers [ironically, often really big] remote desktops and a whole host of usefule distributed processing that made it easier to centralise and share data, processes and documents.

These days, we are rarely short of processing power, but we are often short of time.

The advantages of cloud computing as we see it today, with Google Docs and Microsoft Office Online, is the ability to share information, irrespective of setup geographical or time differences.

If you have a browser, you have Google Docs. You don't need to wait for the IT department to come and install some office software. You can write your report in a hotel room in Hawaii while MIS in Scunthorpe add the figures and the MD in Timbuktoo approves it.

Of course you can just e-mail copies around. But versioning then becomes an issue. This really is an incredibly useful interpretation of an old idea.

If, like me, you use several computers, it is a breeze to centralise your documents knowing they aren't on the other PC or on your forgotten USB stick.

Of course cloud computing isn't just online office applications. In reality, any shared web application belongs to the family, although we've just called it by other names. With more bespoke applications being written as browser based rather then desktop software, we really are already deep in the clouds. What's that you say, is this new thin client thing really taking off...?

If you haven't used something like Google Docs or stored files in something like http://skydrive.live.com/ , you really should try it and see how it makes working smarter, faster and easier.

Now I'll just see how it looks in IE6...

Tue, 08 Sep 2009 17:03:00 +0000

You create this really cool CSS/Ajax/html layout. I mean really nice, clean, neat and tidy. It looks great in FireFox, Safari and IE7 is almost perfect too. Happy days.

...until you hear thos dreaded words. 'How does it look in IE6?'.

Now before you start thinking, 'here we go again, Ed and his hatred of IE6', I don't hate IE6. I just think it's like having a steam driven car. Fantasti in its day. Revolutionary. Ground breaking. But 100 years out of date.

The example in question is at http://www.hit.org.uk/training/. In the middle column, we've added some neat css flyouts. We had them working absolutely fine in Firefox, Safari and IE7+. Check it in IE6. Nada. Nothing. No show. What's a programmer/designer/disparaging soul to do?

The original css had been hacked around from another recent triumph at http://www.express-safety.co.uk where we added some nice pure css menus. And they looked cool.

So when the guys at HIT said they wanted to make their training section 'a bit sexier', I just had to suggest using a flyout menu, similar to the one we added to Express Safety.

The problm they were facing was that there was just too much information, which meant losing some of it below the fold with 3 sections.

We chatted about it for a while and came up with a 'tabbed' section layout and because the course listings needed to show a lot of info at this point, rather than dropping down, we decided flying out to te left would be the best option.

Cue a nice [but properly invalid] markup, ome tricky css and hey presto, we had a winner.

...until IE6 arrived that is.

The problem is, many of HIT's site visitors still use IE6 (maybe 25%, which is above the average these days) so we needed to make things work in IE6 too.

Ok, problem 1. They just didn't show in IE6. Not to worry. Just do the old 'hide the </a> and wrap it all in a table' trick. Still no show. Hmm. Ok, try a few things and position:absolute cures it.

Now we have a problem in Firefo et al. It uses a centred layout, so we can't set a -neg left and top to position the flyout. Ok, knock up a little javascript to calculte and set the left offset from the screen size. Sorted. It worked in IE once we found the proper call for screen width.

More tweaks later, like adding hug amounts of negative margins for IE6 and we get close, but that's good enough for me.

So why am I telling you this? Well, it took a day to do the that worked in IE7+, as well as all the other browsers, then about 3 days to get it looking acceptable [it looks nothing like it should] in IE6. IR6 is causing people to compromoise or ignore layout issues and the solution is to upgrade as soon as you can.