SonBranding – Tư vấn và thiết kế thương hiệu TOP1

Thì phần này mình làm cũng dựa những mục ở trên mà mình đẫ làm thôi. Cuối cùng mà không thể thiếu trong quá trình làm giao diện đó là reponsive. Nếu mình có 2 cái component cùng class thì khi nó sẽ hiển thị component 1 còn thì nó sẽ hiển thị component 2. Thì trong phần header này thì mình cũng đã nói ở trên gồm những thành phần gì rồi.

Bây giờ chúng ta sẽ code HTML và CSS cho nó, còn phần hiển thị giỏ hàng mình sẽ nói ở phần Code JS ở trong phần nay. Bởi vì khi sử dụng thì nó chỉ lấy giá trị button đầu tiên mà thôi. Ví dụ như mình có 4 sản phẩm thì có 4 button “xóa” nếu như mình sử dụng thì chỉ có thể xóa được sản phẩm đầu tiên vì thế nên mình sẽ sử dụng vòng lặp. Vậy Là Xong bài Hướng dẫn xây dựng trang shopping cart bằng html, css và javascript rồi nhé. Mình mong muốn sau bài topic này các bạn có thể nắm vững 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 project thực tế. Còn phần modal khi hiển thị giỏ hàng chúng ta sẽ canh chúng ra giữa và ẩn modal đó đi.

Hướng Dẫn Reponsive Một Trang Landing Page Bằng Html, Css Và Javascript

Đó là khi chúng ta click vào giỏ hàng 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. Hô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. Chúng ta sẽ bắt sự kiện khi click vào button ‘Thêm Vào Giỏ’. Khi click vào sẽ lấy đường dẫn ảnh, tiêu đề và giá của sản phẩm.

app chèn logo chìm vào ảnh

Trong phần header mình sẽ hiển thị logo, menu và giỏ hàng. Bài này rất hay, sẽ tập hợp rất nhiều kiến thức và khá quan trọng mình mong các bạn đọc kĩ càng để có thể hiều một cách đầy đủ nhất nha. Nếu title của sản phẩm bằng với title mà bạn thêm vao giỏ hàng thì sẽ thông cho user. 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. // tại sao lại có như thế này bởi vì mỗi close là một html colection nên khi mình muốn lấy giá trị html thì phải thêm .

Xây Dựng Các Chức Năng Trang Shopping Cart

Trướ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ó. Khi lấy được các giá trị của một sản phẩm thì bước tiếp theo là chúng ta sẽ là đưa nó lên giỏ hàng. Tiếp đến chúng ta sẽ lấy giá trị của giá tiền và số lượng của sản phẩm. Mình làm chức năng trước vì khi mình làm chức năng này thì trước tiên mình phải mình phải tạo một sản phẩm trong giỏ hàng khi chia được thêm.

  • Mình làm chức năng trước vì khi mình làm chức năng này thì trước tiên mình phải mình phải tạo một sản phẩm trong giỏ hàng khi chia được thêm.
  • Và đây là kết quả khi chúng ta đã code js để hiển thị giỏ hàng.
  • Đó là khi chúng ta click vào giỏ hàng thì nó sẽ xuất hiện modal.
  • Chúng ta hiển thị giỏ hàng bằng cách sử dụng modal, có nghĩa là khi chúng ta click vào giỏ hàng sẽ hiển thị một modal chứa các sản phẩm được thêm vào giỏ hàng.
  • Trướ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ó.

Muốn đưa lên được giỏ hàng thì chúng ta phải tạo cho nó một bộ khung. Trong file main.js các bạn cũng gọi HTML DOM như ở trên. Mình sẽ giải thích cơ chế hoạt động của updatecart() này cho các bạn dễ hiểu nha. Trong file style.css các bạn sử dụng flex và width để chia layout cho các .cart-item nha. Trong file index.html phần .modal-body các bạn thêm cho mình đoạn code HTMl này vào bên trong .cart-items này giúp mình nha.

