កន្ត្រកទំនិញ

កន្លែងគេលុបចេញ កែបរិមាណ និងពិនិត្យលុយត្រូវបង់ — ការគណនាត្រូវត្រឹមត្រូវតែមើលម្ដង។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

<script>document.body.className="dc-bleed"</script>
<div class="dc-ct">

  <header class="dc-ct__bar">
    <a class="dc-ct__ic-btn" href="#dc-ct-back">
      <svg class="dc-ct__ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg>
      <span class="dc-sr">뒤로</span>
    </a>
    <h1 class="dc-ct__bar-t">장바구니</h1>
  </header>

  <main class="dc-ct__body">
    <div class="dc-ct__all">
      <label class="dc-ct__check" for="dc-ct-all">
        <input class="dc-ct__check-in" id="dc-ct-all" type="checkbox" checked>
        <span class="dc-sr">장바구니 전체 선택</span>
      </label>
      <span class="dc-ct__all-t">전체 선택 (2/3)</span>
      <button class="dc-ct__del-all" type="button">선택 삭제</button>
    </div>

    <ul class="dc-ct__list">
      <li class="dc-ct__item">
        <label class="dc-ct__check" for="dc-ct-i1">
          <input class="dc-ct__check-in" id="dc-ct-i1" type="checkbox" checked>
          <span class="dc-sr">제주 한라봉 2.5kg 선택</span>
        </label>
        <span class="dc-ct__thumb dc-ct__thumb--a" aria-hidden="true"></span>
        <div class="dc-ct__main">
          <p class="dc-ct__name">제주 한라봉 2.5kg (8~11과)</p>
          <p class="dc-ct__opt">새벽배송 · 내일 오전 7시 전 도착</p>
          <p class="dc-ct__price"><s class="dc-ct__was">19,900원</s> <strong class="dc-ct__now">13,300원</strong></p>
          <div class="dc-ct__qty">
            <button class="dc-ct__qty-btn" type="button"><span aria-hidden="true">−</span><span class="dc-sr">제주 한라봉 수량 줄이기</span></button>
            <span class="dc-ct__qty-n" aria-live="polite">1</span>
            <button class="dc-ct__qty-btn" type="button"><span aria-hidden="true">+</span><span class="dc-sr">제주 한라봉 수량 늘리기</span></button>
          </div>
        </div>
        <button class="dc-ct__x" type="button">
          <svg class="dc-ct__ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12"/><path d="M18 6L6 18"/></svg>
          <span class="dc-sr">제주 한라봉 장바구니에서 빼기</span>
        </button>
      </li>

      <li class="dc-ct__item">
        <label class="dc-ct__check" for="dc-ct-i2">
          <input class="dc-ct__check-in" id="dc-ct-i2" type="checkbox" checked>
          <span class="dc-sr">유기농 베이비채소 믹스 선택</span>
        </label>
        <span class="dc-ct__thumb dc-ct__thumb--b" aria-hidden="true"></span>
        <div class="dc-ct__main">
          <p class="dc-ct__name">유기농 베이비채소 믹스 200g</p>
          <p class="dc-ct__opt">새벽배송 · 내일 오전 7시 전 도착</p>
          <p class="dc-ct__price"><s class="dc-ct__was">5,980원</s> <strong class="dc-ct__now">4,900원</strong></p>
          <div class="dc-ct__qty">
            <button class="dc-ct__qty-btn" type="button"><span aria-hidden="true">−</span><span class="dc-sr">베이비채소 믹스 수량 줄이기</span></button>
            <span class="dc-ct__qty-n" aria-live="polite">2</span>
            <button class="dc-ct__qty-btn" type="button"><span aria-hidden="true">+</span><span class="dc-sr">베이비채소 믹스 수량 늘리기</span></button>
          </div>
        </div>
        <button class="dc-ct__x" type="button">
          <svg class="dc-ct__ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12"/><path d="M18 6L6 18"/></svg>
          <span class="dc-sr">베이비채소 믹스 장바구니에서 빼기</span>
        </button>
      </li>

      <li class="dc-ct__item is-off">
        <label class="dc-ct__check" for="dc-ct-i3">
          <input class="dc-ct__check-in" id="dc-ct-i3" type="checkbox" disabled>
          <span class="dc-sr">한살림 국산콩 두부 선택 (품절이라 고를 수 없음)</span>
        </label>
        <span class="dc-ct__thumb dc-ct__thumb--c" aria-hidden="true"></span>
        <div class="dc-ct__main">
          <p class="dc-ct__name">한살림 국산콩 두부 300g</p>
          <p class="dc-ct__opt">오늘 들어온 물량이 모두 나갔습니다</p>
          <p class="dc-ct__price"><strong class="dc-ct__now">2,480원</strong></p>
          <p class="dc-ct__soldout">품절</p>
          <button class="dc-ct__restock" type="button">재입고 알림 신청</button>
        </div>
        <button class="dc-ct__x" type="button">
          <svg class="dc-ct__ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12"/><path d="M18 6L6 18"/></svg>
          <span class="dc-sr">국산콩 두부 장바구니에서 빼기</span>
        </button>
      </li>
    </ul>

    <form class="dc-ct__coupon" action="#dc-ct-coupon" method="post">
      <label class="dc-sr" for="dc-ct-cp">쿠폰 코드</label>
      <input class="dc-ct__coupon-in" id="dc-ct-cp" name="coupon" type="text" placeholder="쿠폰 코드 입력" autocomplete="off">
      <button class="dc-ct__coupon-btn" type="submit">적용</button>
    </form>

    <div class="dc-ct__sum">
      <h2 class="dc-ct__sum-t">결제 금액</h2>
      <p class="dc-ct__row"><span>상품금액 (2종 3개)</span><span class="dc-ct__num">23,100원</span></p>
      <p class="dc-ct__row"><span>첫 주문 쿠폰</span><span class="dc-ct__num dc-ct__num--minus">-1,500원</span></p>
      <p class="dc-ct__row"><span>배송비</span><span class="dc-ct__num">무료</span></p>
      <p class="dc-ct__row dc-ct__row--total"><span>총 결제 금액</span><span class="dc-ct__total">21,600원</span></p>
      <p class="dc-ct__note">15,000원을 넘겨 배송비가 붙지 않았습니다. 품절된 두부는 금액에서 빠져 있습니다.</p>
    </div>
  </main>

  <div class="dc-ct__pay">
    <a class="dc-ct__pay-btn" href="#dc-ct-order">21,600원 · 상품 3개 주문하기</a>
  </div>
