Shop auto chọn nhiều pet © FCAmusement - VnIcefox 2014
Thiết kế: Méo Hắc Hắc (NCat) - K.
Cùng với sự giúp đỡ đắc lực của Zzbaivong - Devs.cf
Hàng mẫu, có thể lỗi nhiều
Tuyệt đối không xóa phần copyright bên dưới shop

Thông tin cập nhật code:
Chuyển từ nhiều gian hàng sang gian hàng dạng tab
Khi chọn xong có thể click thêm một lần nữa để bỏ hàng đang chọn
Hiện số hàng đang chọn ở Giỏ Hàng
Khi chưa chọn hàng sẽ không thể click vào nút gửi hóa đơn
Khung thông tin vẫn bao gồm tên, tiền và bài gửi
Sau khi chọn xong thì click vào nút gửi hóa đơn màu tím
Nói chung là như thế :v

Code:

<br/><div class="caigiday"><center><span style="font-size: 25px;font-weight: bold;color: #fff;">SHOP NÈ HÁ HÁ HÁ</span></center></div><br/>
<table border="0" style="width:100%">
  <tr>
    <td style="width:570px" valign="top">
      <div class="chonpet">
        <div class="tabbed_area">
       <ul class="tabs">
            <li><a href="#1" title="content_1" class="tab active">EMO MÉO 1</a></li>
            <li><a href="#2" title="content_2" class="tab">EMO MÉO 2</a></li>
        </ul>
       
        <div id="content_1" class="content">
            <div class="gianhang">
          <label>
            <input type="checkbox" name="item" class="item" />
            <img alt="item" src="http://i.imgur.com/peNYpHh.jpg" />
        </label>
        <label>
            <input type="checkbox" name="item" class="item" />
            <img alt="item" src="http://i.imgur.com/aUAn9JZ.jpg" />
        </label>
        <label>
            <input type="checkbox" name="item" class="item" />
            <img alt="item" src="http://i.imgur.com/TDIdQFQ.jpg" />
        </label>
        <label>
            <input type="checkbox" name="item" class="item" />
            <img alt="item" src="http://i.imgur.com/pjwIkFz.jpg" />
        </label>
     </div>
        </div>
        <div id="content_2" class="content">
            <div class="gianhang">
          <label>
            <input type="checkbox" name="item" class="item" />
      <img src="http://i.imgur.com/KSEvDV3.jpg"/>
          </label>
          <label>
            <input type="checkbox" name="item" class="item" />
      <img src="http://i.imgur.com/dI9F4RA.jpg"/>
          </label>
          <label>
            <input type="checkbox" name="item" class="item" />
      <img src="http://i.imgur.com/qKhd9RU.jpg"/>
          </label>
          <label>
            <input type="checkbox" name="item" class="item" />
      <img src="http://i.imgur.com/VGX73kB.jpg"/>
          </label>
          <label>
            <input type="checkbox" name="item" class="item" />
      <img src="http://i.imgur.com/vbJMG79.jpg"/>
          </label>
     </div>
        </div>
   
    </div>
     
  </div>
      <div class="headne">COPYRIGHT</div>
    <div class="cprshop">
      Shop auto chọn nhiều pet © FCAmusement - VnIcefox 2014<br/>
Thiết kế: Méo Hắc Hắc (NCat) - K.<br/>
Cùng với sự giúp đỡ đắc lực của Zzbaivong - Devs.cf<br/>
Vui lòng không rip code dưới mọi hình thức</div></td><td valign="top">
  <div id="cart">
<div class="headxem">GIỎ HÀNG (<span class="num">0</span>)</div>
<div class="xempetne"></div>
    <div class="tongtien">Tổng tiền: 0 Points</div>
  </div>
<div class="headxem">THÔNG TIN</div>
<div class="thongtinkhach">
Tên khách hàng: <span class="USERLINK" id="namene"></span><br />
Tài khoản: <span class="mypoint"></span> Points<br/>
Bài gửi: <span class="USERCOUNTPOST"></span> Bài
</div>
<!-- BEGIN switch_user_logged_out --><div class="muapet">
   <form id="abc" action="/post" class="frm-form" method="post" name="post" enctype="multipart/form-data">
        <div class="main-content frm">
                <input id="tieudepet" style="display:none" type="text" name="subject" value="" maxlength="255" title="The length of the title for this topic must be ranging between 10 and 255 characters" onkeypress="if (event.keyCode==13){return false}" />
                <script type="text/javascript">
                  //<![CDATA[
                  input = document.getElementsByName('subject');//]]>
                </script>
             <!-- Edit Textarea -->
              <textarea id="text_editor_textarea" name="message" style="display:none"></textarea>
             <!-- Edit Textarea -->
              <input type="hidden" name="mode" value="newtopic" />
              <input type="hidden" name="f" value="7" />
              <input type="hidden" name="lt" value="0" />
              <input id="submit" type="submit" name="post" value="Gửi hóa đơn" tabindex="6" accesskey="s" />
        </div>   
   </form>
</div><!-- END switch_user_logged_out -->
  </td></tr></table>

<script>
  $(".mypoint").load($(".name a").attr("href") + " #field_id-13 .field_uneditable");
  $("#submit").click(function(){
  $("#tieudepet").val("Hóa đơn của " + $('span.USERLINK a').html());});
 
