[Dự án] Shop Auto chọn nhiều pet

  Bài viết hay nhất1
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
Demo: http://fcatest6.forumvi.com/h2-page


Code:
Tạo HTML : Do you wish to use your forum header and footer ? >> Có
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").hide();
// 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>

Thay 7 bằng id box muốn gửi hóa đơn trong đoạn
Code:

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

Lưu ý: ai chưa gán Variable cho forum thì thêm đoạn này vào cuối HTML:
Code:
<script type="text/javascript" src="http://yourjavascript.com/156126353119/fmvar.js"></script>
  Bài viết hay nhất2
Mình muốn dùng cái này để ib cho BQT thì thay
Code:
<input type="hidden" name="f" value="7" />
bằng cái gì vậy Méo?
The author of this message was banned from the forum - See the message
  Bài viết hay nhất4
Góp ý: Chỗ Đã chọn sửa lại là Giỏ hàng, nếu chưa chọn thì ẩn đi, khi nào có hàng thì mới hiện, và cho màu khác với phần Thông tin.
Các gian hàng khác nhau thì để dạng tab để tiết kiệm không gian.
Nên dùng dạng checkbox cho việc chọn sản phẩm sẽ đỡ tốn công viết js.
  Bài viết hay nhất5
Có tự cập nhật vào mục tài sản ko bạn
  Bài viết hay nhất6
anhdaodaica1 wrote:Mình muốn dùng cái này để ib cho BQT thì thay
Code:
<input type="hidden" name="f" value="7" />
bằng cái gì vậy Méo?

Muốn gửi cho BQT thì tốt nhất là lấy form bên contact nhưng lại bị lỗi ở chỗ phải nhập captcha, để từ từ méo nghiên cứu sau

@Gang: Nếu chưa có cài variable thì lên diendan.chinhphuc.info mà làm theo hướng dẫn cài, nó sẽ hiện

Gang wrote:2. Phần gửi hoá đơn ấy tớ nghĩ Méo nên thêm phần loading nó hay hơn, và cái khi gủi hoá đơn vào 1 cái topic thì...trong topic chỉ hiện mấy cái pet thôi....tớ nghĩ méo nên thêm vài thông tin như : người mua hàng, số tiền mua tất cả pet là, đó là những pet nào...!

Không loading gì hết, mất thời gian chết đi được. Hiện pet là đủ rồi còn gì -_- Tên người mua hiện trên title, còn số tiền mua thì cho số point trừ trong box đó là được

Lưu ý là không tự cập nhật vào tài sản được -_-

Huynh vống: Vậy để tối méo lên méo sửa :v (đang la cà net trong giờ tiết trống, bọn 2 buổi về hết rồi -_- )
Dạng tab với checkbox thì hiện tại méo lại không biết làm :'(
The author of this message was banned from the forum - See the message
  Bài viết hay nhất8
tìm google cái trang yourjavascript ấy mà làm
  Bài viết hay nhất9
:3 Hô hô! Ta đáng tính sau khi bấm gửi đơn hàng thì hiện ra thông báo ok rồi về trang chủ...
The author of this message was banned from the forum - See the message
  Bài viết hay nhất11
KirigayaKazuto wrote::3 Hô hô! Ta đáng tính sau khi bấm gửi đơn hàng thì hiện ra thông báo ok rồi về trang chủ...

Ta có thử dùng location.href với preventDefault() mà không được :'(

Gang: không nói rõ hơn đâu, tự mày mò đi, thân làm chủ một forum mà không làm được gì hết trơn
The author of this message was banned from the forum - See the message
  Bài viết hay nhất13
Kệ mi chứ, ta làm nó hiện còn mi làm sao không hiện là do không hợp chăng :v
The author of this message was banned from the forum - See the message
  Bài viết hay nhất15
Lấy tên thành viên thì không cần đến cách dùng các variable cũ đâu
Các thông tin cơ bản có thể lấy từ object _userdata.
Code:
_userdata["session_logged_in"] // Kiểm tra tình trạng đăng nhập
_userdata["username"] // Tên thành viên
_userdata["user_id"] // ID thành viên
_userdata["user_level"] // Phân cấp (không phải user rank)
_userdata["user_lang"] // Mã ngôn ngữ
_userdata["avatar"] // Ảnh đại diện
_userdata["user_posts"] // Số bài viết
_userdata["user_nb_privmsg"] // Số tin nhắn riêng
_userdata["point_reputation"] // Số lần được cảm ơn
  Bài viết hay nhất16
