Customizing the E-Junkie Shopping Cart: CSS

Preamble

It’s important to give your visitors a consistent experience across your site. A grossly different shopping cart can be jarring for potential customers. Part one of this guide will provide a usable overview of the techniques required to re-style the E-Junkie shopping cart with CSS.

I’ve been using E-Junkie to power my online store for many years, and it has always served me well. At US $5 a month, it’s one of the cheapest, has all the features I need, and has been extremely reliable. Until my recent site refresh however, attempting to restyle the E-Junkie cart hadn’t occurred to me. I blame the fact that when I started out on the web, I was a noob.

A noob no longer, I tackled the task of re-styling the E-Junkie cart with wonton abandon. This was the result:

Pages of Interest E-Junkie Cart

Pages of Interest E-Junkie Cart

I was successful! This section covers how I found which CSS selectors could be used, and a rather drastic technique required to replace with the default close text & header image.


Getting the Selectors

In an ideal situation, all styling is handled with CSS only. Styling a shopping cart that is instantiated and populated with an external JavaScript isn’t an ideal situation. Still, it’s preferable to do as much as possible with CSS.

To get started, I first needed a way to see the HTML structure, the ids and classes available for me to select with CSS. Enter Firebug. Firebug is likely the most useful tool available to a web developer / designer. Chrome has a similar tool, built in. I don’t like it. Use Firebug.

Inspecting an element with Firebug

Inspecting an element with Firebug

I used Firebug to view the HTML structure (DOM) and ids (there were no classes) required to style the shopping cart. I’ve included some screenshots showing how to use Firebug to select an element on the page and inspect it. Click on one of them to enlarge. Note the DOM tree visible in the second screenshot. The arrow in the second image points to the id of the element.

Using a combination of Firebug and guesswork, I gathered selectors necessary for my attempted restyling of the E-Junkie shopping cart. I’ve included the selectors and some basic CSS at the end of this. As anything I say about the basic CSS won’t be applicable to your site, I won’t cover that here.


Drastic Measures

Update: After reading Gerard’s comment below, I did some research into the possibility of translating the E-Junkie cart (). During this research I discovered that E-Junkie allows one to override the header image with JavaScript. I’m sticking with my method as I’d rather solve these particular issues with CSS.

I was able to achieve most of what I wanted with “normal” CSS, but replacing the default E-Junkie header image and close link required something special. Specifically, the “content before” trick.

CSS Tricks has an excellent description of this trick: CSS Tricks content before. For the E-Junkie cart header, I used this technique to insert some text and an image in place of the default header. The CSS snippet below hides the existing header image:

1
2
3
#EJEJC_window #tdHeader img {
  display: none!important;
}

Having cleared that away, I used the following snippet to insert more appropriate content in its place. See the comments for more details:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#EJEJC_window #tdHeader:before {
  /* Ensure this pretend element is displayed */
  display: block;
  /* Insert some textual content */
  content: "Your Shopping Cart";
  /* Add two background images - one for the left cart image, and one for that beautiful logo you see */
  background-image: url("/images/cart.png"), url("/images/logo.png");
  /* Position the images */
  background-position: left center, right center;
  background-repeat: no-repeat;
  /* You'll likely want to change these - font & general layout */
  font-size: 1.4em;
  margin-left: 20px;
  padding-left: 20px;
  height: 63px;
  line-height: 63px;
}

This enabled me to remove the old header and replace it with content much more integrated with this site’s overall appearance. Click the thumbnail and gaze in wonder at the brilliance of a customized header.

Replacing the E-Junkie Cart Header

Replacing the E-Junkie Cart Header

I used a similar method to swap out the standard “close” text for a much nicer grey “×”. Again with the content before:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#EJEJC_closeWindowButton {
  visibility: hidden;
}
 
#EJEJC_closeWindowButton:before {
  content: "×";
  color: #CCCCCC;
  cursor: pointer;
  font-family: verdana;
  font-size: 15px;
  font-weight: bold;
  line-height: 14px;
  margin: 0 3px;
  text-transform: uppercase;
  vertical-align: top;
  visibility: visible;
  float: right;
  display: block;
}

Success!


CSS Selectors