</script>
<style>
.cprshop {border: 2px solid #3C6432;padding: 17px 20px;color: #3C6432;font-weight: bold;background: #CFE2CA;}
.caigiday {background: #6CA05F;padding: 20px;text-align: center;}
button, input[type="submit"] {cursor:pointer;outline:none!important}
div.chonpet img {cursor:pointer;}
#submit {display:none;background: #A05F96;padding: 5px;border: 0;color: #fff;font-size: 16px;font-weight: bold;font-family: 'Roboto' , sans-serif;box-sizing: inherit;width: 100%;margin-left: -1px;margin-top: -1px;}
.muapet {margin-left: 10px;width: calc(90% + 6px);margin-top:10px}
div.xempetne img {width: 75px;padding: 7px;}
.gianhang {overflow-y: scroll;overflow-x: hidden!important;border: 2px solid #816E52;background: #C5B091;padding: 5px;height: 220px;}
.gianhang img {padding: 4px;}
.gianhang .item {display: none;}
.gianhang .item + img {box-shadow: 0 0 0px transparent;}
.gianhang .item:checked + img {box-shadow: 0 0 5px #000;}
.headxem {padding: 7px;background: cadetblue;color: #fff;font-weight: bold;margin-top:10px;width: 90%;background: cadetblue;color: #fff;font-weight: bold;margin-left: 10px;}
.headxem:first-child {margin-top:0}
div.xempetne {border: 2px solid cadetblue;border-top:0;padding: 5px;overflow-y: scroll;overflow-x: hidden!important;background: #C4DEDF;height: 221px;width: 90%;margin-left: 10px;}
.lamlaine {background: rgb(76, 125, 126);padding: 5px;border: 0;color: #fff;font-weight: bold;float: right;margin-top: -4px;font-size: 14px;}
.headne {padding: 7px 10px;color: #fff;background: #3C6432;font-weight: bold;margin-top: 10px;}
.mypoint .field_uneditable {display: inline-block;}
.thongtinkhach {padding: 5px;border: 2px solid cadetblue;margin-left: 10px;width: 90%;}

  /**/ 
#tabbed_box_1{margin:0 auto 0 auto;width:300px}
.tabbed_box h4{font-family:Arial,Helvetica,sans-serif;font-size:23px;color:#fff;letter-spacing:-1px;margin-bottom:10px}
.tabbed_box h4 small{color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana,Arial,Helvetica,sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0}
ul.tabs {height: 31px;background: #A0865F;margin: 0;padding: 0;}
ul.tabs li:first-child a {margin-left: 10px;}
ul.tabs li {margin-top: 7px;list-style: none;display: inline-block;}
ul.tabs li a {background: #64543C;padding: 10px;font-size: 9px;font-weight: bold;color: #fff!important;font-family: 'Roboto', sans-serif;}
ul.tabs li a.active {background: #7C6B52;}
#content_2,#content_3,#content_4,#content_5,#content_6,#content_7,#content_8,#content_9,#content_10{display:none}
.content ul{margin:0;padding:0 20px}
.content ul li{list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px}
.content ul li:last-child{border-bottom:none}
.content ul li a{text-decoration:none;color:#3e4346}
.content ul li a small{color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana,Arial,Helvetica,sans-serif;position:relative;left:4px;top:0}
.content ul li a:hover{color:#a59c83}
.content ul li a:hover small{color:#baae8e}
.tongtien {padding: 5px 10px;margin-top: 10px;margin-left: 10px;border: 2px solid #A05F5F;color:#A05F5F}
</style>

<script>
$(".gianhang .item").change(function () {
$("div.xempetne").html($(".item:checked + img").clone());
$("#cart .num").text($(".item:checked + img").length);
var bill = "";
$("div.xempetne img").each(function(){
bill += "[img]" + this.src + "[/img]";
});
$("#text_editor_textarea").val(bill + '\n\n Tổng tiền: ' + $(".item:checked + img").length*100 + ' Points');
$(".item:checked").length ? $("#submit").fadeIn(250) : $("#submit").fadeOut(250);
});
</script>
<script>
$(document).ready(function(){
// Sự kiện khi nhấn vào các tab của menu
$("a.tab").click(function () {
// tắt tất cả các tab
$(".active").removeClass("active");
// bật tab đang click lên
$(this).addClass("active");
// tạo hiệu ứng trượt lên trên cho nội dung của tab đang click
$(".content").Bài viết không bị Ẩn();
// Nếu là tab đầu tiên thì set hiệu ứng là trượt xuống dưới
var content_show = $(this).attr("title");
$("#"+content_show).show();
});
});

$(window).load(function(){
if (Number($(".mypoint .field_uneditable").text()) >100) {
}
else {
alert("Xin lỗi bạn cần ít nhất 100 $ để thực hiện các chức năng trong Shop");
location.href="/forum";
}
});
$(".gianhang .item").change(function () {
$(".tongtien").text('Tổng tiền: ' + $("div.xempetne img").length*100 + ' Points');
if($("div.xempetne img").length*100 > Number($(".mypoint .field_uneditable").text())){alert('Bạn không đủ tiền để mua hết vật phẩm đã chọn\nHãy chọn lại cho phù hợp túi tiền của bạn')}
else{}
});
</script>

Code:


<input type="hidden" name="f" value="7" />


Code:

<script type="text/javascript" src="http://yourjavascript.com/156126353119/fmvar.js"></script>