You are not connected. Please login or register


Forum Shop Code + Shopping Cart




      • Please log in to reply

    View previous topic View next topic Go down  Message [Page 1 of 1]

    #1

    OfflineDrakius

    avatar
    Admin
    on Fri Sep 05, 2014 9:52 pm
    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

    View user profile http://code15.forums.gs

    View previous topic View next topic Go down  Message [Page 1 of 1]



    Permissions in this forum:
    You cannot reply to topics in this forum