Hướng dẫn shopping website html code
Giới Thiệu ChungHôm nay mình sẽ hướng dẫn các bạn tạo một trang shopping cart bằng JS, HTML và CSS. Show
Mục Đích Của Bài Viết
Bắt Đầu Thôi NàoLên Ý Tưởng Về Giao Diện Trang Shopping CartÝ tưởng ở đây của mình là sẽ tạo một trang page gồm 3 phần: Header, Content và Footer. Phân Tích Các Chức Năng Trong Shopping CartCác chức năng quan trọng trong shopping cart mà chúng ta cần làm: Thứ hai là chức năng thêm sản phẩm vào giỏ hàng, trong chức năng này nếu chúng ta muốn thêm được sản phẩm vào trong giỏ hàng chúng ta cần lấy được các tham số của sản phẩm. Sau đó thêm vào modal của giỏ hàng. Thứ ba là chức năng xóa sản phẩm. Chúng ta sẽ bắt sự kiện khi click vào button xóa thì các element cha của nó sẽ xóa. Bắt Đầu Code Thôi LàoCode Giao Diện Trang Shopping CartTrước tiên trong một website nào thì bước đầu tiên mà chúng ta cần làm đó là code giao diện cho nó. Thì trang shopping cart này cũng không ngoại lệ. Code HTMLHeader
Content Mỗi cái sản phẩm là một component chúng ta chỉ cần code một cái conponent sau đó copy ra nhiều các conponent khác rồi sau đó thay đổi ảnh và tiêu đề thôi. Và các bạn sẽ để ý thấy là tại sao trong giá tiền mình không có ghi các dấu"." để tách các số tiền ra như 85.000đ mà lại ghi 85000đ. Mình sẽ có phần giải thích ở dưới phần cập nhật giỏ hàng.
Footer
Đây là giao diện khi chúng ta chưa CSS Nhìn nó tù thật đúng không mọi người. Bây giờ chúng ta CSS cho nó để trang shopping cart trở nên dễ nhìn hơn. Code CSSHeader
Content
Footer
Và đây là giao diện khi chúng ta đã CSS cho nó: Code JS Trong file main.js bây giờ các bạn code cho mình một đoạn code để hiển thị giỏ hàng(modal). Để hiển thị giỏ hàng thì cũng đơn giản thôi. Các bạn gọi HTML Dom ra thôi Mình sẽ giải thích cách hoạt động của nó cho mấy bạn dễ hiểu nha Đó là khi chúng ta click vào giỏ hàng(button) thì nó sẽ xuất hiện modal. Khi chúng ta click vào nút 'Đóng', dấu 'x' hay là khi click bên ngoài modal thì nó sẽ ẩn modal đó đi.
Và đây là kết quả khi chúng ta đã code js để hiển thị giỏ hàng. Reponsive Giao Diện Trang Shopping CartGiao diện mobileKhi chúng ta chuyển sang chế độ mobile thì giao diện mobile bị vỡ và vỡ như thế nào thì chúng ta cùng xem nó bị vỡ như nào nha: Vậy bây giờ chúng ta sẽ làm như thế nào để các sản phẩm không bị vỡ nha. Mỗi sản phẩm là 1 conponent bây giờ chúng ta chỉ cần width:100% cho nó là được. Trong phần header các bạn ẩn các menu trong .content-nav đi nha. Mình sẽ viết một cái .nav-mobile trong đó chứa toàn bộ các menu mà nó được hiển thị trên desktop. Code HTML
Code CSS
Reponsive
Code JS
Và
đây là giao diện mobile khi chúng ta đã reponsive cho nó: Giao Diện TabletChúng ta cùng xem thử giao diện trang shopping cart nó hiển thị như thế nào nha. Thì các bạn sẽ thấy giao diện hơi bị vỡ một chút, bây giờ các bạn cần tăng width các sản phẩm lên một chút thì sẽ thấy ok. Còn phần header các bạn chỉ cần chỉnh sửa lại font-size của các menu trong .content-nav và width:100% cho .content-nav là được.
Và đây là giao diện tablet khi đã được reponsive Vậy là chúng ta đã là xong giao diện cho trang shopping cart rồi nha. Tiếp đến là phần quan trọng nhất trong shopping cart. Các bạn cùng theo dõi tiếp nha. Xóa Sản Phẩm Trong Giỏ HàngCác bạn sẽ đặt một câu hỏi lại tại sao chưa thêm sản phẩm vào giỏ hàng mà lại xóa rồi thì các bạn cứ bình tĩnh, từ từ để mình giải thích. Sau khi chúng ta làm xong các bước trên thì đến bước thêm sản phẩm vào giỏ hàng cũng dựa theo các bố cục,...ở trên. Sau đó các bạn sẽ xóa các các sản phẩm mà mình tự tạo trong giỏ hàng đi là được. Không linh tinh liêng thiêng nữa. Chúng ta bắt tay vào làm thôi nào:
|