장바구니 연관성은 주문 안에 두 상품이 함께 나타나는 패턴입니다. 단순 동시 구매 횟수뿐 아니라 각 상품의 기본 구매 빈도를 고려해야 우연히 자주 보이는 대형 상품을 구분할 수 있습니다.
데모에서 주문 기록이 하나씩 쌓이며 상품 간 연결선이 굵어집니다. 연관성이 높다는 사실만으로 추천이 유익하다고 단정하지 말고, 재고와 고객의 실제 과업에 맞는지 확인하세요.
언제 쓰나
함께 구매한 상품 추천이나 묶음 진열 후보를 찾을 때 씁니다.
장바구니 연관성
Basket affinity
함께 구매되는 상품 쌍을 찾아 진열과 추천의 후보로 씁니다.
···
<div class="affinity"><div class="node a">COFFEE<br>DRIPPER</div><div class="link"><span id="count">2 SHARED ORDERS</span></div><div class="node b">PAPER<br>FILTERS</div><div class="orders">ORDER 01 · A+B<br>ORDER 02 · A+B<br><span id="extra">ORDER 03 · A+B</span></div></div>.affinity{position:relative;width:min(88%,520px);height:clamp(130px,40vmin,260px);display:flex;align-items:center;justify-content:space-between;font:900 clamp(10px,max(1.6vmin,1vw),14px)/1.2 sans-serif}.node{width:25%;aspect-ratio:1;border:2px solid var(--fg);display:grid;place-items:center;text-align:center;background:var(--surface);z-index:1}.a{box-shadow:5px 5px 0 var(--accent-3)}.b{box-shadow:5px 5px 0 var(--accent)}.link{position:absolute;left:20%;right:20%;top:30%;height:clamp(3px,1vmin,9px);background:var(--accent);transition:height .5s;display:grid;place-items:center}.link span{position:absolute;top:clamp(9px,2vmin,18px);white-space:nowrap;color:var(--accent)}.affinity.more .link{height:clamp(8px,2vmin,16px)}.orders{position:absolute;bottom:0;left:20%;right:20%;text-align:center;color:var(--muted);line-height:1.5;font-size:clamp(10px,max(1.2vmin,1vw),12px)}#extra{opacity:.2;transition:opacity .4s}.affinity.more #extra{opacity:1}const root=document.querySelector('.affinity'),count=document.querySelector('#count');setTimeout(()=>{root.classList.add('more');count.textContent='3 SHARED ORDERS'},800);setInterval(()=>{root.classList.toggle('more');count.textContent=root.classList.contains('more')?'3 SHARED ORDERS':'2 SHARED ORDERS'},3500);