Making the web work. Together.

User-friendly pop-up image gallery for NopCommerce

Posted by Ed on 17 November 2010 | 0 Comments

Tags: , , ,

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 [code]<div id="MyGalleryName" ></div>[/code] 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.

[b]The bad news[/b]

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.  

[b]The gallery editor, sitting happily in the Content menu...[/b]

[img]http://www.n-webdesign.co.uk/assets/Uploads/BlogFiles/galleries-1.png[/img]

[b]The gallery listing. This will show as many galleries as you add...[/b]

[img]http://www.n-webdesign.co.uk/assets/Uploads/BlogFiles/galleries-2.png[/img]

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

[img]http://www.n-webdesign.co.uk/assets/Uploads/BlogFiles/galleries-3.png[/img]

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

[img]http://www.n-webdesign.co.uk/assets/Uploads/BlogFiles/galleries-4.png[/img]

[b]This shows the SlimBox rendering on the gallery image.[/b]

[img]http://www.n-webdesign.co.uk/assets/Uploads/BlogFiles/galleries-5.png[/img]

[b]There are things to do...[/b]

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.

[b]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![/b]


Post your comment

Comments

No one has commented on this page yet.

RSS feed for comments on this page | RSS feed for all comments