</div>

.dc-ct { display:flex; flex-direction:column; min-height:100vh; background:var(--dc-sunken); color:var(--dc-text); font-family:var(--dc-font); }
.dc-ct__bar { position:sticky; top:0; z-index:4; display:flex; align-items:center; gap:var(--dc-1); padding:calc(var(--dc-safe-top) + var(--dc-1)) var(--dc-2) var(--dc-1); background:var(--dc-surface); border-bottom:1px solid var(--dc-line); }
.dc-ct__ic-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border-radius:var(--dc-r-full); color:var(--dc-text); text-decoration:none; }
.dc-ct__ic { width:22px; height:22px; }
.dc-ct__bar-t { font-size:17px; font-weight:700; }
.dc-ct__body { flex:1; padding-bottom:var(--dc-6); }
.dc-ct__body--empty { display:flex; align-items:center; justify-content:center; padding:var(--dc-8) var(--dc-5); }
.dc-ct__all { display:flex; align-items:center; gap:var(--dc-1); padding:0 var(--dc-2) 0 var(--dc-1); background:var(--dc-surface); border-bottom:1px solid var(--dc-line); }
.dc-ct__check { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; cursor:pointer; }
.dc-ct__check-in { width:22px; height:22px; margin:0; accent-color:var(--dc-brand); }
.dc-ct__all-t { margin-right:auto; font-size:14px; font-weight:700; }
.dc-ct__del-all { min-height:44px; padding:0 var(--dc-2); border:0; background:none; font-size:13px; color:var(--dc-text-sub); text-decoration:underline; text-underline-offset:.2em; }
.dc-ct__list { display:flex; flex-direction:column; gap:var(--dc-2); padding:var(--dc-3) var(--dc-3) 0; }
.dc-ct__item { position:relative; display:flex; gap:var(--dc-2); padding:var(--dc-2) var(--dc-2) var(--dc-3); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); }
.dc-ct__thumb { width:72px; height:72px; flex:none; margin-top:var(--dc-2); border-radius:var(--dc-r-sm); }
.dc-ct__thumb--a { background:linear-gradient(135deg, var(--dc-warn-soft), var(--dc-sunken)); }
.dc-ct__thumb--b { background:linear-gradient(135deg, var(--dc-ok-soft), var(--dc-sunken)); }
.dc-ct__thumb--c { background:linear-gradient(135deg, var(--dc-info-soft), var(--dc-sunken)); }
.dc-ct__main { flex:1; min-width:0; padding:var(--dc-2) var(--dc-7) 0 0; }
.dc-ct__name { font-size:14px; font-weight:700; line-height:1.4; }
.dc-ct__opt { margin-top:2px; font-size:12px; color:var(--dc-text-mute); }
.dc-ct__price { display:flex; align-items:baseline; gap:var(--dc-2); margin-top:var(--dc-1); }
.dc-ct__was { font-size:12px; color:var(--dc-text-mute); }
.dc-ct__now { font-size:16px; font-weight:800; letter-spacing:-.01em; }
.dc-ct__qty { display:inline-flex; align-items:center; margin-top:var(--dc-2); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); overflow:hidden; }
.dc-ct__qty-btn { width:44px; height:44px; border:0; background:var(--dc-surface); color:var(--dc-text); font-size:17px; }
.dc-ct__qty-btn:active { background:var(--dc-sunken); }
.dc-ct__qty-n { min-width:44px; height:44px; border-left:1px solid var(--dc-line); border-right:1px solid var(--dc-line); font-size:15px; font-weight:700; line-height:44px; text-align:center; font-variant-numeric:tabular-nums; }
.dc-ct__x { position:absolute; top:var(--dc-1); right:var(--dc-1); display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; background:none; color:var(--dc-text-mute); }
.dc-ct__soldout { display:inline-block; margin-top:var(--dc-2); margin-right:var(--dc-2); padding:2px var(--dc-2); border-radius:var(--dc-r-xs); background:var(--dc-danger-soft); color:var(--dc-danger); font-size:12px; font-weight:700; }
.dc-ct__restock { min-height:40px; margin-top:var(--dc-2); padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); background:var(--dc-surface); color:var(--dc-text); font-size:12px; font-weight:700; }
.dc-ct__item.is-off .dc-ct__name, .dc-ct__item.is-off .dc-ct__now { color:var(--dc-text-mute); }
.dc-ct__coupon { display:flex; gap:var(--dc-2); margin:var(--dc-4) var(--dc-3) 0; }
.dc-ct__coupon-in { flex:1; min-width:0; min-height:48px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:14px; }
.dc-ct__coupon-btn { min-width:76px; min-height:48px; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:14px; font-weight:700; }
.dc-ct__sum { margin:var(--dc-4) var(--dc-3) 0; padding:var(--dc-4); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); }
.dc-ct__sum-t { margin-bottom:var(--dc-2); font-size:15px; font-weight:800; }
.dc-ct__row { display:flex; justify-content:space-between; gap:var(--dc-3); padding:var(--dc-1) 0; font-size:14px; color:var(--dc-text-sub); }
.dc-ct__num { color:var(--dc-text); font-variant-numeric:tabular-nums; }
.dc-ct__num--minus { color:var(--dc-danger); }
.dc-ct__row--total { margin-top:var(--dc-2); padding-top:var(--dc-3); border-top:1px solid var(--dc-line); color:var(--dc-text); font-weight:700; }
.dc-ct__total { font-size:19px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.dc-ct__note { margin-top:var(--dc-2); font-size:12px; line-height:1.5; color:var(--dc-text-mute); }
.dc-ct__pay { position:sticky; bottom:0; z-index:4; padding:var(--dc-3) var(--dc-3) calc(var(--dc-safe-bottom) + var(--dc-3)); background:var(--dc-surface); border-top:1px solid var(--dc-line); }
.dc-ct__pay-btn { display:flex; align-items:center; justify-content:center; min-height:52px; border-radius:var(--dc-r-md); background:var(--dc-brand); color:var(--dc-text-on); font-size:16px; font-weight:700; text-decoration:none; }
.dc-ct__empty { text-align:center; }
.dc-ct__empty-ic { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; margin-bottom:var(--dc-4); border-radius:var(--dc-r-full); background:var(--dc-surface); color:var(--dc-text-mute); box-shadow:var(--dc-sh-1); }
.dc-ct__empty-ic .dc-ct__ic { width:28px; height:28px; }
.dc-ct__empty-t { font-size:17px; font-weight:800; }
.dc-ct__empty-s { margin-top:var(--dc-2); font-size:14px; line-height:1.6; color:var(--dc-text-sub); }
.dc-ct__empty-btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; margin-top:var(--dc-5); padding:0 var(--dc-5); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); color:var(--dc-text); font-size:14px; font-weight:700; text-decoration:none; }

