Customizing E-junkie Shopping Cart
Note: Following article only applies to the standard E-junkie shopping cart. If you are using the Non-JavaScript version of E-junkie shopping cart, then you can not customize it.
Before we begin, you should know that simple things in the cart like font styles are simply picked from the CSS you are using for FONT and TD elements in your website. You can Add to Cart an item and then paste your View Cart button URL into a blank browser window/tab and view source to figure out how you might apply more extensive custom styles to the cart using CSS. Now, to the more advanced stuff.
In the VIEW CART button code, add the following lines of code just before the
// --> line -- if you had already added EJEJC_config(){} before, do not duplicate it, but just add any new lines you may require from the selection below:
function EJEJC_config() {
// Add this line to open PayPal checkouts in a new window (not recommended):
EJEJC_CPOP = true;
// Add this line if you face any layout issues after putting in the cart buttons:
EJEJC_INITCSS = false;
// Add this line if you want to change the background of the dimming screen to
// white (FFF) or any other hex code:
EJEJC_BGCOLOR = "#FFF";
// Change opacity of the dimming screen:
EJEJC_OPACITY = 60;
// Change the width of the cart window:
EJEJC_WIDTH = 700;
// Change the height of the cart window:
EJEJC_HEIGHT = 415;
// Change the border color of the cart window:
EJEJC_BRDRCOLOR = "#444";
// Will call EJEJC_shown function (next section below) after the cart has rendered:
EJEJC_POSTCALL=true;
}
function EJEJC_shown() {
// Will change the PayPal checkout button image:
jQuery("#btnPP").attr("src", "http://yourdomain/yourimage");
// Will change the Google checkout button image:
jQuery("#btnGC").attr("src", "http://yourdomain/yourimage");
// Will change the Authorize.Net/PayPal Pro Direct checkout button image:
jQuery("#btnCC").attr("src", "http://yourdomain/yourimage");
// Will change "Ship to Country" to "Your Country":
jQuery("#country1").attr("innerHTML", "Your Country");
// Will change "Ship to ZIP/postal Code" to "Your ZIP/Postal Code":
jQuery("#state1").attr("innerHTML", "Your ZIP/Postal Code");
// Will change "Discount Code" to "Something Else":
jQuery("#dscnt_cd").attr("innerHTML", "Something Else");
// Adding a custom line of text or block of HTML inside the cart:
jQuery("#tdPmnt").attr("innerHTML",
"Anything <b>HTML</b> you want to show");
// Remove "continue shopping" button:
jQuery("#btnContShop").remove();
}
If you want to explore the things you can change, you can pick the URL from the ADD TO CART and open it in a browser window. You can view source to see various elements of the cart and some of them will have IDs, you can modify them by placing jQuery statements inside the EJEJC_shown function as shown above.
