[jquery]카페24 쇼핑몰 디자인 수정 - 상품상세페이지 쿠폰다운로드 영역 수정하기

[jquery]카페24 쇼핑몰 디자인 수정 - 상품상세페이지 쿠폰다운로드 영역 수정하기

 

카페24 쇼핑몰 디자인수정하기(스킨 수정하기)

 

카페24 쇼핑몰 디자인수정하기(스킨 수정하기)

 

카페24 쇼핑몰 상세페이지에서는 쿠폰다운로드영역이 쿠폰다운로드 타이틀이 나오고 

 

토글스위치를 작동하면 하단에 쿠폰이 보여지게 된다. 

 

쿠폰 다운로드부분이 인지가 되긴 하지만 좀더 구매욕구를 발생하게 하기 위해 

 

실제 지급중인 쿠폰의 정보를 불러와서 같이 보여주었다. 

 

카페24 쇼핑몰 디자인수정하기(스킨 수정하기)

 

작업은 jquery를 이용해서 처리하였는데

 

상세페이지에 나오는 쿠폰들 중에 가장 나중에 설정된 쿠폰의 할인율이 노출되게 작업하였다. 

 

쿠폰 다운로드 영역은 coupon_productdetail 모듈을 불러서 사용하는데 

 

타이틀 영역이 노출되고 이후에 ul, li 태그를 이용해 쿠폰목록을 불러온다. 

 

<div module="coupon_productdetail" class="toggle eToggle">
    <div class="title couponDownload">
        <h2>쿠폰 다운로드</h2>
    </div>
    <ul class="contents couponBox">
        <li>
            <div class="coupon {$background_class}" style="background-image:url('{$background_url}')">
                <div class="detail" {$call_coupon_detail}>
                    <strong class="title">{$coupon_name}</strong>
                    <p class="discount"><span style="font-family:Verdana;" class="coupon_title">{$coupon_content}</span></p>
                    <p class="period">{$coupon_period}</p>
                </div>
                <div class="button"><a href="{$coupon_issue_url}"><img src="{$download_url}" alt="다운받기"></a></div>
            </div>
        </li>
        <li>
            <div class="coupon {$background_class}" style="background-image:url('{$background_url}')">
                <div class="detail" {$call_coupon_detail}>
                    <strong class="title">{$coupon_name}</strong>
                    <p class="discount"><span style="font-family:Verdana;" class="coupon_title">{$coupon_content|replace:.0%,%}</span></p>
                    <p class="period">{$coupon_period}</p>
                </div>
                <div class="button"><a href="{$coupon_issue_url}"><img src="{$download_url}" alt="다운받기"></a></div>
            </div>
        </li>
    </ul>
</div>

 

기본 소스코드에서 쿠폰 다운로드 글자를 변경하기 위해 해당영역에 couponDownload 클래스를 지정해주었고

 

쿠폰할인이 되는 부분을 coupon_title 클래스로 선언해주었다. 

 

카페24 쇼핑몰 디자인에서 $coupon_content 영역은 쿠폰의 할인내용 표시 부분인데

 

금액할인인 경우 2000원 할인, 비율할인인 경우 5.0% 등으로 표기가 된다. 

 

할인을 소수점 단위로 사용하지 않는 경우에도 소수점이 붙어서 출력이 되다보니

 

카페24의 모디파이어 기능을 이용해서 .0% 부분을 %로 치환해주었다. 

=> {$coupon_content|replace:.0%,%}

 

 

jquery 영역은 js 파일로 만들어 상세페이지에 import 시켜주었는데 

 

내용은 아래와 같다. 

 

var $prdlistDC=$(".couponBox"); // 쿠폰목록 변수로 저장
var $couponList=$(".couponBox li .coupon_title"); // 쿠폰갯수 확인
var cplen = $couponList.length; // 쿠폰갯수 변수로 선언

$(window).load(function(){
	function cpcnt(){
		$prdlistDC.find("li .coupon_title").each(function(index){ // 쿠폰갯수를 배열로 처리
		if (index !==(cplen -1)) 
		{
		} else { // 쿠폰이 마지막인 경우
		var cptitle = $(this).text(); // 해당 할인정보 가져오기
		$(".couponDownload h2").text('쇼핑몰전용 ' + cptitle + '쿠폰 받기'); // 쿠폰다운받기 내용 바꾸기
		}
		});
	}
	cpcnt();
});

 

상세페이지에 로딩된 쿠폰들 목록을 each 문을 이용해 분리하고

 

마지막에 등록된 쿠폰의 할인정보를 가져오게 처리하였다. 

 

기초적인 내용이라 어렵지 않게 처리할 수 있다.