Website Design Peterborough, Jigowatt - Magento Web Design, UK

Faragher&Co

Jay — Wed, 25 Aug 2010 09:13:09 +0000

No related posts.

Going to Work

Jay — Wed, 25 Aug 2010 09:10:50 +0000

No related posts.

Liberator

Jay — Wed, 25 Aug 2010 09:07:09 +0000

No related posts.

Nursery Walls

Jay — Wed, 02 Jun 2010 10:03:20 +0000

No related posts.

Zhu-Zhu

Jay — Wed, 02 Jun 2010 10:02:28 +0000

No related posts.

Jigowatt are recruiting, again!

Jay — Thu, 20 May 2010 12:50:49 +0000

Due to an overwhelming amount of work being undertaken and more coming in, Jigowatt are on the lookout for a kickass design ninja and web developer to join our team on a freelance basis.

Instead of filling in all the job details here, I will direct you to the job listings over at alldevjobs.

Local applicants are preferred but all candidates will be considered.

Introducing Magentosphere

Jay — Thu, 01 Apr 2010 13:47:41 +0000

Today we soft launched our latest project, Magentosphere.

After our successful foray into the digital product marketplace through the envato marketplaces (ThemeForest & CodeCanyon), we decided to set up our own store selling Magento related products, namely Premium Themes and Extensions.

As of launch Magentosphere is offering two Premium Magento Themes and we plan to add our first extension (a Google maps based dealer/store locator) within a week.

Our themes will differ from those you have probably seen elsewhere by being designed to suit a range of different online Magento stores. We’ll not only be creating themes for superstores with thousands of products, but also smaller boutiques who may only have a handful of products, similar to the recently launched StickaStyle web site (designed by Jigowatt our selves).

Co-inciding with our recent induction as a recognised Magento Solutions Partner we feel that this will help secure our position as one of the UK’s leading Magento design and development companies.

So go ahead and check out Magentosphere right now!

Add Magento Category Links to your Footer Template

Chris — Mon, 29 Mar 2010 14:56:24 +0000

A useful bit of code for those who want to start optimising their website towards visitors and importantly Google for great SEO.

In your footer template file add the following code snippet where you want to display a list of your Magento categories.

app/design/frontend/default/your_theme/template/page/html/footer.phtml

1
2
3
4
5
6

$helper = $this->helper('catalog/category') ?>
foreach ($helper->getStoreCategories() as $_category): ?>

echo Mage::getModel('catalog/category')->setData($_category->getData())->getUrl(); ?>" title=" echo $_category->getName() ?>"> echo $_category->getName() ?>

endforeach ?>

This modification is Magento 1.4 compatible.

AJAX Contact Form; Add / Validate Checkboxes

Chris — Wed, 17 Feb 2010 23:12:08 +0000

For all our AJAX Contact Form customers on CodeCanyon, here’s a quick tutorial on how to add / validate checkboxes.

As some have found, the standard Javascript .val() request does not work with checkboxes, for this reason we’ll need to add a quick function to our Javascript handling file, here’s one we made earlier… add this at line 14 of jquery.jigowatt.js

1
2
3
4
5
6
7
8
9
10
11

function getCheckedValue(field) {

field = $('#' + field)
txt = ""
for (i = 0; i < field.length; i++) {
if (field[i].checked) { txt = field[i].value }
}

if (txt == "") { return "0" } else { return "1" }

}

Using this function will return a ’1′ value if the checkbox is ticked and a ’0′ if it isn’t, this will make it very easy for you to validate in the contact.php file.

Note: If for any reason you need the checkbox’s value returned for validation you need to replace

1	if (txt == "") { return "0" } else { return "1" }

with..

1	if (txt == "") { return "0" } else { return txt + " " }

Now you just need to add the value to the post as normal.. aprox line 30 with the above function inserted

1	checkbox: getCheckedValue('checkbox'),

For your reference, our HTML for the Checkbox looks like this..

1 2	<br /> <input type="checkbox" name="checkbox" id="checkbox" value="Milk"> Milk<br />

And that’s it on our part, now with some validation you’ll be well on your way to passing checkbox variables.

Cavalio Flooring

Jay — Wed, 03 Feb 2010 10:44:19 +0000

No related posts.

Georges Hairdressing

Jay — Wed, 03 Feb 2010 10:42:54 +0000

No related posts.

Case Study – Blogtrottr