Finally, I’ve included the commented CSS selectors that I used to restyle my cart – if you need to style more or different elements, use the techniques above to find a method to select them. If you can’t then JavaScript might be the answer. I will cover this in the next section.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/* E-Junkie overrides */
#EJEJC_window { 
  /* Change the border, maybe add some rounded corners here */
}
 
#EJEJC_window * {
  /* Use this one to reset the font for all E-Junkie elements */
}
 
#EJEJC_window table {
  /* Force removal of those nasty gaps between table cells */
  border-collapse: collapse;
}
 
/* Something drastic for the standard E-Junkie cart header */
#EJEJC_window #tdHeader img {
  /* First, hide the original image */
  display: none!important;
}
 
#EJEJC_window #tdHeader:before {
  /* Add some text & styling in place of the standard header */
  content: "Your Shopping Cart";
  font-size: 1.4em;
  margin-left: 20px;
  padding-left: 20px;
  visibility: visible;
  height: 63px;
  line-height: 63px;
  padding-left: 20px;
  display: block;
}
 
/* More hacking to alter the close link */
#EJEJC_closeWindowButton {
  /* Hide the standard header image */
  visibility: hidden;
}
 
#EJEJC_closeWindowButton:before {
  /* Use the good old content:before trick to pretend-up a better close button; */
  content: "×";
  color: #CCCCCC;
  cursor: pointer;
  font-family: verdana;
  font-size: 15px;
  font-weight: bold;
  line-height: 14px;
  margin: 0 3px;
  text-transform: uppercase;
  vertical-align: top;
  visibility: visible;
  float: right;
  display: block;
}
 
#EJEJC_window input[type="button"], #EJEJC_window input[type="submit"] { }
 
#EJEJC_window table tr td { }
 
#btnUpdtCart { }
 
#btnUpdtCart, #btnContShop { }
 
#ejejctable, #tdPmnt b { }
 
#tdPmnt b { }
 
#dscnt_cd, #discount2 { }

Share Your Customizations

Do you use E-Junkie for your online store? Have you customized it? Let us know in the comments below!

Comments (9) | Trackback

The Pirate Bay Moves to the Cloud

The Pirate Bay is going to move some or all of its front-end servers onto small drones capable of loitering kilometers high. Articles and ideas like this get me thinking that finally, that future promised to me by the 60’s sci-fi is finally here.

Comments (3) | Trackback

Resizing NSTextField to Fit Content

The NSPopOver, a new addition to the Cocoa toolkit since OS X 10.7, is an excellent way to give the user feedback on actions requiring their input. In my use case, I needed to be able to show an NSPopOver containing a multiline label populated with a string of varying length.


Getting the NSPopOver, NSView & NTextField all working perfectly was very basic.


Ensuring that the NSPopOver’s NSView & NSTextField resized appropriately was more challenging.


I needed to get the rectangle that my string would fill when drawn. A short Google search led me here: SO: NSString sizeWithAttributes: Content Rect. As I know I’ll be doing this again, I made a category of NSString that provides this.


The rest was simple:

1
2
3
4
5
6
7
8
9
10
11
NSSize size = [string sizeWithWidth:200.0 andFont:[textLabel font]];
 
[view setFrameSize:NSMakeSize(size.width + 30, size.height + 30)];
 
[textLabel setFrame:NSMakeRect(15, 15, size.width, size.height)];
[textLabel setStringValue:string];
 
popover.contentSize = view.frame.size;
[popover showRelativeToRect:[textField bounds] 
                     ofView:textField
              preferredEdge:NSMaxXEdge];

The NSString+Size category is available here: Cocoa Categories.

After doing this, I rethought my approach and streamlined it by creating a category on NSPopover, which is available in the above repository. I wrote about the process here: User Feedback & the NSPopover.

Comments (2) | Trackback

PHP Socializer Add Social Share Buttons Easily

For the longest time I held off adding share buttons to this site. When I finally decided to add them, I found it difficult to decide which solution to run with. I knew that I definitely didn't want to manually paste the HTML/JavaScript for each button, neither did I want to use some branded solution, like Add This. I experimented with various solutions, including the Shareaholic Wordpress plugin. Although I no longer use it, I do like this plugin a lot. It is easy to install and works as advertised. Ultimately though, it wasn't what I was looking for. I wanted something different - a flexible way to easily insert native share buttons, with as little code as possible. Just the buttons, fully configurable. No branding. PHP Socializer is my attempt at implementing this.
No comments | Trackback