Cart
.php
<
?php
/**
* Cus
tom Cart
Page for WooCommerce with Selective Checkout
* RECOMMENDED LOCATI
ON (Woo override):
* /wp
-c
ontent/themes/your
-child
-theme/woocommerce/cart/cart
.php
* ALTERNATIVE (if your site is wired this way):
* /wp
-c
ontent/themes/woodmart
-child/cart
.php
*/
if (!def
ined('ABSPATH')) {
exit;
}
do_acti
on('woocommerce_before_cart');
// Provide t
iny c
ontext for JS (
invisible; no layout change)
$pc_cart_is_empty = WC()
->cart
->is_empty();
functi
on pc_uid_for_view() {
if (is_user_logged_
in()) return 'user_'
. get_current_user_id();
if (empty($_COOKIE['pc_cart_uid'])) {
$
token = wp_generate_uuid4();
setcookie('pc_cart_uid', $
token, time() + YEAR_
IN_SEC
ONDS, COOKIEPATH
?: '/', '', is_ssl(), false);
$_COOKIE['pc_cart_uid'] = $
token;
}
return 'guest_'
. sanitize_text_field(wp_unslash($_COOKIE['pc_cart_uid']));
}
$pc_uid = pc_uid_for_view();
?>
<div class="cart
-page-secti
on c
onta
iner" style="max
-width: 1
200px; marg
in:
0 au
to;">
<form class="woocommerce
-cart
-form" acti
on="<
?php echo esc_url( wc_get_cart_url() );
?>" method="post">
<
?php do_acti
on('woocommerce_before_cart_table');
?>
<
?php wp_n
once_field('woocommerce
-cart', 'woocommerce
-cart
-n
once');
?>
<table class="shop_table shop_table_resp
onsive cart woocommerce
-cart
-form__c
ontents">
<thead>
<tr>
<th class="
product-select" style="width: 8%;">
<
input type="checkbox" id="select
-all
-items" />
<label for="select
-all
-items" style="display:
inl
ine
-block; marg
in-left: 5px; cursor: po
inter;">全选</label>
</th>
<th class="
product-info"><
?php esc_html_e('
Product', 'woocommerce');
?></th>
<th class="
product-price"><
?php esc_html_e('Price', 'woocommerce');
?></th>
<th class="
product-quantity"><
?php esc_html_e('Quantity', 'woocommerce');
?></th>
<th class="
product-sub
total"><
?php esc_html_e('Sub
total', 'woocommerce');
?></th>
<th class="
product-remove"><
?php esc_html_e('操作', 'woocommerce');
?></th>
</tr>
</thead>
<tbody>
<
?php do_acti
on('woocommerce_before_cart_c
ontents');
?>
<
?php foreach ( WC()
->cart
->get_cart() as $cart_item_key => $cart_item ) :
?>
<
?php
$_
product = apply_filters('woocommerce_cart_item_
product', $cart_item['data'], $cart_item, $cart_item_key);
$
product_id = apply_filters('woocommerce_cart_item_
product_id', $cart_item['
product_id'], $cart_item, $cart_item_key);
if ( $_
product && $_
product->exists() && $cart_item['quantity'] >
0 && apply_filters('woocommerce_cart_item_visible', true, $cart_item, $cart_item_key) ) :
$
product_permal
ink = apply_filters('woocommerce_cart_item_permal
ink', $_
product->is_visible()
? $_
product->get_permal
ink($cart_item) : '', $cart_item, $cart_item_key);
$l
ine_
total_value = (float) ($cart_item['l
ine_
total'] + $cart_item['l
ine_tax']);
$variati
on_id = isset($cart_item['variati
on_id'])
? (
int)$cart_item['variati
on_id'] :
0;
$variati
on_data = isset($cart_item['variati
on'])
? $cart_item['variati
on'] : array();
$variati
on_js
on = wp_js
on_encode($variati
on_data);
?>
<tr class="woocommerce
-cart
-form__cart
-item <
?php echo esc_attr( apply_filters('woocommerce_cart_item_class', 'cart_item', $cart_item, $cart_item_key) );
?>"
data
-cart_item_key="<
?php echo esc_attr($cart_item_key);
?>"
data
-product_id="<
?php echo esc_attr($
product_id);
?>"
data
-variati
on_id="<
?php echo esc_attr($variati
on_id);
?>"
data
-variati
on="<
?php echo esc_attr($variati
on_js
on);
?>">
<!
-- Checkbox Column
-->
<td class="
product-select" data
-title="<
?php esc_attr_e('Select', 'woocommerce');
?>">
<
input type="checkbox"
class="item
-checkbox"
name="selected_items[]"
value="<
?php echo esc_attr($cart_item_key);
?>"
data
-price="<
?php echo esc_attr($l
ine_
total_value);
?>" />
</td>
<!
-- Product Info Column
-->
<td class="
product-info" data
-title="<
?php esc_attr_e('
Product', 'woocommerce');
?>">
<div class="
product-image">
<
?php
$thumbnail = apply_filters('woocommerce_cart_item_thumbnail', $_
product->get_image(), $cart_item, $cart_item_key);
if ( ! $
product_permal
ink ) :
echo $thumbnail; // PHPCS: XSS ok
.
else :
pr
intf('<a href="%s">%s</a>', esc_url($
product_permal
ink), $thumbnail); // PHPCS: XSS ok
.
endif;
?>
</div>
<div class="
product-name">
<
?php
if ( ! $
product_permal
ink ) :
echo wp_kses_post( apply_filters('woocommerce_cart_item_name', $_
product->get_name(), $cart_item, $cart_item_key)
. ' ' );
else :
echo wp_kses_post( apply_filters('woocommerce_cart_item_name', spr
intf('<a href="%s">%s</a>', esc_url($
product_permal
ink), $_
product->get_name()), $cart_item, $cart_item_key) );
endif;
do_acti
on('woocommerce_after_cart_item_name', $cart_item, $cart_item_key);
echo wc_get_formatted_cart_item_data($cart_item); // PHPCS: XSS ok
.
?>
</div>
</td>
<!
-- Price Column
-->
<td class="
product-price" data
-title="<
?php esc_attr_e('Price', 'woocommerce');
?>">
<
?php
echo apply_filters('woocommerce_cart_item_price', WC()
->cart
->get_
product_price($_
product), $cart_item, $cart_item_key); // PHPCS: XSS ok
.
?>
</td>
<!
-- Quantity Column
-->
<td class="
product-quantity" data
-title="<
?php esc_attr_e('Quantity', 'woocommerce');
?>">
<
?php
if ( $_
product->is_sold_
individually() ) :
$
product_quantity = spr
intf('1 <
input type="hidden" name="cart[%s][qty]" value="1" />', $cart_item_key);
else :
$
product_quantity = woocommerce_quantity_
input(
array(
'
input_name' => "cart[{$cart_item_key}][qty]",
'
input_value' => $cart_item['quantity'],
'max_value' => $_
product->get_max_purchase_quantity(),
'm
in_value' => '
0',
'
product_name' => $_
product->get_name(),
),
$_
product,
false
);
endif;
echo apply_filters('woocommerce_cart_item_quantity', $
product_quantity, $cart_item_key, $cart_item); // PHPCS: XSS ok
.
?>
<small class="qty
-status" style="display:n
one;marg
in-left:8px;color:#666;">保存中…</small>
</td>
<!
-- Sub
total Column
-->
<td class="
product-sub
total" data
-title="<
?php esc_attr_e('Sub
total', 'woocommerce');
?>">
<
?php
echo apply_filters('woocommerce_cart_item_sub
total', WC()
->cart
->get_
product_sub
total($_
product, $cart_item['quantity']), $cart_item, $cart_item_key); // PHPCS: XSS ok
.
?>
</td>
<!
-- Remove Item Column
-->
<td class="
product-remove" data
-title="<
?php esc_attr_e('操作', 'woocommerce');
?>">
<
?php
echo apply_filters('woocommerce_cart_item_remove_l
ink', spr
intf(
'<a href="%s" class="remove" aria
-label="%s" data
-product_id="%s" data
-product_
sku="%s">×</a>',
esc_url( wc_get_cart_remove_url($cart_item_key) ),
esc_attr__('Remove this item', 'woocommerce'),
esc_attr($
product_id),
esc_attr($_
product->get_
sku())
), $cart_item_key);
?>
</td>
</tr>
<
?php endif;
?>
<
?php endforeach;
?>
<
?php do_acti
on('woocommerce_after_cart_c
ontents');
?>
</tbody>
</table>
<
?php do_acti
on('woocommerce_after_cart_table');
?>
</form>
</div>
<!
-- Sticky Footer
-->
<div class="cart
-footer
-acti
ons sticky
-footer" style="positi
on: sticky; bot
tom:
0; background: white; padd
ing: 15px; border
-top: 1px solid #ddd; max
-width: 1
200px; marg
in:
0 au
to;">
<div style="display: flex; justify
-c
ontent: space
-between; align
-items: center; marg
in-bot
tom: 1
0px;">
<div class="footer
-left">
<
input type="checkbox" id="footer
-select
-all">
<label for="footer
-select
-all" style="display:
inl
ine
-block; marg
in-left: 5px; cursor: po
inter;">全选</label>
<but
ton type="but
ton" class="but
ton" id="remove
-selected
-items">刪除選中的商品</but
ton>
<but
ton type="but
ton" class="but
ton" id="clear
-cart">清空購物車</but
ton>
</div>
<div class="coup
on-secti
on">
<
input type="text" name="coup
on_code" class="
input
-text" id="coup
on_code" value="" placeholder="输入优惠券代码" style="padd
ing: 8px; width:
200px; border: 1px solid #ddd; border
-radius: 4px; marg
in-right: 5px;" />
<but
ton type="but
ton" class="but
ton" id="apply
-coup
on">应用优惠券</but
ton>
</div>
</div>
<div style="display: flex; justify
-c
ontent: space
-between; align
-items: center;">
<div class="selected
-summary" style="f
ont
-size: 16px; f
ont
-weight: bold;">
已选商品: <span id="selected
-count">
0</span> 件，共计: <span id="selected
-total">RM
0.00</span>
</div>
<a href="<
?php echo esc_url( wc_get_checkout_url() );
?>" class="checkout
-but
ton but
ton alt wc
-forward" id="partial
-checkout">结算</a>
</div>
</div>
<
?php do_acti
on('woocommerce_after_cart');
?>
<style>
/* Your orig
inal styles exactly un
touched */
<
?php /* Keep
ing exactly your CSS c
ontent */
?>
.cart
-page-secti
on {
background: white;
padd
ing: 3
0px;
border
-radius: 8px;
box
-shadow:
0 0 1
0px rgba(
0,
0,
0,
0.1);
marg
in-bot
tom: 3
0px;
}
.cart
-page-secti
on table
.cart {
width: 1
00%;
border
-collapse: collapse;
marg
in-bot
tom:
20px;
}
.cart
-page-secti
on table
.cart th,
.cart
-page-secti
on table
.cart td {
padd
ing: 15px;
text
-align: left;
border
-bot
tom: 1px solid #eee;
}
.cart
-page-secti
on table
.cart th {
background
-color: #f8f8f8;
f
ont
-weight: bold;
}
.cart
-page-secti
on table
.cart th
.product-select,
.cart
-page-secti
on table
.cart td
.product-select {
width: 8%;
text
-align: center;
vertical
-align: middle;
white
-space: nowrap;
}
.cart
-page-secti
on table
.cart td
.product-info {
width: 37%;
vertical
-align:
top;
}
.cart
-page-secti
on table
.cart
.product-info
.product-image {
float: left;
marg
in-right: 15px;
width: 1
00px;
height: 1
00px;
}
.cart
-page-secti
on table
.cart
.product-info
.product-image img {
max
-width: 1
00%;
height: au
to;
display: block;
}
.cart
-page-secti
on table
.cart
.product-info
.product-name {
overflow: hidden;
}
.cart
-page-secti
on table
.cart td
.product-price,
.cart
-page-secti
on table
.cart td
.product-quantity,
.cart
-page-secti
on table
.cart td
.product-sub
total {
width: 15%;
vertical
-align: middle;
}
.cart
-page-secti
on table
.cart td
.product-remove {
width: 5%;
text
-align: center;
vertical
-align: middle;
}
.cart
-footer
-acti
ons {
positi
on: sticky;
bot
tom:
0;
background: #fff;
padd
ing: 15px;
border
-top: 1px solid #ddd;
box
-shadow:
0 -2px 1
0px rgba(
0,
0,
0,
0.1);
z
-index: 1
000;
display: flex;
flex
-directi
on: column;
gap: 15px;
}
.footer
-left {
display: flex;
align
-items: center;
flex
-wrap: wrap;
gap: 1
0px;
}
.coup
on-secti
on {
display: flex;
align
-items: center;
gap: 5px;
}
.selected
-summary {
f
ont
-size: 16px;
f
ont
-weight: bold;
flex: 1;
}
.cart
-footer
-acti
ons
.but
ton {
padd
ing: 1
0px
20px;
background
-color: #f44336;
color: white;
border: n
one;
border
-radius: 4px;
cursor: po
inter;
f
ont
-size: 14px;
transiti
on: background
-color
0.3s;
white
-space: nowrap;
}
.cart
-footer
-acti
ons
.but
ton:hover {
background
-color: #d3
2f
2f;
}
#partial
-checkout {
padd
ing: 1
2px
24px;
background
-color: #
2196F3;
color: white;
text
-decorati
on: n
one;
border
-radius: 4px;
display:
inl
ine
-block;
transiti
on: background
-color
0.3s;
white
-space: nowrap;
text
-align: center;
f
ont
-weight: bold;
}
#partial
-checkout:hover {
background
-color: #
0b7dda;
}
#coup
on_code {
padd
ing: 8px;
width:
200px;
border: 1px solid #ddd;
border
-radius: 4px;
transiti
on: border
-color
0.3s;
}
#coup
on_code:focus {
border
-color: #
2196F3;
outl
ine: n
one;
}
@media (max
-width: 768px) {
.cart
-page-secti
on table
.cart thead { display: n
one; }
.cart
-page-secti
on table
.cart td {
display: block;
width: 1
00% !important;
text
-align: right;
padd
ing: 1
0px;
positi
on: relative;
padd
ing
-left: 5
0%;
}
.cart
-page-secti
on table
.cart td::before {
c
ontent: attr(data
-title);
positi
on: absolute;
left: 15px;
f
ont
-weight: bold;
text
-align: left;
}
.cart
-page-secti
on table
.cart
.product-info
.product-image {
float: n
one;
marg
in:
0 au
to 1
0px;
}
.cart
-page-secti
on table
.cart td
.product-select::before { c
ontent: "选择"; }
.cart
-footer
-acti
ons { flex
-directi
on: column; align
-items: flex
-start; }
.footer
-left { width: 1
00%; justify
-c
ontent: space
-between; }
.coup
on-secti
on { width: 1
00%; marg
in-top: 1
0px; }
.coup
on-secti
on input { flex: 1; }
.cart
-footer
-acti
ons
.footer
-bot
tom
-row { flex
-directi
on: column; align
-items: stretch; }
.selected
-summary { text
-align: center; marg
in-bot
tom: 1
0px; }
#partial
-checkout { width: 1
00%; padd
ing: 15px; }
.cart
-footer
-acti
ons
.but
ton { padd
ing: 1
2px 15px; marg
in: 5px
0; width: 1
00%; text
-align: center; }
}
@media (max
-width: 48
0px) {
.cart
-page-secti
on { padd
ing: 15px; }
.cart
-page-secti
on table
.cart td { padd
ing
-left: 45%; }
.cart
-page-secti
on table
.cart td::before { f
ont
-size: 14px; }
.cart
-footer
-acti
ons { padd
ing: 1
0px; }
#coup
on_code { width: 1
00%; }
}
<style>
/* 添加加载动画样式 */
.quantity
-sav
ing
-overlay {
positi
on: absolute;
top:
0;
left:
0;
width: 1
00%;
height: 1
00%;
background: rgba(
255,
255,
255,
0.8);
display: flex;
align
-items: center;
justify
-c
ontent: center;
z
-index: 1
0;
border
-radius: 4px;
}
.quantity
-sav
ing
-loader {
width:
24px;
height:
24px;
border: 3px solid #f3f3f3;
border
-top: 3px solid #3498db;
border
-radius: 5
0%;
animati
on: sp
in 0.8s l
inear
inf
inite;
}
@keyframes sp
in {
0% { transform: rotate(
0deg); }
1
00% { transform: rotate(36
0deg); }
}
/* 使数量输入框容器相对定位 */
.product-quantity
.quantity {
positi
on: relative;
}
</style>
<script>
jQuery(functi
on($){
// C
ontext
var PC = {
ajax_url: (w
indow
.wc_cart_params && w
indow
.wc_cart_params
.ajax_url) || '<
?php echo esc_url( adm
in_url("adm
in-ajax
.php") );
?>',
security: (functi
on(){
var n = $('
input[name="woocommerce
-cart
-n
once"]')
.val();
if (n) return n;
if (w
indow
.wc_cart_params && w
indow
.wc_cart_params
.cart_n
once) return w
indow
.wc_cart_params
.cart_n
once;
return '<
?php echo wp_create_n
once("woocommerce
-cart");
?>';
})(),
cart_is_empty: <
?php echo $pc_cart_is_empty
? 'true' : 'false';
?>,
cart_uid: '<
?php echo esc_js($pc_uid);
?>'
};
// Keys
functi
on lsKey(name){ return 'pc_' + name + '_' + PC
.cart_uid; }
var LS_SELECTI
ON = lsKey('selected_items');
var LS_MASTER = lsKey('cart_master');
// Utilities
functi
on getSelectedKeys(){
return $('
.item
-checkbox:checked')
.map(functi
on(){ return this
.value; })
.get();
}
functi
on fmtRM(n){ n = isNaN(n)
? 0 : n; return 'RM' + Number(n)
.toFixed(
2); }
// Selecti
on persistence
functi
on readSelecti
on(){ try { return JS
ON.parse(localS
torage
.getItem(LS_SELECTI
ON) || '[]'); } catch(e){ return []; } }
functi
on writeSelecti
on(keys){ try { localS
torage
.setItem(LS_SELECTI
ON, JS
ON.str
ingify(keys||[])); } catch(e){} }
functi
on res
toreSelecti
onFromLS(){
var saved = readSelecti
on(); if (!Array
.isArray(saved)) saved = [];
$('
.item
-checkbox')
.each(functi
on(){ $(this)
.prop('checked', saved
.indexOf(this
.value) !==
-1); });
}
w
indow
.addEvent
Listener('s
torage', functi
on(ev){
if (ev
.key === LS_SELECTI
ON) { res
toreSelecti
onFromLS(); updateSelectedSummary(); }
});
// Selected summary
functi
on updateSelectedSummary(){
var
total =
0, count =
0;
$('
.item
-checkbox:checked')
.each(functi
on(){
var price = parseFloat($(this)
.data('price'));
if (!isNaN(price)) {
total += price; count++; }
});
$('#selected
-count')
.text(count);
$('#selected
-total')
.text(fmtRM(
total));
var
totalCbs = $('
.item
-checkbox')
.length;
var checkedCbs = $('
.item
-checkbox:checked')
.length;
var allChecked =
totalCbs >
0 && checkedCbs ===
totalCbs;
$('#select
-all
-items, #footer
-select
-all')
.prop('checked', allChecked);
writeSelecti
on(getSelectedKeys());
}
// Select all
$('#select
-all
-items, #footer
-select
-all')
.off('change
.sc')
.on('change
.sc', functi
on(){
var checked = $(this)
.prop('checked');
$('
.item
-checkbox')
.prop('checked', checked);
updateSelectedSummary();
});
$(document)
.on('change', '
.item
-checkbox', updateSelectedSummary);
// Snapshot cart DOM
-> localS
torage (guest resilience)
functi
on snapshotCartFromDOM() {
var items = [];
$('tr
.cart_item')
.each(functi
on(){
var $row = $(this);
var pid = parse
Int($row
.attr('data
-product_id'),1
0)||
0;
var vid = parse
Int($row
.attr('data
-variati
on_id'),1
0)||
0;
var qty = parseFloat($row
.f
ind('
input
.qty')
.val())||
0;
var variati
on = {};
try { variati
on = JS
ON.parse($row
.attr('data
-variati
on')||'{}'); } catch(e){ variati
on = {}; }
if (pid && qty >
0) {
items
.push({
product_id: pid, variati
on_id: vid, variati
on: variati
on, quantity: qty });
}
});
try { localS
torage
.setItem(LS_MASTER, JS
ON.str
ingify({ ts: Date
.now(), items: items })); } catch(e){}
}
functi
on maybeRehydrateFromLocal() {
if (!PC
.cart_is_empty) return;
var raw = localS
torage
.getItem(LS_MASTER);
if (!raw) return;
var data; try { data = JS
ON.parse(raw); } catch(e){ return; }
var items = (data && data
.items)
? data
.items : [];
if (!items
.length) return;
$
.ajax({
url: PC
.ajax_url, method: 'POST', dataType: 'js
on',
data: { acti
on: 'pc_rehydrate_cart', security: PC
.security, items: JS
ON.str
ingify(items) }
})
.d
one(functi
on(res){
if (res && res
.success) {
// The current
page is cart; reload
to display rehydrated items
locati
on.reload();
}
});
}
// Remove selected
$('#remove
-selected
-items')
.off('click
.sc')
.on('click
.sc', functi
on(){
var keys = getSelectedKeys();
if (!keys
.length) { alert('请选择要删除的商品'); return; }
if (!c
onfirm('确定要删除选中的商品吗？')) return;
$
.ajax({
url: PC
.ajax_url, method: 'POST', dataType: 'js
on',
data: { acti
on: 'remove_selected_cart_items', selected_items: keys, security: PC
.security }
})
.d
one(functi
on(res){
if (res && res
.success) {
var saved = readSelecti
on()
.filter(functi
on(k){ return keys
.indexOf(k) ===
-1; });
writeSelecti
on(saved);
locati
on.reload();
} else {
alert((res && res
.data && (res
.data
.message || res
.data)) || '删除失败，请重试');
}
})
.fail(functi
on(){ alert('删除失败，请重试'); });
});
// Clear cart
$('#clear
-cart')
.off('click
.sc')
.on('click
.sc', functi
on(){
if (!c
onfirm('确定要清空购物车吗？')) return;
$
.ajax({
url: PC
.ajax_url, method: 'POST', dataType: 'js
on',
data: { acti
on: 'empty_cart', security: PC
.security }
})
.d
one(functi
on(res){
if (res && res
.success) {
writeSelecti
on([]);
localS
torage
.removeItem(LS_MASTER);
locati
on.reload();
} else {
alert((res && res
.data && (res
.data
.message || res
.data)) || '清空购物车失败，请重试');
}
})
.fail(functi
on(){ alert('清空购物车失败，请重试'); });
});
// Apply coup
on
$('#apply
-coup
on')
.off('click
.sc')
.on('click
.sc', functi
on(){
var code = ($
.trim($('#coup
on_code')
.val()) || '');
if (!code) { alert('请输入优惠券代码'); return; }
var $btn = $(this)
.prop('disabled', true)
.text('处理中
...');
$
.ajax({
url: PC
.ajax_url, method: 'POST', dataType: 'js
on',
data: { acti
on: 'apply_coup
on', coup
on_code: code, security: PC
.security }
})
.d
one(functi
on(res){
if (res && res
.success) {
locati
on.reload();
} else {
alert((res && res
.data && (res
.data
.message || res
.data)) || '优惠券应用失败，请重试');
$btn
.prop('disabled', false)
.text('应用优惠券');
}
})
.fail(functi
on(){
alert('发生错误，请重试');
$btn
.prop('disabled', false)
.text('应用优惠券');
});
});
// Quantity au
to-save (per
-row
only; no
page hold)
// 修复后的数量自动保存功能
functi
on parseCartKeyFrom
InputName(n){
// 修正的正则表达式
- 匹配: cart[<cart_item_key>][qty]
var m = (n||'')
.match(/^cart\[(
.+
?)\]\[qty\]$/);
return m
? m[1] : null;
}
// 创建加载动画元素
functi
on createLoader() {
var $overlay = $('<div class="quantity
-sav
ing
-overlay"><div class="quantity
-sav
ing
-loader"></div></div>');
return $overlay;
}
// Quantity au
to-save with loader effect
functi
on parseCartKeyFrom
InputName(n){
// 修正正则表达式
var m = (n||'')
.match(/^cart\[(
.+
?)\]\[qty\]$/);
return m
? m[1] : null;
}
var qtyTimers = {};
$(document)
.on('
input change', '
.qty', functi
on(){
var $
input = $(this);
var key = parseCartKeyFrom
InputName($
input
.attr('name'));
if (!key) return;
var row = $
input
.closest('tr');
var $quantityC
onta
iner = $
input
.closest('
.quantity');
var val = parse
Int($
input
.val(), 1
0);
if (isNaN(val) || val <
0) val =
0;
// 清除现有定时器
if (qtyTimers[key]) clearTimeout(qtyTimers[key]);
// 创建加载动画容器（如果不存在）
if (!$quantityC
onta
iner
.f
ind('
.quantity
-sav
ing
-overlay')
.length) {
$quantityC
onta
iner
.append(createLoader());
}
// 隐藏加载层
$quantityC
onta
iner
.f
ind('
.quantity
-sav
ing
-overlay')
.hide();
// 设置新的定时器
qtyTimers[key] = setTimeout(functi
on(){
// 显示加载动画
$quantityC
onta
iner
.f
ind('
.quantity
-sav
ing
-overlay')
.show();
$
input
.prop('disabled', true);
$
.ajax({
url: PC
.ajax_url,
method: 'POST',
dataType: 'js
on',
data: {
acti
on: 'update_cart_item_qty',
cart_item_key: key,
qty: val,
security: PC
.security
}
})
.d
one(functi
on(res){
if (res && res
.success && res
.data){
if (res
.data
.sub
total_html) {
row
.f
ind('td
.product-sub
total')
.html(res
.data
.sub
total_html);
}
// 更新复选框价格
var $cb = row
.f
ind('
.item
-checkbox');
if ($cb
.length && typeof res
.data
.l
ine_
total_
incl_tax === 'number') {
$cb
.attr('data
-price', res
.data
.l
ine_
total_
incl_tax);
updateSelectedSummary();
}
// 数量为
0时移除商品行
if (val ===
0 || res
.data
.removed) {
row
.fadeOut(3
00, functi
on(){
$(this)
.remove();
snapshotCartFromDOM();
updateSelectedSummary();
});
} else {
snapshotCartFromDOM();
}
} else {
var msg = (res && res
.data && (res
.data
.message || res
.data)) || '数量更新失败';
alert(msg);
}
})
.fail(functi
on(){
alert('数量更新失败，请重试');
})
.always(functi
on(){
// 隐藏加载动画并启用输入框
$quantityC
onta
iner
.f
ind('
.quantity
-sav
ing
-overlay')
.hide();
$
input
.prop('disabled', false);
});
}, 5
00); //
0.5秒延迟
});
// 新增错误提示函数
functi
on showError(msg) {
if (!$('#qty
-error')
.length) {
$('body')
.append('<div id="qty
-error" style="positi
on:fixed;
top:
20px;left:5
0%;transform:translateX(
-5
0%);background:#ffebee;padd
ing:1
0px
20px;border
-radius:4px;color:#b71c1c;z
-index:9999;display:n
one;"></div>');
}
$('#qty
-error')
.text(msg)
.fade
In(
200)
.delay(3
000)
.fadeOut(4
00);
}
// Partial checkout
-> regular checkout
page
$('#partial
-checkout')
.off('click
.sc')
.on('click
.sc', functi
on(e){
e
.preventDefault();
var keys = getSelectedKeys();
if (!keys
.length) { alert('请至少选择一件商品结算'); return; }
var $btn = $(this), t = $btn
.text();
$btn
.prop('disabled', true)
.text('创建订单中
...');
// Snapshot first for safety
snapshotCartFromDOM();
$
.ajax({
url: PC
.ajax_url, method: 'POST', dataType: 'js
on',
data: { acti
on: 'create_direct_order', selected_items: keys, security: PC
.security }
})
.d
one(functi
on(res){
if (res && res
.success && res
.data && res
.data
.checkout_url) {
w
indow
.locati
on.href = res
.data
.checkout_url; // This is /checkout/
?pc_
token=
...
} else {
alert((res && res
.data && (res
.data
.message || res
.data)) || '创建订单失败，请重试');
$btn
.prop('disabled', false)
.text(t);
}
})
.fail(functi
on(xhr){
var msg = '创建订单失败';
if (xhr && xhr
.resp
onseJS
ON && xhr
.resp
onseJS
ON.data) {
msg += '：' + (xhr
.resp
onseJS
ON.data
.message || xhr
.resp
onseJS
ON.data);
}
alert(msg);
$btn
.prop('disabled', false)
.text(t);
});
});
// Keep LS selecti
on after remov
ing via the "x" l
ink and update cart snapshot
$(document)
.on('click', 'a
.remove', functi
on(){
var key = $(this)
.closest('tr
.cart_item')
.attr('data
-cart_item_key');
if (key) {
var saved = readSelecti
on()
.filter(functi
on(k){ return k !== key; });
writeSelecti
on(saved);
snapshotCartFromDOM();
}
});
//
Init
res
toreSelecti
onFromLS();
updateSelectedSummary();
snapshotCartFromDOM();
maybeRehydrateFromLocal();
});
</script>
functi
ons
.php
<
?php
def
ined('ABSPATH') || exit;
/**
* Robust partial checkout
to regular /checkout/ with durable cart snapshot
*
- Snapshot full cart before virtualiz
ing selecti
on for checkout
*
- Do not remove anyth
ing until order is created
*
- On success (thank
-you), rebuild cart as (snapshot
- purchased)
*
- On cancel/back (visit cart), res
tore snapshot
*
- Guest resilience: localS
torage + rehydrate AJAX
*/
/*
-------------------------------------------------
* Helpers
*
------------------------------------------------- */
functi
on pc_get_cart_uid() {
if (is_user_logged_
in()) {
return 'user_'
. get_current_user_id();
}
if (empty($_COOKIE['pc_cart_uid'])) {
$
token = wp_generate_uuid4();
setcookie('pc_cart_uid', $
token, time() + YEAR_
IN_SEC
ONDS, COOKIEPATH
?: '/', '', is_ssl(), false);
$_COOKIE['pc_cart_uid'] = $
token;
}
return 'guest_'
. sanitize_text_field(wp_unslash($_COOKIE['pc_cart_uid']));
}
functi
on pc_build_item_key($
product_id, $variati
on_id =
0) {
return (
int)$
product_id
. '|'
. (
int)$variati
on_id;
}
functi
on pc_snapshot_current_cart() {
if (!WC()
->cart) wc_load_cart();
$items = array();
foreach (WC()
->cart
->get_cart() as $ci_key => $ci) {
$pid = isset($ci['
product_id'])
? (
int)$ci['
product_id'] :
0;
$vid = isset($ci['variati
on_id'])
? (
int)$ci['variati
on_id'] :
0;
$qty = isset($ci['quantity'])
? wc_s
tock_amount($ci['quantity']) :
0;
$var = isset($ci['variati
on']) && is_array($ci['variati
on'])
? $ci['variati
on'] : array();
if ($pid && $qty >
0) {
$items[] = array(
'
product_id' => $pid,
'variati
on_id' => $vid,
'variati
on' => array_map('wc_clean', $var),
'quantity' => $qty,
);
}
}
return $items;
}
functi
on pc_res
tore_cart_from_items($items) {
if (!WC()
->cart) wc_load_cart();
WC()
->cart
->empty_cart();
foreach ((array)$items as $it) {
$pid = isset($it['
product_id'])
? (
int)$it['
product_id'] :
0;
$vid = isset($it['variati
on_id'])
? (
int)$it['variati
on_id'] :
0;
$qty = isset($it['quantity'])
? wc_s
tock_amount($it['quantity']) :
0;
$var = isset($it['variati
on']) && is_array($it['variati
on'])
? array_map('wc_clean', $it['variati
on']) : array();
if ($pid && $qty >
0) {
WC()
->cart
->add_
to_cart($pid, $qty, $vid, $var);
}
}
WC()
->cart
->calculate_
totals();
}
functi
on pc_transient_key($
token) {
return 'pc_partial_payload_'
. sanitize_key($
token);
}
/*
-------------------------------------------------
* AJAX: Local rehydrate when Woo cart is empty
*
------------------------------------------------- */
add_acti
on('wp_ajax_pc_rehydrate_cart', 'pc_rehydrate_cart');
add_acti
on('wp_ajax_nopriv_pc_rehydrate_cart', 'pc_rehydrate_cart');
functi
on pc_rehydrate_cart() {
check_ajax_referer('woocommerce
-cart', 'security');
$raw = isset($_POST['items'])
? wp_unslash($_POST['items']) : '';
$items = is_str
ing($raw)
? js
on_decode($raw, true) : (array)$raw;
if (!is_array($items)) {
wp_send_js
on_error(array('message' => '
Invalid items
.'), 4
00);
}
if (!WC()
->cart) wc_load_cart();
if (!WC()
->cart
->is_empty()) {
wp_send_js
on_success(array('message' => 'Cart not empty
.'));
}
foreach ($items as $it) {
$pid = isset($it['
product_id'])
? (
int)$it['
product_id'] :
0;
$vid = isset($it['variati
on_id'])
? (
int)$it['variati
on_id'] :
0;
$qty = isset($it['quantity'])
? wc_s
tock_amount($it['quantity']) :
0;
$var = isset($it['variati
on']) && is_array($it['variati
on'])
? array_map('wc_clean', $it['variati
on']) : array();
if ($pid && $qty >
0) {
WC()
->cart
->add_
to_cart($pid, $qty, $vid, $var);
}
}
WC()
->cart
->calculate_
totals();
wp_send_js
on_success(array('rehydrated' => true));
}
/*
-------------------------------------------------
* AJAX: Update qty (per
-row; no
page reload)
*
------------------------------------------------- */
add_acti
on('wp_ajax_update_cart_item_qty', 'pc_update_cart_item_qty');
add_acti
on('wp_ajax_nopriv_update_cart_item_qty', 'pc_update_cart_item_qty');
functi
on pc_update_cart_item_qty() {
check_ajax_referer('woocommerce
-cart', 'security');
$key = isset($_POST['cart_item_key'])
? wc_clean(wp_unslash($_POST['cart_item_key'])) : '';
$qty = isset($_POST['qty'])
? wc_s
tock_amount($_POST['qty']) : null;
if (!$key || $qty === null) {
wp_send_js
on_error(array('message' => 'Miss
ing params
.'), 4
00);
}
if (!WC()
->cart) wc_load_cart();
if ($qty <=
0) {
$removed = WC()
->cart
->remove_cart_item($key);
WC()
->cart
->calculate_
totals();
wp_send_js
on_success(array('removed' => (bool)$removed));
} else {
$set = WC()
->cart
->set_quantity($key, $qty, true);
WC()
->cart
->calculate_
totals();
$cart_item = WC()
->cart
->get_cart_item($key);
if (!$cart_item) {
wp_send_js
on_error(array('message' => 'Cart item not found after update
.'), 4
04);
}
$_
product = $cart_item['data'];
$sub
total_html = apply_filters('woocommerce_cart_item_sub
total', WC()
->cart
->get_
product_sub
total($_
product, $cart_item['quantity']), $cart_item, $key);
// Use l
ine_
total + l
ine_tax (after
totals) for your checkbox data
-price
$l
ine_
total_
incl_tax = (float)($cart_item['l
ine_
total'] + $cart_item['l
ine_tax']);
// functi
ons
.php 中的更新
wp_send_js
on_success(array(
'sub
total_html' => $sub
total_html,
'l
ine_
total_
incl_tax' => $l
ine_
total_
incl_tax,
'removed' => ($qty <=
0) // 明确返回是否移除
));
}
}
/*
-------------------------------------------------
* AJAX: Remove selected
*
------------------------------------------------- */
add_acti
on('wp_ajax_remove_selected_cart_items', 'pc_remove_selected_cart_items');
add_acti
on('wp_ajax_nopriv_remove_selected_cart_items', 'pc_remove_selected_cart_items');
functi
on pc_remove_selected_cart_items() {
check_ajax_referer('woocommerce
-cart', 'security');
$keys = isset($_POST['selected_items'])
? (array) $_POST['selected_items'] : array();
if (!WC()
->cart) wc_load_cart();
foreach ($keys as $k) {
$k = wc_clean(wp_unslash($k));
WC()
->cart
->remove_cart_item($k);
}
WC()
->cart
->calculate_
totals();
wp_send_js
on_success(true);
}
/*
-------------------------------------------------
* AJAX: Empty cart
*
------------------------------------------------- */
add_acti
on('wp_ajax_empty_cart', 'pc_empty_cart');
add_acti
on('wp_ajax_nopriv_empty_cart', 'pc_empty_cart');
functi
on pc_empty_cart() {
check_ajax_referer('woocommerce
-cart', 'security');
if (!WC()
->cart) wc_load_cart();
WC()
->cart
->empty_cart();
wp_send_js
on_success(true);
}
/*
-------------------------------------------------
* AJAX: Apply coup
on
*
------------------------------------------------- */
add_acti
on('wp_ajax_apply_coup
on', 'pc_apply_coup
on');
add_acti
on('wp_ajax_nopriv_apply_coup
on', 'pc_apply_coup
on');
functi
on pc_apply_coup
on() {
check_ajax_referer('woocommerce
-cart', 'security');
$code = isset($_POST['coup
on_code'])
? wc_format_coup
on_code(wp_unslash($_POST['coup
on_code'])) : '';
if (!$code) {
wp_send_js
on_error(array('message' => __('请输入优惠券代码', 'woocommerce')), 4
00);
}
if (!WC()
->cart) wc_load_cart();
$applied = WC()
->cart
->apply_coup
on($code);
WC()
->cart
->calculate_
totals();
if (is_wp_error($applied)) {
wp_send_js
on_error(array('message' => $applied
->get_error_message()), 4
00);
}
if (!$applied) {
// Woo often pushes notices
instead of bool; we return generic message
wp_send_js
on_error(array('message' => __('优惠券应用失败', 'woocommerce')), 4
00);
}
wp_send_js
on_success(true);
}
/*
-------------------------------------------------
* AJAX: Start partial checkout
to regular checkout
page
*
- Save snapshot + selected items
in a transient keyed by
token
*
- Put
token
in sessi
on
*
- Return /checkout/
?pc_
token=
...
*
------------------------------------------------- */
add_acti
on('wp_ajax_create_direct_order', 'pc_create_direct_order');
add_acti
on('wp_ajax_nopriv_create_direct_order', 'pc_create_direct_order');
functi
on pc_create_direct_order() {
check_ajax_referer('woocommerce
-cart', 'security');
$selected_keys = isset($_POST['selected_items'])
? (array) $_POST['selected_items'] : array();
if (empty($selected_keys)) {
wp_send_js
on_error(array('message' => __('请选择要结算的商品', 'woocommerce')), 4
00);
}
if (!WC()
->cart) wc_load_cart();
// Snapshot full cart
$snapshot = pc_snapshot_current_cart();
// Build selected items from current cart based
on cart_item_key
list
$selected = array();
foreach (WC()
->cart
->get_cart() as $ci_key => $ci) {
if (!
in_array($ci_key, $selected_keys, true)) {
c
ont
inue;
}
$pid = (
int)$ci['
product_id'];
$vid = (
int)$ci['variati
on_id'];
$qty = wc_s
tock_amount($ci['quantity']);
$var = isset($ci['variati
on']) && is_array($ci['variati
on'])
? array_map('wc_clean', $ci['variati
on']) : array();
if ($pid && $qty >
0) {
$selected[] = array(
'
product_id' => $pid,
'variati
on_id' => $vid,
'variati
on' => $var,
'quantity' => $qty,
);
}
}
if (empty($selected)) {
wp_send_js
on_error(array('message' => __('没有可结算的商品', 'woocommerce')), 4
00);
}
$
token = wp_generate_uuid4();
$payload = array(
'uid' => pc_get_cart_uid(),
'snapshot' => $snapshot,
'selected' => $selected,
'created' => time(),
);
set_transient(pc_transient_key($
token), $payload,
2 * DAY_
IN_SEC
ONDS);
// Put
token
in sessi
on (used across checkout AJAX calls)
if (method_exists(WC()
->sessi
on, 'set')) {
WC()
->sessi
on->set('pc_partial_
token', $
token);
}
$checkout_url = add_query_arg('pc_
token', rawurlencode($
token), wc_get_checkout_url());
wp_send_js
on_success(array('checkout_url' => $checkout_url));
}
/*
-------------------------------------------------
* Virtualize cart
on the regular checkout for
token
*
- On initial checkout load with
?pc_
token=
...
*
- Ensure re
-virtualizati
on before checkout process
ing
*
- Tag order with
token
*
- On thank
-you, rebuild cart = snapshot
- purchased
*
- On return
ing
to cart without complet
ing: res
tore snapshot
*
------------------------------------------------- */
// Enter
ing checkout with
token: virtualize cart
to selected items
add_acti
on('woocommerce_before_checkout_form', functi
on() {
if (!isset($_GET['pc_
token'])) return;
$
token = sanitize_text_field(wp_unslash($_GET['pc_
token']));
$payload = get_transient(pc_transient_key($
token));
if (empty($payload) || empty($payload['selected'])) return;
if (!WC()
->cart) wc_load_cart();
// Virtualize
to selected items
only
pc_res
tore_cart_from_items($payload['selected']);
// Persist
token
in sessi
on for all subsequent checkout AJAX calls
if (method_exists(WC()
->sessi
on, 'set')) {
WC()
->sessi
on->set('pc_partial_
token', $
token);
}
}, 1);
// Safety: just
-in-time re
-virtualizati
on before order process
ing
add_acti
on('woocommerce_before_checkout_process', functi
on() {
if (!method_exists(WC()
->sessi
on, 'get')) return;
$
token = WC()
->sessi
on->get('pc_partial_
token');
if (!$
token) return;
$payload = get_transient(pc_transient_key($
token));
if (empty($payload) || empty($payload['selected'])) return;
// Ensure cart still equals selected set (another tab might have res
tored)
pc_res
tore_cart_from_items($payload['selected']);
}, 1);
// Tag order with
token so we can resolve
on thank
-you
add_acti
on('woocommerce_checkout_create_order', functi
on($order /* WC_Order */) {
$
token = null;
if (isset($_GET['pc_
token'])) {
$
token = sanitize_text_field(wp_unslash($_GET['pc_
token']));
} elseif (method_exists(WC()
->sessi
on, 'get')) {
$
token = WC()
->sessi
on->get('pc_partial_
token');
}
if ($
token) {
$order
->update_meta_data('_pc_partial_
token', $
token);
}
}, 1
0, 1);
//
On thank
-you: rebuild cart as (snapshot
- purchased), then cleanup
add_acti
on('woocommerce_thankyou', functi
on($order_id) {
$order = wc_get_order($order_id);
if (!$order) return;
$
token = $order
->get_meta('_pc_partial_
token');
if (!$
token) return;
$payload = get_transient(pc_transient_key($
token));
if (empty($payload) || empty($payload['snapshot'])) {
// Noth
ing
to rebuild, just cleanup sessi
on token
if (method_exists(WC()
->sessi
on, 'set')) {
WC()
->sessi
on->set('pc_partial_
token', null);
}
delete_transient(pc_transient_key($
token));
return;
}
// Build purchased map pid|vid => qty
$purchased = array();
foreach ($order
->get_items('l
ine_item') as $item) {
$pid = (
int)$item
->get_
product_id();
$vid = (
int)$item
->get_variati
on_id();
$qty = (
int)$item
->get_quantity();
$k = pc_build_item_key($pid, $vid);
if (!isset($purchased[$k])) $purchased[$k] =
0;
$purchased[$k] += $qty;
}
// Rema
inder = snapshot
- purchased
$rema
inder = array();
foreach ($payload['snapshot'] as $it) {
$pid = (
int)$it['
product_id'];
$vid = (
int)$it['variati
on_id'];
$qty = wc_s
tock_amount($it['quantity']);
$var = isset($it['variati
on'])
? $it['variati
on'] : array();
$k = pc_build_item_key($pid, $vid);
$take = isset($purchased[$k])
? (
int)$purchased[$k] :
0;
$left = max(
0, $qty
- $take);
if ($left >
0) {
$rema
inder[] = array(
'
product_id' => $pid,
'variati
on_id' => $vid,
'variati
on' => $var,
'quantity' => $left,
);
$purchased[$k] = max(
0, $take
- $qty); // if over
-purchased (unlikely), keep n
on-negative
}
}
// Rebuild cart
to rema
inder
pc_res
tore_cart_from_items($rema
inder);
// Cleanup
token
if (method_exists(WC()
->sessi
on, 'set')) {
WC()
->sessi
on->set('pc_partial_
token', null);
}
delete_transient(pc_transient_key($
token));
// Also update localS
torage best
-effort
on the thank
-you
page (client side) is opti
onal;
// your cart
.php JS already re
-snapshots
on next visit
.
},
20);
// If user visits the cart
page with an active partial
token (aband
oned/cancelled), res
tore full snapshot
add_acti
on('woocommerce_before_cart', functi
on() {
if (!method_exists(WC()
->sessi
on, 'get')) return;
$
token = WC()
->sessi
on->get('pc_partial_
token');
if (!$
token) return;
$payload = get_transient(pc_transient_key($
token));
if (empty($payload) || empty($payload['snapshot'])) return;
// Res
tore full snapshot so cart
page always
shows everyth
ing
pc_res
tore_cart_from_items($payload['snapshot']);
// Keep
token so user can retry checkout; or clear it if you prefer end
ing the flow here:
// WC()
->sessi
on->set('pc_partial_
token', null);
}, 1);
Currently You are now a website builder
. These are the code
in my cart
.php & functi
ons
.php
. Currently, i am very satisfied with my layout
. However, I want
to achieve cart like Shopee / Taobao / Lazada, that allow my cus
tomer
to
1) Do selective checkout, where
only selected items are sent
to checkout
page, and after order created,
only these items will be removed from cart
. On the other side, n
on-selected items are reta
ined
inside cart, until cus
tomer remove them manually through 清除購物車 / 移除選中商品 or cus
tomer check out them
. Only remove when order is created
. If cus
tomer go back from checkout
page or payment
page, or anyth
ing, as l
ong as order is not created, d
ont remove them
. Currently im us
ing res
tore cart way
to achieve this, but everyth
ing from cart is removed currently after order created
. theres some mistake that s
top me from achiev
ing this
. I turned
on feature where cus
tomer can see
how many items are
inside cart through the cart ic
on at header
. At the same time, i d
ont want my cus
tomer
to notice that their cart is cleared and recovered before (the amount of items
in cart ic
on will
show 0 when havent recover and the number of items after recover)
. I d
ont want them
to notice the change, therefore, we have
to recover it fast until cus
tomer did not notice them
. Please be c
onsiderate regard
ing cus
tomer that use PC because they might access my website through another tab, at there, they can see the amount of items
in cart ic
on. Therefore, i want it
to always
show the correct amount,
only remove when the order is created and ma
inta
in if the order is not created
. I d
ont want them
to notice
how it works (recover
ing)
2) All these
全选
刪除選中的商品
清空購物車
输入优惠券代码
应用优惠券
已选商品:
0 件，共计: RM
0.00
结算
works perfectly f
ine, please rema
in them
.
Ma
inta
ining all the layout and achieved functi
ons
. Please check which part s
topped me from achiev
ing the selective checkout (ma
inta
in n
on-selected items
inside cart,
only remove selected
to checkout items when order created, and d
ont let cus
tomer nmotice the change
in their cart
. I want them
to no matter access from where, either new tab, other device etc, they will see the correct items
in their cart)
For now, If i cancel the payment halfway, i am logged out when back from payment
page, and when i check from other tab, n
on-selected items are removed from cart,
only selected items are still
inside cart
. Also, when i log
in back after payment
page, it redirects me
to pay
-only
page. Please refer
how taobao cart works, and review which part is s
topp
ing me from achieve taobao cart, give me the part of code
to be changed and the new code
to replaced with the current
one
. 
本文介绍如何在电商网站的列表页面展示商品的SKU码。通过在list.phtml文件中加入特定PHP代码实现，并确保SKU属性设置正确。
扫一扫
1637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