Ồ :v
À huynh tiện thể bày méo cách làm checkbox và tab luôn nha :v
Giờ méo về trường cái
  Bài viết hay nhất17
Code mẫu cho Méo phần checkbox thôi, còn tab thì google: "jquery plugin tabs"

http://jsfiddle.net/baivong/U76jA/
  Bài viết hay nhất18
:v Oh!
  Bài viết hay nhất19
Cho em hỏi nếu mua nhiều cùng 1 lúc thì cách tính tiền sao ạ? Làm s để định mức vật phẩm đó khi gừi hoá đơn nhiều vật phẩm thì nó tính tiền theo từng con

Vd: Mình mua 3 con khỉ. Mỗi con giá $500 , tổng 3 con là $1500. nhưng khi viết hoá đơn thì chỉ bị tính có $500 khi post vào box hoá đơn. Làm s để khi viết hoá đơn thì nó tính tiền tất cả vật phẩm ?
  Bài viết hay nhất20
nhokpronho49 wrote:Cho em hỏi nếu mua nhiều cùng 1 lúc thì cách tính tiền sao ạ? Làm s để định mức vật phẩm đó khi gừi hoá đơn nhiều vật phẩm thì nó tính tiền theo từng con

Vd: Mình mua 3 con khỉ. Mỗi con giá $500 , tổng 3 con là $1500. nhưng khi viết hoá đơn thì chỉ bị tính có $500 khi post vào box hoá đơn. Làm s để khi viết hoá đơn thì nó tính tiền tất cả vật phẩm ?

Chà đúng là lỗi phần này thật
Để đến hồi méo xem lại :v

Huynh vống: Quá dữ :v Huynh làm dữ dội thật :3
  Bài viết hay nhất21
Code thừa:
Code:
<input type="hidden" name="auth[]" value="48b8b6230f8b0fb6ce8947f8f616d1ae" />
<input type="hidden" name="auth[]" value="28fe52d39e299ee67c733f21ad0a3cf0" />

Code:
<script type="text/javascript">
  //<![CDATA[
  $(function(){
  });//]]>
</script>
<link rel="stylesheet" href="http://illiweb.com/rsc/41/frm/SCEditor/src/themes/fa.default.min.css" type="text/css" media="all" />
<script type="text/javascript" src="http://illiweb.com/rsc/41/frm/jquery/cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/41/frm/SCEditor/src/jquery.sceditor.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/41/frm/SCEditor/src/sceditor-commands.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/41/frm/SCEditor/src/instance-sceditor.js"></script>
  Bài viết hay nhất22
Mấy cái hướng dẫn tabs rắc rối quá... <(")
Cảm ơn huynh về mấy cái đoạn dư nha :v
  Bài viết hay nhất23
Code:
$("#submit").click(function(){
     var item = $("#text_editor_textarea").html();
        if (item != '') {
            if (Number($(".points").text()) >= 2000) {
        window.location = '/forum';
            } else {
                alert("Xin lỗi bạn cần ít nhất 2000 $ để thực hiện các chức năng trong Shop")
            }
        } else {
            alert('Giỏ hàng trống. Vui lòng chọn Vật phẩm trước khi chuyển sang bước tiếp theo...')
        }
 });

Ta đang bí bỏ chỗ này...
  Bài viết hay nhất24
Cái giỏ hàng trống gì đó có cái đoạn code của huynh vống rồi, khi còn trống sẽ ẩn nút gửi đi :3

Code:
if (Number($(".points").text()) >= 2000) {
        window.location = '/forum';
            } else {
                alert("Xin lỗi bạn cần ít nhất 2000 $ để thực hiện các chức năng trong Shop")
cái window.location = '/forum'; là thế lào?

Cập nhật thêm khung báo chưa đủ 100 Points :v
  Bài viết hay nhất25

không hiện tên + point + bài gữi
mới vào nó báo k đủ 100 point trong khi mình hơn 9k point @@
demo http://www.nhipsongcva.cf/h69-page
You cannot reply to topics in this forum