Fancybox - Swiper

 

Download: tại đây

#### Demo 2: ####

Download: Tại đây

Jquery click Menu không dùng ID cho thẻ div

**** HTML

 <div class="footnow-menu">            

    <div class="item-footer">

        <div class="footer-menu-title">

            Khám phá Coollook

        </div>

        <div class="footer-menu-content">

            foot__menu(24);

        </div>

    </div>

    <div class="item-footer">

        <div class="footer-menu-title">

            Dịch vụ khách hàng

        </div>

        <div class="footer-menu-content">

            foot__menu(33);

        </div>

    </div>    

</div>

**** JS

function menuToggle() {    

    const menuSelect = $('.footnow-menu');

    $(document).on('click', '.item-footer', function () {

        const _this = $(this);

        const menuSelected = _this.find('.footer-menu-title');

        const menuSelectToggle = _this.find('.footer-menu-content');

        const menuSelectToggleSib = $('.footer-menu-content');

        const menuSelectedSib = $('.footer-menu-title');

        if(menuSelected.hasClass('is-active')) {

            menuSelectToggleSib.slideUp();

            menuSelectedSib.removeClass('is-active');

        } else {

            menuSelectToggleSib.slideUp();

            menuSelectedSib.removeClass('is-active');

            menuSelectToggle.slideDown();

            menuSelected.addClass('is-active');

        }

    });

}

$(document).ready(function(e) {
menuToggle();
});

**** CSS

.footer-menu-content{

    display: none;

}

.footer-menu-title {

    position: relative;

    color: #fff;

    font-size: 14px;

    font-family: 'coollook';

}

.footer-menu-title i {

    position: absolute;

    right: 0;

    top: 8px;

    cursor: pointer;

}

.item-footer {

    padding-bottom: 25px;

}

.footer-menu-title:before,

.footer-menu-title:after {

    content: "";

    position: absolute;

    top: 50%;

    right: 0;

    width: 12px;

    height: 2px;

    border-radius: 10px;

    background-color: #fff;

    margin-top: -1px;

}

.footer-menu-title.is-active:after {

    transform: rotate(0deg);

}

.footer-menu-title:after {

    transform: rotate(90deg);

    transform-origin: center center;

    transition: all .3s;

    position: absolute;

}

.footnow-menu {
    margin-top: 20px;
}

.footer-menu-content > ul {

    padding: 0;

    margin: 0;

    list-style: none;

    padding: 0 10px;

}

.footer-menu-content > ul > li {

    padding-top: 10px;

}

.footer-menu-content > ul > li > a {

    color: #9d9292 !important;

    font-family: 'coollook';

    font-size: 14px;

}

Hiệu ứng xuất hiện và ẩn trong vài giây

****HTML 

<div class="notify">Bạn chưa chọn loại sản phẩm.</div>

****CSS 

.notify {

    position: fixed;

    top: 20px;

    right: -340px;

    width: 300px;

    transition: all .2s;

    box-sizing: border-box;

    z-index: 99999;

    background: #fff;

    border: 1px solid #d9d9d9;

    box-shadow: 0 0 8px rgba(0,0,0,.15);

    border-radius: 16px;

    padding: 18px;

    touch-action: pan-y;

    font-size: 16px;

    color: red;

    display: block !important;

    z-index: 99999999;

}

.notify.error {

    border: 2px solid #ff3102;

    box-shadow: none;

}

.notify.is-active {

    right: 20px;

}

**** Jquery

$("#no-cart").on( "click", function() {

$(".notify").addClass("is-active");

$(".notify").addClass("error");

$('.is-active').delay(1000).fadeOut();

$(".notify").fadeOut( "slow", function() {

    $(".notify").removeClass("is-active");

$(".notify").removeClass("error");

  });

// $('.is-active').delay("fast").fadeIn();

// $('.error').delay(1000).fadeOut();

});

ajax-sotatec

 **** Java

<script type="text/javascript">

