Jump to content

Moving Shopping Basket


Guest PorkChop

Recommended Posts

Guest PorkChop

I’m trying to move the shopping basket next to the search box in the top of the Killer skin.

I want to put it between the logo and the search box.

I have read the pinned posts and studied Manipulating Boxes from Marks Carts but can’t seem to get it right. I can move other boxes and get rid of ones I don’t want.

I can’t get this one to do what I want. :)

Any help would be appreciated.

Thanks

Link to comment
Share on other sites

Well, this can be a little difficult if you are not proficient with html and css coding.

There is the issue of placing the cart box in the layout, which means you need to custom-code the position of the box. This can be done with combinations of properties like margin, position, float, padding, etc.

Next, there is the issue of adding items to the cart . . . stock CubeCart code will show a list in the cart box, which means the box will grow longer as items are added, and this can be problematic for a shopping cart box in the header section. You must deal with this by removing the listing of added items, or by specifying and overflow property, etc.

It may be that if you are not certain what to do with all this, you could browse around cubecart.org, visit some third-party shops, and find a free skin with cart in header or a very inexpensive one, and study the way it is coded.

Link to comment
Share on other sites

Guest PorkChop

Well, this can be a little difficult if you are not proficient with html and css coding.

There is the issue of placing the cart box in the layout, which means you need to custom-code the position of the box. This can be done with combinations of properties like margin, position, float, padding, etc.

Next, there is the issue of adding items to the cart . . . stock CubeCart code will show a list in the cart box, which means the box will grow longer as items are added, and this can be problematic for a shopping cart box in the header section. You must deal with this by removing the listing of added items, or by specifying and overflow property, etc.

It may be that if you are not certain what to do with all this, you could browse around cubecart.org, visit some third-party shops, and find a free skin with cart in header or a very inexpensive one, and study the way it is coded.

Thanks for the insight and the problems with moving the cart there.

I looked at your site and one of your samples shows the cart above or replacing the featured product.

I like that because the cart is at the top.

Thanks again

Link to comment
Share on other sites

Guest PorkChop

Yes, cart box in header is good for 1) removing a box from side and 2) making the cart box prominent. But my favorite trick is hiding the cart box entirely */*

look at this poker site . . . no cart box. Add a product or two to cart and see what happens: http://all4poker.ch

That really is a nice trick!

Your poker site has a nice layout.

I like the little Spade and playing card headers.

Link to comment
Share on other sites

  • 1 year later...
Guest AdamnSmith

So, is there a tutorial for moving the Shopping Basket to the right column above "Featured Products" on the Killer template?

http://cubecartforums.org/docs

Oh, thanks, that helped with my side boxes.

However, I am curious - Right now my middle area "welcome to cubecart" box and the "latest products" box are floating in the middle... I would like it to align to the top rather than the middle. Where do I edit this?

Link to comment
Share on other sites

Guest AdamnSmith

Im not sure what you mean. Can you provide a link?

http://shop.onthefritts.com/CubeCart/index.php

Basically my issues are:

Left column - There is a large gap between the "categories" box and the pink bar

Middle column - I want the "welcome" and "latest products" to come up to being right under the pink bar

Right Column - Is perfect where I want it.

Note: the bold was the question I was asking about.. The left column was something Im throwing in hoping you can help me.

<!-- BEGIN: body -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset={VAL_ISO}" />

<title>{META_TITLE}</title>

<meta name="description" content="{META_DESC}" />

<meta name="keywords" content="{META_KEYWORDS}" />

<link href="skins/{VAL_SKIN}/styleSheets/layout.css" rel="stylesheet" type="text/css" />

<link href="skins/{VAL_SKIN}/styleSheets/style.css" rel="stylesheet" type="text/css" />

<script language="javascript" src="js/jslibrary.js" type="text/javascript"></script>

</head>

<body>

<div id="pageSurround">

<div id="topHeader">

<div id="sessionBox">

<div style="padding: 15px 8px 15px 15px; margin: 0px;">

{SEARCH_FORM}

{SESSION}

</div>

</div>

</div>

<div class="topCats">

</div>

<div id="subSurround">

<table border="0" cellspacing="0" width="100%" cellpadding="0">

<tr valign="left">

<td width="175">

{CATEGORIES}

{CURRENCY}

{LANGUAGE}

</td>

<td style="padding: 0px 5px 0px 5px;">{PAGE_CONTENT}</td>

<td width="175">

{SHOPPING_CART}

{RANDOM_PROD}

{POPULAR_PRODUCTS}

{SALE_ITEMS}

{MAIL_LIST}

</td>

</tr>

</table>

</div>

{SITE_DOCS}

<BR><font size="-1"

<style type="text/css">

<!--

.style1 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 9px;

color: #333333;

}

-->

</style>

<div align="center">

<span class="style1"><i>All products are copyright 2008 by 5CentLife</font></span><BR><BR>

</div>

</body>

</html>

<!-- END: body -->

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...