Jay — Wed, 03 Feb 2010 10:16:58 +0000

Jigowatt were approached by Sam Bryan to design an identity and build a web template for a web application he had developed; Blogtrottr. Blogtrottr is a clever application which allows you to subscribe to any RSS feed and have updates delivered to your inbox, negating the requirement for a separate piece of software/plugin to stay updated. This also makes it easier to keep your finger on the pulse while you’re on the go via mobile devices.

As always the first part of this project was to create the identity. Sam requested that the logo incorporate the recognisable RSS icon in a subtle way to hint at the purpose of the app.

The name Blogtrottr is obviously a pun on the word ‘bogtrotter’ and after a little research we discovered that bogtrotting is an outdoor activity similar to orienteering. This tied in a little with the app as it’s all about being on the go and discovery so we decided to base one of our concepts around this idea.

But what the name immediately reminded me of was a famous chapter from the Roald Dahl book ‘Matilda’ in which Bruce Bogtrotter is forced to eat an entire chocolate cake by the Trunchbull after being caught stealing a slice at lunch time. A proposed tagline seemed to fit in with this concept too: “Delicious news, fed to your inbox”.

Below are the two concepts we created:

Both incorporate the RSS symbol, linking the icon to the app. The logo on the right hints at “bogtrotting” as an activity while the left one is a direct reference to that famous chapter from ‘Matilda’. Besides, everyone loves cake, so anyone in the dark about the reference will hopefully enjoy the icon!

As a fellow fan, Sam loved the cake concept and after reading the strapline the logo was chosen. The next step was to redesign the web site. Below is a screenshot of how the site looked originally:

It’s always exciting to start the design process with a blank canvas, Sam contacted us originally after enjoying our other web design work, in particular the modern, web 2.0 styles and so gave us free reign with the design.

We felt that the site design should lend itself to the logo so we created some cakey, chocolatey textures and authored some introductory content.

I absolutely love it – just the right amount of cakeyness!
Sam Bryan – Blogtrottr

With the concept agreed we built the template using the Blueprint grid system, valid xhtml and css. We also featured a custom font using the css3 property @font-face which enhances the brand as we were able to use the same font for the headings as was used in the logo itself.

Below is the final template:

The new design will be going live in the next few weeks.

AJAX Contact Form; Add or Remove Custom Fields

Chris — Thu, 14 Jan 2010 13:21:56 +0000

In a burst of WordPress fever we decided to write another blog post to help all of our ThemeForest / CodeCanyon customers.

Alongside our ThemeForest and CodeCanyon success comes Customer Support. We get a lot of questions from users needing a point in the right direction so we thought we’d make it easier for us both and explain how to add custom fields to our ever popular AJAX Contact Form.

Add a Custom Field Tutorial

In this example we’re going to add a new simple text field (Your Height) which we want all users to fill in (a required, validated field).

Step One

Firstly, backup backup and backup again, once you’ve done that we need to edit our HTML to include our new field, we’re going to add this one under the ‘Your Name’ field.

In the included index.html file find the following lines..

1	<input name="name" type="text" id="name" size="30" value="" />

Below it we’re going to insert our new text field..

1
2
3

<br />
<label for=height accesskey=H><span class="required">*</span> Your Height (cm)</label>
<input name="height" type="text" id="height" size="30" value="" />

Now save and close index.html, that’s the first step out of the way.

Step Two

This is an often overlooked though most important step of this tutorial.

We’re going to edit the Javascript handler (the AJAX part) of the contact form.

In the js/jquery.jigowatt.js file find the following line..

1	name: $('#name').val(),

For this example add the following code immediately below.. (please note the comma , after the line – this is important)

1	height: $('#height').val(),

Once done the section of the code should look like this..

1
2
3

name: $('#name').val(),
height: $('#height').val(),
email: $('#email').val(),

Save and close jquery.jigowatt.js, that’s the second step done!

Step Three

The third and final step! We’re going to add our new field to the PHP form handler. This will validate it’s contents and put it into the e-mail.

In contact.php find the following line (aprox line 5)

1	$name = $_POST['name'];

Add the following code immediately below..

1	$height = $_POST['height'];

In contact.php find the following lines (aprox line 13)

1 2	echo ' Attention! You must enter your name. '; exit();

Add the following code immediately below..

