애니빌드.LAB
Basic
홈페이지 만들기 3. 제품 소개 솔루션 설치
- Anybuild
- 2014-04-21 17:33:00
- hit1913
- http://lab.anybuild.co.kr/bbs/mission/1645
안녕하세요. 애니빌드 입니다.
이전 강좌에서 견적문의, 맞춤게시판, 맞춤전송폼 등을 설치해 보았습니다.
사용해보셨으면 아시겠지만 사실 이런 단품 프로그램은 메뉴도 작고, 규모도 작고, 기능 또한 제한적입니다.
하지만 제품소개 솔루션, 쇼핑몰 솔루션, 구인구직 솔루션은 분류관리, 상품관리, 분류별 순서 변경, 메인 출력, 주문서 관리, 결제기능 등 다양한 기능을 가지고 있습니다.
[프로그램샵 > 프로그램 추가설치 > 프로그램 견적문의] 에서 아래와 같은 솔루션들이 제공되고 있음을 확인 할 수 있습니다.
)
설치 방법은 동일 합니다.
[제품소개 솔루션]으로 들어가셔서 모듈만 설치 합니다.
)
설치 하고 나면 관리자모드 메뉴에 [제품관리]라는 새로운 대메뉴가 생성 됩니다.
단품 프로그램은 대부분 "프로그램 환경설정"에 설치 되지만 솔루션은 관리자 모드 대메뉴로 바로 설치 됩니다.
솔루션은 기능이 많기 때문에 우선 기본적인 데이타를 임의로 등록 하고 진행하시는것이 좋습니다.
1. [제품 관리 > 제품분류 관리 > 분류 기본 설정]에서 "최상위 접근권한 "에 비회원에 체크 합니다.
)
[제품 관리 > 제품 관리 > 환경설정] 에서 접근권한을 설정 합니다.
)
2. [제품 관리 > 제품분류 관리 > 분류 관리] 에서 아래와 같이 분류를 생성 합니다.
)
3. 제품을 임의로 등록 합니다.
[제품 관리 > 제품 관리 > 제품 관리]에서 상품을 임의로 약 10개 가까이 등록 합니다.
이때 등록폼에서 사용하지 않는 항목은 닫아주세요. (다시 열어야 하는 경우 [제품 관리 > 제품 관리 > 환경설정]에서 복구 할 수 있습니다.)
)
이렇게 제품분류와 제품정보를 등록 했다면 홈페이지 상에 정상적으로 출력될 수 있도록 해야 합니다.
4. 메뉴 네비게이션 에서 제품리스트 링크주소를 알아내야 하는데 [제품 관리 > 제품분류 관리 > 분류 관리]에서 각 카테고리별 링크주소를 알 수 있습니다.
)
링크주소를 유심히 보시면 뒤쪽에 분류 코드가 들어가 있는데 이부분을 지우면 전체 상품이 출력 됩니다.
[디자인관리 > 전문가 환경설정 > 네비게이션 마법사]로 이동해서 아래와 같이 "제품소개"의 링크 주소를 변경 합니다.
)
5. 제품 리스트가 출력 되는 부분의 디자인페이지를 수정해보도록 하겠습니다.
프로그랩샵에서 솔루션구매시 대부분 세부화면 디자인에서 셋팅 됩니다.
[디자인관리 > 고급 디자인 관리 > 세부 화면 디자인]으로 가면 아래 와 같이 제품소개 페이지가 새로 생성되어 있습니다.
)
본 강좌에서는 제품목록 페이지와 제품 상세보기 페이지, 2개의 페이지만 사용하도록 하겠습니다.
제품목록을 클릭해서 스킨을 "서브 스킨"을 선택하고 저장 해주시구요.
우측에 기본 템플릿 디자인이 있습니다. 기본 템플릿 디자인은 수정이 불가능 하기때문에 "phpx 기본소스"선택하고 나만의 디자인으로 복사해주세요.
)
)
)
나만의 디자인으로 복사했다면 다른건 수정 하지 마시구요.
상단 부분에 아래 소스를 추가 하세요.
<php name="my_navi_code" value="02000000" />
)
제품 상세보기 페이지도 위와 똑같이 작업해주세요.
여기까지 작업 하신 다음 홈페이지 접속해서확인해보시면 아래와 같이 정상적으로 출력 됩니다.
)
제품은 출력 되고 있지만 좌측 메뉴에는 전혀 출력되지 않고 있습니다.
현제 좌측 메뉴는 [디자인관리 > 전문가 환경설정 > 네비게이션 마법사]와 연동 되어 출력되고 있기 때문에 당연히 출력되지 않고 있습니다.
이런경우 위 $my_navi_code 가 02000000 인경우에 대해서는 네베게이션의 메뉴가 나올게 아니라 제품소개 카테고리가 나오도록 처리 해줘야 합니다.
6. 좌측 제품 카테고리를 만들어 보겠습니다.
[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리] 으로 가셔서 [프로그램 마법사 생성]을 통해 아래와 같이 그룹디자인을 생성해주세요.
)
)
필자는 {GROUP_pj_v_lay}라는 그룹디자인을 생성 하였습니다. 이 코드를 스킨에 적용시켜 보도록 하겠습니다.
[디자인관리 > 고급 디자인 관리 > 스킨 관리]으로 이동 하셔서 "서브스킨" 을 아래와 같이 소스 수정해주세요.
)
<!--@if($my_navi_code == '02000000')-->
{GROUP_pj_v_lay}
<!--@else-->
{GROUP_left_all}
<!--@end-->
소스 설명을 잠깐 드리겠습니다.
제품 목록, 제품 상세보기 화면에서 소스상에 <php name="my_navi_code" value="02000000" /> 을 삽입하였는데 이런 구문은 아래와 같이 변수가 자동으로 선언되도록 되어 있습니다.
<head>
{@
$my_navi_code = '02000000';
@}
</head>
phpx 변수라서 눈에 보이지는 않지만 <head>부분에서 변수가 추가 되어 있기 때문에 서브 스킨에서 <!--@if($my_navi_code == '02000000')--> 이 부분에 의해서 자동으로 분류 됩니다.
여기까지 작업 하셨으면 홈페이지 접속 하셔서 정상적으로 작동 되는지 확인해보시기 바랍니다.
완성 화면 : http://uany03.anybuild.com/product/product_list.htm
여기까지 잘따라 오셨다면 쇼핑몰 솔루션 , 구인구직 솔루션, 뉴스 솔루션등 모든 솔루션은 설치 방법이 동일하기 때문에 쉽게 설치 하실수 있습니다.
수고하셨습니다.
열기 닫기