Using Zen-Cart as a “Cart Only” system

UPDATE — 12/26/2012 – This Post is WAAY outdated, please see my new post regarding this method.

 

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”>&nbsp;</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.

67 thoughts on “Using Zen-Cart as a “Cart Only” system

  1. techster

    Hi

    Really nice tute.

    I am a bit stuck at the start itself; now every zencart comes with a security token which is creating a trouble while creating the first block of code to make a shopping cart available on non-zen page.

    any heads up?

  2. gloukas

    Hi

    I am so bad with this stuff. If you want to make a bit of extra cash I will pay you to help me set this up on my site!!!

    email me,

  3. RatherBRedditting

    Hey this is a great tutorial and it made my client’s website much more user friendly.

    But if you have MULTIPLE items on one page, the iframe might throw your code in a loop and make the browser crash.

    to prevent this behavior, and for faster load change the source of the iframe:

    src=”about:blank”

    works perfectly for me. you can check it out @ luckydoghotsauce.com

  4. Brian Post author

    This is for people who are using add-to-cart functions on a non-zencart page. In which case, having a blank iframe won’t work. Also, I don’t specify that you have multiple iframes, you just have one hidden one in the footer.

  5. JimW

    Brian.

    What you suggest is exactly what I want to do. You said the first thing you did was strip all the stuff out. How did you do that? Can I get a copy of the file you modified? Thanks.

  6. Tiff

    Thank you Brian for having a solution to my question. This is exactly what I wanted to do with Zen Cart. I do have a problem though. I know very basic javascript coding and its variations

    I’m trying to implement the fancy AJAX where a user clicks on Add to Cart, and a popup shows. Only I don’t have any popups happening. I was wondering if I should be putting the popup code into the Head or Header, and what the script tag should be.

    This is what I put the AJAX code into the following script tag:

    script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js” type=”text/javascript”

    I also did not modify the AJAX code (save for changing curly quotation to straight ones).

    Thanks for your time in helping others!

  7. Brian Post author

    There is a lot of info missing here that would help me to understand what is going on with your site. Are you attempting to use zen-cart only or do you have an non-zencart page that your wanting to use with a zen-cart installation?

    The instructions here are for the latter. The fancy ajax stuff is just icing mainly. If you have a link I could see, it would help to visualize what you have going on.

  8. mappel26

    Hey Brian, please contact me at sales at tricitypromotions dot com . I have a small brick wall blocking my way, I believe you can help me get beyond it.

  9. ochoellis

    Hi i was wondering if this would work with just a plain HTML site and without running through a CMS?

    I love how you;ve managed to get this working and am after doing exactly the same thing but have no experience of CMS whatsoever

  10. Pingback: Zencart Tricks – The Showroom « westpointdeveloper

  11. Pingback: Zencart Tricks – Show/Hide cart « westpointdeveloper

  12. stacks

    Hey, this is just what I was looking for, thanks.

    However, I can’t get past the security token issue when adding to cart from external page.

    Any ideas?

  13. Brian Post author

    Yeah, I’m working on an update for this. At the time it was written, Zen-Cart hadn’t yet implemented the Security Tokens for their form submits. So now, the method I describe will simply yield an expired session error. The solution requires some javascript/jQuery code to fetch the Security token from the hidden iFrame and insert it into the local HTML form.

  14. Pingback: Zen-Cart: Gimme a cart and hold everything elsegeekis.me | geekis.me

  15. stacks

    Ok, well I had a go at this and came up with this to grab the security token from the iFrame, you just have to make sure you call a page in zen cart that contains the security token in a hidden field:

    $(“#cart_frame”).load(function(){
    var securityToken = $(“#cart_frame”).contents().find(“input[name=securityToken]“).val();
    $(“input[name='securityToken']“).val(securityToken);
    });

    Hope this helps

  16. Brian Post author

    Yeah, that is almost identical to the code I came up with for grabbing the token. Of course, it’s one piece of the puzzle, though probably the most important one. Hopefully the updated post I’m working on will provide some beginners with a full solution.

  17. best magento store locator

    Commonly I can’t understand report on information sites, however i prefer to point out that this kind of write-up quite forced me personally to see along with do so! Your way of writing has become amazed us. Thank you so much, good post.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>