온라인 주문 매장 픽업은 구매는 온라인에서, 수령은 오프라인 매장에서 끝내는 방식입니다. 고객은 배송을 기다리지 않고 수령 가능한 위치를 고를 수 있습니다.
데모에서 매장 재고가 바뀌면 픽업 가능 여부와 주문 버튼도 함께 바뀝니다. 매장 재고가 실제보다 늦게 갱신되면 헛걸음이 생기므로 예약과 확정 알림을 구분하세요.
언제 쓰나
매장 재고와 온라인 주문을 연결해 빠른 수령 옵션을 제공할 때 씁니다.
온라인 주문 매장 픽업
Buy online, pick up in store
온라인에서 주문하고 근처 매장 재고를 확인해 방문 수령합니다.
···
<div class="pickup"><div class="item"><span class="box"></span><div><b>DESK ORGANIZER</b><small>ONLINE ORDER</small></div></div><div class="store"><span>STORE A / 2 KM</span><b id="stock">IN STOCK · 3</b></div><div class="store"><span>STORE B / 6 KM</span><b>IN STOCK · 8</b></div><div class="button" id="option">PICK UP AT STORE A →</div></div>.pickup{width:min(88%,430px);font:800 clamp(10px,max(1.5vmin,1vw),13px)/1.2 sans-serif;background:var(--surface);border:2px solid var(--fg);padding:clamp(8px,2vmin,18px)}.item{display:flex;align-items:center;gap:clamp(8px,2vmin,18px);padding-bottom:clamp(6px,1vmin,12px)}.item .box{width:clamp(35px,9vmin,70px);aspect-ratio:1;background:linear-gradient(135deg,var(--accent-3),var(--accent))}.item div{display:grid;gap:5px}.item small{color:var(--muted)}.store{display:flex;justify-content:space-between;gap:6px;padding:clamp(7px,1.3vmin,12px) 0;border-top:1px solid var(--line)}.store b{color:var(--accent);text-align:right}.button{background:var(--fg);color:var(--bg);padding:clamp(7px,1.5vmin,12px);text-align:center;transition:.3s}.pickup.empty .store:first-of-type b{color:var(--muted)}small{font-size:max(.833em,10px,1vw)}const stock=document.querySelector('#stock'),option=document.querySelector('#option');let available=true;function render(){stock.textContent=available?'IN STOCK · 3':'OUT OF STOCK';option.textContent=available?'PICK UP AT STORE A →':'CHOOSE STORE B →'}setTimeout(()=>{available=false;render()},900);setInterval(()=>{available=!available;render()},3500);