<aside> 🟢 호스팅사 : 메이크샵
</aside>
﹡셀프 설치가 어렵다면 ****설치 요청하기
소요시간 20분 내외
리뷰 탭 - 목록 팝업창 위젯과 리뷰 개수 연동을 함께 설치하는 경우, 팝업창 위젯을 먼저 작업해주세요.
본 가이드를 띄워둔 채로, 다른 탭에서 메이크샵 관리자센터에 들어가 가이드대로 설치를 진행해주세요.
↓ 상품 상세페이지에는 보통 3~4개로 이뤄진 메뉴 탭이 존재합니다.
↓ 각 위치에서 리뷰 탭을 클릭시 상품 후기 영역으로 이동하며, 클릭 시 브이리뷰 위젯이 팝업창이 열리게 하도록 설치를 시작합니다.
↓ 상품 상세페이지를 수정할 수 있는 화면이 열립니다
↓ 코드 하이라이트 사용을 체크하면 더 쉽게 소스코드를 찾을 수 있습니다.
↓ <ul></ul>로 감싸진 탭 영역을 찾습니다.
↓ 상품 상세페이지의 메뉴 타이틀 4개 (DETAIL PRODUCT, RELATION PRODUCT, REVIEW BOARD, Q&A BOARD) 가 차례대로 적혀있는 영역입니다.
↓ 쇼핑몰 마다 리뷰 탭의 이름이 다르기 때문에, 자사 쇼핑몰의 리뷰 탭 이름과 동일한 영역을 찾습니다. 예시의 경우, 리뷰 메뉴의 타이틀이 ‘REVIEW BOARD’이기에, REVIEW BOARD를 찾습니다.
↓ 기존의 코드를 복사(Copy) 한 후, 바로 윗줄에 붙여넣기(Paste) 합니다.
↓ 붙여넣은 코드의 양쪽에 <!— —> 를 적어줍니다.
*기존의 리뷰 탭 영역을 비활성화 하고, 브이리뷰의 위젯을 설치하는 과정입니다.
*주석은 기능이 없는 코드입니다. 코드에 주석 처리시 해당 영역은 보이지 않거나 기능을 하지 않습니다.
*추후 리뷰 탭을 이전으로 복구할 경우를 대비해, 기존 리뷰 탭 영역은 삭제하지 않고 주석처리하여 비활성화 합니다.
↓ 아래 스크립트를 복사합니다.
<!--브이리뷰 (vreview) 스크립트 / 수정할 경우 연락 부탁드립니다 ([email protected])-->
*용이한 유지보수를 위해, 브이리뷰 코드가 심겨진 위치를 표시하는 역할을 합니다.
↓ 11번에서 주석처리한 코드 바로 아래에 복사한 주석 스크립트를 붙여넣습니다.
↓ 아래 코드를 복사합니다
↓ 리뷰 탭 이름에 개수가 들어가는 곳에 복사한 코드를 붙여넣습니다.
↓ 기존에 다른 클래스 코드가 들어있는 <span>태그에 브이리뷰 클래스 코드를 심을 경우, 기존의 클래스 코드(아래 예시의 경우itemnum) 다음에 브이리뷰 클래스 코드 vreview-review-count 를 붙여넣고, 사이는 띄어쓰기를 해줍니다.
예시 쇼핑몰의 상세 페이지에는 리뷰 탭 메뉴가 4곳에 위치하므로, 수정한 코드를 나머지 3곳에도 적용합니다.
↓ 스크롤을 아래로 내려 두번째 탭 메뉴 영역을 찾습니다.