CHƯƠNG 3 : GIỚI THIỆU VỀ WEBSITE BÁN ĐỒNG HỒ
4.2 Thiết kế giao diện Website
4.2.1 Giao diện trang chủ
• Ở giao diện trang chủ sẽ chứa các thành phần: • Slide Banner
• Menu
• Sản phẩm mới
• Sản phẩm khuyến mãi
•
• Hình 12 Giao diện trang chủ 1
•
• Hình 13 Giao diện trang chủ 2
• •
•
• Hình 14 Giao diện trang chủ 3
•
• Như chúng ta thấy ở các sản phẩm trên hình đều được dán nhãn ribbon ở góc phải trên
với các tiêu chí theo loại sản phẩm mới (NEW) hoặc sản phẩm khuyến mãi (SALE). Và giá tiền cũng đã được thiết kế với các điều kiện để hiển thị chính xác.
• Để thực hiện dán ribbon cho sản phẩm ta sẽ thực hiện điều kiện sau: • @if(ĩnew -> promotionprice!=0) • <dĩv class=”ribbon-wrapper*“> • <dĩv class="ribbaa sale">5ale</div> • </dỉv> • @elseif($new -> new == 1) • <dỉv class="i"ibbon-wrapper*"> • <dív class="ribbon sale">Mew</dĩv> • </div> • 0endỉf
• Hình 15 Điều kiện đặt ribbon
• Kết quả:
• Thơng qua điều kiện, sản phẩm sẽ được gán nhãn ribbon theo tiêu chí của từng sản phẩm.
•
• Hình 16 Kết quả đặt banner
•
• Để hiển thị giá theo tiêu chỉ của sản phẩm chúng ta sẽ đặt điều kiện như sau: • @ Ĩ-F ($n e w - > p romot ion_p rỉ ce==0)
• <span class="flash-sale”:{{mjmber_foriĩiat(íifiew->Linit_prĩce)}} đõng</span>
• @else
• <span class="flash-del">{{number_fo™at(Snew->unĩt_price)}} đõng</span>
• <span class="flash-sale">{{nimber_format(ĩnew->proiỉiotion_price)}} đõng</span>
@endĩf
• Hình 17 Điều kiện hiển thị giá
• Xét theo điều kiện, nếu sản phẩm có giá khuyến mãi = 0 thì sẽ hiển giá niêm yết. Ngược
• Orient FACOŨDOSWO
• 6,330..003 đồng 5,000,000 địng
•
• Hình 18 Kết quả hiển thị giá của sản phẩm