카페24 쇼핑몰 jquery 중복 방지하기

오늘도 웹셀러를 알리고,

돈을 벌기위해 생계형 개발자의 삶은 계속 됩니다.

이번에는 카페24 쇼핑몰의 디자인센터에서 쇼핑몰을 제작을 진행하고 있습니다.

카페24에서는 css와 javascript 소스를 합쳐서 html 소스를 만들고 있습니다.

<!--@js(/layout/basic/js/basic.js)-->

위와 같은 소스로 해당 소스를 하나의 파일로 합칩니다.

(몇 줄이상 또는 파일로 분할하여 출력시킵니다.)

jQuery 소스도 위와 같은 방식으로 기본 제공을 합니다.

그런데 jQuery의 버전이 1.4.4로 낮아서 사용하고 싶은 자바스크립트 라이브러리를 마음대로 쓸수가 없어요..

높은 버전의 jQuery를 사용하기 위해서는 두가지만 기억하세요.

1. jQuery에서 제공하는 noconflict 메소드를 활용 할 것.

2. 라이브러리는 새 버전의 jQuery를 이용하여 사용 할 것

1번 부터 보면.

https://api.jquery.com/jquery.noconflict/ 에서 해당 메소드를 확인해보세요.

noconflict 가 어떤 방식인지는 저도 정확하게 모르겠습니다.

다만 noconflict 메소드를 사용하면 가장 나중에 추가된 jQuery를 새 변수로 가져올 수 있습니다.

이 시점은 noconflict가 사용되는 시점에서 가장 가까운 jquery 소스입니다.

<script type="text/javascript" src="/layout/basic/js/jQuery.js"></script>
<script type="text/javascript">
    window.jq_webseller = $.noConflict( true );
</script>

저는 위와 같이 추가하였습니다.

카페24에서 php를 통해 사용되는 자바스크립트 소스는 가장 나중에 불러들입니다.

어찌됫건 새버전의 jquery를 불러들인 바로 다음 noconflict를 사용하게 되면 새로운 jquery는 

새로운 변수를 통해 사용이 가능하다는 말이 되는거겠죠.

이렇게 된 다음 라이브러리를 호출합니다.

저는 owl을 불러들였습니다.

대부분의 javascript 라이브러리들은 

;(function($, window, document, undefined) {
   
})(window.jq_webseller, window, document);

위와 같이 사용이 됩니다.

위 함수는 새로운 블럭을 만들고, jquery와 window, document를 인자로 받고 있는 모습입니다.

기본적으로는 window.jQuery로 변수를 받고 있는데, 이 부분을 변경했습니다.

function 내의 모든 $ 변수를 새로 만든 jq_webseller로 변경하는것은 무리...는 아니지만 노가다...

몸과 정신 건강에 해롭습니다.....

아무튼 위와 같이 새로운 jquery 변수를 이용하여,

owl을 사용할 때

jq_webseller('.owl-carousel').owlCarousel({
    items:1,
    loop:true,
    margin:10
});

위와 같이 사용하면 되겠죠.

어찌보면 카페24에서 jQuery를 고정시켜놓은 것도 이해는 됩니다.

그럼 마저 쇼핑몰 제작을 하러 ... ^^