1
2
3
4
5
6

} else if(trim($height) == '') {
echo '

Attention! Please enter a your height.

';
exit();
} else if(!is_numeric($height)) {
echo '

Attention! Your height can only contain digits.

';
exit();

This piece of code checks that the user has firstly entered a value, and the further checks that they have only entered a numeric value. The only variables within this are $height and the error message you want to display if it finds a discrepancy.

And finally, place our validated variable into the e-mail.

Find the following (aprox line 70)

1	You have been contacted by $name with regards to $subject

Replace this with the following (notice the sentence change to include our new $height variable)

1	You have been contacted by $name who is $height cm tall with regards to $subject

And that’s it, you’ve just added a new field to your AJAX Contact Form! Upload the changed files and give it a test. Any questions, feedback or suggestions please use our comments box below.

Introducing our Acronis / RAID Web Server

Chris — Wed, 13 Jan 2010 13:38:50 +0000

Despite being busier than ever at Jigowatt HQ we thought we’d sneak in some time to introduce our new Acronis / RAID server setup (we don’t expect that to mean anything until you’ve read a little more).

We’ve added yet another dedicated server to our already gluttenous collection; what better time to let you all know the workings, secrets and latest new features of our server range.

Acronis

Acronis is a comprehensive backup solution which also minimises downtime to meet our strict Recovery Time Objectives (RTOs).

But what does it do you may ask..?

It allows us to operate automated incremental nightly backups of new/modified files and data across all of our hosted websites. With each and every-one of our dedicated servers running Acronis we can now offer a further outstanding hosting service to all our clients, giving peace of mind and hands-free operation to all.

With that said, we thought we’d go that one step further, we’ve customised Acronis to run a weekly server-wide backups too! This means we not only have previous days workings and changes, we have entire week backups which are securely stored off-site.

How does this benefit the client?

Ever lost a picture, removed an order accidentally or even deleted a page? In the past this may have caused headaches and disruption, with Acronis incremental backups you need not worry, individual files through to entire databases can be recovered and restored quickly and easily.

RAID

RAID is a technology that allows computer users to achieve high levels of storage reliability via the technique of arranging the devices into arrays for redundancy.

In a slightly less tech-savvy explanation, having a RAID configured server means that hardware reliability is no longer an area of worry, as with everything, computer parts have a life expectancy, if you’ve ever had a Hard Drive fail you’ll already know this can be detrimental to every-day business and can sometimes lead to permanent data loss.

For example, RAID arranges files in such a way that if 1 out of 2 Hard Drives fails, data stored on the working Hard Drive can be used to restore the other quickly and easily vice-versa. This simply means, no data is ever at the mercy of hardware failure.

All of our dedicated servers are configured with RAID as standard.

Introducing Nanowatt

WordPress – List subpages including their post tumbnails

Jay — Thu, 07 Jan 2010 13:15:02 +0000

We’re building a WordPress web site for a local hairdressers which is obviously quite gallery intensive. To tackle this issue using WordPress we’ve used the Cleaner Gallery plugin which is great, but our issue was on the galleries parent page where we had some brief description text followed by a simple text list of the galleries (sub pages).

Displaying sub pages is easy enough but we wanted to incorporate WordPress 2.9′s post thumbnail function to display the sub page title, and next to it the post thumbnail.

The first step is to make the theme “post thumbnail compatible” by adding the following to the themes functions.php file:

1	add_theme_support( 'post-thumbnails' );

With post thumbnail support enabled we added a thumbnail to each of the gallery pages. Then, on the parent page template we used to following code to achieve the desired effect:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

This outputs all of the child pages in an unordered list, including the post thumbnail (if one is present) and the page title, all as a link to the actual page itself. Enjoy!

StickaStyle

Jay — Tue, 15 Dec 2009 13:08:01 +0000

No related posts.

Website Design Peterborough, Jigowatt - Magento Web Design, UK

Faragher&Co

Going to Work

Liberator

Nursery Walls

Zhu-Zhu

Jigowatt are recruiting, again!

Introducing Magentosphere

Add Magento Category Links to your Footer Template

AJAX Contact Form; Add / Validate Checkboxes

Cavalio Flooring

Georges Hairdressing

Case Study – Blogtrottr

AJAX Contact Form; Add or Remove Custom Fields

Add a Custom Field Tutorial

Introducing our Acronis / RAID Web Server

Acronis

RAID

WordPress – List subpages including their post tumbnails

the_title(); ?>

StickaStyle