-----
Phần x26. CakePHP2
– Xem, cập nhật giỏ hàng
Xem (clip số 27b – chickenrainshop):
- set->(compact()) - gửi nhiều biến lên view (2":56)
- sử dụng layout khác thay thế cho layout
default (10":10)
Đoạn mã cho nút “Xem/Cập nhật giỏ hàng”:
Element [cart.ctp]
<p class="pricetotal"><span
class="label">Tổng: <?php echo
$this->Number->currency($total,
'
VND', ['places' => 0, 'wholePosition' => 'after']);
?></span></p>
<?php echo
$this->Html->link('Xem/Cập nhật giỏ hàng', '/gio-hang', ['class' =>
'update-cart btn btn-primary btn-block']); ?>
<?php else: ?>
Vì giao diện bị bể, nên sẽ css một chút.
[chickenrainshop.css]
.update-cart {
width: 200px;
text-align: center;
margin: 0 auto;
margin-top: 40px;
}
Cấu hình route cho link $this->Html->link('Xem/Cập
nhật giỏ hàng', '/gio-hang'):
[routes.php]
Router::connect('/sach-moi', ['controller' => 'books', 'action'
=> 'latest_books']);
Router::connect('/gio-hang',
['controller' => 'books', 'action' => 'viewCart']);
Router::connect('/tac-gia', ['controller' => 'writers',
'action' => 'index']);
Viết action viewCart trong [BooksController.php]
/*
* xem chi tiết giỏ hàng
*/
public function viewCart() {
$cart = $this->Session->read('cart');
$payment =
$this->Session->read('payment');
$this->set(compact('cart', 'payment'));
$this->set('title_for_layout', 'Giỏ
hàng');
}
public function
addToCart($id = null) {
Để gửi nhiều hơn một biến lên view, sử dụng hàm compact, ví
dụ:
$this->set(compact('cart', 'payment'));
Viết view view_cart: do view view_cart sử dụng layout khác
so với layout default, vì vậy cần phải tạo layout trước (layout cart.ctp).
Tạo layout mới, có tên là cart.ctp.
[Layouts\cart.ctp]
<!DOCTYPE html>
<html>
<head>
<?php echo
$this->Html->charset(); ?>
<title>
<?php
echo $title_for_layout; ?>
</title>
<?php
echo
$this->Html->meta('icon');
echo
$this->Html->css('bootstrap.min');
echo
$this->Html->css('chickenrainshop');
echo
$this->fetch('meta');
echo
$this->fetch('css');
echo
$this->fetch('script');
?>
</head>
<body>
<div
id="container" class="container">
<div
id="header">
<nav
class="navbar navbar-default">
<div
class="navbar-header">
<button
type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#mainmenu">
<span
class="sr-only">Toggle navigation</span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a
href="#" class="navbar-brand">Chickenrainshop</a>
</div>
<div
class="navbar-collapse collapse" id="mainmenu">
<ul class="nav
navbar-nav">
<li
class="active"><?php echo $this->Html->link('Sách mới',
'/sach-moi') ?></li>
<li><a
href="#ban-chay">Sách bán chạy</a></li>
<li><a
href="#lien-he">Liên hệ</a></li>
</ul>
<ul
class="nav navbar-nav pull-right">
<?php
echo
$this->Form->create('Book', [
'url'
=> ['action' => 'get_keyword'],
'class'
=> 'navbar-form search'
]);
echo
$this->Form->input('keyword',[
'label'
=> '',
'style'
=> 'width: 200px',
'placeholder'
=> 'Tìm kiếm...'
]);
echo
$this->Form->end();
?>
</ul>
</div>
</nav>
</div><!--
#header -->
<div
id="content">
<div
class="row">
<div
class="content col col-lg-12">
<?php
echo $this->fetch('content'); ?>
</div><!--
content -->
</div>
</div>
<div
id="footer">
<div
class="container">
<p
class="text-muted pull-right">Học CakePHP2</p>
</div>
</div>
</div>
<?php echo
$this->Html->script('jquery'); ?>
<?php echo
$this->Html->script('bootstrap.min'); ?>
</body>
</html>
Để sử dụng layout cart vừa tạo ở trên, trong
[BooksController.php action viewCart()] thêm dòng lệnh $this->layout=
‘cart’;
Ví dụ:
public function viewCart() {
$this->layout = 'cart';
$cart
= $this->Session->read('cart');
[View\Books\view_cart.ctp]
<?php if ($this->Session->check('cart')): ?>
<div
class="panel">
<h4
class="panel-heading"><span class="glyphicon
glyphicon-shopping-cart"></span>Giỏ hàng của bạn</h4>
<div
class="row">
<div
class="chi-tiet-gio-hang">
<table
class="table table-striped">
<thead>
<tr>
<th>STT</th>
<th>Tên
sách</th>
<th>Số
lượng</th>
<th>Giá</th>
<th>Xóa</th>
</tr>
</thead>
<tbody>
<?php
$i = 1; ?>
<?php
foreach ($cart as $book): ?>
<tr>
<td><?php
echo $i++; ?></td>
<td><?php
echo $this->Html->link($book['title'], '/'.$book['slug']);
?></td>
<td
class='row'>
<?php
echo $this->Form->create('Book', ['class' => 'form-inline']) ?>
<?php
echo $this->Form->input('quantity', ['value' => $book['quantity'],
'class' => 'col col-lg-2', 'label' => false, 'div' => false]); ?>
<?php
echo $this->Form->button('Cập nhật', ['class' => 'btn btn-link',
'type' => 'submit']); ?>
<?php
echo $this->Form->end(); ?>
</td>
<td><?php
echo $this->Number->currency($book['sale_price'],' VND',['places' =>
0,'wholePosition' => 'after']); ?>
</td>
<td><a
href="#"><span class="glyphicon
glyphicon-remove"></span></a></td>
</tr>
<?php
endforeach ?>
<tr>
<td></td>
<td
colspan="2"><strong>Tổng cộng</strong></td>
<td
colspan="2"><strong><?php echo
$this->Number->currency($payment['total'],' VND',['places' =>
0,'wholePosition' => 'after']); ?></strong></td>
</tr>
<tr>
<td></td>
<td
colspan="2"><strong>Đã giảm <small>(Coupon: CAKEPHP -
giảm 10%)</small></strong></td>
<td
colspan="2"><strong>0 VND</strong></td>
</tr>
<tr
class="success">
<td></td>
<td
colspan="2"><h4><strong>Giá phải trả</strong></h4></td>
<td
colspan="2"><h4><span class="label
label-danger"><?php echo
$this->Number->currency($payment['total'],' VND',['places' =>
0,'wholePosition' => 'after']); ?></span></h4></td>
</tr>
</tbody>
</table>
</div>
<button
type="submit" class="col-lg-3 btn btn-default empty">Làm
rỗng giỏ hàng</button>
</div>
</div>
<?php else: ?>
<div
class="panel">
Giỏ
hàng đang rỗng.
Quay
về <?php echo $this->Html->link('trang chủ', '/'); ?> để thêm quyển
sách vào giỏ hàng.
</div>
<?php endif ?>
Thêm đoạn mã sau vào chickenrainshop.css:
.chi-tiet-gio-hang {
width: 800px;
margin: 0 auto;
}
.empty {
margin-left: 30px;
background: #C0C0C0;
color: #FFF;
}
-----------
Cập nhật 31/5/2017
-----------