지금부터 쇼핑몰을 더 이뿌게 꾸며보도록 하겠습니다. ^^

상단메뉴의 쇼핑몰을 클릭했을 때 상품 전체목록들이 목록형과 앨범형으로 나타날 수 있도록 변경해보도록 하겠습니다.

 

 

 

 

 

 

 

 

 

상품의 전체목록을 출력하기 위해서 [디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]에서 "[쇼핑몰]상품 관련"의 "상품목록 :: 분류1기준"을 클릭합니다.

외각디자인 선택에서 "쇼핑몰 왼쪽디자인"을 선택한 후 아래의 "외각디자인 저장하기"버튼을 클릭하여 저장합니다.

 

 

기본템플릿 중에서 "목록형 상품목록"을 선택하고, 하단의 "나만의 디자인으로 복사"버튼을 눌러줍니다.

나만의 디자인으로 복사된 "목록형 상품목록"에서 "수정"버튼을 클릭하면 페이지 디자인관리에 전체소스들이 표시됩니다.

현재 수정할 부분이 없으므로 하단의 "수정완료"버튼을 눌러 수정을 완료합니다.

 

이제 홈페이지상에서 상품목록이 어떻게 나타나는지 확인해볼까요? 페이지 디자인관리에 있는 "URL코드"를 눌러줍니다.

 

 

 

 

 

 

 

   

 

 

 

 

 

현재 홈페이지화면에서 목록형과 앨범형을 번갈아 클릭해봅시다. 목록형과 앨범형이 동일한 화면으로 보이나요?

여기서는 목록형과 앨범형의 화면이 다르게 나타나도록 만들어보겠습니다.

 

 

마우스를 목록형과 앨범형에 살짝 올리고 왼쪽 하단모서리를 주시합니다.

javascript:direct_code("list"), javascript:direct_code("photo") 라고 표시되나요?  이것은 direct_code(강제접근코드)의 이름이 "list", "photo"인 곳으로 페이지를 이동한다는 의미입니다. 여기서 direct_code란 동일한 페이지에 2가지 이상의 서로 다른 디자인페이지를 만들수 있는 기능입니다.

처음 이 부분을 공부하시는 분들은 이해하기가 조금 힘들 수 있습니다... 천천히 같이 따라해보시면 이해가 되실거예요..

상품목록 페이지를 예를 들어 설명드리겠습니다.

관리자모드에서 상품목록은 [디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]에서 "[쇼핑몰]상품 관련"의 "상품목록 :: 분류1기준"을 클릭했을 때 디자인을 설정할 수 있는 페이지는 전체상품목록을 출력하는 1개 페이지만 있습니다.

여기서 리스트형 상품목록과 앨범형 상품목록의 2가지 서로 다른 디자인페이지로 만들 경우에 direct_code라는 것을 이용할 수 있습니다.

아직 무슨말인지 모르시겠다구요?  백번설명하는 것보다 한번 실습해보는게 이해가 쉽습니다.

지금부터 실제로 direct_code를 이용해서 리스트형 상품목록페이지와 앨범형 상품목록페이지를 만들어 보도록 하겠습니다.

현재 페이지는 목록형 상품목록이며, 디자인 페이지관리의 강제접근코드에 이름을 "list" 로 넣고 수정완료버튼을 누릅니다. 이 부분이 위에서 설명한 javascript:direct_code("list")이 됩니다.

 

 

위와 동일한 방법으로 앨범형 상품목록도 만들어보도록 하겠습니다. 앨범형 상품목록은 기본템플릿을 "앨범형 상품목록"을 선택해서 나만의 디자인으로 복사한 후, 강제접근코드는 "photo"를 넣어주시면 됩니다.

이 부분이 위에서 설명한 javascript:direct_code("photo")가 됩니다.

 

나만의 디자인에 추가된 목록형 상품목록과 앨범형 상품목록은 다음과 같이 나타납니다. 아래의 그림과 동일한 화면이 보이나요? 여기서 대괄호[]에 포함된 글자가 direct_code(강제접근코드)가 되는 것입니다.

※ 강제접근코드를 넣지 않을 경우에는 대괄호가 표시되지 않습니다.

 

 

 

이제 상품목록 URL을 클릭하고 목록형과 앨범형을 번갈아 클릭해보세요 . 정상적으로 표시되나요?

 

 

그런데, 여기서 잠깐~~~~

"저는 홈페이지의 목록형이 처음에 보여줬으면 합니다!" 라고 하시는 분들이 있을 겁니다. 어떻게 해야 할까요?

아시겠죠? 위의 그림처럼 현재 페이지가 앨범형 상품목록에 체크되어 있기 때문입니다. 아래와 같이 목록형 상품목록을 선택해서 변경합니다.

 

 

 

 

 

 

 

 

 

다시 현재 상품목록 URL을 클릭해봅시다. 상품의 이미지를 눈에 띄도록 크게 변경해보겠습니다.

쇼핑몰에서 상품의 크기변경은 상품목록의 소스를 수정하는 것이 아니라 쇼핑몰의 환경설정부분에서 쉽게 수정할 수 있습니다.  [쇼핑몰관리 》 환경설정 》 상품관련 설정]으로 이동하고 "상품이미지 크기 설정" 부분의 목록이미지의 크기를 아래와 같이 변경하고 하단의 적용버튼을 눌러줍니다.

※ 목록이미지의 크기는 큰 이미지를 기준으로 비율대로 축소합니다. 따라서 작은 이미지가 크게 확대되지는 않습니다.

 

 

상품목록을 페이지를 열어봅시다. 앨범형은 크기가 변경된 것을 한눈에 알 수 있습니다.

 

 

 

 

 

 

 

마지막으로 네비게이션 메뉴의 쇼핑몰을 위에 만든 상품목록과 연결해보도록 하겠습니다.

[디자인관리 》 전문가 환경설정 》 네비게이션 마법사]로 이동후 링크정보의 "[쇼핑몰]상품관련》상품목록::분류1기준"을 선택한 후 수정합니다.

 

 

 

 

 

 

 

수고하셨습니다.

 

완성 화면 : http://uhkr31.aramschool.co.kr/shop_goods/goods_list.htm

 

 

 

완성 하신 분은 다음 미션으로 고고고~~~