function addcart(pid, client){
$.post("addbasket.php",{ 'pid':pid,'client':client},function(data){ $('#id_cart').html(data);

});
        }

</script>

**** Html

<a href="#" onclick="addcart(99,'CL_99')">Mua hàng</a>

**** PHP - addbasket

<?php

//connect database

$dbhost = "localhost";

$dbuname = "username"; // username

$dbpass = "password"; // password

$dbname = "database"; // database

$prefix = "data_viettat"; // nv92c95

$site_live = "/";

$link = mysql_connect('localhost', $dbuname, $dbpass);

if (!$link) {

    die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db($dbname, $link);

if (!$db_selected) {

    die ('Can\'t use : ' . mysql_error());

}

mysql_query("SET NAMES 'utf8'", $link);

//Lấy giá trị pid truyền vào từ function addcart của trang index

$pid = $_POST['pid'];

//Lấy session của user - giống function add_basket trong modules Shoping

$client = $_POST['client'];

if(empty($client)){

die ('Error');

}

$gresult = mysql_query("SELECT * FROM ".$prefix."_shop a,".$prefix."_shop_lang b WHERE a.pid=b.pid AND b.lang_id=1 AND a.pid='$pid'", $link);

$goods = mysql_fetch_assoc($gresult);

$gnnn = "SELECT * FROM ".$prefix."_shop_usercat WHERE g_uname='$client' AND g_pid='$goods[pid]'";

$result = mysql_query($gnnn, $link);

$g2nnn = mysql_fetch_assoc($result);

$nnn = mysql_num_rows($result);

if ($nnn == 0) 

{

if($goods["saleoff_price"] && ($goods["saleoff_date"]==0 || $goods["saleoff_date"] < time()))

{ 

$price = $goods['saleoff_price'];

}

else

{

$price = $goods['price'];

}

$xdate = time();

$title = $goods['title'];

//so luong san pham

$counter=1;

mysql_query("INSERT INTO ".$prefix."_shop_usercat (gid, g_uname, g_pid, g_title, g_price, g_count, g_date) VALUES (NULL, '$client', '$goods[pid]', '$title', '$price', '$counter', '$xdate')");

}else{

$gidnnn = $g2nnn[gid];

$gcountnnn = $g2nnn[g_count];

$gcountnnn = $gcountnnn+1;

mysql_query("UPDATE ".$prefix."_shop_usercat SET g_count='$gcountnnn' WHERE gid='$gidnnn'");

}

echo"Add item successfully";

if($client=="") $da = array("num"=>0,"money"=>0);

$sql ="SELECT a.*, b.title as langtitle FROM ".$prefix."_shop_usercat a  left join  ".$prefix."_shop_lang  b  ON  b.pid = a.g_pid  WHERE b.lang_id= 1 and a.g_uname='$client'";

  

  $gresult2 = mysql_query($sql);

$num   = mysql_num_rows($gresult2);

if (!$num)

return array("num"=>0,"money"=>0);

while ($row = mysql_fetch_assoc($gresult2)){

$data[]=$row;

}

$sum = 0;

for($i=0;$i<count($data);$i++){

$price = $data[$i]['g_price'];

$count = $data[$i]['g_count']; 

$total= $count * $price;

$sum =$sum + $total; 

}

$da = array("num"=>$num,"money"=>$sum);

echo"<br>";

//print_r($da);

echo"Shoping Cart : ".$num." Item - "; echo"".$english_format_number = number_format($sum)." VND";

function format_price($price){

return number_format($price, 0, '.', '.');

}

?>

Thêm bớt số lượng mua sản phẩm

Download: Tại đây
Demo: Saminfood 

script load thông tin

Link view: https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_database

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<h2>The XMLHttpRequest Object</h2>

<form action=""> 
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

<script>
function showCustomer(str) {
  var xhttp;    
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.asp?q="+str, true);
  xhttp.send();
}
</script>

</body>
</html>

Add to cart ajax

<script type="text/javascript">
    function addcart(pid, client){
        //$.post("addbasket.php", { 'pid': pid, 'client': client} ,
        // trong javascript duong dan "../../" khong giong duong dan khac
        load_block();               
        $.post("addbasket.php", { 'pid': pid, 'client': client} ,       
        function(data){           
            $('.id_cart').html(data);           
        });   
    }
});
</script> 
<body>
          <div id="id_cart"></div>
