카페24 쇼핑몰 무한스크롤 구현하기

카페24 쇼핑몰에서 더보기로 구현된 메인의 상품위젯과 서브의 상품리스트 화면에서 스크롤을 내리면 계속 로딩되는 화면을 구현해보았습니다.

1. 쇼핑몰 관리자 로그인하기

먼저 해당 쇼핑몰의 ftp 접속 주소를 알아야 합니다.

쇼핑몰 관리자에 로그인합니다.

https://eclogin.cafe24.com/Shop/

2. FTP 접속정보 확인하기

카페24 관리자 화면에 접속 후, 1) FTP 2) 웹FTP접속 3) FTP접속 아이디, 접속주소, 비밀번호, 접속방식, 패시브모드를 확인합니다.

FTP주소는 id.cafe24.com

FTP아이디는 id

FTP비밀번호는 별도 세팅을 하지 않으셨다면 쇼핑몰 관리자 비번과 같습니다. 혹시 모르시면 카페24에서 1:1문의를 남겨보세요.

접속방식은 FTP 혹은 SFTP로 설정하면 됩니다. 포트는 FTP의 경우 21, SFTP의 경우 3822로 설정 후 테스트해보세요.

패시브모드는 보통 체크하시면 됩니다.

3. 에디터에서 FTP 설정하기

저는 PhpStorm 프로그램을 사용합니다. EditPlus나 Visual Studio Code 등 본인이 작업하기 편리한 툴을 사용하시면 됩니다.

4. 해당 화면의 편집 경로를 확인합니다.

4.1. 카페24에서 사용하는 스킨을 확인합니다.

모바일쇼핑몰 -> skin-mobile1 을 확인합니다.

4.2. FTP에서 해당 스킨의 경로를 확인합니다.

카페24에서 스킨은 sde_design 디렉토리에서 확인 가능합니다.

4.1)에서 skin-mobile1 이라고 확인했으니 해당 스킨은 /sde_design/mobile1 의 디렉토리입니다.

모바일 처음 접속시 화면은 index.html 입니다. 

잘 모르시면 카페24에서 해당 파일을 열면 화면과 코드 부분을 같이 확인 가능합니다.

4.3. 카페24 스킨 편 쇼핑몰 디자인 수정하기 버튼을 클릭하면 새 창으로 아래 화면이 뜹니다.

메인화면(index.html)에서 편집하고자 하는 부분을 화면에서 브라우저에서 클릭하면 편집해야하는 부분이 드래그되어 표시됩니다.

더보기 버튼은 그 아래에 있으니 소스상에서도 확인이 가능합니다.

5. index.html 편집하기

해당 기능은 자바스크립트 코드를 작성해야합니다.

index.html 파일 내부에서 <script> //코드 </script> 로 작성해도 되고,

별도 디렉토리에서 js 파일을 import 해서 사용해도 됩니다.

/sde_design/mobile1/layout/basic/js/infinite.js

/sde_design/mobile1/js/module/product/infinite.js

파일 경로는 레이아웃에 관련된 것인지, 프로덕트 화면에만 관련된 것인지에 따라 위 경로에 파일을 작성하실 수 있습니다.

5.1. <script>..</script>로 작성하는 방법

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    window.jq = jQuery.noConflict(true);
</script>
<script>
    (function($) {
    // 코드    
    }(jq));
</script>

위 방법은 카페24의 제이쿼리가 아닌 최신버전의 다른 버전의 제이쿼리를 불러오는 방법과

다른 버전의 제이쿼리를 쓸 경우 충돌나지 않도록 작성하는 방법입니다.

기본 카페24에서는 제이쿼리 1.4.4 버전을 불러옵니다. 해당 버전의 제이쿼리를 사용해도 될 경우엔

일반적인 <script>..</script> 로만 작성하시면 됩니다.

4.3)에서 더보기 부분의 코드를 보면 onclick 부분의 코드를 먼저 확인해봅니다.

onclick="{$more_action}" 이라고 된 부분을 확인할 수 있습니다.

이건 카페24에서 해당 버튼을 클릭할 경우 실행되는 소스에 대한 변수 코드입니다. 이는 브라우저에서 확인 가능합니다.

이 부분을 브라우저의 개발자도구에서 확인해봅니다.

onclick="try { $M.displayMore(2, 3, 0, 12, 0, true, 'S0000000', false, ''); } catch(e) { return false; }"

클릭했을 경우 try { .. } catch(e) { .. } 이 부분까지 실행되는 걸 알 수 있습니다.

브라우저 스크롤을 바닥까지 내릴 경우 해당 코드가 실행되도록 하면 됩니다.

이 부분을 function화해서 펑션 내부에 해당 코드를 작성해놓고, 스크롤이 내려갈 경우 해당 함수가 실행되도록 코드를 짜보았습니다.

<script>
    function more(){
        try { $M.displayMore(2, 3, 0, 12, 0, true, 'S0000000', false, ''); } catch(e) { return false; }
    }
    (function($) {
        var timer;
        $(window).scroll(function(){
            var scrolltop = parseInt ( $(window).scrollTop() );
            if( scrolltop >= $(document).height() - $(window).height() - 750){ // 푸터가 있을 경우 푸터 높이 만큼을 더 빼줍니다.

                if( !timer ){

                    //추가할 내용 1
                    //실행되고 설정된시간(1000)후에 재실행된다. 1000초이내 중복실행 방지

                    timer = setTimeout(function() {
                        timer = null;
                        more();
                        //추가할 내용 2
                        //설정된 시간(1000) 후에 실행됨

                    }, 500);
                    //시간은 150~ 으로 알맞은 시간을 찾아야함
                }
            }
        });


    }(jq));
</script>

function more(){ .. } 해서 more() 함수를 호출하는 방법 외에는 아래 방법들이 있습니다.

※ 제이쿼리로 해당 버튼을 클릭한 효과를 내는 방법

var btn = $(".xans-product-listmain-2").find(".btnMore");
btn.trigger("click");

※ 자바스크립트로 해당 버튼을 클릭한 효과를 내는 방법

var ele =document.getElementById('btnInfinite'); // 변수에 엘리먼트 저장
ele.click();

5.2. js 파일을 임포트하는 방법(1) - 카페24 방식

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

<!--@import(..)--> 와 같이 작성하면 카페24에서 로딩될 때 하나의 js 파일로 합쳐져서 로딩됩니다.

5.3. js 파일을 임포트하는 방법(2) - 일반적인 웹 소스코드 작성방식

<script src="/layout/basic/js/infinite.js"></script>

※ 주의사항 : 카페24에서는 코드를 수정하신 후에 항상 카페24 관리자에서 사이트캐시삭제를 해야 수정된 코드를 바로 확인 가능합니다.

카페24에서 캐시삭제를 하지 않은 경우 카페24에서 수정되기 이전에 캐시된 화면소스를 보게 되어 수정이 이뤄지지 않은 것으로 보여지게 됩니다.

6. 캐시 삭제하기

6.1. 카페24 사이트캐시삭제하기

관리자 상단에 '사이트캐시 삭제'를 클릭 후 항상 캐시를 비워주세요. 그래서 수정이 적용된 화면을 확인하실 수 있습니다.

6.2. 브라우저 쿠키 및 캐시 삭제하기