쇼핑몰센터스마트디자인

jQuery 사용시 주의 사항

현재 카페24 쇼핑몰에서 기본 제공되는 jQuery의 버전은 1.4.4 버전 입니다. jQuery는 다양한 버전을 가지고 있으며, 쇼핑몰 제작시 다른 버전의 jQuery 를 사용할 수 있습니다.

그러나 jQuery를 추가로 사용하게 되면 스마트디자인에 내장되어 있는 1.4.4버전과 충돌이 나는 경우가 있습니다.

카페24 기본 기능을 포함한 페이지가 정상적으로 뜨지 않거나, 사용자가 추가한 플러그인이 정상 동작하지 않는 등의 문제가 발생할 수 있으며

심한 경우 결제가 되지 않는 등 쇼핑몰 기능에 영향을 줄 수 있습니다.

또한 구글 CDN 서버 등 외부에 등록된 jQuery 를 사용할 때, 서비스사에서 서버 부하가 있는 경우 쇼핑몰에 정상적으로 렌더링 되지 않아 쇼핑몰 기능(주문 등)에 영향을 받게됩니다.

최대한 스마트디자인에 내장되어 있는 1.4.4버전에 최적화 하여 사용하길 권장합니다하며, 필요시 해당 js 파일을 FTP로 업로드 하여 사용하시기 바랍니다.

* 중국어 스킨을 만드실 땐 꼭 쇼핑몰에 제이쿼리 파일을 넣어서 사용해주세요! 중국에서 구글 서비스가 되지 않아 제이쿼리 자체를 로딩하지 못하여 스크립트 에러가 나게 됩니다.

1) 카페24 쇼핑몰에서 기본 제공하는 jQuery 1.4.4 외의 버전을 사용하려는 페이지에 직접 다음과 같은 코드를 추가해줍니다.

예로 든 'jQuery1_11_2' 부분은 사용자 임의로 다른 것으로 변경해주셔도 됩니다. (단, jQuery는 안됩니다.)

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
window.jQuery1_11_2 = jQuery.noConflict(true);
</script>




2) 플러그인 및 사용자 소스에서 'jQuery' 또는 '$'를 'jQuery1_11_2'로 변경

플러그인 js 파일 및 플러그인을 사용하는 코드에서의 'jQuery' 또는 '$'를 모두 'jQuery1_11_2'으로 변경하여 줍니다.

a) 기본적인 수정 방법

카페24 기본 제공 jQuery 1.4.4 외의 버전에서 동작해야 하는 플러그인 또는 사용자 js 파일을 열고 jQuery 또는 $를 모두 jQuery1_11_2으로 변경합니다.

[as-is]

jQuery('#price').html('1,000');

$('#price').html('1,000');

[to-be]

jQuery1_11_2('#price').html('1,000'); // jQuery를 jQuery1_11_2으로 수정

jQuery1_11_2('#price').html('1,000'); // $를 jQuery1_11_2으로 수정




b) "(function($) {})(jQuery)와 같이 이미 function으로 둘러싸져 있는 경우" 수정 방법

플러그인 파일을 열어보면 대개 다음과 같이 되어 있습니다. 이 경우에는 모든 jQuery, $를 변경해줄 필요 없이 최하단에 있는 jQuery만 수정해주면 됩니다.

[as-is]

(function($) {

    var jCarousel = $.jCarousel = {};

}(jQuery));

[to-be]

(function($) {

    var jCarousel = $.jCarousel = {};

}(jQuery1_11_2)); // jQuery를 jQuery1_11_2으로 수정




c) function 하나에 가두기

b와 동일한 방식으로 비교적 간단히 해결할 수 있습니다.

[as-is]

jQuery('#price').html('1,000');

$('#price').html('1,000');

[to-be]




(function($) { // function 하나에 기존 코드들을 모두 묶어줍니다.

    var jQuery = $; // $ 뿐만 아니라 jQuery도 사용할 수 있도록 해주기 위한 코드입니다.

 

    jQuery('#price').html('1,000');

    $('#price').html('1,000');

}(jQuery1_11_2)); // function 하나에 기존 코드들을 모두 묶어줍니다.




d) 주의사항 - 글로벌 function이 존재하는 js 파일

참고로 위와 같은 방법을 사용할 경우 해당 파일 내에 정의된 글로벌 function에 의해 정상 동작하지 않을 수 있습니다.

즉 다음과 같은 코드가 존재하는 파일은 정상 동작하지 않을 수 있습니다. 이러한 문제를 해결하는 방법은 외부에서 사용할 수 있도록 정의해주는 것입니다.

[as-is]

function user_function()
{
    var iPrice = $('#price').html();
    alert(iPrice);
}

[to-be]

(function($) {
    var jQuery = $;

    function user_function()
    {
        var iPrice = $('#price').html();
        alert(iPrice);
    }
    window.user_function = user_function; 

                   // 이제 외부에서 user_function을 사용할 수 있게 됩니다.
}(jQuery1_11_2));




2. $.noConflict() 활용한 실제 예제

'jCarousel'라는 jQuery 플러그인을 사용하는 코드를 수정하는 방법을 통해 설명해보겠습니다.

사용자 js 파일에서 jQuery 1.4.4에서는 지원하지 않는 $.on()이라는 메소드를 사용하였기 때문에 정상 동작하지 않는 문제가 있었는데,  jquery-1.11.2.min.js를 사용하여 정상 동작하도록 하는 예제입니다.

1)  jQuery 파일 추가 로드 및 jQuery.noConflict() 코드 추가

2) 플러그인 파일 수정

예제에서는 위에 사용방법 중 '2-C의 . function 하나에 가두기' 방법을 사용하였습니다.

3) 플러그인 사용 파일을 수정

[as-is]

jQuery(function($)){

  // blah blah

});

[to-be]

jQuery1_11_2(function($){

    //blah blah

});