Using Zen-Cart as a “Cart Only” system
UPDATE: — 5/6/2010– For a working example of this method, Click here
The front-end is all done in Typolight, while the cart contents and checkout are handled with Zen-Cart.
I’ve seen this question has been asked many times before on the Zen-Cart forums with the same answer given each time: “It is not meant to be used like that, just make your whole site in Zen-Cart”.
Well, If you have ever used a CMS like Typolight, you know that by comparison, the “CMS” capabilities of Zen-Cart cannot compare by any stretch of the imagination. However as an e-commerce platform, Zen-Cart is fantastic. It’s light, stable, and easy to modify. It just doesn’t stand up to the challenges that a web developer faces for managing a large site. Some of the suggestions for pseudo integration involve sharing the header and footer HTML to try and get the zen-cart pages to look like your existing site. Doing it this way it has the appearance that it’s at least somewhat integrated. The problem is, it isn’t and you still need to design pages in Zen-Cart.
Well, I quickly found out that creating an “Add to Cart” button that can be added practically to any external page made in any sort of CMS was very possible. In addition, it can be expanded even further using Jquery to create some amazing ajax effects that rival what is seen in systems like Magento and Freeway.
On with the show…
For my site, I started by installing to a sub-directory (domain.com/cart/) and stripping Zen-cart down to basic functionality by turning off all side boxes and links to categories, etc. Essentially, the only pages that will be served from Zen-Cart are the cart and checkout pages. By editing the tpl_shopping_cart_default.php file, you can get a good feel for the cart structure and layout. For the fancy stuff, you will need to make changes to this file later.
I also setup my products but leaving out any kind of description since all that is handled on my other CMS. Each Product is given an ID. This is what we will use to create the add to cart form buttons.
On the external page you wish to place your button, just past the following code:
<form enctype=”multipart/form-data” method=”post” action=”/cart/index.php?action=add_product” >
<input type=”text” name=”cart_quantity” value=”1″ />
<input type=”hidden” name=”products_id” value=”#” />
<input type=”submit” alt=”Add to Cart” value=”Add to Cart” title=”Add to Cart” />
</form>
Just replace the value=”#” with the number of the product.
When you click the add to cart button, it will then take you to the cart page where the product will be shown in the cart. This form can also be further modified using a select list where you can have a dropdown to choose different products, hide the quantity box, etc. It follows the same styling rules as any kind of form so it can be styled however you wish.
For basic level “Add to cart” button functionality, that is it. You don’t need to do anything further.
Getting fancy…
Now you can then get even fancier by using an invisible iframe and doing your submit to it so that the add to cart is actually handled in the “background” eliminating the page jump.
Just add the following to your page footer:
<iframe id=”cart_frame” src=”/cart/index.php?main_page=shopping_cart” name=”zenframe” width=”0″ height=”0″ style=”visibility:hidden”></iframe>
Then change your form to the following:
<form enctype=”multipart/form-data” method=”post” action=”/cart/index.php?action=add_product” target=”zenframe”>
<input type=”hidden” name=”cart_quantity” value=”1″ />
<input type=”hidden” name=”products_id” value=”#” />
<input type=”submit” alt=”Add to Cart” value=”Add to Cart” title=”Add to Cart” />
</form>
When you click add to cart, it will silently submit it to the iframe. You will want to add a link somewhere to open the cart page to see the results. As a bonus of having the iframe load in your footer, the session stays active as your customer browses the site so you don’t lose the cart contents. You can also just add the iframe and use it to keep the session active if you don’t want to do a silent submit.
Now, beyond this, you can use JQuery to have messages appear such as “Item added to Cart” when you submit the form. This gives a nice ajaxy feel. This can be done by creating a trigger tied to the form submit.
$(“form”).submit( function () {
// Your code to fade in a DIV and Fade Out
} );
By using the load() function, You can create a fully functional modal box that appears after you click add to cart that shows the cart contents and allows you edit it right there. To accomplish this, You will want to create a hidden section on the zen-cart “Edit Cart” page that is customized for your modal pop-up. I created a whole hidden cart section on the zencart side that the load() function pulls from.
Here is the Code I added in my Cart template. It is a modified duplicate of the default Cart display code that strips out a number of things I didn’t need and adds some DIV ID’s so I could grab various sections using Jquery.
<!–START HIDDEN MAIN CART THIS IS USED FOR THE POPUP CART IN EXTERNAL SITES –>
<div id=”maincartwrapperh” style=”display:none;”>
<div id=”cartInstructionsDisplay”><?php echo TEXT_INFORMATION; ?></div>
<?php if (!empty($totalsDisplay)) { ?>
<div><?php echo $totalsDisplay; ?></div>
<br />
<?php } ?>
<table border=”0″ width=”100%” cellspacing=”0″ cellpadding=”0″ id=”cartContentsDisplay”>
<tr>
<th scope=”col” id=”scProductsHeading”><?php echo TABLE_HEADING_PRODUCTS; ?></th>
<th scope=”col” id=”scUnitHeading”><?php echo TABLE_HEADING_PRICE; ?></th>
<th scope=”col” id=”scQuantityHeading”><?php echo TABLE_HEADING_QUANTITY; ?></th>
<th scope=”col” id=”scTotalHeading”><?php echo TABLE_HEADING_TOTAL; ?></th>
<th scope=”col” id=”scRemoveHeading”> </th>
</tr>
<!– Loop through all products /–><?php
foreach ($productArray as $product) {
?><tr>
<td><span id=”cartProdTitle”><?php echo $product['productsName'] . ‘<span>’ . $product['flagStockCheck'] . ‘</span>’; ?></span></td>
<td><?php echo $product['productsPriceEach']; ?></td><td>
<form id=”securecart” enctype=”multipart/form-data” method=”post” action=”/cart/index.php?action=update_product” target=”hole”>
<div><?php echo $product['quantityField']?></div>
<div><input type=”image” title=”Update Quantity” alt=”Update Quantity” src=”/buttons/english/button_update_cart.gif”/></div>
<input type=”hidden” value=”<?php echo $product['id']; ?>” name=”products_id[]“/>
</form>
</td><td><?php echo $product['productsPrice']; ?></td>
<td>
<form id=”securecart” enctype=”multipart/form-data” method=”post” action=”/cart/index.php?action=update_product” target=”hole”>
<input type=”hidden” name=”cart_quantity” value=”0″ />
<input type=”hidden” value=”<?php echo $product['id']; ?>” name=”products_id[]“/>
<input type=”image” title=”Remove item from cart” alt=”Remove item from cart” src=”/cart/includes/templates/images/icons/small_delete.gif”/>
</form>
</td>
</tr><?php
} // end foreach ($productArray as $product)
?>
<!– Finished loop through all products /–></table>
<div id=”cartSubTotal”><?php echo SUB_TITLE_SUB_TOTAL; ?> <?php echo $cartShowTotal; ?></div>
<br /><!–bof shopping cart buttons–>
<div><?php echo ‘<a target=”_blank” href=”‘ . zen_href_link(FILENAME_CHECKOUT_SHIPPING, ”, ‘SSL’) . ‘”>’ . ‘<img src=”/cart/includes/templates/buttons/english/button_checkout.gif” title=”Checkout now” />’ . ‘</a>’; ?></div>
<!–eof shopping cart buttons–>
</div>
<!–END HIDDEN MAIN Cart Area–>
This gives us a custom area to pull data from that will be formatted on our external page. The display:none keeps it from showing up when going to that page directly.
Because our iframe loads the cart page, we can use it to load up sections and display them.
I have this code in my header. It automatically is triggered after the iframe has loaded.
$(“#cart_frame”).load(function (){
var cartXitemsInCart = $(‘#cart_frame’).contents().find(‘div#cart’).html();
var cartTotalDollarAmt = $(‘#cart_frame’).contents().find(‘td.cartTotalDisplay’).html();
var cartFullCartDisplay = $(‘#cart_frame’).contents().find(‘div#shoppingCartDefault’).html();
var cartPopupDisplay = $(‘#cart_frame’).contents().find(‘div#maincartwrapperh’).html();
var cartEmptyMessage = $(‘#cart_frame’).contents().find(‘h2#cartEmptyText’).html();
$(‘#cartbox’).html(‘<h3>Your Stuff ‘ + cartXitemsInCart+ ‘</h3>’);$(‘#cart_box_content’).html(cartPopupDisplay);
$(‘#cart_message’).html(cartEmptyMessage);
});
#cart_frame is the ID of the invisible iframe and so by specifying it above, we are using it as our source for pulling html from the page and loading it into variables that I can then display wherever I choose. For example, By placing the var “cartPopupDisplay” into a #DIV I can make it appear on submit to show the cart contents and allow the customer to edit the contents or simply close the box and continue shopping. Also provided is a link to Checkout that will load the secure checkout screen in a new window.
I know this little tutorial isn’t the most complete and perhaps barely comprehensible, but hopefully contains enough information to help someone out. Zen Cart CAN be used as a cart-only system, it just takes a little work.
50 Responses to “Using Zen-Cart as a “Cart Only” system”
Leave a Reply
Atlante Avila on December 24th, 2009
Nice tutorial, I wonder if there is a working sample for download?
cameoflage on March 17th, 2010
you’re amazing. i just read through this real quick and haven’t tried it out yet, so i’m not fully understanding this. but i just asked on the zen-cart forum yesterday if it was possible to just pull variables and whatnot, and all i got were smart-aleck remarks.
you wouldn’t by chance know how one could create a log in form on a non zen-cart page, do you? i’m missing a security token.
well, can’t wait to try this out. thanks.
Brian on March 18th, 2010
Thank you! In regards to your question, the method I’m using here doesn’t integrate security or sessions into the local page or cms. What you are essentially doing is opening up an invisible window into your zencart installation (the iFrame) and then performing actions onto it. Using jQuery, you can actually grab html data from the iFrame and display it locally. All of the number crunching work is still done by ZenCart, your only displaying the generated HTML.
In the project I’m working on (which inspired this post), I don’t have a need to integrate the login from zen-cart, as I can just direct people to a login page located IN the zen-cart install. I’m not sure if the method I’m using for adding products to the cart would work also for logging in, but somehow I don’t think it would (security and all). If you have further questions, let me know.
Tija on October 6th, 2010
Hi and great work making this – I have been looking how to do exactly this for some time.
Unfortunately, many of my products have attributes… is there any way to get your code to handle attributes with the add to cart button?
This feature would certainly make it perfect
- Tija
Brian on October 11th, 2010
Hi, sorry for the late reply, been on vacation. I haven’t attempted to use attributes as I haven’t myself had a need, however, I’ve briefly looked at it and can say it’s definitely possible. It depends on what level of functionality your looking for as to how difficult it will be to get going. I’m assuming you will want to use the select box and radio box functionality that you see in the zen-cart store. For that, your best bet is getting firefox and the Firebug extension installed. After that, you can easily examine the form code for your product. If you look at all the content inside the FORM area, you can see the attribute code as well. Just make sure this is inside your form tags on your external page. I would start by copying the individual attribute sections from your zen-cart page and then inserting it into your add to cart code on your external page. Experiment from there. Then once you have it working, you can style it up however you want.
edit: Jeebus, wordpress sucks for pasting code in comments..
Tija on October 14th, 2010
Thanks for your reply Brian and not to worry for not getting back sooner (I’m now a culprit of doing just that)
I have actually been fiddling with your code since I posted here, and I believe I managed to get the attributes working. Now, I haven’t tested this fully, and only with drop-downs, as it was only today I got it to actually work — but so far so good.
Having no success with Firebug, I had a look at a products page source to get the attributes module.
I just added this piece of code before the end of the form in your code (hoping this works after reading your edit):
Attribute Label
Option Label
So now all I’m having trouble with is getting the shopping cart frame working after one hits the add to cart button… I’m only new to all this coding gibberish, and the trigger tied to the form submit and beyond don’t seem to want to work for me.
Any thoughts on these couple of things?
Tija on October 14th, 2010
Well no success with the code, but if you just find this in the source of a product with attributes you’ll see what I meant:
Brian on October 15th, 2010
Do you have a publicly accessible page that I can see?
Tija on October 17th, 2010
Sure:
http://www.natureswonderland.com.au/products/
It’s WordPress, and has only recently been installed, so I’ve only got the one example on the main page.
BotRot on October 19th, 2010
Thanks a tonne for that. Is it possible to show the items in cart count on the external page.
In Zen Cart this is done by $_SESSION['cart']->count_contents().
- BotRot
Brian on October 19th, 2010
It seems to be functioning properly, the next step is to decide what you want to happen after submit. You can keep it simple by simply doing the form submit to the external cart page (instead of the iframe) and it will switch to the cart page when you click add to cart. You can do this by simply removing the “Target” from your form code. The iframe is still handy because it keeps your session active so the browsing customer doesn’t lose the cart contents.
The alternative is to do what I did on mine and use jQuery to perform an action after you click submit. In my example, I actually have a hidden section on the zen cart page that the iframe is loading. This contains alternate html that is read and displayed via jQuery. This is what pops up after you click add to cart on my site.
Tija on October 19th, 2010
I guess you found the cart eventually, Brian – I only just thought to put a link to it…
Anyway, I’ve been trying to get it to do what yours does, but with no luck. I have both the extra codes you supplied in your post, and the shopping cart part seems to be working. The part that you have said is in your header refuses to work for me though.
As I mentioned before, coding isn’t my forte and the jQuery string is just showing as text in my header.
Any clues as to how to go about fixing this?
Thanks – I really appreciate any assistance you can give
Brian on October 21st, 2010
Well, first, the code you copied is in the wrong spot. It should either be in the header or in a linked .js file. Second, without modifying the cart template, the code wouldn’t yield the proper results as it’s trying to read html that isn’t there.
I would start simple and expand as you begin to understand what is actually happening. Since you already have jQuery loading, that hurdle is done. What I would do is start with something like an alert that lets the customer know that they have added an Item into their cart and provide a link that will take them there.
In your header ( inside the HEAD TAGS), you have a script section. Just before the < /script> part, put in this:
$(‘form’).submit(function() {
alert(“Item Added to Cart”);
});
Then add something to the cart and see what happens. If this working, then you can move to something more complex like fading in a hidden div that gives a link to checkout or continue shopping.
BotRot on October 21st, 2010
Hello GeekIsMe,
I think (hoping too) I’m getting there. The code for the hidden modal div, does that code go on the Zen Cart side, in the tpl_shopping_cart.php code sheet? I ask cause the variables in the code are contained in that sheet, with similar functionality. Apologies if that question is blantently stupid.
- BotRot
Brian on October 22nd, 2010
@BotRot, yes. The whole reason for the Zen-Cart side hidden html is because that is where the cart contents, price, etc, are processed and the default html for the Template didn’t give me the formatting I needed. The Hidden iFrame points to the shopping cart page (that has the hidden html) so jQuery can then grab it and display it in the modal box.
Eliminates the need for using sessions or any kind of fancy php coding.
Tija on October 23rd, 2010
Hi Brian
OK – I shifted the coding to the correct spot in the header. Unfortunately, it isn’t working.
You mentioned modifying the cart template… Do you mean using the ‘hidden cart’ code you supplied in your post? If so, I have this in the tpl_shopping_cart.php file. Correct place to have put it? I believe this is what BotRot was asking, also.
Thanks again
BotRot on October 23rd, 2010
@Tija
tpl_shopping_cart.php, from the ../includes/templates/template_default/templates directory, is the correct location. This is because (as Brian has also pointed out), this is where the variables with their associated functionality reside, and this is the module used to populate/display the selected shopping cart item, or the status of the cart.
I have managed to get myself one tiny step closer, by that I mean, nothing seems to happen, but I’m not getting errors anymore. I’ll post more as I get closer, hopefully I’ll get there.
Keep in mind, the first line;
Make sure display is changed to, block or inline-block or table, whatever your set up maybe.
Brian has left us with some pretty good tips, there is some filling in to do.
Thanks and regards,
- BotRot
BotRot on October 23rd, 2010
@Tija
The first line being
div id=”maincartwrapperh” style=”display:none;”
Gee! Don’t know where that disappeared off to?
Tija on October 23rd, 2010
@BotRot
Hehe, it seems WP can’t take code in comments — it just disappears.
Thanks for the tips – I certainly had no idea that I needed to change the display on the first line.
So now I’m off to tackle this some more.
BotRot on October 23rd, 2010
@Tija
Just keep in mind there is much more than that to do. My JQuery is flakey some what, but with the
style=”display:none;”
There is good reason for it to be none, as not to display it until required, then change it dynamically to
style=”display:block;”
- BotRot (I’ll be back)
Tija on October 23rd, 2010
@BotRot
Yes, I understand there’s plenty to do. This jQuery stuff currently has me stumped.
You (and, of course, Brian) obviously have a firmer grasp on what you’re actually doing than I do, but I’m learning slowly.
Again, I really appreciate the help you guys are giving
BotRot on October 23rd, 2010
@Tija
Place a reference to your jQuery script file, as such (I can’t paste code here, I try my best to be precise);
typical script tag;
*script* type=”text/javascript” language=”javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js” */script*
- or -
Download the file from the link for something like this;
*script* type=”text/javascript” language=”javascript” src=”scripts/jquery.min.js” */script*
Replace ** with .
Your html head section should be somthing like this;
*head*
*script*
$(document).ready(function()
{
$(‘#your_form_id’).submit(function()
{
window.alert(“jQuery Does Work!”);
return false;
});
});
*/script*
*/head*
This binds your form to the submit event in jQuery. I’ll post more for ya’ when I discover more of Brian’s secrets.
Thanks and regards,
– BotRot
BotRot on October 23rd, 2010
@Tija
That is replace ** with;
Less than sign Greater than sign.
Oh Boy!
BotRot on October 24th, 2010
@Brian,
Hello Brian, just trying to clarify something;
*div id=”maincartwrapperh” style=”display:none;”*
…
*/div*
Is this div exclusively for (just) storing shopping cart values/parameters, and hence a reference section for these values/parameters?
So these values are placed on another div on your page (outside of Zen Cart)?
- or -
Is it also made to be displayed?
I ask cause the only issue I have now is trying to display this div, and I cannot. So I thinking it may not be displayed.
Thanks and regards,
– BotRot
Tija on October 25th, 2010
@BotRot
Sorry it’s taken me a while to get back.
I did as you suggested, and got jQuery working – I’d forgotten the jQuery reference… oops :\
Anyway, I haven’t had any time to do any more as yet — how are you going with it?
Brian on October 26th, 2010
Hi Botrot, Yeah, let me expand on that a little more. The Hidden cart section is for the exclusive use of pulling the cart information into your non-zen cart page. It should never be visible if your on the shopping cart (zen-cart) page. What it does is duplicate the “visible” cart but adds some wrappers and classes that make it easier to style on the non-zen cart page.
There is some jQuery code (the .load function) that reads the hidden html in the iframe and puts that into some target html on the non-zen cart page. So, for the code to work, you not only need the hidden html in the zen-cart template (you did that already) but also a target div to place it. So, on your non-zencart page, you would need div’s with the ID #cartbox, #cart_box_content and #cart_small assuming your not changing any of the id names. Without this, there is no where for jQuery to place the hidden html it’s loading from the iframe.
I hope this makes sense.
BotRot on October 27th, 2010
@Brian,
Hello Brian, thank you so much, its’ all fallen into place. Thank you very much for the tips, and clarification, it took quite a bit of head scratching and hair loss, but alas! I can see what is going on. Thank you.
@Tija,
I’ll post a few more hints over the next few days for ya’. The important thing here to consider is the iframe. Once you can see that you can use either (vanilla) JavaScript or jQuery. If your heart desires pretty looks, or professional looks, and cool effects use jQuery. If you want only raw functionality use JavaScript and a div with position: absolute. *AND* as for my comment before to you regarding tpl_shopping_cart.php, the style=”display:none;”, leave it like that, as Brian has established, that should *NOT* be viewed.
Thanks and regards,
– BotRot
Brian on October 27th, 2010
Excellent, I’m glad this can be of help to someone. Just a disclaimer, I make no claim that this is the BEST way of doing this, it’s just what I came up with after weeks of trial, error, and lots of patience. If you come up with any way of making it better, I’d love to see it.
-Brian
Tija on October 29th, 2010
@BotRot
Regarding the iframe, I’m leaning towards using jQuery, as I am after the more professional look it offers. Also, I will keep in mind the display on the ZC side.
I’m looking forward to hearing more from you – is there any chance you have live what you’ve done so far so I could take a peek?
@Brian
Although I’ve not come as far as BotRot with this, I really appreciate the assistance you’ve provided so far, and for my part, I understand you in regards to your latest comment.
BotRot on November 1st, 2010
@Brian,
No worries Brian, your disclaimer is respected and my graditude is deep. I shall take full resposibilty for my cart.
@Tija,
I haven’t completed my cart yet, and I took a different line to Brian’s example. I don’t have a pop-up dialog\div, I go straight to the shopping cart. So I didn’t end up using jQuery, instead using (vanilla) JavaScript. But I show you what you should consider, with a few specifics.
==========================
1) Your Shopping Cart Code
==========================
tpl_shopping_cart.php. See the html code Brian has displayed above with the hidden div (display:none; precisiely)? That is where you will access the shopping cart values/paraemters from. YOu can make your own HTML structure (though Brian’s one is good to use). Just make sure you’re able to access the values in the html elements. Eg;
*div id=”content_num”* *?php echo $_SESSION['cart']->count_contents() * */div*
Take not of the html table in Brian’s code, that is for storing multiple item requests in the cart, more immportantly, make sure you can reference what ever is in the table, whether it is via element id’s or the elements themselves (easily possible with jQuery).
==============
2) Your iframe
==============
JavaScript
———-
*iframe id=”cart_frame” name=”zenframe” src=”your_domain/index.php?main_page=shopping_cart” width=”0″ height=”0″ frameborder=”0″ onload=”scLoad()”**/iframe*
jQuery
——
*iframe id=”cart_frame” name=”zenframe” src=”your_domain/index.php?main_page=shopping_cart” width=”0″ height=”0″ frameborder=”0″**/iframe*
==============================
3) Your JavaScript/jQuery Code
==============================
This is the part where you will require 3 main tasks.
a) Assign to the cart when your add to cart button is clicked.
b) Reference the values in the cart
c) Write the cart values into another HTML structure, and display it.
Point a). Is straight forward, and Brian shows how this is easily done in his example. Look for the form with the hidden inputs.
Point b) and c).
JavaScript
———-
function scLoad()
{
var doc_obj = window.document;
var i_frame = doc_obj.getElementById(“cart_frame”);
// **** IT’S THINGS LIKE THIS THAT MAKE jQUERY MORE ATTRACTIVE ****
var innerDoc = i_frame.contentDocument || i_frame.contentWindow.document;
// ***** RETRIEVE OR GET THE SHOPPING VALUES HERE *******
var sbItemsInCart = innerDoc.getElementById(‘content_num’).innerHTML;
// ***** WRITE OR SET THE SHOPPING VALUES HERE *******
doc_obj.getElementById(“items-incart”).innerHTML = sbItemsInCart;
// WHERE items-incart, is a html element id on your external page
sbItemsInCart = null; innerDoc = null; i_frame = null; doc_obj = null;
return false;
}
jQuery
——
$(document).ready(function()
{
$(‘#cart_frame’).load(function()
{
var icart_frame = $(‘#cart_frame’).contents();
// ***** RETRIEVE OR GET THE SHOPPING VALUES HERE *******
var sbItemsInCart = icart_frame.find(‘#content_num’).html();
// ***** RETRIEVE OR GET THE SHOPPING VALUES HERE *******
// items-incart in the above code
$(‘#basket-frame span span’).html(sbItemsInCart);
icart_frame.val(”);
});
// $(document).ready(function()
There are a few holes in this, but I don’t display a pop-up window display to show my cart, I go straight to the shopping cart page. If you want a pop up window, either construct a div that has absolute position, and the appropriate display settings (none, block), this would be ideal for vanilla Javascript *BUT* a lot of work. With jQuery you may require, and consider also using the jQuery UI framework libraries.
Hope this gives you a better idea Tija.
Thanks and reagrds,
– BotRot
Tija on November 8th, 2010
@BotRot
Sorry it’s taken me ages to get back to you. I got caught up with things and then was trying to implement what you suggested.
I haven’t had any luck getting any farther with my code yet, but I guess I’ll get it soon enough if I keep at it – right now it’s really just trial and error for me.
Anyway, I was looking forward to seeing what you’ve done with yours — have you finished working on it yet?
- Tija
Fred McCaughey on January 23rd, 2011
Almost all my products have quantity discounts and options. Will this concept work for me?
Thanks
Brian on January 24th, 2011
It will with modifications. The Cart template (the one on the zen-cart side) needs to be modified to display the additional attributes and the form code on the front end (non-Zen-Cart page) needs the additional options added to it.
The form code would have something like the following added:
Please Select
Some option 1
Some option 2
You would need to look at the source code of the page with your products to get the option value number to fill in there. It’s a bit more work as you can probably imagine since you need the Item ID number and it’s options ID numbers.
For what I did, I didn’t need the attributes, so, I don’t have them in any of the code examples in my post.
Naren on March 29th, 2011
Does anyone have the addon for this?
Brian on March 30th, 2011
There is no addon, just the instructions above. I honestly wouldn’t know how to make an addon that would assist in this method.
-Brian
Susie on May 30th, 2011
Just tried the first part of your instructions. I wanted to use this on a sales page for an ebook.
There’s one quirky side effect: when I click on Add to Cart and it brings me to the Zen shopping cart, it also shows the Estimated Shipping section with the field for choosing the zip code as if it were a hard good.
Note that when I add it to the cart from within Zen, it says Estimate Shipping Costs: Free Shipping – Downloads
and doesn’t show me the zip code box.
So there’s something about your way that isn’t telling ZenCart it’s a download.
Not sure why…
Susie on May 30th, 2011
Oh, I know why. Zen Cart has that really stupid way of identifying a download–with a radio button attribute.
When I added that input field, it worked fine.
So now I just have to figure out how to hide it.
Susie on May 30th, 2011
Sorry for all the posts, but got it to work.
Just look at the source code from a regular Zen Cart product page and copy/paste the line for the radio button into your non Zen page.
Change type from radio to hidden and delete the label.
Boating Buddy on August 22nd, 2011
Can not make the simple code work.
It takes you to the checkout page but does not load the product.
Sure could use some help. Thanks
charlie2k on October 4th, 2011
This is brilliant, I had been thinking for about a year about doing something like this with iframe, couldn’t figure out how to get the session cookie to carry thru, such a simple solution. thanks! no help fr zencart, that is for sure.
One question: everything for credit card payment works great, but if I select pay by paypal, when I click on the final confirm order button which should take me to paypal, it dies. Nothing happens, blank page. I think maybe the iframe is trying to load paypal, and perhaps paypal is not allowing it.
Any ideas for solution to that one?
thanks again, the jquery popup for the cart info is very nice!
Brian on October 5th, 2011
I don’t use the iframe for checkout in my solutions due to security reasons (you have a secure frame inside of an insecure page). What I do is in the popup, the checkout button links to the checkout page in a “_blank” target so it opens in a new window. I’m not 100% certain, but I would imagine your troubles with Paypal is that they don’t support using them inside of an iFrame (I also wouldn’t recommend it).
Also, if your using a secure checkout inside of an iFrame, your browser url would still show as insecure and thus raise some red flags for folks that pay attention.
Austin on October 13th, 2011
Hello All,
First off this is a great idea and has helped me a lot getting a site off the ground…
quick question… @brian
when I edit the tpl_shopping_cart.php and put in your code everything on that page except the top nav disappears
so the hidden code you gave us and the code that is supposed to be there already are both gone.
does anyone have an example .php file I could look at?
I’ve got the form on my site adding to the iframe cart with attributes, just cant seem to get the cart to display correctly.
Brian on October 13th, 2011
Sounds like you replaced all the code in your tpl file. You need to insert the code block as an addition. All it does is create a hidden and separately formatted area that the jQuery code can pull from.
You should insert the code around line 160 in the TPL file. It goes after the
Austin on October 13th, 2011
I figured it out a couple of minutes ago, there was a syntax error from your copied code in the blog post at the end with the checkout button that wasn’t closing the php, so the div’s werent closing either.
now im running into not having my “cartbox” “car_box_content” and “cart_message” divs fill with the info from the hidden area on the template page…
in your js the first var = cartXitemsInCart is looking for div#cart. Does that mean its looking for any div in #cart? if so, there isnt a div named that on the zencart template file we’ve edited… I’ve tried adding it, but it doesnt seem to fix the problem either.
Austin on October 18th, 2011
Figured it out… with much hair pulling…
it’s important to note that the website you are doing this on cannot have the www. before it.
and you cant work with local files, references must be used from your server root. So instead of:
http://www.yourwebsite.com/blah/blah/blah
it must be just /blah/blah/blah
newdesigner on November 21st, 2011
I have read through this and understand a little. I am new to all this and don’t know how to do all the steps. I am trying to use zen cart with paypal and dreamweaver and my small amount of code writing skills. learning as I am going and w3schools. Can you help. I have been to a thousand different forums and have found nothing.
Lacrust on November 23rd, 2011
Hi all,
Upon following the first step by adding the following code
I get an invalid markup error in dreamweaver:
” Invalid markup
Marked invalid because it contains a duplicate attribute
<input Remove the duplicate attribute in Code view.
"
And the line:
"”
is hightlighted in yellow, under the design view.
My cart directory is called “store”
That’s all changed on the code, besides adding the product value
You can see the page here
http://www.lacrust.com/polos.html
Any help would be much appreciated.
Thanks.
Mauro
Ben on January 6th, 2012
I like this whole concept. I explored it a bit on small projects as perhaps a viable option in the past. Given the ease of passing information to a credit card processor, and generating shipping quotes, and the bulk of Zen Carts other features you would deprecate. It seems like a cart only portion of zen cart on a site, would still be more work(in the long term) than a sessions/db(optional) based homegrown cart from the ground up. Effectively just forms, hidden vars, and session variables moving via POST/and url strings. In the long term it might also be easier to support attributes on products on the fly, any other product changes, and an opportunity for a nicer UI. What made you decide to use ZC’s cart?
Brian on January 6th, 2012
I didn’t want to delve into creating my own cart and I liked Zen-Cart for it’s size, speed and proven security. It also added a lot of features that simply went beyond what I would have been able to do myself. Also, I have a CMS that I like (Contao) and only needed a simple “add to cart” function. There is a store addon for Contao called Isotope, but It had limitations and I liked the flexibly of this method.
Since the writing of this post I’ve refined things a bit and have switched from Zen Cart to OpenCart.
Opencart is similar to Zencart (Database structure, terminology, form submits for adding items), but has a FAR FAR better template system and a modern admin area. I was able to adapt my Zencart code to opencart in less than an hour. Once I get some time I want to make an updated post detailing how that is done.
lollygaggr on January 14th, 2012
Brian,
I’ve been working on this site for a friend. I have followed the tutorial as best I could, I am not a programmer but I like the idea of not having to rewrite a template for zen or oscart. I cut and pasted what I’ve learned here. It is at this site only, the rest of the site is untouched. http://metahwonders.com/test.html . All that I can get to happen is zen does recognized there have been ‘visits’ to the site but nothing else. Man, I really wanna do this but so far it’s not working out. (Excuse my code, it’s not the best).
Thanx man,
Mike