22 Nov 2011, 4:20 PM
New Zenner
- Join Date:
- Nov 2011
- Posts:
- 38
- Plugin Contributions:
- 0
Cart page layout
Hi
I am in the process of editting the cart page layout.
I am using a 3 column layout, left column, right column and a double size middle column. The middle column is being used to display the content of my entire shop.
However the cart page did not display correctly, it overlapped the left column and the right column jumped to the left hand side of the page.
I tried fixing the width of the centre column but this did not work.
I have tried putting the 3 sections in different div's, 1 for the top (title and cart message) a div around the cart table and a div around the bottom buttons.
I have the following problems:
- Right column jumps to where left column is
The cart table is not displaying within a div
The cart is displaying the additional item variations
Below is my css:
/* CSS Document */
<style type="text/css">
.containerBox {
width : 972px;
height: 100%;
margin-left : auto;
margin-right : auto;
}
.headerBox {
margin-bottom : 0px;
width : 972px;
margin-left : auto;
margin-right : auto;
}
.footerBox {
margin-bottom : 1em;
width : 972px;
margin-left : auto;
margin-right : auto;
height : 50px;
position : relative;
}
.mainBodyBox {
margin-bottom : 1em;
width : 972px;
margin-left : auto;
margin-right : auto;
text-align : center;
font : 16px Arial;
font-weight : bold;
position : relative;
height : 100%;
}
.companyLogo {
margin-bottom : 1px;
float : left;
margin-left : 1px;
}
.companyPhone {
margin-bottom : 1px;
margin-top : 20px;
float : right;
}
.searchBox{
text-align : center;
margin-bottom : 1px;
margin-top : 20px;
}
.topNav {
margin-bottom : 1px;
}
.topNav ul {
padding : 3px 9px 2px 5px;
margin-left : 0;
margin-right : 0;
margin-top : 0;
margin-bottom : 40px;
font : 12px Arial;
list-style-type : none;
text-align : center;
border-bottom : 0 solid #929492;
}
.topNav li {
display : inline;
margin : 0;
}
.topNav li a {
text-decoration : none;
padding : 3px 9px 2px 5px;
margin : 0;
margin-right : 0;
border-left : 0 solid #ddd;
color : #0099ff;
font-size : 14px;
}
.navBar{
margin: 0 auto;
width : 980px;
}
.halfmoon {
}
.halfmoon ul {
padding : 0px 0px 0px 0px;
font : 14px Arial;
margin : 0;
margin-left : 0;
margin-right : 0;
list-style-type : none;
}
.halfmoon li {
display: inline-block;
margin: 0 4px 9px 0;
}
.halfmoon li a {
text-decoration : none;
padding : 3px 9px 2px 5px;
margin : 0;
margin-right : 0;
color : white;
font-size : 14px;
background : #492d67;
}
.halfmoon li a:visited {
color : white;
}
.halfmoon li a:hover {
background-color : #0099ff;
color : white;
}
#tabcontentcontainer {
text-align : center;
}
.tabcontent {
display : none;
}
.mapBox1 {
margin-bottom : 1em;
width : 640px;
height : 620px;
float : right;
}
.textBox1 {
margin-bottom : 1em;
width : 300px;
height : 620px;
float : left;
text-align : center;
display : inline;
overflow : auto;
}
.bottomNav {
margin-bottom : 1em;
border-top : 1px solid #ddd;
border-bottom : 1px solid #ddd;
}
.bottomNav ul {
padding : 3px 9px 2px 5px;
margin-left : 0;
margin-right : 0;
margin-top : 2px;
margin-bottom : 2px;
font : 12px Arial;
list-style-type : none;
text-align : center;
border-bottom : 0 solid #929492;
}
.bottomNav li {
display : inline;
margin : 0;
}
.bottomNav li a {
text-decoration : none;
padding : 3px 9px 2px 5px;
margin : 0;
margin-right : 0;
color : #0099ff;
font-size : 14px;
}
#bottomDisclaimer {
margin-bottom : 1em;
padding : 3px 9px 2px 5px;
margin-left : 0;
margin-right : 0;
margin-top : 0;
margin-bottom : 0;
font : 12px Arial;
list-style-type : none;
text-align : center;
border-bottom : 0 solid #929492;
}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
#navColumnTwo{
float:right;
}
th.listingModel {}/*heading elements can be individually controlled like this*/
.productListing-rowheading th {} /*control all heading elements with this*/
.productListing-even td, .productListing-odd td {} /*control all listing elements with this*/
.listingModel {}
.listingName {}
h3.itemTitle {}
.listingDescription {}
.listingManufacturer {}
.listingPrice {float: left;} /*demo setup*/
.listingButtonGroup {float: right; width:50%; border-left: 1px solid #999999;} /*demo setup*/
.listingQuantity {text-align: right;}
.listingWeight {text-align: right;}
.listingImage {text-align: center;}
.listingProductImage {}
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}
.clearBoth {
clear: both;
}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
text-decoration : none;
position: absolute;
top: 160px;
text-align: left;
}
.leftBoxHeading {
margin: 0em;
background-color:#492d67;
padding : 3px 9px 2px 5px;
text-align: center;
font : 14px Arial white;
color: white;
margin-top : 5px;
margin-bottom : 5px;
text-decoration : none;
font-weight:bold;
}
.rightBoxHeading {
text-decoration: none;
background-color:#492d67;
padding : 3px 9px 2px 5px;
text-align: center;
font : 14px Arial;
color: white;
margin-top : 5px;
margin-bottom : 5px;
font-weight:bold;
}
.sideBoxContent a:link {
text-decoration: none;
font : 13px Arial Bold;
color: #0099ff;
}
.sideBoxContent a:hover {
text-decoration: none;
font : 14px Arial;
}
.sideBoxContent a:visited {
text-decoration: none;
font : 13px Arial Bold;
color: #0099ff;
}
#navBreadCrumb {
width : 580px;
margin-left : auto;
margin-right : auto;
text-align: left;
font : 12px Arial Bold;
color: #492d67;
}
#contentBodyBox{
text-decoration: none;
width : 580px;
margin-left : auto;
margin-right : auto;
text-align: center;
font : 14px Arial Bold;
color: #492d67;
height: 100%;
}
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
}
.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials {
width : 185px;
height : 165px;
}
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}
.navSplitPagesResult {}
.navSplitPagesLinks {}
h1 {
font-size: 1.5em;
}
h1, h2, h3, h4, h5, h6, h7, h8 {
margin: 0.3em 3px;
}
h2{
text-decoration : none;
background-color:#492d67;
padding : 3px 9px 2px 5px;
text-align: center;
font : 18px Arial;
font-weight:bold;
color: white;
margin-top : 5px;
margin-bottom : 5px;
}
/*misc*/
.back {
float: left;
}
.forward, #shoppingCartDefault #PPECbutton {
float: right;
}
.bold {
font-weight: bold;
}
.rowOdd {
background-color: #E8E8E8;
height: 1.5em;
vertical-align: top;
}
.rowEven {
background-color: #F0F0F0;
height: 1.5em;
vertical-align: top;
}
.hiddenField {
display: none;
}
.visibleField {
display: inline;
}
CAPTION {
/*display: none;*/
}
#myAccountGen li, #myAccountNotify li {
margin: 0;
}
.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;
/*vertical-align: top*/
}
.accountQuantityDisplay {
width: 10%;
vertical-align: top
}
TR.tableHeading {
background-color: #cacaca;
height: 2em;
}
#siteMapList {
width: 90%;
float: right;
}
.ratingRow {
margin: 1em 0em 1.5em 0em;
}
LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #ffffff;
}
.information {
padding: 10px 3px; line-height: 150%;
}
`#shoppingcartBody, #shippingEstimatorContent {
clear: both;
}
`.seDisplayedAddressLabel {
background-color:#85C285;
text-align: center;
}
`.seDisplayedAddressInfo {
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
`#seShipTo {
padding: 0.2em;
}
/*Image Display*/
`#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}
`.categoryIcon {}
`#cartImage {
margin: 0.5em 1em;
}
/*Attributes*/
`.attribImg {
width: 20%;
margin: 0.3em 0em;
}
`.attributesComments {}
h3.itemTitle {
text-decoration: none;
}
img {border: none;
}
#shoppingcart ul li {
list-style-type: none;
}
.cartNewItem {
color: #0099ff;
position: relative; /*do not remove-fixes stupid IEbug*/
text-align:left;
}
#bestsellers .wrapper {
color : #0099ff;
text-align: left;
}
#bestsellers ol {
padding: 0;
}
#bestsellers li {
padding-top: 5px;
clear: both;
}
.bestsellers_thumbnail {
width: 26px;
padding-right: 4px;
float: left;
margin: 0px;
}
#manufacturersimgContent {float: left; width: 50px;}
.newline {clear: left;}
a:link {
color: #492d67;
text-decoration: none;
font : 14px Arial;
}
a:hover {
color: #CCBAE0;
text-decoration: none;
}
a:visited {
}
.productSpecialPrice, .productPriceDiscount, .productSpecialPriceSale, .productSpecialPrice, .productSalePrice {
color: #0099ff;
text-decoration: none;
font-weight : bold;
}
.normalprice{
color: #492d67;
text-decoration: none;
font-weight : bold;
}
#productWrapperBox{
width: 580px;
height: 100%;
border: solid;
border-width: 3px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
#productTopWrapperBox{
width: 580px;
height: 350px;
border: solid;
border-width: 1px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
}
#productImageBox{
width: 275px;
height: 275px;
float: left;
margin-top:5px;
margin-bottom:5px;
margin-right:5px;
margin-left:5px;
}
#productImage{
margin-top:auto;
margin-bottom:auto;
margin-right:auto;
margin-left:auto;
}
#productAdditionalImageBox{
width: 275px;
height: 50px;
float: left;
margin-top:5px;
margin-bottom:5px;
margin-right:5px;
margin-left:5px;
}
#productAdditionalButtons{
width: 275px;
height: 50px;
float: right;
border: solid;
border-width: 1px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-top:5px;
margin-bottom:5px;
margin-right:5px;
margin-left:5px;
}
#productTitleBox{
width: 275px;
height: 275px;
float: right;
margin-top:5px;
margin-bottom:5px;
margin-right:5px;
margin-left:5px;
}
#productTabWrapperBox{
width: 580px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
h7{
color: #0099ff;
text-decoration: none;
font : 16px Arial;
font-weight : bold;
}
h8{
color: #492d67;
text-decoration: none;
font : 1.5em Arial;
font-weight : bold;
}
#cartBox{
width:250px;
height: 75px;
background-color:#CCBAE0;
border: solid;
border-width: 1px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-top:5px;
margin-bottom:5px;
margin-right:5px;
margin-left:10px;
}
#productTabBox{
width: 575px;
min-height: 350px;
margin-left: auto;
margin-right: auto;
margin-top:5px;
margin-bottom:5px;
margin-right:5px;
margin-left:5px;
}
#otherProductsBox{
width: 580px;
height: 200px;
border: solid;
border-width: 1px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
}
.centerBoxContentsNew img {
margin-left: auto;
margin-right: auto;
}
#cartBoxListWrapper, .cartNewItem, .cartOldItem{
font : 12px Arial;
color: #0099ff;
text-align:left;
}
.cartBoxTotal{
font : 14px Arial;
color: #0099ff;
font-weight : bold;
text-align:right;
}
#cartWrapperBox{
width: 580px;
height: 100%;
border: solid;
border-width: 3px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
#cartButtonWrapperBox{
width: 580px;
height: 100%;
border: solid;
border-width: 3px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
</style>
Below is the code for the cart page:
<?php
/**
* Page Template
*
* Loaded automatically by index.php?main_page=shopping_cart.<br />
* Displays shopping-cart contents
*
* @package templateSystem
* @copyright Copyright 2003-2010 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_shopping_cart_default.php 15881 2010-04-11 16:32:39Z wilt $
*/
?>
<div class="centerColumn" id="shoppingCartDefault" >
<?php
if ($flagHasCartContents) {
?>
<div id="cartWrapperBox">
<?php
if ($_SESSION['cart']->count_contents() > 0) {
?>
<div class="forward"><?php echo TEXT_VISITORS_CART; ?></div>
<?php
}
?>
<h1 id="cartDefaultHeading"><?php echo HEADING_TITLE; ?></h1>
<?php if ($messageStack->size('shopping_cart') > 0) echo $messageStack->output('shopping_cart'); ?>
<?php echo zen_draw_form('cart_quantity', zen_href_link(FILENAME_SHOPPING_CART, 'action=update_product', $request_type)); ?>
<div id="cartInstructionsDisplay" class="content"><?php echo TEXT_INFORMATION; ?></div>
<?php if (!empty($totalsDisplay)) { ?>
<div class="cartTotalsDisplay important"><?php echo $totalsDisplay; ?></div>
<br class="clearBoth" />
<?php } ?>
<?php if ($flagAnyOutOfStock) { ?>
<?php if (STOCK_ALLOW_CHECKOUT == 'true') { ?>
<div class="messageStackError"><?php echo OUT_OF_STOCK_CAN_CHECKOUT; ?></div>
<?php } else { ?>
<div class="messageStackError"><?php echo OUT_OF_STOCK_CANT_CHECKOUT; ?></div>
<?php } //endif STOCK_ALLOW_CHECKOUT ?>
<?php } //endif flagAnyOutOfStock ?>
<table border="0" align="center" width="580px" cellspacing="0" cellpadding="0" id="cartContentsDisplay">
<tr class="tableHeading">
<th scope="col" id="scQuantityHeading"><?php echo TABLE_HEADING_QUANTITY; ?></th>
<th scope="col" id="scUpdateQuantity"> </th>
<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="scTotalHeading"><?php echo TABLE_HEADING_TOTAL; ?></th>
<th scope="col" id="scRemoveHeading"> </th>
</tr>
<!-- Loop through all products /-->
<?php
foreach ($productArray as $product) {
?>
<tr class="<?php echo $product['rowClass']; ?>">
<td class="cartQuantity">
<?php
if ($product['flagShowFixedQuantity']) {
echo $product['showFixedQuantityAmount'] . '<br /><span class="alert bold">' . $product['flagStockCheck'] . '</span><br /><br />' . $product['showMinUnits'];
} else {
echo $product['quantityField'] . '<br /><span class="alert bold">' . $product['flagStockCheck'] . '</span><br /><br />' . $product['showMinUnits'];
}
?>
</td>
<td class="cartQuantityUpdate">
<?php
if ($product['buttonUpdate'] == '') {
echo '' ;
} else {
echo $product['buttonUpdate'];
}
?>
</td>
<td class="cartProductDisplay">
<a href="<?php echo $product['../../template_default/templates/linkProductsName']; ?>"><span id="cartImage" class="back"><?php echo $product['productsImage']; ?></span><span id="cartProdTitle"><?php echo $product['productsName'] . '<span class="alert bold">' . $product['flagStockCheck'] . '</span>'; ?></span></a>
<br class="clearBoth" />
<?php
echo $product['attributeHiddenField'];
if (isset($product['attributes']) && is_array($product['attributes'])) {
echo '<div class="cartAttribsList">';
echo '<ul>';
reset($product['attributes']);
foreach ($product['attributes'] as $option => $value) {
?>
<li><?php echo $value['products_options_name'] . TEXT_OPTION_DIVIDER . nl2br($value['products_options_values_name']); ?></li>
<?php
}
echo '</ul>';
echo '</div>';
}
?>
</td>
<td class="cartUnitDisplay"><?php echo $product['productsPriceEach']; ?></td>
<td class="cartTotalDisplay"><?php echo $product['productsPrice']; ?></td>
<td class="cartRemoveItemDisplay">
<?php
if ($product['buttonDelete']) {
?>
<a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, 'action=remove_product&product_id=' . $product['id']); ?>"><?php echo zen_image($template->get_template_dir(ICON_IMAGE_TRASH, DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . ICON_IMAGE_TRASH, ICON_TRASH_ALT); ?></a>
<?php
}
if ($product['checkBoxDelete'] ) {
echo zen_draw_checkbox_field('cart_delete[]', $product['id']);
}
?>
</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 class="clearBoth" />
<div id="cartButtonWrapperBox">
<!--bof shopping cart buttons-->
<div class="buttonRow forward"><?php echo '<a href="' . zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_CHECKOUT, BUTTON_CHECKOUT_ALT) . '</a>'; ?></div>
<div class="buttonRow back"><?php echo zen_back_link() . zen_image_button(BUTTON_IMAGE_CONTINUE_SHOPPING, BUTTON_CONTINUE_SHOPPING_ALT) . '</a>'; ?></div>
<?php
// show update cart button
if (SHOW_SHOPPING_CART_UPDATE == 2 or SHOW_SHOPPING_CART_UPDATE == 3) {
?>
<div class="buttonRow back"><?php echo zen_image_submit(ICON_IMAGE_UPDATE, ICON_UPDATE_ALT); ?></div>
<?php
} else { // don't show update button below cart
?>
<?php
} // show update button
?>
<!--eof shopping cart buttons-->
</form>
<br class="clearBoth" />
<?php
if (SHOW_SHIPPING_ESTIMATOR_BUTTON == '1') {
?>
<div class="buttonRow back"><?php echo '<a href="javascript:popupWindow(\'' . zen_href_link(FILENAME_POPUP_SHIPPING_ESTIMATOR) . '\')">' .
zen_image_button(BUTTON_IMAGE_SHIPPING_ESTIMATOR, BUTTON_SHIPPING_ESTIMATOR_ALT) . '</a>'; ?></div>
<?php
}
?>
<!-- ** BEGIN PAYPAL EXPRESS CHECKOUT ** -->
<?php // the tpl_ec_button template only displays EC option if cart contents >0 and value >0
if (defined('MODULE_PAYMENT_PAYPALWPP_STATUS') && MODULE_PAYMENT_PAYPALWPP_STATUS == 'True') {
include(DIR_FS_CATALOG . DIR_WS_MODULES . 'payment/paypal/tpl_ec_button.php');
}
?>
<!-- ** END PAYPAL EXPRESS CHECKOUT ** -->
<?php
if (SHOW_SHIPPING_ESTIMATOR_BUTTON == '2') {
/**
* load the shipping estimator code if needed
*/
?>
<?php require(DIR_WS_MODULES . zen_get_module_directory('shipping_estimator.php')); ?>
<?php
}
?>
<?php
} else {
?>
<h2 id="cartEmptyText"><?php echo TEXT_CART_EMPTY; ?></h2>
<?php
$show_display_shopping_cart_empty = $db->Execute(SQL_SHOW_SHOPPING_CART_EMPTY);
while (!$show_display_shopping_cart_empty->EOF) {
?>
<?php
if ($show_display_shopping_cart_empty->fields['configuration_key'] == 'SHOW_SHOPPING_CART_EMPTY_FEATURED_PRODUCTS') { ?>
<?php
/**
* display the Featured Products Center Box
*/
?>
<?php require($template->get_template_dir('tpl_modules_featured_products.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_featured_products.php'); ?>
<?php } ?>
<?php
if ($show_display_shopping_cart_empty->fields['configuration_key'] == 'SHOW_SHOPPING_CART_EMPTY_SPECIALS_PRODUCTS') { ?>
<?php
/**
* display the Special Products Center Box
*/
?>
<?php require($template->get_template_dir('tpl_modules_specials_default.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_specials_default.php'); ?>
<?php } ?>
<?php
if ($show_display_shopping_cart_empty->fields['configuration_key'] == 'SHOW_SHOPPING_CART_EMPTY_NEW_PRODUCTS') { ?>
<?php
/**
* display the New Products Center Box
*/
?>
<?php require($template->get_template_dir('tpl_modules_whats_new.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_whats_new.php'); ?>
<?php } ?>
<?php
if ($show_display_shopping_cart_empty->fields['configuration_key'] == 'SHOW_SHOPPING_CART_EMPTY_UPCOMING') {
include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_UPCOMING_PRODUCTS));
}
?>
<?php
$show_display_shopping_cart_empty->MoveNext();
} // !EOF
?>
<?php
}
?>
</div>
</div>
</div>
Any help appreciated!!
