Shoppingcart/Freeship in Header support

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:

<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:

<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-->

NOTE: I will be renaming them 'View Cart' and 'Checkout'

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

<?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
<?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.

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:

  cartCount a {)  

Corrected:

  cartCount a {} 

Thanks again!!
-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:```

<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> ```Delete the two <br> as they don't do anything useful. Style like this:``` /*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/

This could be cleaned up, but will work as shown. There may be some changes not highlighted.

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.

gjh42:

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.

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:

<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>

awhile back to make the buttons work correctly and they do!

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:

<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>

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:

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 like```php

<?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>'; ?>

Alternatively, you could do this:```php
<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>