Cách tạo giỏ hàng bằng html

Trong hướng dẫn này, chúng ta sẽ tạo Giỏ hàng bằng HTML và CSS3. Chúng tôi sẽ sử dụng Google Fonts cho hướng dẫn này, cụ thể hơn là “Roboto. ”

Nội dung chính Show

Làm thế nào để thiết kế một giỏ hàng?
Làm cách nào để tạo giỏ hàng trong JavaScript?
Làm cách nào để tạo danh mục sản phẩm trong HTML?
Làm cách nào để thêm các mặt hàng vào giỏ hàng bằng HTML và jQuery?

Mục lục

HTML

Bước 1. Hãy tạo cấu trúc HTML của chúng ta

Trước tiên, chúng tôi cần một div vùng chứa mà chúng tôi sẽ gọi là “. giỏ hàng”
Bên trong vùng chứa, chúng tôi sẽ có một tiêu đề và ba mục sẽ bao gồm

hai nút — nút xóa và nút yêu thích
Hình ảnh sản phẩm
tên sản phẩm và mô tả
các nút sẽ điều chỉnh số lượng sản phẩm
Tổng giá

    <div class="shopping-cart">
      <!-- Title -->
      <div class="title">
        Shopping Bag
      </div>

      <!-- Product #1 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="item-1.png" alt="" />
        </div>

        <div class="description">
          <span>Common Projects</span>
          <span>Bball High</span>
          <span>White</span>
        </div>

        <div class="quantity">
          <button class="plus-btn" type="button" name="button">
            <img src="plus.svg" alt="" />
          </button>
          <input type="text" name="name" value="1">
          <button class="minus-btn" type="button" name="button">
            <img src="minus.svg" alt="" />
          </button>
        </div>

        <div class="total-price">$549</div>
      </div>

      <!-- Product #2 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="item-2.png" alt=""/>
        </div>

        <div class="description">
          <span>Maison Margiela</span>
          <span>Future Sneakers</span>
          <span>White</span>
        </div>

        <div class="quantity">
          <button class="plus-btn" type="button" name="button">
            <img src="plus.svg" alt="" />
          </button>
          <input type="text" name="name" value="1">
          <button class="minus-btn" type="button" name="button">
            <img src="minus.svg" alt="" />
          </button>
        </div>

        <div class="total-price">$870</div>
      </div>

      <!-- Product #3 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="item-3.png" alt="" />
        </div>

        <div class="description">
          <span>Our Legacy</span>
          <span>Brushed Scarf</span>
          <span>Brown</span>
        </div>

        <div class="quantity">
          <button class="plus-btn" type="button" name="button">
            <img src="plus.svg" alt="" />
          </button>
          <input type="text" name="name" value="1">
          <button class="minus-btn" type="button" name="button">
            <img src="minus.svg" alt="" />
          </button>
        </div>

        <div class="total-price">$349</div>
      </div>
    </div>

CSS

Đảm bảo rằng bạn bao gồm phông chữ chúng tôi sử dụng cho hướng dẫn này
Bây giờ, hãy thêm một số phong cách cho cơ thể của chúng ta với các dòng sau

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #7EC855;
  font-family: 'Roboto', sans-serif;
}

Tuyệt vời, bây giờ hãy tạo Giỏ hàng của chúng ta có kích thước 750×423 và tạo kiểu cho nó trông thật đẹp. Lưu ý rằng chúng tôi đang sử dụng flexbox, vì vậy chúng tôi đặt nó để hiển thị flex và tạo cột hướng flex, vì theo mặc định, hướng flex được đặt là hàng

Trình tạo mẫu email trực tuyến

Với Bưu thiếp, bạn có thể tạo và chỉnh sửa các mẫu email trực tuyến mà không cần bất kỳ kỹ năng viết mã nào. Bao gồm hơn 100 thành phần giúp bạn tạo các mẫu email tùy chỉnh nhanh hơn bao giờ hết

Dùng thử miễn phíSản phẩm khác

.shopping-cart {
  width: 750px;
  height: 423px;
  margin: 80px auto;
  background: #FFFFFF;
  box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10);
  border-radius: 6px;

  display: flex;
  flex-direction: column;
}

Tiếp theo, hãy tạo kiểu cho mục đầu tiên, đó là tiêu đề, bằng cách thay đổi chiều cao thành 60px và tạo cho nó một số kiểu dáng cơ bản, và ba mục tiếp theo là các sản phẩm trong giỏ hàng, sẽ làm cho chúng có chiều cao 120px mỗi mục và đặt chúng hiển thị linh hoạt

.title {
  height: 60px;
  border-bottom: 1px solid #E1E8EE;
  padding: 20px 30px;
  color: #5E6977;
  font-size: 18px;
  font-weight: 400;
}

.item {
  padding: 20px 30px;
  height: 120px;
  display: flex;
}

.item:nth-child(3) {
  border-top:  1px solid #E1E8EE;
  border-bottom:  1px solid #E1E8EE;
}

Bây giờ chúng tôi đã tạo kiểu cấu trúc cơ bản cho giỏ hàng của mình
Hãy tạo kiểu cho các sản phẩm của chúng ta theo thứ tự

Các yếu tố đầu tiên là các nút xóa và yêu thích
Tôi luôn yêu thích hoạt hình nút trái tim của Twitter, tôi nghĩ nó sẽ trông rất tuyệt trên Giỏ hàng của chúng ta, hãy triển khai nó

.buttons {
  position: relative;
  padding-top: 30px;
  margin-right: 60px;
}
.delete-btn,
.like-btn {
  display: inline-block;
  Cursor: pointer;
}
.delete-btn {
  width: 18px;
  height: 17px;
  background: url(&amp;quot;delete-icn.svg&amp;quot;) no-repeat center;
}

