Mua hàng giao diện mới

 Download: tại đây

Download-new: tại đây

Mua Hàng (Add-To-Cart)

 Demo: netwindow - Link: Tại đây

**** HTML

<div  class="Product-detail">

## Số Lượng

<div class="box_qty" data-price="" data-id="">

<button type="button" class="qty-minus">

<span class="icon__fallback-text" aria-hidden="true">−</span>

</button>

<input readonly="" type="text" name="quantity" min="0" id="quantity" value="1" class="tc item-quantity">

<button type="button" class="qty-plus">

<span class="icon__fallback-text" aria-hidden="true">+</span>

</button>

</div>

## Button

<button id="add-to-cart" class="add-to-cart" name="add" data-pid="1">"Thêm vào giỏ" after</button>

</div>

**** JS

// product quantity

$('.product-detail, #quick-view-modal').on('click', '.box_qty .qty-minus', function(){

    var quantity = parseInt($(this).parent('.box_qty').find('input').val());

    var price = parseInt($(this).parent('.box_qty').data('price'));

    var id = $(this).parent('.box_qty').data('id');

    quantity = quantity - 1;

    if(quantity < 1) quantity = 1;

    $(this).parent('.box_qty').find('input').val(quantity);

});

$('.product-detail, #quick-view-modal').on('click', '.box_qty .qty-plus', function(){

    var quantity = parseInt($(this).parent('.box_qty').find('input').val());

    var price = parseInt($(this).parent('.box_qty').data('price'));

    var id = $(this).parent('.box_qty').data('id');

    quantity = quantity + 1;

    $(this).parent('.box_qty').find('input').val(quantity);

});

// add-to-cart

$("#add-to-cart").click(function() {

    var pid      = $(this).attr("data-pid");

    var soluong  = $("#quantity").val();

    $('#add-to-cart').addClass('loading');

    $.ajax({

        url: '/modules.php',

        type: 'POST',

        dataType: 'html',

        data: {name:'sanpham',op:'add_basket_ajax',pid:pid,soluong:soluong},

    })

    .done(function(data) {

        load__giohang();

        load__tien__muasp();

        load__soluong__sanpham();

        setTimeout(function() {

            $('#add-to-cart').removeClass('loading');

            $(".woodmart-close-side").addClass("woodmart-close-side-opened");

            $(".cart-widget-side").addClass("woodmart-cart-opened");

        }, 2000);

        $(".woocommerce-mini-cart").html(data);

        $(".load-money").load("/modules.php?name=sanpham&op=load__tien__muasp");

    });

});

**** CSS:

.widget_shopping_cart .remove:after {

    font-weight: 700;

    font-size: 14px;

    content: "\f00d";

    font-family: 'FontAwesome';

}

.widget_shopping_cart .remove:hover{

text-decoration: none;

}

.cart-widget-side, .login-form-side, .mobile-nav {

    position: fixed;

    top: 0;

    bottom: 0;

    z-index: 500;

    overflow: hidden;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    width: 340px;

    background-color: #FFF;

    transition: -webkit-transform .25s ease;

    transition: transform .25s ease;

    transition: transform .25s ease,-webkit-transform .25s ease;

}

.cart-widget-side, .login-form-side, .slide-from-right {

    right: 0;

    left: auto;

    -webkit-transform: translate3d(340px,0,0);

    transform: translate3d(340px,0,0);

}

.cart-widget-side {

    display: flex;

    flex-direction: column;

}

.widget-heading {

    display: flex;

    flex: 0 0 auto;

    align-items: center;

    flex-direction: row;

    justify-content: flex-end;

    padding-top: 20px;

    padding-right: 15px;

    padding-bottom: 20px;

    padding-left: 15px;

    border-bottom: 1px solid;

    font-family: 'saminfood';

}

.widget-title, .widgettitle {

    margin-bottom: 20px;

    color: #2d2a2a;

    text-transform: uppercase;

    font-weight: 600;

    font-size: 16px;

}

.widget-heading .widget-title {

    flex: 1 1 auto;

    margin-bottom: 0;

    font-size: 20px;

    font-family: 'saminfood';

}

.widget-heading .close-side-widget {

    position: relative;

    flex: 0 0 auto;

    color: #2d2a2a;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: .3px;

    font-weight: 600;

    font-size: 13px;

    line-height: 30px;

    padding-right: 21px;

    cursor: pointer;

}

.widget-heading .close-side-widget:before {

    -webkit-transform: rotate(0);

    transform: rotate(0);

}

.widget-heading .close-side-widget:after, .widget-heading .close-side-widget:before {

    content: " ";

    position: absolute;

    top: 50%;

    display: inline-block;

    margin-top: -1px;

    width: 15px;

    height: 2px;

    background-color: currentColor;

    transition: background-color .2s ease-in-out,width .2s ease-in-out,-webkit-transform .2s ease-in-out;

    transition: background-color .2s ease-in-out,transform .2s ease-in-out,width .2s ease-in-out;

    transition: background-color .2s ease-in-out,transform .2s ease-in-out,width .2s ease-in-out,-webkit-transform .2s ease-in-out;

    right: 0;

}

