Printable View
Shoppingcart/Freeship in Header has been submitted to Free Addons and should be available soon.
This mod will give you a box in your header which shows the number of items in the cart, the total amount if any items in cart, the amount required to qualify for free shipping, and a checkout button if any items in cart.
You can set its position and style by editing your stylesheet with rules suggested in the readme.
Compatible with multiple languages.
Very cool mod! Great, absolutely great readme file with clear and precise instructions and info - and here is the bonus, its not a text file!
The only thing that I would like to customize about it is, I would like to format it into 2 columns. The first column being the # of items on the first row and the second row, the Total Price. On the second column on the first row is where I want to place the View Cart button.
Can I do that via css? How? I'm a bit of a novice when it comes to css, so if someone can provide some example code, awesome!
Rearranging the box layout into columns as you describe, and adding a separate View Cart button that is always on instead of a link on the count when full, is beyond the capacities of CSS and will require a bit of restructuring of code.
Find this section in tpl_cart_header.phpAddPHP Code:<div id="cartCount">
<?php
$cart_count = $_SESSION['cart']->count_contents();
if ($cart_count) {
$_SESSION['cart']->get_products();
$basket_total = $_SESSION['cart']->show_total();
echo '<span id="cartTotal">' . CART_HEADER_TOTAL . $currencies->format($basket_total) . '</span>' ;
}
echo ($cart_count? '<a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '">':'') . CART_HEADER_IN_CART_PRE . $cart_count . (($cart_count == 1)? CART_HEADER_IN_CART_SINGULAR: CART_HEADER_IN_CART_PLURAL) . ($cart_count? '</a>': '');
?>
</div>
echo '<a id="cartButton" href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '"><img src="yourimagesource.gif" /></a>': '');
to getYou would also want more <span> elements to control the qty and total.PHP Code:<div id="cartCount">
<?php
$cart_count = $_SESSION['cart']->count_contents();
if ($cart_count) {
$_SESSION['cart']->get_products();
$basket_total = $_SESSION['cart']->show_total();
echo '<span id="cartTotal">' . CART_HEADER_TOTAL . $currencies->format($basket_total) . '</span>' ;
}
echo ($cart_count? '<a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '">':'') . CART_HEADER_IN_CART_PRE . $cart_count . (($cart_count == 1)? CART_HEADER_IN_CART_SINGULAR: CART_HEADER_IN_CART_PLURAL) . ($cart_count? '</a>': '');
?>
</div>
<?php echo '<a id="cartButton" href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '"><img src="yourimagesource.gif" /></a>': ''); ?>
Then style as required:I do think it's better not to have links to the cart and checkout if there is nothing in the cart.Code:/*Shoppingcart/Freeship in Header*/
#headerWrapper {position: relative;}
#cartHeader {
width: 30em;/*17em*/
position: absolute;
top: 0.1em;/*4.0em*/
right: 2.0em;
/*bottom:0.1em;/*added*/
background: #cacaca;
color: #000000;
border: 1px solid #888888;
}
#cartHeader h3 {
display: none;/*added*/
/*text-align: center;*/
/*color: #005599;/*added*/
/*margin:0.1em 0;/*added*/
}
#cartCount {
/*border-top: 1px solid #999999;*/
text-align: left;/*center*/
padding: 0.5em 0;/*added*/
float: left;
}
#cartCount a {)
#cartTotal {}
#cartFreeShip {
margin: 0 0.3em;
}
#cartCheckout {
float: left;/*right*/
margin: 0.3em;
}
#cartButton {
display: block;
float: right;
width: 123px; /*adjust to fit*/
}
PHP Code:<div id="cartCount">
<?php
$cart_count = $_SESSION['cart']->count_contents();
echo ($cart_count? '<a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '">':'') . CART_HEADER_IN_CART_PRE . $cart_count . (($cart_count == 1)? CART_HEADER_IN_CART_SINGULAR: CART_HEADER_IN_CART_PLURAL) . ($cart_count? '</a>': '');
?>
</div>
if ($cart_count) {
$_SESSION['cart']->get_products();
$basket_total = $_SESSION['cart']->show_total();
echo '<div id="cartTotal">' . CART_HEADER_TOTAL . $currencies->format($basket_total) . '</div>' ;
}
<?php echo '<a id="cartButton" href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '"><img src="yourimagesource.gif" /></a>': ''); ?>
Code:#cartTotal {
float: left;
}
Thanks for the reply.
I copied that line of code and put it at the bottom of my tpl_cart_header page and then refreshed FF and the page came up blank, all it shows is my header background color and my logo image at the left corner. Everything under the header area is gone.
It seems in your post that extra line of code is to be placed at the bottom of the file, correct?
The reason why I know its this particular line of code causing the problem is that my site was fine before, any help is greatly appreciated!
Oops - forgot to wrap php tags around the relocated code. Since its new location is outside the original php section, it needs those for itself.I have attached the zip file here until the mod is activated in Free Addons.PHP Code:<div id="cartCount">
<?php
$cart_count = $_SESSION['cart']->count_contents();
echo ($cart_count? '<a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '">':'') . CART_HEADER_IN_CART_PRE . $cart_count . (($cart_count == 1)? CART_HEADER_IN_CART_SINGULAR: CART_HEADER_IN_CART_PLURAL) . ($cart_count? '</a>': '');
?>
</div>
<?php if ($cart_count) {
$_SESSION['cart']->get_products();
$basket_total = $_SESSION['cart']->show_total();
echo '<div id="cartTotal">' . CART_HEADER_TOTAL . $currencies->format($basket_total) . '</div>' ;
} ?>
<?php echo '<a id="cartButton" href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '"><img src="yourimagesource.gif" /></a>': ''); ?>
Glenn,
I love the idea. I tried your last piece of code but no luck... "500 - Internal server error" is was i get.
The original code works, it's the mod above that crashes the page.
Not sure why, my php skills are still close to none. :blush:
It's that part that cause the error:
Any idea on what's missing?PHP Code:<?php echo '<a id="cartButton" href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '"><img src="whatever.png" /></a>': ''); ?>
Thanks for your help and support on Zen Cart. Love your "Smart Background" add-on btw.
Ack! I was typing in a hurry and missed the last bit that needed to be removed:
: ''
at the end of the statement. This will work:PHP Code:<?php echo '<a id="cartButton" href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '"><img src="whatever.png" /></a>'); ?>
Discussion continued from CartSideboxWithButtonandFreeShipping - Multi language support? thread.
"I have also the slovenian language, wich don't have only singular and plural.
Should be like that:
1 item in card- Izdelek
2 items in card- Izdelka
3 items in card- Izdelki
4 items in card- Izdelki
5 items in card- Izdelkov
6 items in card- Izdelkov
7 items in card- Izdelkov.......( and so on, the same)"
What would be the word for zero or no items in cart?
Edit /includes/templates/your_template/templates/tpl_cart_header.php.
ReplacePHP Code:echo ($cart_count? '<a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '">':'') . CART_HEADER_IN_CART_PRE . $cart_count . (($cart_count == 1)? CART_HEADER_IN_CART_SINGULAR: CART_HEADER_IN_CART_PLURAL) . ($cart_count? '</a>': '');
(($cart_count == 1)? CART_HEADER_IN_CART_SINGULAR: CART_HEADER_IN_CART_PLURAL)
with
$cart_header_number
Add just above thatPHP Code:echo ($cart_count? '<a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '">':'') . CART_HEADER_IN_CART_PRE . $cart_count . $cart_header_number . ($cart_count? '</a>': '');
Then in cart_header_defines.php, add these lines:PHP Code:switch ($cart_count){
case '0':
$cart_header_number = CART_HEADER_IN_CART_QTY_0;
break;
case '1':
$cart_header_number = CART_HEADER_IN_CART_QTY_1;
break;
case '2':
$cart_header_number = CART_HEADER_IN_CART_QTY_2;
break;
case '3':
$cart_header_number = CART_HEADER_IN_CART_QTY_3_4;
break;
case '4':
$cart_header_number = CART_HEADER_IN_CART_QTY_3_4;
break;
default:
$cart_header_number = CART_HEADER_IN_CART_QTY_5;
break;
}
PHP Code:define{'CART_HEADER_IN_CART_QTY_0','Izdelek');//???word to use here???
define{'CART_HEADER_IN_CART_QTY_1','Izdelek');
define{'CART_HEADER_IN_CART_QTY_2','Izdelka');
define{'CART_HEADER_IN_CART_QTY_3_4','Izdelki');
define{'CART_HEADER_IN_CART_QTY_5','Izdelkov');
The words is "Izdelkov".
I don't have words to thank you!
Please provide me your paypal account, so I can make you a donation. :wink:
A tweak that may be useful is to add a link from the "Free shipping for orders of $xx or more" to the shipping & returns page, where customers can easily get the complete details.
In cart_header_defines.php, change thisto thisPHP Code:define ('CART_HEADER_FREE_LIMIT_PRE','Free Shipping for orders of<br />');
PHP Code:define ('CART_HEADER_FREE_LIMIT_PRE','<a href="index.php?main_page=shippinginfo">Free Shipping</a> for orders of<br />');
A quirk of the free shipping setup which is not explained in the readme is that there appear to be two places where this setting can be made.
Modules > Shipping > Free Shipping Options (freeoptions) actually causes the shipping to be free if over the set dollar amount.
The constant that free shipping alert mods use, MODULE_ORDER_TOTAL_SHIPPING_FREE_SHIPPING_OVER, is set in Modules > Order Total > Shipping (ot_shipping), and is not affected by the functional freeoptions setting.
So if you want both the shipping and the alert to work together, you need to make the same setting in both places.
Hello Glen,
On my website any order over $10 get 10% off. It does not show the discounted total. Is it possible to show discount in the total?
Discounts are generally applied at checkout, so I don't think there is an easy way to get the discounted total to show in the header. You could write some custom code to do the test and calculation on the cart total.
Thank you, Glen!
Shoppingcart/Freeship in Header is now available in Free Addons.
Hello,
Did I miss something or why everything is showing up as text?
look here
And secondly, when I add the proposed definitions to my stylesheets my sidebox changes completely.
Any help would be much appreciated.
The text you are seing is because those constants are not being defined. Did you add cart_header_defines.php to the correct folder, setting the folder name to your custom template?
When you say "added definitions to your stylesheet", do you mean the constant definitions mentioned above, or the style rules in the readme?
/*Shoppingcart/Freeship in Header*/
#headerWrapper {position: relative;}
#cartHeader {...
Those rules should not affect anything except the cart-header, except that the
#headerWrapper {position: relative;}
could affect any elements that are inside the header code and absolutely positioned (there won't be any such unless you have specifically made them so).
You might try commenting out this one rule; if that helps, you can rework the positioning properties as requred.
Oops... you're right. I tested it on my french site and the cart_header_defines.php slipped into my english folder.
The sidebox is also displying fine now. Maybe a drag and drop issue by myself.
Next time I will check thoroughly before posting.
Thank you for advice!
Hi Glenn,
I had previously asked you about this in post 2:
Very cool mod! Great, absolutely great readme file with clear and precise instructions and info - and here is the bonus, its not a text file!
The only thing that I would like to customize about it is, I would like to format it into 2 columns. The first column being the # of items on the first row and the second row, the Total Price. On the second column on the first row is where I want to place the View Cart button.
Can I do that via css? How? I'm a bit of a novice when it comes to css, so if someone can provide some example code, awesome!
-----------------------------------------------------------------
I took the code from post 4 and placed it in the file as you instruct. I changed the image name to that of mine. Now, however, it breaks the site, nothing under the header area, just white space!
Can you take a look at my code and see if you can spot my error:
PHP Code:<div id="cartCount">
<?php
$cart_count = $_SESSION['cart']->count_contents();
echo ($cart_count? '<a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '">':'') . CART_HEADER_IN_CART_PRE . $cart_count . (($cart_count == 1)? CART_HEADER_IN_CART_SINGULAR: CART_HEADER_IN_CART_PLURAL) . ($cart_count? '</a>': '');
?>
</div>
<?php if ($cart_count) {
$_SESSION['cart']->get_products();
$basket_total = $_SESSION['cart']->show_total();
echo '<div id="cartTotal">' . CART_HEADER_TOTAL . $currencies->format($basket_total) . '</div>' ;
} ?>
<?php echo '<a id="cartButton" href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '"><img src="button_checkout.png" /></a>'); ?>
Hi Glenn,
Last post is solved, just had to put php tags in the right place.
I have since continued to customize it a bit and am trying to place my 'Go to Checkout' button at the top of the 2nd column and then to place a 'Checkout' button directly below that.
I thought I had the right code for the 'Checkout' button, but it is not appearing :(
Here is the code, the last line is the line I added for the new 'Checkout' button:
NOTE: I will be renaming them 'View Cart' and 'Checkout'PHP Code:<div id="cartCount">
<?php
$cart_count = $_SESSION['cart']->count_contents();
echo ($cart_count? '<a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '">':'') . CART_HEADER_IN_CART_PRE . $cart_count . (($cart_count == 1)? CART_HEADER_IN_CART_SINGULAR: CART_HEADER_IN_CART_PLURAL) . ($cart_count? '</a>': '');
?>
</div>
<?php if ($cart_count) {
$_SESSION['cart']->get_products();
$basket_total = $_SESSION['cart']->show_total();
echo '<div id="cartTotal">' . CART_HEADER_TOTAL . $currencies->format($basket_total) . '</div>' ;
} ?>
<?php echo '<a id="cartButton" href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '" title="' . CART_HEADER_TITLE . '"><img src="button_checkout.gif" /></a>'; ?><!--view cart button-->
<?php echo '<a id="cartButton" href="' . zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '" title="' . HEADER_TITLE_CHECKOUT . '"><img src="button_buy_now.gif" /></a>'; ?><!--checkout button-->
Hi Glenn,
Please disregard posts 21 and 22, I was able to fix it.
The one thing that has me stumped however, is how to have the buttons align evenly in the 2nd column (aligned at the top). And one last thing, currently the 2 buttons are on separate lines by use of 2 <br /> tags. Do you know how I could separate them by using css instead of <br /> tags?
This is a great mod - I hope its included in ZC 2.0!
Please feel free to PM me for a link to the site, its not officially open for business yet so its down to the public.
Would there be a way to always have 'Sub-Total' display with '$0.00' if there is nothing in the cart? For example, when a customer first appears on the site for the first time OR its been more than 30 days since they lasted visited the site.
To remove the condition on showing the total, just comment out the two lines shown:PHP Code:<?php if ($cart_count) {
$_SESSION['cart']->get_products();
$basket_total = $_SESSION['cart']->show_total();
echo '<div id="cartTotal">' . CART_HEADER_TOTAL . $currencies->format($basket_total) . '</div>' ;
} ?>
If you want to send a link, I'll look at your styling to align the buttons.PHP Code:<?php //if ($cart_count) {
$_SESSION['cart']->get_products();
$basket_total = $_SESSION['cart']->show_total();
echo '<div id="cartTotal">' . CART_HEADER_TOTAL . $currencies->format($basket_total) . '</div>' ;
//} ?>
You shouldn't have two <a id="cartButton" elements; they need different ids, both for valid code and to be able to style them separately.
Good stuff.
I tried to put 2 ids but with no success :(
Please PM when you have a few minutes to look at the styling. I have my site 'down for maintenance' as its not officially open yet.
For the 2 buttons, I tried using #viewCart and #checkout as ids but couldn't seem to make it work. Any ideas?
Ok, making some progress here. Was able to separate the ids for the 2 buttons, now #viewCart and #checkout work - just need the styling help!
Remember, just PM when you have a few minutes. Oops looking at the clock, I have to step away for a few hours. Should be back around 8pm (Im on the east coast as well) or so. If not, I'll look for you tomorrow. Thanks.
Thanks for a great module!! I did find a typo in the CSS that I spent lots of time pulling my hair out over and thought I would bring it up here to maybe save others some time!
on line #749 has a ) instead of a } to close the line.
Wrong:
Corrected:Code:cartCount a {)
Thanks again!!Code:cartCount a {}
-Christopher
Thanks for mentioning that - I'll get it into the original file so it is fixed when I next update the mod.
autoace - Looking at your site, one way to arrange the buttons as you describe is to add wrappers for the groups:Delete the two <br> as they don't do anything useful.Code:<div id="cartHeader">
<h3>Shopping Cart</h3>
<div id="cartCountWrapper">
<div id="cartCount">
0 item(s) in cart</div>
<div id="cartTotal">Subtotal: $0.00</div>
</div>
<div id="viewCartWrapper">
<div id="viewCart"><a href="https://www.automotiveace.com/index.php?main_page=shopping_cart"><img width="119" height="26" title=" Checkout " alt="Checkout" src="includes/templates/2009AA/buttons/english/button_checkout.gif"></a></div><br><br><!--view cart button-->
<div id="checkout"><a href="https://www.automotiveace.com/index.php?main_page=checkout_shipping"><img width="116" height="26" title=" Buy Now " alt="Buy Now" src="includes/templates/2009AA/buttons/english/button_buy_now.gif"></a></div><!--checkout/buy now button-->
</div>
</div>
Style like this:This could be cleaned up, but will work as shown. There may be some changes not highlighted.Code:/*Shoppingcart/Freeship in Header*/
#headerWrapper {position: relative;}
#cartHeader {
width: 22em;/*17 30*/
position: absolute;
top: 0.1em;/*4.0em*/
right: 2.0em;
/*bottom:0.1em;/*added 0.1em*/
background: #d7d7d7;/*cacaca*/
color: #000000;
border: 1px solid #999999;/*888888*/
}
#cartHeader h3 {
display: none;/*added*/
/*text-align: center;*/
/*color: #005599;/*added*/
/*margin:0.1em 0;/*added*/
}
#cartCountWrapper {
float: left;
width: 50%;
}
#cartCount {
/*border-top: 1px solid #999999;*/
text-align: left;/*center*/
padding: 0.5em ;/*added*/
}
#cartCount a {
/*float: right;*/
width: 20px;
}
#cartTotal {
float: left;
padding: 0.5em ;/*added*/
}
#cartFreeShip {
margin: 0 0.3em;
}
#cartCheckout {
float: right;/*right center*/
/*margin: 0.3em;*/
padding-right: 5px;
}
#cartButton {
display: block;
float: right;
width: 123px; /*adjust to fit*/
}
#viewCartWrapper {
float: right;
}
#viewCart {
float: right;/*right center*/
/*margin: 0.3em;*/
padding-right: 5px;
}
#checkout {
float: right;/*right center*/
/*margin: 0.3em;*/
padding-right: 5px;
}
/*eof Shoppingcart/Freeship Header*/
gjh42 - thanks for the code!
I believe I made the changes you gave correctly, but the 'Subtotal' is on the right NOT below 'items' line.
Can you take one more look and show me the error of my ways, please.
#cartCountWrapper is supposed to enclose #cartCount and #cartTotal; you have just changed #cartCount to #cartCountWrapper.
thank you, I'll check it out.
Glenn, success! Got it corrected and styled nicely - thanks for your help.
This is a great mod if you want to move your sidebox shopping cart to the header!
Just a note in case someone runs into this issue.
I was trying to add this mod on top of the CSS Flyout Header Menu w/ Categories by Jade True (also a great mod) and every time I added the modifications from this mod to the style sheet, it would kill my CSS menu and turn it into a bunch of ugly text links. If I took out the CSS for this mod, the menu would be back.
After I uninstalled and reinstalled both mods about a zillion times, I finally got the idea to put the style sheet modifications from Shoppingcart/Freeship in Header onto the CSS Flyout Header Menu w/ Categories stylesheet and it worked (duh, right? I should've tried that after the second uninstall/reinstall.) Both mods are now installed successfully.
That's a curious report. There should be no way that the cartHeader styling could affect the styling of the flyout menu, except for possibly the #headerWrapper rule. The typo mentioned above (post 29) might cause a problem with following rules, but only in the same stylesheet file. Have you corrected that? If you have a minify script running, all of your stylesheets will be combined into one, and this would cause an error to wipe out _all_ following styling.
I could offer better advice if I could see your site.
Glenn, you really are too nice! :clap: I really appreciate it. I did try the fix in post 29 but it didn't fix the issue. I am running a minify script but the mod works perfectly with the style added to the alternate CSS sheet. I just wanted to put it out there in case another noob is as stubborn as I am and really wants to add this mod to their site. If you still want to look at it, my link is w w w.theburningbutterfly.com.Quote:
Originally Posted by gjh42
Just don't laugh - it's still under construction and I haven't styled the shopping cart yet - too much CSS at one time makes my headache.
Thanks again!
Hi gjh42,
You gave me this code:
awhile back to make the buttons work correctly and they do!PHP Code:<div id="viewCart"><a href="https://www.mydomain.com/index.php?main_page=shopping_cart"><img width="110" height="20" title="ViewCart" alt="ViewCart" src="includes/templates/xxxxxx/buttons/english/button_checkout.gif"></a></div>
<div id="checkout"><a href="https://www.mydomain.com/index.php?main_page=checkout_shipping"><img width="110" height="20" title="Checkout" alt="Checkout" src="includes/templates/xxxxxx/buttons/english/button_buy_now.gif"></a></div>
However, I have been trying to replace the code with ZC code after reading this tutorial and have not been successful at all.
The code:
Could you show me the error of my ways? Been trying to find the right way to do it but so far with little success. :lamo:PHP Code:<div id="viewCart"><a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_CHECKOUT, BUTTON_CHECKOUT_ALT) . '</a></div>
<div id="checkout"><a href="' . zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT) . '</a></div>
This needs more context to be certain, but it looks like you are applying PHP code in HTML without specifying that it is PHP. Your syntax as shown would be correct for a part of a PHP statement that includes some HTML as output; this would need to look something likeAlternatively, you could do this:PHP Code:<?php echo '<div id="viewCart"><a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_CHECKOUT, BUTTON_CHECKOUT_ALT) . '</a></div>
<div id="checkout"><a href="' . zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT) . '</a></div>'; ?>
PHP Code:<div id="viewCart"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'SSL') ?>"><?php echo zen_image_button(BUTTON_IMAGE_CHECKOUT, BUTTON_CHECKOUT_ALT) ?></a></div>
<div id="checkout"><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') ?>"><?php echo zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT) ?></a></div>
Thank you, the first code snippet works nicely!
Hi Glenn. Nice mod. thanks.
I want to eliminate the "Goto Checkout" button. I tried deleting the last line in tpl_cart_header.php but that just broke from that point on.
Any ideas?
Thanks
If you comment out this part you should be fine:PHP Code:if ($cart_count) {
echo '<div id="cartCheckout"><a href="' . zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_CHECKOUT, BUTTON_CHECKOUT_ALT) . '</a></div>';
} ?>
PHP Code://if ($cart_count) {
// echo '<div id="cartCheckout"><a href="' . zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_CHECKOUT, BUTTON_CHECKOUT_ALT) . '</a></div>';
//} ?>
That worked! Thanks
The bottom text needs to be centered, like the top text is.
I can't see how to do that in the css provided.
Any ideas?
Thanks again
Let's see your site to be sure it will work in your particular case.
Thanks Glenn.
Look here: http://www.angiejolee.com/store/
If the bottom message text CAN be centered, how hard would it be to round the corners of the CSS box?
I can make a CSS box with image corners but I dont know how to make the mods contents display in that box.
Thanks again
Drunkguy
Add to your stylesheet
The border-radius probably won't work in IE, though.Code:#cartFreeShip {text-align: center;}
#cartHeader {
border-radius: 0.7em;
-moz-border-radius: 0.7em;
-webkit-border-radius: 0.7em;
}
Thanks Glenn.
That change did NOT center the text at least in FF. Here is how I changed it. Its not exactly what you suggested. It didn't make sense to have 2 #cartFreeShip lines but I tried that anyway.
Before:
#cartFreeShip {
margin: 0 0.3em;
}
After:
#cartFreeShip {
text-align: center;
margin: 0 0.3em;
}
I havn't tried the radius corner thing yet.
Thanks again.
Drunkguy
The rules I posted worked when I tested them (in Firefox). What you posted is the exact same property, consolidated with the existing #cartFreeShip { rule as is good practice.
Hey gjh42,
I've got this setup at the moment as floating box with associated image. take a peek at store
Although it looks *neat*, I'm worried about it filling the screen and overlapping sideboxes for those whose screens aren't as wide as mine. I'd like it to sit in the header on the same line as my search box, but can't seem to get the CSS to comply.
Any ideas?
Thanks,
lindasdd
A fixed position like that will give problems any time the window gets narrower than a certain (very wide) width. If you want it always in the corner of the window no matter where the user scrolls, you might try the lower right, and restyle it to more of a corner triangle (which I have seen plenty of for security icons). That would be less obtrusive.
If you want it to stay in the header (a better idea, I think), you can give #headerWrapper {position: relative;} so that it acts as the positioning reference for the cart box; then you can use position: absolute; for the box location.
That worked thanks for your help. I just had to also absolute position the search bar in order to get it out of the way.
-lindasdd
I tried to edit the stylesheet code and couldn't get it done. I want to change the font size and color of the freeshipping notice.
I put the code
#cartFreeShip {
margin: 0 0.3em;
font-size: 1.2em;
font-color: #cc0000;
}
It didn;t have any effect on the stylesheet. Any tips??
Thank you!
I put an image cart1.jpg into the h3, and put another image cart2.jpg as the background image of cartcount. The two images, cart1.jpg and cart2.jpg, should form a perfect big button when put together.
But on the site, there is always a gap between cart1 and cart2. I deleted all margins, but the gap is still there. Could you please take a look at my site? www.best4future.com
Thanks a lot!!!
You have in stylesheet.css (line 80)
Add a rule for this location:Code:h1, h2, h3, h4, h5, h6 {
margin:0.3em 0;
}
Code:#cartFreeShip h3 {margin:0;}
Correction:
Find the rule for this location and add a margin declaration:Font-color is not a valid property. Use color instead.Code:#cartHeader h3 {
height: 55px;
margin: 0;
}
Code:#cartFreeShip {
margin: 0 0.3em;
font-size: 1.2em;
color: #cc0000;
}
[QUOTE=gjh42;940597]Correction:
Find the rule for this location and add a margin declaration:Code:#cartHeader h3 {
height: 55px;
margin: 0;
}
Hello, gjh42,
Thank you so much for the tips. Now the header button looks great!!
I have another gap issue. I have looked everywhere is CSS to figure it out but failed. Could you please take a look at it?
Close to the bottom of the page (www.best4future.com), right above the footer menu, I put two long buttons. One is named "Best4Future Newsletter", on the left. The other is named "Best4future Community", on the right.
The left button is one image. It is fine. The right one ("Best4future Community") is grouped by three smaller images. When you look at it, there is gap between those smaller images. And I don't know how to get rid of those gaps.
Could you please advise me? Thank you so much!!
This was an odd one. There was no styling whatsoever that would put a space or margin between the links.
I finally found in view source that there is a new line for each link in the HTML output, and that is being translated as a space character. When I edited the HTML in Firebug to remove the newlines, the spaces closed up.
Hello, gjh42:Quote:
Originally Posted by gjh42
Thank you so much for the tip!
But as a outsider in the programming as I am, I don;t know where to edit the HTML output. Which file? in which folder? Could you please give me more details? Thank you so much!
"right above the footer menu, I put two long buttons. "
Whatever file you put those buttons in is the place to edit.
I also notice that your #headerWrapper div encloses your entire page instead of ending before #contentMainWrapper as it should. You need to check your editing in tpl_header.php to find where you eliminated the </div> (probably near the bottom of the file, or maybe at the end of the shoppingcart code).
Yes, you are right on the target!! I put all links in on line and the problem solved! New thing for me to learn everyday. Thank you!:clap:Quote:
Originally Posted by gjh42
This is what I did, not sure whether I did it right or not, since I cannot see the change reflected online.Quote:
Originally Posted by gjh42
<!--bof-shoppingcart/freeship display-->
<?php require($template->get_template_dir('tpl_cart_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_cart_header.php'); ?>
<!--eof-shoppingcart/freeship display-->
</div>
Did I put the </div> in the right place?
It looks like you put the </div> close enough to the right place, as I now see the correct div structure in Firebug.
Hello, gjh42:
I am sorry to continue bother you about some teeny tiny issues. Really hope you don't mind. But everytime you give me a tip, I gain more knowledge to understand the codes.
I want to put the two long buttons "Best 4 Future Newsletter" and "Best4 Future Community" both in the middle, rather than one is in the far left, and the other in the far right. I have been playing with CSS and tpl_footer.php for hours and still didn't get it right. :frusty:
I think a professional's tip will save me pulling more hairs out.:-) the site is www.best4future.com
Make the container for those buttons just wide enough to hold them, and give it margin: auto;
stylesheet_footer_menu.css (line 1)stylesheet.css (line 1009)Code:#footer {
clear:both;
margin:0 auto;
}
Code:/*Footerbox*/
#footer {
width: 800px;
top: 0.2em;
background: transparent;
border: 0px solid #888888;
}
Thank you so much!!! You really rock, Glenn!!!:clap:
Hello, Glenn:
I have another CSS question for your advice. On my page (e.g. http://www.best4future.com/chinese-f...ang-poems-p-20), under additional images and "Ask a question about this product", I placed a bunch of social network icons.
I want them to show in the center of the page side by side, not in the left, nor in the right. But when I put {float: center} into the CSS, all icons go to the center, forming a vertical line.
How should I change? Thank you so much!!
"float: center;" is invalid CSS and will not do anything.
In your product_info.css, find the /*--------Zen Bookmarking Widget (CSS)------*/ section and add a line
.zen-bookmarking {width: 596px; margin: auto;}
and change all the background-position: horizontal position values from 0 to 15px or so.
Code:.zen-bookmarking {width: 596px; margin: auto;}
.zen-bookmarking a.delicious {
background-position:15px 0px;
}
.zen-bookmarking a.delicious:hover {
background-position:15px -43px;
}
Hello, Glenn:
Thank you so much for the advice. you are really a true zenner!
Just for curiosity, how did you see the CSS file from my site? I don't even know how to see the CSS file from my own site. If I know where to look, I can peek at experts' websites and see how they coded in CSS. :cool:
Thanks again for all the help!!
Lina
Most of us here use Firefox and its Web Developer or Firebug extensions. These have tabs that let us bring up the stylesheets used on a site (which have to be sent to every user's computer to do the styling anyway), and even to make local changes to the stylesheets so we can see what works on your site.
Hi, my developer just installed this mod, but there is a very curious behaviour which I don't understand, so hopefully somebody here can give us a hand!
In order for the amount left to spend to qualify for free shipping to display, Modules/Order Totals/Shipping/Allow Free Shipping has to be set to False.
In doing this, the customer who spends more than the specified amount is told they qualify for free shipping, but do not have it applied automatically at checkout - which is the way we had our site configured.
This seems counter-intuitive, and I need to fix it ASAP because at the moment we are telling our customers we have free shipping but they can't get it at checkout.
Any help would be much appreciated.
Thanks
Nathan
There are two different "free shipping" settings, the one you mention and the one in Modules > Shipping > Free Shipping Options. Install Free Shipping Options, set to True and set the $ amount.
ok, got that sorted. Thanks for your reply.
I am grateful for the community contribution, but to do feel the need to mention though that it seems a strange logic, to have to set 'free shipping' in the order totals to 'false' in order for free shipping amount left to spend to display in the header.
It is the exact opposite of what appears logical.
Maybe there was a reason that it was coded this way?
Perhaps this is something to consider for the next revision?
I think it is one of those "legacy code" items... like there was the OT free shipping which only dealt with $ total, and then the freeoptions module which had more functionality was developed, but the original free shipping was not removed from the code... Just my guess.
How can I remove the login, logout, etc in the header wrapper? It throws everything off and I really don't need it.
thanks!
nevermind, figured this out :)Quote:
Originally Posted by helpme
But I would love to add images to replace the css box, I see several people have done this but I can not see how.
Also my text showing the free shipping is missing. I have the modules-order total-free shipping turned on but still no text.
thanks so much! I'd love to get this working better!
site: squish ytush y.com
I've solved the shipping text problem and now have that showing. I added an image to the css and it kinda works, but it is small and I need to move the text around. I can figure the text out, just need to figure out how to make the image space larger (as long as the image(s) go in the css)Quote:
Originally Posted by helpme
I can't see where you have the Shoppingcart/Freeship active on your site, so I can't advise at this point...
Are you talking about the logo image with text included on it? That would be nothing to do with this mod.
I just put it back on, it tooks awful the way it is so I didn't want to leave it on.Quote:
Originally Posted by gjh42
thanks!!!
here is a screen shot of the problem, I can't leave it on...looks too bad :)
I still don't see it - did you take it off again? I'll keep checking for a while - post when you make a change.
That would be why I didn't see it:)
It's hard to discuss styling changes from a screenshot, but I can see that you have a box background image that is smaller than the content, so it starts to repeat. You will either need to make the container dimensions smaller or make the image wider. If you want the full height of the box image to show, with round corners at bottom, you will need to specify the height of the container to equal the image height.
To get space on the upper left for the cart image, you can add padding-left to the container or one of its components. I could give specific advice when seeing it live.
*nevermind*
I just thought of something... You could install the Shoppingcart/Freeship and add to your stylesheet
#cartHeader {display: none;}
which would hide it from everybody.
I could then delete that in my local view and see it live to advise, without affecting anyone else.
Thanks Glen,
I changed the image a little so that I can leave it on and not have it glaring at me. Let me know if you can give me more specifics....I REALLY appreciate it!
Here you go...
The current #cartCount a{) is a typo in the mod styles; it should be #cartCount a{}Code:#cartHeader{
position:absolute;
top:3.0em;
right:1.3em;
width:145px;
height:81px;
background:url(/includes/templates/future_zen/images/cartheader.jpg) no-repeat;
border:1px solid #ffaa88;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#cartHeader h3{text-align:center;}
#cartCount{border-top:1px solid #999;text-align:center}
#cartCount a{}
#cartTotal{}#cartFreeShip{margin:0 0.3em}
#cartCheckout{float:right;margin:0.2em}
You can use the properties in green instead of the background-image to put a rounded border on the box, in all modern browsers except IE.
Thank you so much, that worked!!! I am have lots of work to do on it yet, but that made it workable!!!!
Ok, one more question, I have now added an image to the border and I can't get the text to move right off the border. Also is there a way to call up a different go to checkout button, I need to make it slightly smaller because it blocks all of my ez pages. Or if you have another idea ;)
Thanks again, so happy to have this working!
Increase the margin here:
#cartFreeShip{margin:0 0.2em}
You appear to have given up the checkout button in the header, which seems fine since there is one in the sidebox just below it. The checkout button would require a flexible height box, or one that is always tall enough to hold the button.
Great, things are coming together but I'd like to make the cart image a link and also add another image next to my logo.
I have added this to my tpl_header file, but my image is not showing up:
I also added this to my stylesheet, I understand the position may not be correct but I figured I could play with that.PHP Code:<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
</div><div id="logosecond"><img height="150" width="150" title="mailbox" alt="Free Shipping"src="includes/templates/future_zen/images/mailbox.gif"></div>
<br class="clearBoth">
</div>
Thanks so much!!!!! I only wish I knew everything you do about coding and css!PHP Code:#logosecond {
float:right;
padding-right:225px;
}
Update:
I was finally able to get the image to show up but it is pushed way down. I know you can't tell a lot from the screen shot but maybe you can push me in a direction.
I have adjusted the header.php file to fit the new logo (left) and adjusted my css also:
#logoWrapper {
width:100%;
height: 127px;
text-align:left;
}
#logosecond {
float:right;
padding-right:235px;
}
Thanks again, Oh I'm still trying to make the cart image a link to the shopping cart page also.
My final post on this issue, hopefully. I have managed to get all of the images moved up, added links as desired, but my final problem is: my text is below the cart image. I have figured out how to move it up, however when I do it goes behind the image instead of on top.
Any suggestion.
Thanks so much!!!
Could this be modiflied to work with a sidebox shopping cart???
The template that I am using can't modify the header unless you move a lot fields elsewhere...
I have not fully investigated to see if header can be changed easily, I will shorty.. just wanted some input before I do...
Thanx :unsure:
It was originally modified FROM a sidebox mod, so moving it back shouldn't be a big deal...Quote:
Could this be modiflied to work with a sidebox shopping cart???
If I can see your site, I can advise on the best way to use this in the header.
I probably have to look at the stylesheet to move locations of it but I've included a photo of what needs to done...
1) move the Home Login ... etc fields to left under the logo
2) take out the search field
3) move the Currencies and languages down to where the search field was.
http://store.printersparts.com/ppe_mod.jpg
Any help would be great... I'm sure afterwards this will look great!
Richard :bigups:
Sorry I forgot the site address: http://store.printersparts.com/store/
I see you have the search-header turned off. The rest of the elements are built into that structure by Template Monster, and you will need to rework tpl_header.php to move them into the part of the header where you want them. CSS can't reliably do it all.
An example of what you can do - rather brute force, but it works:
in stylesheet_tm.css, add two rules and add a property to an existing rule, as shown in red:
.header_t {position: relative;}
.user_menu2 {position: absolute; top: 114px; left: 10px}
.header_t .row2{}
.header_t .row2 .inner1{background:url(../images/header_t_bg2.gif) repeat-x left top #072846; width:100%;}
.header_t .row2 .inner2{background:url(../images/header_t_bg1.gif) no-repeat left top; width:100%;}
.header_t .row2 .inner3{background:url(../images/header_t_bg3.gif) no-repeat right top; padding-bottom:5px; height:20px;}
The most robust way to handle this is to move the home/login menu and the currency/language section into <div class="inner3">; then they will automatically stay there and fill it up to the correct height, and not interfere with positioning the shoppingcart/freeship in the upper right area.
Everything is working out now.... I've just found out a problem and fixed it... just now modifying to look and it'll be all set...
Thanks for everything....
Regards,
Richard
I am having issues with centering the #cartFreeShip in the sylesheet.css file...
I've used text-aligh: center but it still is aligned left...
Did you put any of the styles from the readme into your stylesheet? If so, you might have carried over a typo in a previous rule from the readme:
#cartCount a {)
instead of the correct
#cartCount a {}
That would invalidate following rules:
#cartTotal {}
#cartFreeShip {
margin: 0 0.3em;
text-align: center;
}