Customizing E-junkie Classic Shopping Cart

How to customize E-junkie's classic shopping cart

Simple layout aspects of the cart like font and table styles are simply picked from the CSS you are using for elements in your website; since the overlay-style cart renders as part of your page, it inherits CSS from your page just like anything else in the page. You can paste an Add to Cart button URL into a blank browser window/tab and then view source to see the cart structure and figure out how you might apply more extensive custom styles to the cart using CSS. Note that inline style attributes built-into the cart can be overridden with !important CSS declarations (see further tips in the Advanced Cart Customization section below).

To customize other aspects of the cart, just add the following lines of code to your View Cart code on every page, just after the line function EJEJC_lc(th) { return false; } in the standard code you obtained from Seller Admin. If you had already added customizations using function EJEJC_config(){} or function EJEJC_shown(){} before, do not duplicate those function lines when you wish to add more customizations; instead, just add any new lines you may require from the selection below -- i.e., between each set of { curly brackets }, you can delete any lines you don't wish to use and only keep the ones you're actually using (and if you wish, you can also remove any explanatory comment lines starting with //, which come before the parameter they explain):

function EJEJC_config() {
// Open PayPal checkouts in a new window (not recommended due to popup blockers):
EJEJC_CPOP = true;
// Add the next line if you find any layout glitches after putting in the cart buttons:
EJEJC_INITCSS = false;
// Change the background color of the dimming screen (e.g. #FFF for white):
EJEJC_BGCOLOR = "#FFF";
// Change opacity percentage of the dimming screen:
EJEJC_OPACITY = 60;
// Change the pixel width of the cart window:
EJEJC_WIDTH = 700;
// Change the pixel height of the cart window:
EJEJC_HEIGHT = 415;
// Change the border color of the cart window (e.g. #009 for blue):
EJEJC_BRDRCOLOR = "#009";
// Number of days after the buyer last views their cart before their cart will reset:
EJEJC_CDAYS = 2;
// Trigger a conversion-tracking pixel or beacon (e.g. Google AdWords):
EJEJC_BEACON = "http://Put.Tracking.Pixel.or.Beacon.URL.Here";
// Add this line if you want to use EJEJC_shown function (next section below):
EJEJC_POSTCALL=true;
}
// You must have the above function EJEJC_config() with EJEJC_POSTCALL=true; to use this next section:
function EJEJC_shown() {
// Change the PayPal checkout button image:
jQuery("#btnPP").attr("src", "http://yourdomain/yourimage");
// Change the Pay with Credit Card checkout button image:
jQuery("#btnCC").attr("src", "http://yourdomain/yourimage");
// Change the E-junkie Free Checkout button image:
jQuery("#btnEJ").attr("src", "http://yourdomain/yourimage");
// Change the Your Shopping Cart header image:
jQuery("#imgHeader").attr("src", "http://yourdomain/yourimage");
// Remove the Continue Shopping button:
jQuery("#btnContShop").remove();
// Change the text label at the end of each line (e.g. "Ship to Country") to say whatever you wish instead of the cart's standard text labels:
jQuery("#country1").attr("innerHTML", "Ship to Country");
jQuery("#state1").attr("innerHTML", "ZIP/Postal Code");
jQuery("#state2").attr("innerHTML", "Update Cart after entering");
jQuery("#dscnt_cd").attr("innerHTML", "Discount Code");
jQuery("#discount2").attr("innerHTML", "Update Cart after entering");
jQuery("#btnContShop").attr("value", "Continue Shopping");
jQuery("#btnUpdtCart").attr("value", "Update Cart");
jQuery("#EJEJC_closeWindowButton").attr("innerHTML", "Close");
// Add custom text or HTML next to checkout buttons in the cart:
jQuery("#tdPmnt").attr("innerHTML",
  "Any <b>HTML</b> you want to show");
// Add custom text or HTML below checkout buttons in the cart:
jQuery("#tdSell").attr("innerHTML",
  "Any <b>HTML</b> you want to show");
}

With the last two options, bear in mind that since any custom HTML you add there is being specified as a javascript string enclosed within double-quotes ( " ), any double-quotes in that HTML itself would need to be either escaped with a preceding backslash (\") or changed to a single-quote ( ' ) -- or often the quotes can be omitted entirely -- and any ampersands (&) would also need to be escaped with a preceding backslash (\&). You can also break up your custom HTML into shorter lines by adding a backslash (\) to the end of each line that should continue on the next line. See the example below.

Example:

This shows a sample of complete View Cart code including extra customization code that would make the background dimming around the cart white and more transparent, change "Ship to Country" to say "Your Country", and add an upsell offer to the cart.

<a class="ec_ejc_thkbx" href="https://www.e-junkie.com/ecom/gb.php?c=cart&amp;cl=XXXXXX&amp;ejc=2" onclick="return EJEJC_lc(this);" target="ej_ejc"><img alt="View Cart" border="0" src="https://www.e-junkie.com/ej/ej_view_cart.gif" /></a>
<script language="javascript" type="text/javascript">
function EJEJC_lc(th) { return false; }
function EJEJC_config() {
  EJEJC_BGCOLOR = "#FFF";
  EJEJC_OPACITY = 30;
  EJEJC_POSTCALL=true;
}
function EJEJC_shown() {
  jQuery("#country1").attr("innerHTML", "Your Country");
  jQuery("#tdPmnt").attr("innerHTML",
    "Add our bonus widget to your order for only $5.00!<br>\
    <a href='https://www.e-junkie.com/ecom/gb.php?c=cart\&ejc=2\&cl=XXXXXX\&i=YYYYYY' \
    target=ej_ejc class=ec_ejc_thkbx onClick='return EJEJC_lc(this);'>\
    <img src='https://www.e-junkie.com/ej/ej_add_to_cart.gif' border=0 alt='Add to Cart'></a>");
}
</script>
<script src='https://www.e-junkie.com/ecom/box.js' type='text/javascript'></script>

Advanced cart customization:

If you want to explore the things you can change, you can pick the href= URL from an ADD TO CART button and open it in a browser window. Then you can view source to see various elements of the cart, some of which will have id= attributes, so you can modify those by placing jQuery statements inside the EJEJC_shown function, with syntax following the examples above.

We can also recommend using the View Source Chart extension for Firefox to help you see how the overlay-style cart is structured within your page when it's being displayed. Once you have the View Source Chart extension installed, click a cart button to view the cart in your page, then right-click on it and select View Source Chart. You will find the cart added as a large DIV at the end of your original page source. The built-in Developer Tools in Firefox and Chrome will also let you view and tinker with the CSS and "rendered source" of your page (including the cart layout) while the overlay-style cart is being displayed.