.cart-widget-side .widget_shopping_cart {

    position: relative;

    display: flex;

    flex: 1 1 auto;

    align-items: stretch;

    flex-direction: column;

}

.widget:last-child {

    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: none;

}

.cart-widget-side .widget_shopping_cart_content {

    display: flex;

    flex: 1 1 auto;

    align-items: stretch;

    flex-direction: column;

    justify-content: space-between;

}

.woodmart-scroll {

    position: relative;

    flex: 1 1 auto;

    overflow: hidden;

    width: 100%;

    height: 100%;

}

.cart-widget-side .shopping-cart-widget-footer {

    flex: 0 0 auto;

}

.cart-widget-side .widget_shopping_cart .shopping-cart-widget-footer {

    margin-top: 0;

}

/*** loading****************/

.added_to_cart{

    padding: 12px 20px;

    font-size: 13px;

    line-height: 18px;

    background-color: #F3F3F3;

    color: #3E3E3E;

    position: relative;

    display: inline-block;

    outline: 0;

    border-width: 0;

    border-style: solid;

    border-color: transparent;

    border-radius: 0;

    box-shadow: none;

    vertical-align: middle;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    text-shadow: none;

    letter-spacing: .3px;

    font-weight: 600;

    cursor: pointer;

    transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease;

}

.add-to-cart:after {

    position: absolute;

    top: 50%;

    left: 50%;

    margin-top: -9px;

    margin-left: -9px;

    opacity: 0;

    transition: opacity 0s ease;

    content: "";

    display: inline-block;

    width: 18px;

    height: 18px;

    border: 1px solid rgba(255,255,255,.3);

    border-left-color: #FFF;

    border-radius: 50%;

    vertical-align: middle;

}

.loading.add-to-cart:after{

    opacity: 1;

    transition: opacity .25s ease;

    -webkit-animation: wd-rotate 450ms infinite linear;

    animation: wd-rotate 450ms infinite linear;

}

.widget_shopping_cart .mini_cart_item a {

    text-decoration: none;

}

.del-giohang {

    position: absolute;

    top: 15px;

    right: 10px;

    z-index: 2;

    margin-bottom: 0;

    padding-right: 0;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    color: rgba(0,0,0,.8);

    text-align: center;

    font-size: 0;

    line-height: 20px;

}

.del-giohang:after {

    font-weight: 700;

    font-size: 14px;

    content: "\f00d";

    font-family: 'FontAwesome';

}

/******************/  

.cart-widget-side{

    position: fixed;

    top: 0;

    bottom: 0;

    z-index: 500000;

    overflow: hidden;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    width: 340px;

    background-color: #FFF;

    transition: -webkit-transform .25s ease;

    transition: transform .25s ease;

    transition: transform .25s ease,-webkit-transform .25s ease;

    display: flex;

    flex-direction: column;

    right: 0;

    left: auto;

    -webkit-transform: translate3d(340px,0,0);

    transform: translate3d(340px,0,0);

}

.woodmart-close-side {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 400;

    opacity: 0;

    visibility: hidden;

    background-color: rgba(0,0,0,.7);

    transition: opacity .25s ease,visibility 0s ease .25s;

}

.woodmart-close-side-opened {

    opacity: 1;

    visibility: visible;

    transition: opacity .25s ease,visibility 0s ease;

}

.cart-widget-side.woodmart-cart-opened {

    -webkit-transform: none;

    transform: none;

}

.widget_shopping_cart .total strong {

    color: #2d2a2a;

    text-transform: uppercase;

    font-weight: 600;

    font-size: 16px;

    font-family: 'saminfood';

}

span.woocommerce-Price-amount.amount bdi {

    font-size: 17px;

    font-family: 'saminfood';

}

center.giohang-del h2 {

    font-family: 'saminfood';

    font-size: 22px;

}

a.button.btn-cart.wc-forward {

    font-family: 'saminfood';

}

a.button.checkout.wc-forward {

    font-family: 'saminfood';

}

/* css- gio-hang */

.box_qty {

    margin: 0;

    max-width: 100px;

    position: relative;

}

.box_qty button:hover {

    background: #f2f2f2;

}

.box_qty button.qty-minus {

    left: 1px;

    border-radius: 3px 0 0 3px;

}

.box_qty input {

    display: block;

    text-align: center;

    width: 100%;

    padding: 2px 20px;

    border-radius: 3px;

    font-size: 16px;

    font-weight: bold;

    border: 0;

    line-height: 17px;

}

.tc.item-quantity {

    padding: 10px 20px 10px;

    background: #fff;

    border-radius: 3px;

    border: 1px solid #d8d7d7;

}

.box_qty button {

    cursor: pointer;

    position: absolute;

    display: block;

    top: 1px;

    bottom: 0;

    border: 0 none;

    padding: 0 8px;

    background: none;

    text-align: center;

    overflow: hidden;

    line-height: 1;

    transition: all 0.2s ease-out;

    font-size: 16px;

    font-weight: bold;

    height: 37px;

}

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, '.', '.');

}

?>