쇼핑 카트에 제품을 추가하는 방법이 여러 가지가 있습니다. 일반적인 관행은 "카트에 추가"버튼을 클릭하는 것입니다.이 버튼은 장바구니로 이동합니다. 쇼핑 카트에서 "확인"버튼을 클릭하여 확인할 수 있습니다. 그리고 오늘은 더 친근한 솔루션을 소개하겠습니다.
데모 다운로드 소스 코드를보십시오
기본적으로 쇼핑 카트는 숨겨지고 보이지 않습니다. 사용자가 카트에 추가 버튼을 클릭하면 제품 정보가 카트에 추가됩니다. 쇼핑 카트는 페이지의 오른쪽 하단에 버튼 형태로 나타납니다. 버튼을 클릭하면 장바구니가 확장되어 카트에 제품 정보가 표시됩니다. 동시에 카트에서 제품을 삭제하거나 정산 할 수도 있습니다. 사용자는 일시적으로 쇼핑 카트를 닫고 쇼핑을 계속할 수 있습니다.
HTML 구조
HTML 구조에는 주로 두 부분이 포함됩니다. 첫 번째 부분은 제품 목록의 "쇼핑 카트 추가"버튼입니다. 다음 코드에서 볼 수 있듯이 데이터-* 속성을 사용하여 제품의 ID, 그림, 이름, 가격 및 기타 정보를 함께 가져옵니다.
<a href = "#0"data-price = "3669.00"data-proid = "1"data-proname = "huawei p9"data-proimg = "img/huawei_p9.jpg"> 카트에 추가 </a>
두 번째 부분은 쇼핑 카트이며, 쇼핑 카트 부품에는 트리거 쇼핑 카트 및 쇼핑 카트 통계 부품이 포함되어 있습니다.
<div> <a href = "#0"> 쇼핑 카트 <ul> <!-카트 항목 카운트-> <li> 0 </li> <li> 0 </ul> </a> <div> <siver> <h2> 쇼핑 카트 </h2> <span> <a href = "#0"> </</</</<!-header> <! part, javaScript에 의해 동적으로 삽입 됨-> </ul> </div> <keer> <a href = "#0"> <em> current- <span> 0 </span> </em> </a >> </div> </div> </div>
Div.body 요소의 UL 목록은 기본적으로 비어 있습니다. 쇼핑 카트의 제품 목록 정보를 표시하는 데 사용됩니다. 거친 구조는 다음과 같습니다. JavaScript에 의해 동적으로 삽입됩니다.
<div> <ul> <li> <div> <a href = "#0"> <img src = "img/pro.jpg"> </a> </div> <div> <h3> <a href = "#0"> 제품 이름 </a> </h3> <3999.99 </span <a href = a href = "#0"> 0 < "#0. for = "cd-product-'+productid+'"> 품목 수 </label> <span> <span> x <i id = "cd-product-'+proid+'"> 1 </i> </span> </div> </div> </div> </li> </li> </div> </li>> </li>> </li>> </li> </li> </li> </li> </div> </div> </div> </div> </li> </div> </div>
이 기사에는 CSS 부분이 표시되지 않습니다. 소스 코드에서 CSS/Style.css를 다운로드하여 볼 수 있습니다.
자바 스크립트
이 예제의 코드는 jQuery를 기반으로하므로 jQuery 라이브러리 파일을 미리로드해야합니다.
사용자가 버튼 .add-button을 클릭하면 addProduct () 함수를 트리거하고 제품 정보를 .body> ul에 삽입하십시오.
함수 부산물 (Proname, Proid, Price, Proimg) {var reter = $ ( "#cd-product-"+proid) .text (); var select = '', productAdded = ''; if (수량 == '') {var select = '<span> x <i id = "cd-product-'+proid+'"> 1 </i> </span>'; var productAdded = $ ( '<li> <div> <a href = "#0"> <img src = "'+proimg+'"> </a> </div> <div> <h3> <a href = "#0">'+proname+'</a> </h3> <span>'+price+'</price> <a href = "#0"> delete </a> <div> <label for = "cd-product-'+proid+'"> 파일 수 </label> '+select+'</div> </div> </li> '); cartlist.prepend (productAdded); } else {수량 = parseint (수량); $ ( "#cd-product-"+proid) .html (수량+1); }}위는 소스 코드 다운로드와 함께 쇼핑 카트에 추가 된 효과의 JavaScript 기반 구현입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!