Customizing the E-Junkie Shopping Cart: Translation

Following up on my post on how to fully customize the E-Junkie cart visually, this post describes how to translate the E-Junkie shopping cart.
Comments (2) | Trackback

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

How to Open Rapid Weaver in Terminal

You use RapidWeaver. You’ve downloaded the latest greatest plugin and can’t wait to try it out. You install it …and… nothing. After contacting the developer, and they go through basic trouble shooting with you. That goes no-where. Eager for more information on the issue, the developer asks you to please open RapidWeaver in the Terminal, and copy-paste any output to them.

This article describes exactly how to do this.

First, you’re going to open Terminal. It is located within the “Utilities” sub-folder of your standard “Applications” directory.

Terminal Location in OS X

Next, open Terminal.

Now find RapidWeaver, and drag it into the open Terminal window.

Drag RapidWeaver into the open Terminal window

Next, paste the following onto the end the line in Terminal that was created when you dropped RapidWeaver onto it:

/Contents/MacOS/RapidWeaver

Make sure that there is no space between “RapidWeaver.app” and the extra text you’ve pasted. It should look something like this:

Terminal Ready

Now, click inside the Terminal and press Enter. Notice that RapidWeaver will start, and some (possibly a lot!) text will appear in the Terminal window. This text is gold for developers.

If whatever issue you’re experiencing requires certain actions to replicate, perform those actions – RapidWeaver might be printing information related to the issue in the Terminal. After you’ve replicated the issue, select all of the text inside the Terminal window and paste it into an email, then send it off to whoever you’re working with.

Comments (2) | Trackback

Listing Methods at Runtime in Objective C

Before getting into creating my next Rapid Weaver plugin, I needed to do some experimentation to make sure what I wanted to achieve was possible. Wanting to manipulate some aspects of RWPage objects, I first required a list of methods for the RWPage class.

Thanks to Matt Gallagher’s IMP of the current method entry, I was able to generate my method list with the following code:

#import "objc/objc-class.h"
 
// Iterate over the class and all superclasses
Class currentClass = [RWPage class];
while (currentClass) {
    // Iterate over all instance methods for this class
    unsigned int methodCount;
    Method *methodList = class_copyMethodList(currentClass, &methodCount);
    unsigned int i = 0;
    for (; i < methodCount; i++) {
        NSLog(@"%@ - %@", [NSString stringWithCString:class_getName(currentClass) encoding:NSUTF8StringEncoding], [NSString stringWithCString:sel_getName(method_getName(methodList[i])) encoding:NSUTF8StringEncoding]);
    }
 
    free(methodList);
    currentClass = class_getSuperclass(currentClass);
}

Method list acquired, the process of whittling it down until I found the one I wanted began.

Comments (5) | Trackback

Facebook “Like” Button Proxy Error

While attempting to embed the Facebook “Like” button in this blog, I ran into the following error:

uncaught exception: Error: Permission denied for to get property Proxy.InstallTrigger

This was due to my failure to include meta information regarding the Facebook administrators of this site. For me, the simplest way was to insert this meta tag into the head, with USER_ID being my Facebook id.

<meta property="fb:admins" content="USER_ID"/>

To get my Facebook ID, I visited my Facebook profile page and copied the ID from the URL.

I also used Open Graph plugin for the wordpress portions of this site.

To set the og:url meta content I used

<meta property="og:url" content="http://pagesofinterest.net<?php echo $_SERVER['REQUEST_URI']; ?>"/>

And to make sure that Google+ properly handles the site, I added the following

<link rel="canonical" href="http://pagesofinterest.net<?php echo $_SERVER['REQUEST_URI']; ?>">
Comments (1) | Trackback