</body>

download : tại đây
#--------------------------------------------------------------------#

<script type="text/javascript">   
    function load_block(){
        $.post('modules.php', {name:"Shoping",op:"display_cart_ajax"}, function(data, textStatus, xhr) {
            if(parseInt(data)==0){
                console.log("Khong co du lieu");
                $(".id_cart").html("");
            }else{
                console.log("Da load xong block");
                $(".id_cart").html(data);                   
            }
        });
    }   
    $(document).ready(function(){                  
        load_block();   
    $('.cart').click(function(event) {
        var soluong = $(this).val();
        var pid     = $(this).val();
        $.ajax({
            url: 'modules.php',
            type: 'post',
            dataType: 'html',
            data: {name:"Shoping",op:"add_basket_ajax",soluong:soluong,pid:pid},
        })
        .done(function(data) {
            console.log(data)    ;
            if(parseInt(data)==1){
                load_block();
            }else{
                alert("error");
            }

        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });       
    });;      
});
</script>
download: tại đây

#-----------------------------------------------------------------------# 

<body>
            <div class='shop-cart'></div>";
            <div class='shop-nen'><span>0</span></div>
</body>

<script type="text/javascript">       

        function load_block(){
        $.post('modules.php', {name:"Shoping",op:"display_cart_ajax"}, function(data, textStatus, xhr) {
            if(parseInt(data)==0){
                console.log("Khong co du lieu");
                $(".shop-cart").html("");
            }else{
                console.log("Da load xong block");
                $(".shop-nen").css({display:"none"});
                $(".shop-cart").html(data);
            }
               
        });
    }
   
    $(document).ready(function(){                  
            load_block();

            $('.cart').click(function(event) {
                var soluong = $(this).val();
                var pid     = $(this).val();
                $.ajax({
                    url: 'modules.php',
                    type: 'post',
                    dataType: 'html',
                    data: {name:"Shoping",op:"add_basket_ajax",soluong:soluong,pid:pid},
                })
                .done(function(data) {
                    console.log(data)    ;
                    if(parseInt(data)==1){
                        load_block();
                    }else{
                        alert("error");
                    }   

                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                });
               
            });; 

ajax event ( change ) chuyền biến

 

 **** html 

<input type="checkbox" id=" data_id="73" class="act_box"  value="1" >

keypress - jquery

download : tại đây

ajax tab

download :tại đây

jquery - ajax (localhost/cantien)

chú ý trong ajax :
bỏ phần  :  
              + include(header.php);
              + include(footer.php); 
    ------||  chỉ cần lấy <div > là đủ

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>   
   
    <script type="text/javascript">
    $(document).ready(function(){
   
        $("a.chicago").click(function(){   
            var opost=$(this).attr("title");       
            $(".yuo4-body").load("<?php echo"".$site_live."modules.php?name=Shoping&op=display_ajax&cid=";?>"+opost+"<?php echo"&newlang=$currentlang";?>");               
            return false;
            // return false : thuc hien cac lenh tren & khong chuyen trang
        });   
       
        /*$("a.anhem").click(function(){   
            var mau=$(this).attr("title");
            $(".bbbb").load("< ?php echo"".$site_live."modules/Shoping/ajax.php?opi=".mau?>");               
            return false;
        });*/
       
        $("a.bent").click(function(){           
        $(".sanpham-body").load("bjax.php");                   
            return false;
        });
           
    });
    </script>
**** html
echo'<li><a class="chicago" href="#">sản phẩm</a></li>';