Cập Nhật Giỏ Hàng

Sau khi làm chức năng xóa xong, tiếp đến là chức năng tính tổng tiền trong giỏ hàng. Trong phần chúng ta sẽ hiển thị các sản phẩm cần thêm vào giỏ hàng. Mình thì đam mê chế cháo nên các sản phẩm của mình là các đồ linh kiện điện tử.

app chèn logo chìm vào ảnh

Thì nó sẽ gọi .cart_items trong .cart_items có nhiều .cart_row trong mỗi cart_row chứa các thông tin của sản phẩm như hình ảnh, tiêu đề, giá tiền của sản phẩm. Bởi vì .cart-row này trong .cart-items nên không thể gọi document được mà phải gọi dựa trên DOM của .cart_items. Bây giờ chúng ta CSS cho nó để trang shopping cart trở nên dễ nhìn hơn. 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. Nắm vững hơn các kiến thức về JS và xây dựng một giao diện và reponsive nó như thế nào. 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.

Hướng Dẫn Xây Dựng Trang Shopping Cart Bằng Html, Css Và Javascript

Cá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. Và đây là kết quả khi chúng ta đã code js để hiển thị giỏ hàng. 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. Và đây là kết quả khi chúng ta đã thêm sản phẩm vào giỏ hàng. Trong phần content đây là nới mà chúng ta sẽ hiển thị các sản phẩm cần thêm vào giỏ hàng. Sau đó các bạn gọi hàm updatecart() trong phần xóa sản phẩm trong giỏ hàng nhá.

  • Bây giờ chúng ta CSS cho nó để trang shopping cart trở nên dễ nhìn hơn.
  • Và đây là kết quả chúng ta làm xong chức năng xóa sản phẩm trong giỏ hàng.
  • Tiếp đến các bạn vào file index.html xóa hai sản phẩm mà mình đã thêm vào để làm chức năng xóa sản phẩm trong giỏ hàng và nhớ sửa tổng tiền thành 0VNĐ nha.
  • Nó sẽ lặp 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 button “xóa”.
  • Ví dụ như mình có 4 sản phẩm thì có 4 button “xóa” nếu như mình sử dụng thì chỉ có thể xóa được sản phẩm đầu tiên vì thế nên mình sẽ sử dụng vòng lặp.

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. 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.

Sau 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,.. Chúng ta hiển thị giỏ hàng bằng cách sử dụng modal, có nghĩa là khi chúng ta click vào giỏ hàng sẽ hiển thị một modal chứa các sản phẩm được thêm vào giỏ hàng. Tiếp đến các bạn vào file index.html xóa hai sản phẩm mà mình đã thêm vào để làm chức năng xóa sản phẩm trong giỏ hàng và nhớ sửa tổng tiền thành 0VNĐ nha. Và đây là kết quả chúng ta làm xong chức năng xóa sản phẩm trong giỏ hàng. Nhằm mục đích là giúp chúng ta tạo được bố cục, kết cấu của giỏ hàng.

Chúng ta cùng xem thử giao diện trang shopping cart nó hiển thị như thế nào nha. Mình không sử dụng bất kì thư viện và framwork nào để code giao diện cũng như các chức năng của shopping cart. Các bạn thử xóa sản phẩm để xem total nó có thay đổi không nha. Nó sẽ lặp 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 button “xóa”. Vậy là chúng ta đã là xong giao diện cho trang shopping cart rồi nha.

Lên Ý Tưởng Về Giao Diện Trang Shopping Cart

Nhưng trong đó phần mà quan trọng nhất của header đố là giỏ hàng. Bài viết nhằm mục đích giúp các bạn học hỏi nhiều kiến thức mới. Đây là mục khá là quan trọng cũng như là mục cuối cùng trong phần này.

app chèn logo chìm vào ảnh