[php]간단하게 장바구니 기능 만들기

리액트나 뭐나 어차피 내용은 같다.

그냥 배열 하나 만들고, 그곳에 해당 정보를 넣어준 뒤 그것을 화면에 뿌려주는 것.

 

이렇게 왜 하냐고?

 

나중에 까먹을까봐...

 

구조는 겁나 간단하다.

내 경우 셀렉트 박스로 해당 제품을 선택하는 것이라 

그러한 셀렉트 박스의 선택에 따라서 해당 bind된 값이 들어오면 그것을 넣어주면 되는 것이었다.

 

상태 관리 라이브러리인 리덕스도 배열 갖고 장난치는건데, 그냥 어디든지 접속가능하냐 못하느냐 이것 차이.

 

한번 수정했는데, 작성했다가 보니 splice를 사용할 경우 없어져야 하는 대상만 배열에 남는 문제가 생겨서,

filter 함수로 교체했다.

안쓰던 map 함수의 idx 매개변수도 삭제하고.

let cart = [];
$(`.셀렉트박스`).change(function() {
        let val= $(this).val();
        let type = $(this).children("option:selected").attr('type');

        box.map(function(el) {
            if(el.class == type) {
                let arr = {price : el.price, val: val, type}; // this로 바인딩 된 정보 가져오기
                if(cart.length > 0) { // 해당 배열이 빈 배열인지 체크
                    let counting = 0;
                    for(let j=0; j< cart.length; j++) {
                        if(cart[j].type == type) {
                            cart = cart.filter(tag => tag.type !== type); // 동일한 상품 내용이 있다면 삭제하고 새로 넣기.
                            cart.push(arr);
                        } else {
                            cart.push(arr); // 없으니 그냥 넣기.
                        }
                        counting = counting + (Number(cart[j].price) * Number(cart[j].val)); // 총 가격을 카운팅. 
                                                   //여기에 추가적으로 수량 카운팅하는 변수 만들어 넣어도 된다.
                        if(cart.length == j+1) { // 배열순회가 끝났으면 최종 값을 뿌려주고, 만약 엄청 길게 나올 수 있으니 2자리로 끊고, 뒷자리 0을 제거하기 위해서 number로 감싸준다.
                            let eap = Number(counting.toFixed(2));
                            let sfp = Number((counting*0.02).toFixed(2));
                            let tbap = eap+sfp;
                            $('#eaprice').text(eap);
                            $('#sfprice').text(sfp);
                            $('#tbaprice').text(tbap);
                        }
                    }
                } else { // 빈 배열이라면 그냥 넣고 화면에 뿌려주기.
                    cart.push(arr);
                    let eap = Number((el.price*val).toFixed(2));
                    let sfp = Number(((el.price*val)*0.02).toFixed(2));
                    let tbap = eap+sfp;
                    $('#eaprice').text(eap);
                    $('#sfprice').text(sfp);
                    $('#tbaprice').text(tbap);
                }
            }
        });
    });