jquery - 배열로 요소 가져와서 데이터 활용하기 each, attr, children 등 사용

jquery - 배열로 요소 가져와서 데이터 활용하기 each, attr, children 등 사용

 

# 반복되는 특정 클래스를 이용해서 해당 데이터들을 배열로 만들고 그걸 이용해서 값을 처리한다. 

 

# 카페24 쇼핑몰에서 상품 할인율 처리하는 방법

 

# 작업순서

- 반복되는 상품목록에 클래스를 선언해준다. "discount"

 

- "discount" 가 들어가있는 요소에 data 필드를 이용해 값을 넣어준다. 

 

- "data-price={$product_price}" => 카페24 쇼핑몰에서는 {$product_price}가 판매가 {$product_custom}은 소비자가

{$prd_price_sale}은 할인판매가로 적용된다. 

 

- 이제 이 요소들을 이용해서 데이터 처리를 진행하면 된다. 

 

 

# 상품목록 html 작성

 

<ul class="prdList">
	<li>
    	<div class="thumbnail"><img src="{$image_small}"></div>
        <div class="description">
        	<span class="name">{$product_name}</span>
        	<span class="price">{$product_custom}</span>
        	<span class="price">{$product_price}</span>
        	<span class="price-sale">{$prd_price_sale}</span>
            <span class="discount" data-price="{$product_price}"><span class="dis-rate" style="display:none"></span>
            <span class="data-sale" style="display:none">{$prd_price_sale}</span>
            </span>
        </div>
    </li>
	<li>
    	<div class="thumbnail"><img src="{$image_small}"></div>
        <div class="description">
        	<span class="name">{$product_name}</span>
        	<span class="price">{$product_custom}</span>
        	<span class="price">{$product_price}</span>
        	<span class="price-sale">{$prd_price_sale}</span>
            <span class="discount" data-price="{$product_price}"><span class="dis-rate" style="display:none"></span>
            <span class="data-sale" style="display:none">{$prd_price_sale}</span>
            </span>
        </div>
    </li>
</ul>

 

위에 코드를 보면 카페24 쇼핑몰에서 상품목록을 뿌려줄때 <li> 부분이 반복해서 나타나는데 

 

그중에 상품설명부분에 "discount"가 포함되는 요소를 추가해주었다. 

 

이부분에는 정상가격과 할인율이 표시될 요소, 할인판매가가 포함된 요소를 삽입해주었다. 

 

각각의 요소를 따로 작성한 이유는 카페24쇼핑몰내에서 제공되는 기능중에 태그제거가 되는 부분이 있는데

 

더보기 상태에서는 지원이 되지 않아서 따로 처리를 했다. 

 

자세히 설명하자면 {$prd_price_sale} 부분을 기본 호출하게 되면 태그가 없는 금액이 호출되다가 

 

더보기버튼을 누르게 되면 <span style="font-size:14px;color:#000000;">30,100원</span> 이런식으로 

 

태그가 작성되어 노출이 된다. 

 

그래서 개별처리를 하게 되었다. 

 

 

# jquery 부분 작성

var $productlist=$(".prdList");
$(window).load(function(){
	function dis(){
		$productlist.find(".discount").each(function(index){
			var t = $(this);
			var ap = parseFloat(t.attr("data-price").replace(/[^-\.0-9]/g,""));
			var sp = parseFloat(t.children(".data-sale").text().replace(/[^-\.0-9]/g,""));
			var srate = parseInt(100-Math.round(parseFloat(sp)/parseFloat(ap)*100))+"%";
			if(sp > 0) {$(this).children(".rate").show().text(srate);}
		});
	}
	dis();
});

 

위에 상품목록에서 작성한 내용을 바탕으로 "prdList" 라는 클래스를 가진 요소를 가지고 와서

 

each를 이용해 배열을 만든다. 

 

그 이후에 기본 판매가와 할인가를 가지고 오고

 

할인가를 판매가로 나누어 할인율을 계산한다. 

 

그리고 게산된 할인율을 discount 클래스 요소 아래에 있는 rate클래스를 가진 요소에 넣어주고

 

기본적으로 감추어둔 rate 클래스가 있는 요소를 보여주면 된다. 

 

할인율을 계산하려면 숫자로 변환을 해야하기 때문에 가격에서 숫자를 제외하고는 제거하고

 

parseFloat 함수를 이용해 숫자로 인식을 시켜주었다. 

var ap = parseFloat(t.attr("data-price").replace(/[^-\.0-9]/g,""));

 

 

아래 부분은 data-sale 클래스를 가지고 있는 요소의 텍스트값을 가지고 와서 숫자만 남기고 위와 동일하게 처리해주었다.

var sp = parseFloat(t.children(".data-sale").text().replace(/[^-\.0-9]/g,""));

 

상품목록에서 discount 아래에 data-sale 요소를 넣어주었기 때문에 t.children을 이용해서 data-sale 에 있는 값만 지정해서 가져오도록 했다. 

 

 

마지막으로 할인율을 계산해주었는데 Math.round 함수를 써서 소수점 처리를 해서 고정된 비율로 할인율이 계산되게 처리를 했다. 

그리고 할인판매가가 있는 경우 - if(sp > 0) 에만 할인율을 보여주도록 조건문을 작성해주었다. 

 

var srate = parseInt(100-Math.round(parseFloat(sp)/parseFloat(ap)*100))+"%";
if(sp > 0) {$(this).children(".rate").show().text(srate);}

 

 

보통 jquery 문을 작성하게 되면 페이지가 시작하고 바로 처리가 되기 때문에 document.ready(function() 을 이용하는데 카페24쇼핑몰에서는 상품목록을 보여줄때 더보기를 누른 경우 캐시에 저장이 되어 미리 페이지 로드를 하게 된다. 

그렇기 때문에 document.ready 를 이용했더니 기본 목록에서는 정상적으로 노출이 되는데 추가로 페이지 로드가 되는 부분은 정상적으로 로딩이 되지 않았다. 

그래서 전체적으로 로딩이 완료가 된 이후에 할인율을 계산하도록 아래와 같이 처리를 했다. 

 

$(window).load(function(){

});

 

더보기 버튼을 클릭했을 때에는 추가로 할인율계산을 하고 setInterval 함수를 이용해 타임 딜레이를 주었더니 문제없이 잘 실행이 되었다.