X-Cart forums

[levrik]

I know this has been a nice mod used by lots of people for 4.1.10 but I haven't seen it for 4.2 yet - thought I'd go ahead and mess around and see if I couldn't get it working.

For an example of what this looks like, you can go to (live site - please no test orders!) piptp.com and you'll notice the shopping cart on the upper right hand side. I'm still developing the 4.2 site, so you'll notice that one is all tables based.

Be patient with me - I'm trying to remember all the changes I made over the last 4+ hours and I might miss some. Let me know if you're having problems getting it to work and I'll see what I can to help you out.

First off, make a new file named minicart.tpl in your skin1/customer folder. Inside that put the following:

<div class="minishopcart">
{if $login eq "" }
{include file="customer/mc_auth.tpl" }
{else}
{include file="customer/mc_authbox.tpl" }
{/if}
</div>

Second, make the two new files in your skin1/customer folder you just referenced - mc_auth.tpl and mc_authbox.tpl.

mc_auth.tpl started off as a copy of auth.tpl but mine now looks like this:

<!-- mc_auth //-->
<div style="background: url(skin1/images/shopping_cart_bg.png); width: 209px; height: 106px;">
    <div style="height: 53px; width: 209px; text-align: center; padding-top: 2px;"> 
{if $minicart_total_items > 0}
<a href="cart.php"><img src="{$ImagesDir}/cart_empty.gif" width="19" height="16" alt="" align="middle" /></a> <a href="cart.php">Shopping Cart</a><br />
<b>{$lng.lbl_cart_items}: </b>{$minicart_total_items}
<br />
<b>{$lng.lbl_total}: </b>{include file="currency.tpl" value=$minicart_total_cost}
{else}
<a href="cart.php"><img src="{$ImagesDir}/cart_empty.gif" width="19" height="16" alt="" align="middle" /></a> <a href="cart.php">Shopping Cart</a>
<br />
<b>{$lng.lbl_cart_is_empty}</b>
{/if}
  </div>
{if $main ne "login_incorrect" and $main ne "antibot_error" and $main ne "disabled" or $config.Security.use_secure_login_page eq "Y"}
  <form action="{$auth_form_url}/include/login.php" method="post" name="authform" class="item">
    <input type="hidden" name="{$XCARTSESSNAME}" value="{$XCARTSESSID}" />
      <input type="hidden" name="mode" value="login" />
      <input type="hidden" name="usertype" value="{$auth_usertype}" />
      <input type="hidden" name="redirect" value="{$redirect|amp}" />
      
      u: <input type="text" name="username" size="10" value="{#default_login#|default:$username}" />
      
      p: <input type="password" name="password" size="10" maxlength="64" value="{#default_password#}" />
      <div class="login-buttons">
<center>
        {include file="customer/buttons/login_menu.tpl" additional_button_class="menu-button"}
        {include file="customer/buttons/create_profile_menu.tpl" additional_button_class="menu-button"}
        <div class="clearing"></div>
      </div>
  </form>
</div>
{/if}
<!-- /mc_auth //-->

Fair warning - to fit space constraints, I removed some stuff (anti-bot captcha) and made some stuff smaller/more compact. If you want the png, you can download it off the piptp website.

mc_authbox.tpl code:

<!-- mc_authbox //-->
<div style="background: url(skin1/images/shopping_cart_bg.png); width: 209px; height: 106px;">
  <div style="height: 53px; width: 209px; text-align: center; padding-top: 2px;"> 
{if $minicart_total_items > 0}
<a href="cart.php"><img src="{$ImagesDir}/cart_empty.gif" width="19" height="16" alt="" align="middle" /></a> <a href="cart.php">Shopping Cart</a><br />
<b>{$lng.lbl_cart_items}: </b>{$minicart_total_items}
<br />
<b>{$lng.lbl_total}: </b>{include file="currency.tpl" value=$minicart_total_cost}
{else}
<a href="cart.php"><img src="{$ImagesDir}/cart_empty.gif" width="19" height="16" alt="" align="middle" /></a> <a href="cart.php">Shopping Cart</a>
<br />
<b>{$lng.lbl_cart_is_empty}</b>
{/if}
</div>
<div class="login-text item">
	Welcome back {$login}<br />
  <form action="{$xcart_web_dir}/include/login.php" method="post" name="loginform">
    <input type="hidden" name="mode" value="logout" />
    <input type="hidden" name="redirect" value="{$redirect|amp}" />
<a href="orders.php">Order History</a> 
    {include file="customer/buttons/logout_menu.tpl" additional_button_class="menu-button" style="button"}
  </form>
  <br />
</div>
  </div>
</div>

To avoid stepping on the toes of the existing minicart class from your main.css file, I renamed mine minishopcart. Add this code to your css file:

/* shopping minicart */
.minishopcart {
	position: absolute;
	right: 0px;
	top: 2px;
	width: 209px;
	text-align: center;
	white-space: nowrap;
}

If you have a phone number (#header .phones) listed, the minishopcart will overlay over it. You can fix it (if you want) by modifying your existing phone class with the following:

/* phones line */
#header .phones {
	position: absolute;
	right: 215px;
	top: 10px;
	vertical-align: middle;
	color: #5480a2;
  	text-align: right;
	white-space: nowrap;
	font-size: 11px;
}

Basically, I left it absolutely positioned and move it over so that it wasn't covered by the new minishopcart class.

Last step is to call it from your head:

{include file="customer/minicart.tpl"}

Go ahead and put that right before the <div class="phones"> line - I did.

That should be all...again, if it doesn't work for you, let me know and I'll try to help out. Looks like x-cart left intact the minicart programming because as soon as I added something to my cart, it showed up in my new minishopcart.

Hope you enjoy this - have fun hacking it to fit your site! Please let me know if you do use it - I learn by example and would love to see what you do with it.

[hollaratbear]

This works great! I had to add an {else} statement for incorrect logins, etc. Great mod.