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

뭐냐하면,
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픽셀을 고려한 값 )

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

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

> 예 : http://oksambari.96.lt/product/happy-ninja/

 

– 끝 –

2 Comments

    1. oksambari

      댓글이 평소에 잘 없다보니 확인이 늦어졌습니다. ^^;
      사이트 들어가 보니 메인화면 문제는 해결이 되신 듯하네요.
      위 내용이 메인쪽에 영향을 미친다면 중복된 클래스명이나 그런 게 있었어야 할 거 같습니다.

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.