Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Move header shortcuts


Snarg

Recommended Posts

Hello,

 

I am looking to move the header shortcuts to be inline with the breadcrumbs. I have gone through header.php and (after backing up, of course!) played with that code many many times with no luck at all. Any guidance in the right direction would be appreciated. Thank you.

Link to comment
Share on other sites

Hi Scott,

 

You need to get them inside the breadcrumb div.

To do properly you may need to call the right grid class

possibly using the push pull grid_x alpha omega etc these are the various 960 grid commands .

 

I done it quickly here

 

http://www.demo1.osc-design.com/

 

I can really recommend oscbooks just google for it costs £10 best money I spent in a long time if you want to learn a bit how the 960 grid works in osc.

 

Regards

John

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

@@joli1811

 

Thanks for the reply. I'm fairly posotive the magic happens in includes/header.php. I am pretty sure it has something to do with this chunk of code:

  <div id="headerShortcuts">
<?php
 echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
   tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
   tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

 if (tep_session_is_registered('customer_id')) {
   echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
 }
?>
 </div>

<script type="text/javascript">
 $("#headerShortcuts").buttonset();
</script>
</div>

<div class="grid_24 ui-widget infoBoxContainer">
 <div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?></div>
</div>

 

I have tried arranging the code in various ways with little to no luck. I *think* I need to somehow make the breadcrumb box taller.

 

I have changed my 960 grid slightly, making the store wider.

 

Any input anyone has is greatly appreciated. Thank you very much in advance.

Link to comment
Share on other sites

Hi Scott,

 

This is rough but just to give you an idea a div within a div remember id= headerShortcuts is also controlled in stylesheets at the top

 

<div class="grid_24 ui-widget infoBoxContainer">

 

<div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?>

<div id="headerShortcuts">

<?php

echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .

tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .

tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

 

if (tep_session_is_registered('customer_id')) {

echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));

}

?>

</div>

 

Regards

 

Joli

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

@@joli1811

 

Thank you sir, your help is much appreciated. I'll play around with it and see if I can polish it up a bit. Thank you very much.

 

I swear I tried something similar to that when I was attempting this on my own but I guess not.

Link to comment
Share on other sites

Thanks to the help provided on this forum, I have this 99% working. I can get to 100% but, it is an ugly solution. I am hoping someone can nudge me in the correct direction for a more elegant solution. Anyway, here is where I am at:

 

Using the code below (thanks joli1811):

 

<div class="grid_24 ui-widget infoBoxContainer">

<div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?> »

<span class="tdbLink" ><a id="tdb4" href="http://localhost/shopping_cart.php">Cart Contents</a></span><script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>

<span class="tdbLink" ><a id="tdb5" href="http://localhost/checkout_shipping.php">Checkout</a></span><script type="text/javascript">$("#tdb5").button({icons:{primary:"ui-icon-triangle-1-e"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>

<span class="tdbLink" ><a id="tdb6" href="http://localhost/account.php">My Account</a></span><script type="text/javascript">$("#tdb6").button({icons:{primary:"ui-icon-person"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>

</div>

</div>

 

I am able to place the buttons inline with the breadcrumbs. However, one small problem. The buttons end up right on top of the breadcrumbs, like so:

 

http://img203.imageshack.us/img203/945/notworking.jpg

 

Now, I can fix the alignment but, it's a cheap cheat. I simply add a bunch of nbsp's after the breadcrumb code, like so:

 

<div class="grid_24 ui-widget infoBoxContainer">

<div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?> »                                                                                                                                                                                                                                                              

<span class="tdbLink" ><a id="tdb4" href="http://localhost/shopping_cart.php">Cart Contents</a></span><script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>

<span class="tdbLink" ><a id="tdb5" href="http://localhost/checkout_shipping.php">Checkout</a></span><script type="text/javascript">$("#tdb5").button({icons:{primary:"ui-icon-triangle-1-e"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>

<span class="tdbLink" ><a id="tdb6" href="http://localhost/account.php">My Account</a></span><script type="text/javascript">$("#tdb6").button({icons:{primary:"ui-icon-person"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>

</div>

</div>

 

It makes them line up beautifully but, like I said, it's horribly ugly, code wise.

 

I don't have the button code in it's own <div> tag because that causes a crlf and makes the buttons hang out the bottom of the box heading and look all funny.

 

Just hoping someone will stumble along and nudge me in the right direction. Thank you very much.

Link to comment
Share on other sites

Change the class on your spans to something new, then in your stylesheet give that new class a property of float: right;

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

I have pretty much given up on being able to display the buttons and the breadcrumbs in the same header box. No big loss, I just got rid of the breadcrumbs. I now have my buttons in the area the breadcrumbs would have occupied. Yay me. I am trying to make the buttons change based on whether or not the customer is logged in. I am having an issue though in that although the buttons do change when I log in, they don't change in the manner I would expect.

 

If a customer is not logged in, I would like the buttons to be: Home, Create an Account and Login. The part works great, no issues. Once someone logs in, I would like the buttons to be: Home, Cart Contents, Checkout and Logout. This part is not working so well. When someone logs in right now, the only button that is displayed is Home.

 

I am running this on a XAMPP local test server. Is it possible that my sessions are not being stored...? I'm not quite sure. Anyway, if someone could take a quick peek at this code and tell me if it looks right, that would be appreciated. Thank you in advance.

 

<div class="grid_24 ui-widget infoBoxContainer">

<div class="ui-widget-header infoBoxHeading">

<span><?php
 echo tep_draw_button(HEADER_TITLE_HOME, 'home', tep_href_link(FILENAME_DEFAULT));
 if (tep_session_is_registered('customer_id')) {
	 tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
	 tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') , 'primary') .
	 tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
 } else {
	 echo tep_draw_button(HEADER_TITLE_CREATE_ACCOUNT, 'pencil', tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') , 'primary') .
	 tep_draw_button(HEADER_TITLE_LOGIN, 'key', tep_href_link(FILENAME_LOGIN, '', 'SSL') , 'primary');
 }
?>

</div>

<script type="text/javascript">
$("#headerShortcuts").buttonset();
</script>

</div>

Link to comment
Share on other sites

Never mind, I fixed it. It's possible it's ugly code, but it seems to work:

<div class="grid_24 ui-widget infoBoxContainer">

<div class="ui-widget-header infoBoxHeading">

<span><?php if (tep_session_is_registered('customer_id')) {
	 echo tep_draw_button(HEADER_TITLE_HOME, 'home', tep_href_link(FILENAME_DEFAULT)) .
	 tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
	 tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') , 'primary') .
	 tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
 } else {
	 echo tep_draw_button(HEADER_TITLE_HOME, 'home', tep_href_link(FILENAME_DEFAULT)) .
	 tep_draw_button(HEADER_TITLE_CREATE_ACCOUNT, 'pencil', tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') , 'primary') .
	 tep_draw_button(HEADER_TITLE_LOGIN, 'key', tep_href_link(FILENAME_LOGIN, '', 'SSL') , 'primary');
 }
	 ?>

</div>

<script type="text/javascript">
$("#headerShortcuts").buttonset();
</script>

</div>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...