加入購物車功能
先簡單了解一下主題中的檔案：
使用Shopping cart JS
- style.css 主題的格式宣告與主要的格式
- index.php 顯示部落客文章的索引頁面
- page.php 靜態頁面的範本
- page-full.php 無sidebar(側欄)的靜態頁面範本
- header.php及footer.php 供index.php、page.php、page-full.php等索引頁面、靜態頁面範本含入的頭及尾巴部份。
- sidebar.php 側欄
使用Shopping cart JS
-
- 將上面網站中的cart.js加到主題目錄中的assets/js (因為WordPress的關係，不能使用jQuery特殊的$字符，這部份必須改為jQuery，所以這個源碼是我改過的)。
// ************************************************
// Shopping Cart API
// ************************************************
var shoppingCart = (function() {
// =============================
// Private methods and propeties
// =============================
cart = [];
// Constructor
function Item(name, price, count) {
this.name = name;
this.price = price;
this.count = count;
}
// Save cart
function saveCart() {
sessionStorage.setItem('shoppingCart', JSON.stringify(cart));
}
// Load cart
function loadCart() {
cart = JSON.parse(sessionStorage.getItem('shoppingCart'));
}
if (sessionStorage.getItem("shoppingCart") != null) {
loadCart();
}
// =============================
// Public methods and propeties
// =============================
var obj = {};
// Add to cart
obj.addItemToCart = function(name, price, count) {
for(var item in cart) {
if(cart[item].name === name) {
cart[item].count ++;
saveCart();
return;
}
}
var item = new Item(name, price, count);
cart.push(item);
saveCart();
}
// Set count from item
obj.setCountForItem = function(name, count) {
for(var i in cart) {
if (cart[i].name === name) {
cart[i].count = count;
break;
}
}
};
// Remove item from cart
obj.removeItemFromCart = function(name) {
for(var item in cart) {
if(cart[item].name === name) {
cart[item].count --;
if(cart[item].count === 0) {
cart.splice(item, 1);
}
break;
}
}
saveCart();
}
// Remove all items from cart
obj.removeItemFromCartAll = function(name) {
for(var item in cart) {
if(cart[item].name === name) {
cart.splice(item, 1);
break;
}
}
saveCart();
}
// Clear cart
obj.clearCart = function() {
cart = [];
saveCart();
}
// Count cart
obj.totalCount = function() {
var totalCount = 0;
for(var item in cart) {
totalCount += cart[item].count;
}
return totalCount;
}
// Total cart
obj.totalCart = function() {
var totalCart = 0;
for(var item in cart) {
totalCart += cart[item].price * cart[item].count;
}
return Number(totalCart.toFixed(2));
}
// List cart
obj.listCart = function() {
var cartCopy = [];
for(i in cart) {
item = cart[i];
itemCopy = {};
for(p in item) {
itemCopy[p] = item[p];
}
itemCopy.total = Number(item.price * item.count).toFixed(2);
cartCopy.push(itemCopy)
}
return cartCopy;
}
// cart : Array
// Item : Object/Class
// addItemToCart : Function
// removeItemFromCart : Function
// removeItemFromCartAll : Function
// clearCart : Function
// countCart : Function
// totalCart : Function
// listCart : Function
// saveCart : Function
// loadCart : Function
return obj;
})();
// *****************************************
// Triggers / Events
// *****************************************
// Add item
jQuery('.add-to-cart').click(function(event) {
event.preventDefault();
var name = jQuery(this).data('name');
var price = Number(jQuery(this).data('price'));
shoppingCart.addItemToCart(name, price, 1);
displayCart();
});
// Clear items
jQuery('.clear-cart').click(function() {
shoppingCart.clearCart();
displayCart();
});
function displayCart() {
var cartArray = shoppingCart.listCart();
var output = "";
for(var i in cartArray) {
output += "<tr>"
+ "<td>" + cartArray[i].name + "</td>"
+ "<td>(" + cartArray[i].price + ")</td>"
+ "<td><div class='input-group'><button class='minus-item input-group-addon btn btn-primary' data-name=" + cartArray[i].name + ">-</button>"
+ "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>"
+ "<button class='plus-item btn btn-primary input-group-addon' data-name=" + cartArray[i].name + ">+</button></div></td>"
+ "<td><button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">X</button></td>"
+ " = "
+ "<td>" + cartArray[i].total + "</td>"
+ "</tr>";
}
jQuery('.show-cart').html(output);
jQuery('.total-cart').html(shoppingCart.totalCart());
jQuery('.total-count').html(shoppingCart.totalCount());
}
// Delete item button
jQuery('.show-cart').on("click", ".delete-item", function(event) {
var name = jQuery(this).data('name')
shoppingCart.removeItemFromCartAll(name);
displayCart();
})
// -1
jQuery('.show-cart').on("click", ".minus-item", function(event) {
var name = jQuery(this).data('name')
shoppingCart.removeItemFromCart(name);
displayCart();
})
// +1
jQuery('.show-cart').on("click", ".plus-item", function(event) {
var name = jQuery(this).data('name')
shoppingCart.addItemToCart(name);
displayCart();
})
// Item count input
jQuery('.show-cart').on("change", ".item-count", function(event) {
var name = jQuery(this).data('name');
var count = Number(jQuery(this).val());
shoppingCart.setCountForItem(name, count);
displayCart();
});
displayCart();
將Cart.js加入
bootScore
- 編輯主題裏的functions.php，找到function bootscore_scripts() ，加入cart.js的使用宣告：(注意//Cart JS這二行)
//Enqueue scripts and styles
function bootscore_scripts() {
(略)
// Bootstrap JS
wp_enqueue_script('bootstrap', get_template_directory_uri() . '/js/lib/bootstrap.bundle.min.js', array(), $modificated_bootstrapJs, true);
// Theme JS
wp_enqueue_script('bootscore-script', get_template_directory_uri() . '/js/theme.js', array('jquery'), $modificated_themeJs, true);
//Cart JS
wp_enqueue_script( 'cartjs', get_template_directory_uri() . '/js/cart.js', array(), null, true );
if (is_singular() && comments_open() && get_option('thread_comments')) {
wp_enqueue_script('comment-reply');
}
}
Theme.JS
-
- 編輯主題裏的functions.php，找到XXXX_theme_scripts_loader() 這個函式(XXXX是當時在下載Theme.es的Bootstrap啟動主題給的主題名稱)，我們要加入cart.js的使用宣告：wp_enqueue_script( ‘cartjs’, get_template_directory_uri() . ‘/assets/js/cart.js’, array(), $theme_version, true );
/**
* Loading All CSS Stylesheets and Javascript Files.
*
* @since v1.0
*/
function fgchen_theme_scripts_loader() {
$theme_version = wp_get_theme()->get( 'Version' );
// 1. Styles.
wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array(), $theme_version, 'all' );
wp_enqueue_style( 'main', get_template_directory_uri() . '/assets/css/main.css', array(), $theme_version, 'all' ); // main.scss: Compiled Framework source + custom styles.
if ( is_rtl() ) {
wp_enqueue_style( 'rtl', get_template_directory_uri() . '/assets/css/rtl.css', array(), $theme_version, 'all' );
}
// 2. Scripts.
wp_enqueue_script( 'mainjs', get_template_directory_uri() . '/assets/js/main.bundle.js', array(), $theme_version, true );
wp_enqueue_script( 'cartjs', get_template_directory_uri() . '/assets/js/cart.js', array(), $theme_version, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'fgchen_theme_scripts_loader' );
-
- 將「購物車及清空購物車的導覽列」及「購物車對話方塊」加到header.php中(和原版本的不一樣，jQuery的HTML開啟與關閉對話方塊modal在WordPress無法工作，我加入標準的onclick來處理modal的開啟與關閉)：
<!-- 購物車數量與清除購物車按鈕 -->
<div class="container">
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cart" onclick="jQuery('#cart').modal('show')">Cart (<span class="total-count"></span>)</button>
<button class="clear-cart btn btn-danger">Clear Cart</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cart</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="jQuery('#cart').modal('hide')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="show-cart table">
</table>
<div>Total price: $<span class="total-cart"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="jQuery('#cart').modal('hide')">Close</button>
<button type="button" class="btn btn-primary">Order now</button>
</div>
</div>
</div>
</div>