집 > 브라우저 > WooCommerce에서 장바구니 페이지를 설정합니다. 전면에 온라인 매장용 카트 또는 모듈식 자바스크립트 작성 카탈로그용 데이터 및 마크업 준비


WooCommerce에서 장바구니 페이지를 설정합니다. 전면에 온라인 매장용 카트 또는 모듈식 자바스크립트 작성 카탈로그용 데이터 및 마크업 준비




"장바구니를 사이트에 연결하는 방법"과 같은 질문을 하는 사이트 방문자 여러분. 등등. 나는 기성 솔루션을 만들지 않고 구현 논리를 설명하며 각 개별 사이트에 대해 어떤 경우에도 특정 항목을 추가해야하므로 실제로 무언가를 조이거나 첨부해야 할 경우 유료 및 무료 컨설팅 서비스를 제공합니다. 그리고 웹사이트 개발. 페이지 상단의 피드백 양식을 작성하시면 모든 분들께 답변해 드리겠습니다.


온라인 매장. AJAX 장바구니. 파트 1: PHP 함수.

얼마 전 저는 온라인 상점용 장바구니를 만드는 방법에 대한 일련의 기사를 약간 업데이트하기로 결정했습니다. 일반적으로 몇 가지 단점, 부정확한 부분, 변경하고 싶은 부분이 있지만 중요한 점은 페이지를 다시 로드하지 않고도 "장바구니에 추가" 버튼이 작동하도록 하는 것입니다. 무엇을 위해? 완벽함에는 한계가 없습니다. 제 생각에는 편리합니다. 먼저 AJAX를 사용하여 온라인 상점 장바구니를 만드는 데 필요한 것이 무엇인지 이해해야 합니다.

  • 카트 자체 작업을 위한 PHP 함수 세트: 수량 추가, 삭제, 업데이트 등.
  • 추가, 삭제, 편집 버튼을 담당할 JavaScript 함수 세트 (보통 JavaScript라는 단어를 들으면 겁이 나지만 여기서는 복잡한 것이 없습니다)
  • 페이지를 다시 로드하지 않고 장바구니 작업을 담당하는 백엔드 파일
  • 아직 없다면 매장의 제품이 포함된 데이터베이스의 테이블입니다.
  • jQuery 라이브러리. AJAX 기술을 사용하는 것이 더 간단하고 직관적이므로 이를 사용할 것입니다(언젠가 JsHttpRequest를 사용하여 동일한 작업을 수행하는 방법을 설명할 것임).
  • 명확성을 위해 예제 파일을 만들었습니다. 다운로드할 수 있습니다.

    • 첫 번째 단계는 장바구니용 PHP 함수를 개발하는 것입니다. 그래서:

  • 장바구니에 상품을 추가하세요. 제품 식별자가 전송됩니다. 세션에서 장바구니에 추가된 항목을 포함하는 배열 자체의 구조를 변경하겠습니다. 이제 다음과 같습니다.

    $_SESSION["products"] – 장바구니의 제품을 담당하는 배열로, 그 구조는 다음과 같습니다.

    $_SESSION["products"]=array("product_identifier_1"=>array("cost"=>"product_1_price", "count"=>"product_1_Quantity_in_cart"), "product_identifier_2"=>array("cost"=>"product_price_1 ", "count"=>"Quantity_of_product_2_in_cart"), // 등. $_SESSION["products_incart"] 변수는 장바구니에 담긴 제품 수를 담당하고, $_SESSION["cart_cost"] 변수는 담당합니다. 카트 비용 때문에요. 장바구니에 있는 상품 배열의 구성, 즉 상품 수를 삭제, 변경 및 계산하는 것이 더 쉽습니다. 따라서 함수 자체를 작성합니다: /** * 매개변수: * $product_id – 제품 식별자 * $count – 추가할 제품 수량, 기본값 1, */ function add_to_cart($product_id, $count=1)) ( / /제품이 이전에 장바구니에 추가되었는지 확인: if (!empty($_SESSION["products"][$product_id]) ( //제품이 이미 추가된 경우 수량을 1 늘립니다. $_SESSION[" products"][$product_id][ "count"]++; ) else ( //빈 배열을 생성하지 않고 수행할 수 있는 경우를 대비해 빈 배열을 만듭니다. $_SESSION["products"][$product_id]=array() ; //데이터베이스에서 제품 가격 검색: $q=”SELECT Price FROM product_table WHERE id="$product_id"”; //쿼리 결과를 배열로 분할: $add_product=mysql_fetch_assoc(mysql_query($q) ); //장바구니에 제품 추가: $_SESSION["products" ][$product_id]["cost"]=$add_product["price"]; $_SESSION["products"][$product_id]["count "]=$count; ) /* 장바구니 비용과 상품 수량을 계산하는 함수를 호출합니다. 여기서 다시 변경하겠습니다. 바구니에 있는 상품 수가 아니라 상품 자체의 수를 계산합니다. 장바구니에 품목 1이 5개 있고 품목 2가 2개 있다면 장바구니에 품목이 7개가 아닌 2개 있다는 의미입니다. 그리고 한 가지 더, 장바구니 금액 계산과 개수를 결합하는 것이 가장 좋습니다. 그 안의 항목을 하나의 함수로 묶습니다: update_cart() */ update_cart(); ) 장바구니에 상품을 담는 기능이 준비되었습니다.

  • update_cart() 함수는 카트 비용과 그 안에 있는 제품 수를 계산합니다. function update_cart() ( //우리는 카트에 있는 제품 수를 //$_SESSION["products"의 요소 수로 계산합니다. "] 표준 PHP count() 함수를 사용하는 배열: $ _SESSION["products_incart"]=count($_SESSION["products"]); //먼저 비용을 재설정합니다: $_SESSION["cart_cost"]=0; // 장바구니 비용(가격에 수량을 곱하고 추가): foreach ($ _SESSION["products"] as $key=>$value) ( ​​​​$_SESSION["cart_cost"]+=$_SESSION["products"][$key ]["비용"]* $_SESSION["제품"][$ 키]["개수"]; ) )
  • 장바구니에 있는 상품 수량을 변경하는 함수: /** * add_to_cart() 함수와 동일한 매개변수를 사용합니다. */ function update_product_count($product_id, $count) ( $_SESSION["products"][$product_id] [" count"]=$count; //update_cart()를 호출하여 비용을 다시 계산합니다. update_cart(); )
  • 마지막으로 필요한 것은 장바구니에서 제품을 제거하는 것입니다: function Remove_from_cart($product_id) ( unset($_SESSION["products"][$product_id]); update_cart(); )

    • 그게 전부입니다. 장바구니 작업 기능이 준비되었습니다. 남은 것은 페이지에 제품 목록을 표시하고 "장바구니에 추가" 버튼을 만드는 것뿐입니다. 제시된 기능을 하나의 파일(예: cart.php)에 배치하고 이를 include 문으로 연결하는 것이 가장 좋습니다. 장바구니 인터페이스가 아닌 장바구니에 추가 버튼을 클릭할 때 사용자가 항목 수량을 결정하도록 하려는 경우 add_to_cart() 함수에 추가 변수 $count를 도입했다는 점을 언급할 가치가 있습니다. 또한 이 변수의 값을 전달하지 않고 기본값인 1을 사용하겠습니다. 다음 기사에서는 장바구니 작업을 위한 JavaScript 함수라는 주요 기능을 만듭니다.

    저자의 말: 온라인 상점에서 평균 수표를 늘려야 할 경우 떠오르는 가장 간단하고 논리적인 솔루션 중 하나는 구매자를 위한 온라인 장바구니를 만드는 것입니다. 도움을 받으면 사람은 하나의 제품뿐만 아니라 여러 제품을 동시에 구매할 수 있습니다. 해결책은 진부해 보이지만 많은 기업가들은 아직 이에 도달하지 못했습니다. 온라인 상점 웹사이트에서 빠르고 정확하게 장바구니를 만드는 방법을 배우려면 이 문서를 읽어보세요.

    어느 정도 규모가 큰 일반 상점에서는 입구에 있는 방문객에게 구매한 물건을 넣을 수 있는 특별한 용기가 제공됩니다. 20세기로 거슬러 올라갑니다. 이 솔루션은 고객이 상품 운송을 용이하게 할 뿐만 아니라 가능한 한 많은 구매를 유도하기 위해 도입되었습니다. 가게에 가서 바구니를 들고 그 안에 작은 칩 한 봉지를 들고 다니는 것이 좀 어리석은 일이라는 데 동의하시나요? 어떤 식으로든 씻어내려면 무언가를 추가해야 합니다.

    온라인 상점의 장바구니는 거의 동일한 방식으로 작동합니다. 여러 제품 품목을 구매하는 과정을 크게 단순화하고 평균 청구액을 늘립니다. 물론, 물건을 나르고 빈 용기를 사람들 앞에서 들고 걸어야 하는 물리적인 필요성이 없기 때문에 구매자가 받는 '압박' 요인은 오프라인 지점에 비해 현저히 낮지만 여전히 존재합니다.

    온라인 프로젝트를 만들기 시작 중이신가요? 그렇다면 으로 시작하는 것이 좋습니다. 이미 이 주제에 대해 많이 알고 있습니까? 그런 다음 사이트에 대한 웹 장바구니 생성을 직접 진행합니다.

    장바구니 생성을 위한 단계별 지침

    장바구니에는 다양한 버전이 있지만 PHP를 기반으로 만들어진 온라인 상점용 클래식 모듈 개발을 고려해 보겠습니다. 일반적으로 오른쪽 상단 모서리의 사이트 헤더에 눈에 잘 띄는 곳에 배치됩니다. 작은 바구니는 구매할 상품의 수와 금액을 나타내는 일종의 표시기입니다.

    따라서 온라인 상점용 장바구니를 만드는 방법에 대한 단계별 지침은 다음과 같습니다.

    1. header.php라는 파일을 엽니다. 사이트의 루트 폴더에 있습니다. 다음으로 미래 바구니의 기본 값을 레이아웃에 삽입합니다.

    장바구니에 담긴 품목: 개
    점검

    < div class = "smalcart" >

    < strong >장바구니에 담긴 품목:< / strong >PC.

    < br / > < a href = "" >점검< / a >

    < / div >

    이 경우 $smal_cart 배열의 내용이 사용됩니다. 잠시 후에 기본 온라인 상점 템플릿에서 사용할 수 있게 될 예정입니다. 이렇게 하려면 몇 가지 특정 작업을 수행해야 합니다.

    2. 카트를 단순하고 조화로운 모양으로 만들려면 style.css 파일에 다음 스타일을 추가합니다.

    #header .smalcart ( float: 오른쪽; 높이: 55px; 패딩: 10px; 왼쪽 패딩: 15px; 여백: 10px; 테두리: 1px 단색 회색; 테두리 반경: 10px; -moz-border-radius: 10px; -webkit -경계 반경: 10px; 배경: #E6DEEA; )

    #헤더 .smalcart (

    플로트: 오른쪽;

    높이: 55px;

    패딩: 10px;

    패딩 - 왼쪽 : 15px ;

    여백: 10px;

    테두리: 1px 단색 회색;

    테두리 - 반경 : 10px ;

    모즈 - 테두리 - 반경: 10px ;

    웹킷 - 테두리 - 반경: 10px;

    배경 : #E6DEEA;

    그 후에는 이미 온라인 상점 외관의 시각적 변화를 볼 수 있습니다.

    3. 이제 바스켓의 시스템 구조를 더 자세히 살펴보겠습니다. 카트 모듈은 별도의 페이지가 아니기 때문에 추가 컨트롤러를 만들 필요가 없습니다. 모양은 이미 템플릿에 표시되어 있으므로 뷰를 개발하지 않습니다. 모델 매개변수에 대한 작업에만 국한해 보겠습니다.

    이렇게 하려면 응용 프로그램 폴더로 이동한 다음 모델로 이동합니다. 그런 다음 cart.php라는 파일을 만듭니다. 다음 내용을 추가하세요.

    클래스 Application_Models_Cart ( function addToCard($id, $count=1) ( $_SESSION['cart'][$id]=$_SESSION["cart"][$id]+$count;return true; ) function delFromCart($ id, $count=1)() 함수clearCart()() )

    클래스 Application_Models_Cart

    함수 addToCard($id, $count=1)

    $_SESSION['cart'][$id] = $_SESSION["cart"][$id] + $count; 참을 반환 ;

    함수 delFromCart($id, $count=1) ()

    함수 클리어카트() ( )

    이 모델을 사용하면 장바구니 모듈의 콘텐츠에 포함된 데이터를 업데이트할 수 있습니다. 현재로서는 상품을 추가하는 기능만으로 충분하지만, 앞으로는 특정 상품을 삭제하거나 장바구니 전체를 비울 수 있도록 특별한 인터페이스 개발이 필요하다.

    장바구니에 담긴 품목에 대한 정보는 $_SESSION 배열에 포함됩니다. 키가 제품 ID이고 값이 장바구니에 추가된 제품 수인 연관 배열입니다. 최소한의 전략은 정보를 쿠키로 전송하는 과정을 단순화합니다.

    따라서 우리는 기성품 Application_Models_Cart 데이터베이스를 받았습니다. 이제 활성화해야 합니다.

    4. 그 전에 모듈이 보다 올바르게 작동하도록 href 속성도 변경해 보겠습니다.