.like-btn {
  position: absolute;
  top: 9px;
  left: 15px;
  background: url('twitter-heart.png');
  width: 60px;
  height: 60px;
  background-size: 2900%;
  background-repeat: no-repeat;
}

Chúng tôi đặt lớp “đang hoạt động” khi chúng tôi nhấp vào nút để tạo hoạt ảnh cho nó bằng jQuery, nhưng đây là phần tiếp theo

.is-active {
  animation-name: animate;
  animation-duration: .8s;
  animation-iteration-count: 1;
  animation-timing-function: steps(28);
  animation-fill-mode: forwards;
}

@keyframes animate {
  0%   { background-position: left;  }
  50%  { background-position: right; }
  100% { background-position: right; }
}

Tiếp theo, là hình ảnh sản phẩm cần lề phải 50px

.image {
  margin-right: 50px;
}

Let’s add some basic style to  product name and description.
.description {
  padding-top: 10px;
  margin-right: 60px;
  width: 115px;
}

.description span {
  display: block;
  font-size: 14px;
  color: #43484D;
  font-weight: 400;
}

.description span:first-child {
  margin-bottom: 5px;
}
.description span:last-child {
  font-weight: 300;
  margin-top: 8px;
  color: #86939E;
}

Sau đó, chúng ta cần thêm một yếu tố số lượng, trong đó chúng ta có hai nút để thêm hoặc xóa số lượng sản phẩm. Đầu tiên, tạo CSS và sau đó chúng tôi sẽ làm cho nó hoạt động bằng cách thêm một số JavaScript

.quantity {
  padding-top: 20px;
  margin-right: 60px;
}
.quantity input {
  -webkit-appearance: none;
  border: none;
  text-align: center;
  width: 32px;
  font-size: 16px;
  color: #43484D;
  font-weight: 300;
}

button[class*=btn] {
  width: 30px;
  height: 30px;
  background-color: #E1E8EE;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
.minus-btn img {
  margin-bottom: 3px;
}
.plus-btn img {
  margin-top: 2px;
}

button:focus,
input:focus {
  outline:0;
}

Và cuối cùng, đó là tổng giá của sản phẩm

________số 8_______

Hãy cũng làm cho nó phản hồi nhanh bằng cách thêm các dòng mã sau

Tạo trang web với Trình tạo trực tuyến của chúng tôi

Với Ứng dụng Khởi động và Ứng dụng Trang trình bày, bạn có thể tạo trang web không giới hạn bằng trình chỉnh sửa trang web trực tuyến bao gồm các thành phần, mẫu và chủ đề được mã hóa và thiết kế sẵn

Try Startup App Try Slides AppSản phẩm khác

@media (max-width: 800px) {
  .shopping-cart {
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .item {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .image img {
    width: 50%;
  }
  .image,
  .quantity,
  .description {
    width: 100%;
    text-align: center;
    margin: 6px 0;
  }
  .buttons {
    margin-right: 20px;
  }
}

Đó là nó cho CSS

JavaScript

Hãy làm cho trái tim sinh động khi chúng ta nhấp vào nó bằng cách thêm đoạn mã sau

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #7EC855;
  font-family: 'Roboto', sans-serif;
}

Mát mẻ. Bây giờ hãy làm cho các nút âm lượng hoạt động

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #7EC855;
  font-family: 'Roboto', sans-serif;
}

Và đây là phiên bản cuối cùng của chúng tôi

Hướng dẫn đã xong. Tôi hy vọng bạn thích nó và học được điều gì đó mới. Nếu bạn có bất kỳ câu hỏi nào, ping tôi

Làm thế nào để thiết kế một giỏ hàng?

Các phương pháp hay nhất để thiết kế giỏ hàng .

Đặt biểu tượng giỏ hàng ở góc trên cùng bên phải của trang. .

Sử dụng biểu tượng giỏ hàng để hiển thị số lượng mặt hàng trong giỏ hàng. .

Cho mọi người biết khi họ thêm các mặt hàng vào giỏ hàng của họ. .

Ôm chiếc xe đẩy nhỏ. .

Cung cấp thông tin về miễn phí vận chuyển. .

Dẫn khách đi thanh toán

Làm cách nào để tạo giỏ hàng trong JavaScript?

Tạo Giỏ hàng bằng Mảng và Đối tượng trong vanilla JavaScript .

Tiếp cận. Ban đầu, bạn có một danh sách các mặt hàng mua sắm được sắp xếp. .

Sở thích. .

Html cơ sở. .

Tạo thư viện vật phẩm. .

Tạo các chức năng cơ bản. .

Hiển thị danh sách mua sắm. .

Một chút CSS. .

Thêm và xóa các mặt hàng khỏi giỏ hàng

Làm cách nào để tạo danh mục sản phẩm trong HTML?

Cách tạo danh mục sản phẩm bằng HTML .

Xác định bảng có đường viền một pixel bằng phần mở. nhãn. .

Chèn hàng ô đầu tiên và nội dung của chúng bằng mã này. Đây là mô tả của mục đầu tiên. .

Chèn hàng ô thứ hai và nội dung của chúng bằng mã này. .

Đóng bảng với thẻ kết thúc

Làm cách nào để thêm các mặt hàng vào giỏ hàng bằng HTML và jQuery?

ready(function(){ //thêm mặt hàng vào giỏ hàng var itemData = $('#section-shop button'). mỗi(function(){ var productName = $(this). data('danh sách cửa hàng'). tên; .