Html2canvas thêm css
|
Thứ hai là chức năng bổ sung 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 sản phẩm vào giỏ hàng thì chúng ta cần lấy số tham số của sản phẩm. Sau đó thêm vào phương thức của giỏ hàng Show Thứ ba là chức năng xóa sản phẩm. Chúng ta sẽ bắt sự kiện khi nhấp vào nút xóa thì các phần tử cha của nó sẽ bị xóa Bắt Đầu Code Thôi LàoMã Giao Diện Trang Giỏ HàngTrước tiên trong bất kỳ trang web nào, bước đầu tiên mà chúng ta cần làm đó là mã giao diện cho nó. Thì trang giỏ hàng này cũng không ngoại lệ Mã HTMLtiêu đề Nội dung Mỗi cái sản phẩm là một thành phần chúng ta chỉ cần code một cái thành phần sau đó copy ra nhiều thành phần khác rồi sau đó đổ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 ghi các dấu". " to split the money number as 85. 000đ mà ghi lại 85000đ. Mình sẽ có phần giải thích ở bên dưới phần cập nhật sọt hàng chân trang This is an interface when they are not CSS Nhìn nó tuân thủ đúng không mọi người. Bây giờ chúng ta CSS cho nó để trang giỏ hàng trở nên dễ nhìn hơn Mã CSStiêu đề Nội dung chân trang Và đây là giao diện khi chúng tôi đã CSS cho nó mã JS Trong file main. js bây giờ các bạn code cho mình một đoạn code để hiển thị thùng 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 tôi đã mã js để hiển thị thùng hàng Giỏ hàng Giao Diện Trang ResponsiveGiao diện di độngKhi chúng ta chuyển sang chế độ di động thì giao diện di động bị vỡ và bị vỡ như thế nào thì chúng ta cùng xem nó bị vỡ như thế nào nha Vì vậy bây giờ chúng ta sẽ làm như thế nào để các sản phẩm không bị hỏng nha. Mỗi sản phẩm là 1 thành phần bây giờ chúng ta chỉ cần chiều rộng. 100% cho nó là được In header header you hide the menu in. content-nav go nha. Mình sẽ viết một cái. nav-mobile trong đó chứa toàn bộ menu mà nó được hiển thị trên máy tính để bàn Mã HTML Mã CSS Phản ứng nhanh nhẹn mã JS Và đây là giao diện di động khi chúng ta đã reponsive cho nó Máy tính bảng Giao DiệnChúng ta cùng xem thử giỏ hàng giao diện trang 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 chiều rộng các sản phẩm lên một chút thì sẽ thấy ok Các phần còn lại của tiêu đề bạn chỉ cần chỉnh sửa lại kích thước phông chữ của các menu trong menu. content-nav và width. 100% cho. content-nav is been Và đây là máy tính bảng giao diện khi đã được phản hồi Vì vậy chúng ta đã hoàn thành giao diện cho giỏ hàng của trang rồi nha Next to là phần quan trọng nhất trong giỏ hàng. Các bạn cùng theo dõi tiếp nha Xây dựng Các Chức năng Trang Giỏ hàngClear Product In Giỏ hàngCác bạn sẽ đặt câu hỏi lại tại sao chưa thêm sản phẩm vào thùng hàng mà lại xóa rồi 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 sản phẩm mà mình tự tạo trong thùng hàng đi là được. Không còn linh hồn nữa Chúng ta bắt tay vào làm thôi nào Mã CSS Và đây là kết quả khi chúng ta thêm các sản phẩm vào thùng hàng mã JS Trong file main. js chúng ta sẽ gọi HTML Dom của nút là "xóa" trong sản phẩm Tại sao mình lại sử dụng vòng lặp mà không sử dụng lại được Nó sẽ thông qua tất cả các sản phẩm mà bạn thêm vào giỏ hàng và xem thử có bao nhiêu nút "xóa" Sau khi biết bao nhiêu nút "xóa" sau đó thêm sự kiện nhấp chuột. Khi bấm vào nút xóa thì nó sẽ xóa phần cha bọc nó. Ở đây có hai parentElement thì nó sẽ xóa phần tử cha bọc bên ngoài cùng (xóa sản phẩm ấy) Và đây là kết quả chúng ta đã hoàn thành chức năng xóa sản phẩm trong thùng hàng Cập Nhật Giỏ HàngSau khi mình làm xong chức năng xóa sản phẩm trong Giỏ hàng, bây giờ sẽ đến phần cập nhật Giỏ hàng, cập nhật tổng tiền trong Giỏ hàng, Sau khi gọi là cart_rows, chúng ta sẽ chạy vòng lặp để biết có bao nhiêu Tiếp theo chúng ta sẽ lấy giá trị của tiền và số lượng của sản phẩm Cuối cùng là tính tổng tiền, ở đây mình sẽ nói rõ ra tí. Tổng số sẽ gán bằng 0 đúng sai. Sau khi chúng tôi tính tổng tiền của sản phẩm đầu tiên sẽ được tính vào tổng số. Bây giờ tổng cộng được phân bổ bằng tổng số tiền của sản phẩm đầu tiên, nếu bạn có sản phẩm thứ hai trong Kho hàng thì tổng cộng = tổng số tiền của sản phẩm đầu tiên + tổng tiền của sản phẩm thứ hai và được phân bổ vào tổng, thứ Sau đó các bạn gọi hàm Tại đây thì mình cũng sẽ giải thích một lý do vì sao số tiền trong sản phẩm mình không ngăn cách bằng dấu '. ' thì khi sử dụng parseFloat() nó sẽ lấy các số ban đầu và bỏ các số 0 sau dấu '. ' because that is reason that mình không dùng dấu '. ' Và đây là kết quả khi chúng ta thêm phần cập nhật sản phẩm vào giỏ hàng Các bạn thử xóa sản phẩm để xem tổng thể nó có thay đổi không nha Thay Đổi Số Lượng Sản Phẩm Trọng Giỏi HàngSau khi chúng ta hoàn thành phần cập nhật giỏ hàng. Tiếp theo chúng ta sẽ làm phần thay đổi số lượng sản phẩm, chúng ta bắt sự kiện khi mình thay đổi (thay đổi) số lượng thì gọi hàm Và đây là kết quả khi chúng ta thay đổi số lượng sản phẩm trong thùng hàng Thêm Sản Phẩm Vào Giỏ HàngĐây là mục khá quan trọng cũng như mục cuối cùng trong phần này. Thì phần này mình làm cũng dựa vào những mục ở trên mà mình đẫ làm thôi Và đây là kết quả khi chúng ta thêm sản phẩm vào thùng hàng Vì vậy là xong rồi nha, bài này mình viết khá dài mong mọi người thông cảm. Các bạn có thể tham khảo trang giỏ hàng mà mình đã triển khai lên firebase tại đâyLời Kết Vậy Là Xong bài Hướng dẫn xây dựng giỏ hàng trang bằng html, css và javascript rồi nhé. Mình mong muốn sau bài viết này các bạn có thể nắm bắt thêm kiến thức về JS cũng như tự mình design một giao diện thông qua các dự án thực tế Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực ra những bài viết chủ đề hay và chất lượng hơn ủng hộ mình tại đây nha |