របៀបប្រើ

សរសេរតម្លៃទំនិញ បញ្ចុះតម្លៃ និងថ្លៃដឹកដោយឡែក ហើយដាក់ចំនួនសរុបនៅចុងក្រោយ
ដាក់ចំនួនទឹកប្រាក់និងចំនួនមុខទំនិញលើប៊ូតុងបញ្ជាទិញ — ប៊ូតុងត្រូវប្រាប់ថាយល់ព្រមអ្វី
មុខទំនិញអស់ស្តុក ទុកនៅកន្លែងដើម ហើយដកចេញពីការជ្រើសតែប៉ុណ្ណោះ

ចំណុចត្រូវប្រុងប្រយ័ត្ន

ប៊ូតុងបន្ថែមបន្ថយត្រូវមាន ៤៤×៤៤ ទោះមើលទៅតូច — ចុចខុសនៅទីនេះគឺបាត់លុយ
កុំបង្ហាញការអស់ស្តុកដោយពណ៌ស្រាលតែម្នាក់ឯង ត្រូវមានពាក្យ 'អស់ស្តុក'
រុំប្រអប់ធីកក្នុង <label> ទំហំ ៤៤px; ប្រអប់តូចតែម្នាក់ឯងពិបាកចុច

បន្ទាប់

ទំព័រដើមកម្មវិធី (បន្ទះកាត) អេក្រង់គំរូ កម្មវិធី

ព័ត៌មានទំនិញ (របារទិញខាងក្រោម) អេក្រង់គំរូ កម្មវិធី

ទំព័ររបស់ខ្ញុំ អេក្រង់គំរូ កម្មវិធី

អនបូឌីង ៣ ទំព័រ អេក្រង់គំរូ កម្មវិធី