Use this as a portal widget, Put the shop in column 2, cart in 3.

Preview: Link

Shop code

Code:

<div class="inner">
     <span class="corners-top"><span></span></span> 
   <div class="h3">
        YOUR SHOP NAME HERE
   </div><style type="text/css">
.header{color:#FA8805;font-size:54px;text-align:center;text-shadow:4px 3px 4px #000000;height:40px;padding-bottom:40px;}
.shopWrapper{background: blackSmoke;}
.title{color:#000;font-size:12px;}
.image img{height:100px;width:100px;}
.image{text-align:center;}
.points{color:green;font-size:8px;float:left;text-align:center;}
.sale{color:#ff0000;font-size:8px;float:right;text-align:center;}
.item{width:130px;min-height:150px;border:1px solid #000000;overflow:hidden;height:auto;padding:5px;background:#fff;text-align:center;}
.descrip{background:#E9D09B;overflow:hidden;height:auto;min-height: 50px;}
.description {color: black;font-size: 10px;word-wrap: break-word;text-align: left !important;float: left;text-indent: 5px;}
.itemWrapper{text-align:center;margin:0 auto;float:left;}
.inventWrapper{float:left;width:600px;height:auto;overflow:hidden;}
.cart{overflow: hidden;background: #00377a;}
.cart_title{text-align:center;color:#000;border-bottom:2px solid #000;}
.cart_items{text-align:center;}
.cart_body{text-align: center;
margin: 0 auto;
overflow-x: hidden;
overflow-y: scroll;
border: 3px solid white;
height: 300px;
background-color: #00377a;}
.cartWrapper{float:center;width:250px;}
.totaler{bottom:0;}
li:hover{cursor:pointer;}
#checkout{float: left;
height: 100px;
text-align: center;
background: #00377a;
border-top: 3px solid white;
margin-top: 5px;
width: 100% !important;}
</style> <script type="text/javascript">
(function(jQuery){
jQuery(document).ready(function(){
var jQuerytotal = 0.0

jQuery('.addButton').click(function (){
    var theID ='#' + jQuery(this).attr('data-item');
var pointstoAdd = parseFloat(jQuery(theID).find('.points').attr('data-myprice'));
jQuerytotal += pointstoAdd;
jQuery('.totaler').html('Total Credits = ' + jQuerytotal.toFixed(2));
var jQuerynewItem = '<li class="cart-item" data-points="'+ pointstoAdd+'">' + jQuery(theID).find('.title').text()+ '</li>';
jQuery('.theList').append(jQuerynewItem);
BindIt();
});

function BindIt(){
   
    jQuery('.cart-item').unbind('click');
   
    jQuery('.cart-item').click( function(){
        jQuerytotal -= parseFloat(jQuery(this).attr('data-points'));
        jQuery('.totaler').html('Total Credits = ' + jQuerytotal.toFixed(2));
        jQuery(this).remove();
    });
}
});
 jQuery(document).ready(
              function() {
                jQuery('#submitCart').click(function() {
                var text = '';
var total = 0;

jQuery(".theList li").each(function () {
  var string = jQuery(this).text();
  var points = parseInt(jQuery(this).data('points'));

  //capitalize first letter of string
  text += string.charAt(0).toUpperCase() + string.slice(1)
  //add line break at the end
      + ' = ' + points + "\n";

  total += points;
});

//I think calculating total is easier than trying to manipulate jQuery(".totaler")
text += "Total Credits = " + total;
jQuery("#cartMessage").text(text);
            });
        });
})(jQuery);
</script><script language="javascript">
function toggle5(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
      imageEle.innerHTML=parseHTML('<img src="IMG URL">');
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML=parseHTML('<img src="IMG URL">');
        }
}
</script> 
   <div id="headerDivImg">
       
   </div>
     <a id="imageDivLink1" href="javascript:toggle5('contentDivImg1', 'imageDivLink1');"><img src="IMG URL" /></a>
</div>
 
<div style="display: none;" id="contentDivImg1">
    
   <div class="itemWrapper">
       
      <div class="item" id="item20">
          <span class="title">YOUR ITEM NAME</span><br /><span class="image"><img src="YOUR IMAGE"></span><br /> 
         <div class="descrip">
             <span data-myprice="PRICE" class="points">PRICE</span><span class="sale">SUB DISCRIP.</span><br /><span class="description">DISCRIP.<br /><br /><br /></span> 
         </div>
           <input value="Add To Cart" data-item="item20" class="addButton" type="button" /> 
      </div>
       
   </div>
</div>


Cart code

Code:


 
<div class="cartWrapper">
   
   <div class="cart" id="cartj">
      
      <div class="cart_body">
         
         <div class="cart_title">Shopping Cart
         </div>
         
         <div class="cart_items">
            
            <ul class="theList">
               
            </ul>
            
         </div>
         
      </div>
        <span class="totaler">Total Credits = </span>
   </div>
    
</div>
<div id="checkout">
    Would you like to check out now? If so, just click the 'Update Card' button then 'Send'. Allow 24 hours for all the items to be processed. 
   <form id="privatemessage" action="PVM URL" method="post" name="post">
      <input name="username[]" type="text" style="display:none" value="PROCESSOR USER NAME" /><input value="Shop Order" style="display:none" maxlength="64" name="subject" type="text" class="usernameinput" /><textarea id="cartMessage" style="display:none" class="noThis" name="message"></textarea><input type="button" id="submitCart" onclick="this.disabled = false;document.getElementById('sendingBut').disabled = false" value="Update Cart" /><input type="submit" id="sendingBut" name="post" value="Send" disabled="disabled" />
   </form>
</div>


Kthxbai ~Drakius