Shopping Cart Check Out within a div

[knucklehead]

I've been a shopsite user for probably 10 years now - but whenever we go through design change - I can never remember where to go to under the hood so to speak to get my shopping car and checkout pages to have the same look and feel of the new design.

I'm trying to get all of the shopsite fields to be contained inside a div... here is a link to the template I want to use -

http://www.employeeuniversity.com/temp-shopsite/shopsite1.html

I have a temporary design up now but it looks terrible - it's plain jane and once you get to the checkout screens the shopsite code shifts to the left.

please help me get my checkout experience professional looking...

Thank you

[Jim]

I'm not sure exactly what would be causing the problem, but the biggest difference between the initial shopping cart screen and the checkout screen is that the first is just http:// and the second is https://. A change in the layout could be an indication that your style sheet isn't being loaded properly from the secure url. So make sure that your store has the proper secure urls configured under Preferences > Hosting services and that you are using the secure urls in the [-- DEFINE SHIPPING --] and [-- DEFINE THANKYOU --] (and if you are using a confirmation screen [-- DEFINE CONFIRMATION --]) sections of the shopping cart template.

[knucklehead]

OK, I'll look into that. But regarding getting the divs to work... should this be in the "Text at the top of the X screen" field:

<div class="container">
<div class="headerpart2">
<div class="headerpart3">
<div class="logopart">
<a href="http://www.employeeuniversity.com/"><img alt="Employee University - Training Videos on DVD and Streaming Online" height="73" src="http://www.employeeuniversity.com/common/images/logo.png" width="360" /></a></div>
<div class="searchandnav">
<div class="topmenu">
<p>&nbsp;</p>
<p>For Assistance, Call:&nbsp;&nbsp;&nbsp;&nbsp; <span>(888) 520-2444</span></p>
</div>
</div>
</div>
</div>
<div class="breadcrumbpart2">
<div class="breadcrumb">
<span class="button">
<form action="http://www.employeeuniversity.com">
<p><button class="button small_button primary" type="submit"><span>HOME</span></button>&nbsp;</p>
</form>
</span>
<p><b>Employee University | Shopping Cart</b></p>
<span class="clear"></span></div>
</div>
<div class="vid-prevtitle-wrap">
<h1>Check Out</h1>
</div>
<div class="eushopsitecontainer">



and this be in the "Text at the bottom of the X screen" field?


</div>
</div>
<div class="footprt">
<div class="footprtin">
<div class="footprtmid">
<div class="footlogo">
<a href="http://www.employeeuniversity.com"><img alt="" height="78" src="../common/images/shape/footlogo.jpg" width="369" /></a></div>
<div class="footmenu">
<p><a href="http://www.employeeuniversity.com//eu/terms-of-service-privacy-policy.htm">Terms of Use &amp; Privacy</a>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <a href="http://www.employeeuniversity.com//eu/contact-about-us.html">Contact Us</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; Copyright:&nbsp;&nbsp;&nbsp; HRIT Inc. Employee University&nbsp; ~ est 2001</p>
</div>
</div>
</div>
</div>

==============

Should that work?

Also How do I get the shopping cart and check out screens to reference my css file?

[knucklehead]

I created a shopping cart template according to the instructions on this page:

http://www.shopsite.com/templates/cookbook/quick-easy-templates-cart.shtml

And then uploaded it to shopsite – naming it: EU-2014-SC

It’s supposed to look like this…

http://www.employeeuniversity.com/temp-shopsite/shopsite1.html

but it’s all wacky …

And looks like this:

http://www.employeeuniversity.com/cgi-employeeuniversity/sb/order.cgi?storeid=*1852104694af3a644669b87a10d0&function=show

Can you help?

[knucklehead]

I've actually now moved my site to a demo becuase I customers were not able to checkout while I toyed with the code...

Here is a link to a demo product:

http://empdemo.employeeuniversity.com/cgi-empdemo/sb/order.cgi?storeid=*104b8218a40696406fd3&dbname=products&guid=df3c9cc8-3c53-11e3-a4a1-00259076ffca&function=add

I got the shopsite part to show up by doing a custom template, instead of just using the "top" and "bottom" fields...

Problem is now, I can'r figure out how to control the look of the shopping cart stuff.

1. How to I get the CHECK OUT pages to look nice and tidy: text be left aligned - as is is now - you can't even see the fields that you are supposed to enter data into to - it's all out of whack.

2. How do I change the buttons without changing the theme? If I change the theme, it removes my custom demo template

[Jim]

You need to define styles for the various elements on the page. Here are a few lines of the html output for the billing address.

Code: Select all

 <table class="addr">
<tr><td valign=top><table class="bill_addr">
<tr><td class="bill_addr_hdr" colspan=2>Billing Address</td></tr>
<tr><td class="addr"><span id="E_Email">Email</span><font color=blue>*</font></td><td class="addr_val"><input class="addr" type=text name="Email" value="" size="28" maxlength="50"></td></tr>
<

I don't find styles defined in the page for addr, bill_addr, bill_addr_hdr etc. You need to define all the styles that you want to use on the page to change the look. Note that there are different styles defined for elements on each of the shopping cart screens, (shopping cart, checkout, confirmation, thank you, thankyou email) that will need to be defined. These can either be included directly in the custom template or they can be a linked to style sheet.


You can change the buttons using the Preferences > Store Text > Shopping cart or Checkout or Store Pages etc.. Note that some built in themes may just use text and styles so if you modified one of the themes check to make sure what is being used (Text or Image ) because enabling an image may not work if the template uses text buttons.