우커머스 탭 컨텐츠 모두 노출 + 탭메뉴를 스크롤 시 상단 고정 + 탭내용 바로가기 버튼으로 이용하기

우커머스를 이용한 쇼핑몰 제작 시 상품 상세 페이지에서 보여지는 각종 탭 정보들이 국내형 쇼핑몰처럼 보이길 원하는 경우가 있습니다.

뭐냐하면,
1. 정보탭이 스크롤 시 고정이 되고,
2. 탭의 내용이 화면에 한번에 모두 표시되고,
3. 탭을 클릭 시 탭과 연결된 정보가 화면 상단으로 고정이 되었으면 좋겠다!

구현할 수 있었던 내용을 토대로 정리된 내용은 아래와 같습니다.

● 우커머스의 탬플릿 구조를 이용, 현재 작업 중인 테마 폴더에 커스텀을 위한 탬플릿 파일을 복사

우커머스 플러그인 폴더에는 templates 라는 폴더가 있고, 그 중에 수정을 원하는 파일이 있을 경우 테마 폴더 속 woocommerce 라는 폴더를 만들어 같은 위치에 파일을 놓고 수정할 수 있음 (!!! 플러그인에 있는 templates 이라는 폴더 이름 대신 테마에서는 woocommerce 이름을 사용해야 함)

좌) 우커머스 플러그인 폴더 내 파일 / 우) 테마 폴더에 파일을 복사한 모습

● 우커머스 탬플릿 파일 수정

아래쪽 foreach 순환문에서 탭 컨텐츠 div 묶음에 ‘active’ 클래스 지정

▼ 각 탭의 컨텐츠들이 active 클래스가 지정되어 모두 나열됨 (※ 우커머스 자체 스타일에 영향을 받기 때문. class가 active이면 화면에 표시)

● 탭 메뉴가 스크롤 시 화면 상단에 고정이 되도록 스티키 처리

플러그인을 활용해서 적용 => [ Sticky Menu (or Anything!) on Scroll ]

▲ 화면 스크롤 시 고정이 될 탭 요소의 class 확인 => 우커머스 탭 : wc-tabs 클래스명 확인

▼ 스티키 플러그인 설정에서 고정할 요소 클래스명 입력 후 저장

( ※ 스티키 플러그인을 사용해 본 결과, 화면의 어떤 요소든 원하는 것을 화면 스크롤 시 고정시킬 수 있음. 큰 에러는 없었음 )

● 탭을 클릭 시 반응하는 스크립트 추가 (탭 컨텐츠 시작 부분을 화면 상단에 위치시키는 역할)

jQuery를 이용해서 탭 클릭에 반응하는 스크롤 에니메이션 적용

▼ 탭의 클래스로 클릭 이벤트를 체크해서 탭 컨텐츠 아이디를 가진 div가 화면 상단에 위치하도록 함 ( top – 50 은 탭 높이와 여백 50픽셀을 고려한 값 )

jQuery( document ).ready( function() {

    $('.description_tab').on('click', function() {
        $('html, body').animate({
            scrollTop: $("#tab-description").offset().top-50
        }, 500);
    });   
    $('.reviews_tab').on('click', function() {
        $('html, body').animate({
            scrollTop: $("#tab-reviews").offset().top-50
        }, 500);
    });   

});

( ※ 추가하고 싶은 js 코드는 테마들의 옵션에서 제공하는 추가 코드 입력 부분에 넣거나, js 파일을 테마에 추가해서 적용 가능 )

종합하면,
상품 설명 탭은 스티키 처리가 되어 화면이 스크롤 시 상단에 고정이 된 상태가 되며, 탭 메뉴를 클릭 시 연결된 탭 컨텐츠가 화면 상단에 스르륵 위치하게 됩니다.

– 끝 –