영카트 모바일에서 상품 상세페이지 화면을 PC화면처럼 보이기 > 영카트 강좌

본문 바로가기
전체검색

그누스킨닷컴

영카트 강좌

그누보드 영카트 초보 사용자를 위한 기본 매뉴얼, 스킨 제작 기초강좌를 공유합니다.

영카트 모바일에서 상품 상세페이지 화면을 PC화면처럼 보이기

페이지 정보

작성자 관리자 작성일17-06-05 11:50 조회1,250회

첨부파일

item_info.zip (6.3K) 2017-06-16 05:31:58

본문

영카트 강좌

영카트 모바일에서 상품 상세정보 페이지 보기 방식은

위 화면처럼 상품정보, 상품문의, 상품후기 등을 클릭해서 새창을 띄우는 방식으로 되어 있는데

PC 화면처럼 한 페이지에서 모두 보이게 하는 방법입니다.

 

 

영카트 basic 테마 기준입니다.

 

수정파일 1

theme/basic/mobile/skin/shop/basic/item.form.skin.php

 

1-1.

해당 파일에서 아래 내용 삭제

 

<ul id="sit_more">
    <li><a href="<?php echo $href; ?>" target="_blank">DETAIL</a></li>
    <?php if ($default['de_baesong_content']) { ?><li><a href="<?php echo $href; ?>&amp;info=dvr" target="_blank">INFO</a></li><?php } ?>
    <li><a href="<?php echo $href; ?>&amp;info=use" target="_blank">REVIEW<span class="item_use_count"><?php echo $item_use_count; ?></span></a></li>
    <li><a href="<?php echo $href; ?>&amp;info=qa" target="_blank">Q&amp;A<span class="item_qa_count"><?php echo $item_qa_count; ?></span></a></li>
</ul>
 

1-2.

위에서 삭제한 내용 바로 아랫줄에 </form> 이 있을 텐데요.

</form> 은 그대로 두고 바로 밑에 아래 내용 전체 추가

 

<!-- 모바일 상품 상세정보를 PC처럼 보이기 시작 { -->
<!-- 상품설명 시작 { -->
<div id="sit_inf" class="win_desc">
<a class="qa_wr">상품 정보</a>
    <?php if ($it['it_basic']) { // 상품 기본설명 ?>
    <div id="sit_inf_basic">
         <?php echo $it['it_basic']; ?>
    </div>
    <?php } ?>

    <?php if ($it['it_explan'] || $it['it_mobile_explan']) { // 상품 상세설명 ?>
    <div id="sit_inf_explan">
        <?php echo ($it['it_mobile_explan'] ? conv_content($it['it_mobile_explan'], 1) : conv_content($it['it_explan'], 1)); ?>
    </div>
    <?php } ?>

    <?php
    if ($it['it_info_value']) {
        $info_data = unserialize(stripslashes($it['it_info_value']));
        if(is_array($info_data)) {
            $gubun = $it['it_info_gubun'];
            $info_array = $item_info[$gubun]['article'];
    ?>
    <h2>상품 정보 고시</h2>
    <!-- 상품정보고시 -->
    <ul id="sit_inf_open">
        <?php
        foreach($info_data as $key=>$val) {
            $ii_title = $info_array[$key][0];
            $ii_value = $val;
        ?>
        <li>
            <strong><?php echo $ii_title; ?></strong>
            <span><?php echo $ii_value; ?></span>
        </li>
        <?php } //foreach?>
    </ul>
    <!-- 상품정보고시 end -->
    <?php
        } else {
            if($is_admin) {
                echo '<p>상품 정보 고시 정보가 올바르게 저장되지 않았습니다.<br>config.php 파일의 G5_ESCAPE_FUNCTION 설정을 addslashes 로<br>변경하신 후 관리자 &gt; 상품정보 수정에서 상품 정보를 다시 저장해주세요. </p>';
            }
        }
    } //if
    ?>
</div>
<!-- } 상품설명 end -->

<!-- 사용후기 시작 { -->
<h1 class="tit_no">사용후기</h1>
<div id="itemuse" class="win_desc">
    <?php include_once(G5_SHOP_PATH.'/itemuse.php'); ?>
</div>
<!-- } 사용후기 end -->

<!-- 상품문의 시작 { -->
<h1 class="tit_no">상품문의</h1>
<div id="itemqa" class="win_desc">
    <?php include_once(G5_SHOP_PATH.'/itemqa.php'); ?>
</div>
<!-- } 상품문의 end -->

<!-- 배송정보 시작 { -->
<div class="win_desc">
    <h2 class="if_tit">배송정보</h2>
    <div class="win_desc_if">
        <?php echo conv_content($default['de_baesong_content'], 1); ?>
    </div>
</div>
<!-- } 배송정보 end -->

<!-- 교환/반품 시작 { -->
<div class="win_desc">
    <h2 class="if_tit">교환/반품</h2>
    <div class="win_desc_if">
        <?php echo conv_content($default['de_change_content'], 1); ?>
    </div>
</div>
<!-- } 교환/반품 end -->
<!-- } 모바일 상품 상세정보를 PC처럼 보이기 end -->
 

 

수정파일 2

theme/basic/mobile/skin/shop/basic/iteminfo.itemqa.skin.php

파일 전체 내용을 이렇게 수정

 

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
// add_stylesheet('<link rel="stylesheet" href="'.G5_MSHOP_SKIN_URL.'/style.css">', 0);

goto_url(G5_SHOP_URL.'/item.php?it_id='.$it_id.'#itemqa');
?>

 

 

수정파일 3

theme/basic/mobile/skin/shop/basic/iteminfo.itemuse.skin.php

파일 전체 내용을 이렇게 수정

 

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
// add_stylesheet('<link rel="stylesheet" href="'.G5_MSHOP_SKIN_URL.'/style.css">', 0);

goto_url(G5_SHOP_URL.'/item.php?it_id='.$it_id.'#itemuse');
?>
 

 

수정파일 4

theme/basic/mobile/skin/shop/basic/style.css

 

.win_desc{margin-top:10px}

여기를 이렇게 수정 (새로 추가한 내용 좌우에 여백을 넣어준 겁니다)

.win_desc{margin-top:10px;padding:0 10px;}

 

 

 

정상적으로 수정이 되었다면 이렇게 PC 화면처럼 같은 페이지에 전체가 출력될 겁니다.

 

668e23f1f8357ab1a1252308850d90e4_1496635125_3913.png 

관리자님의 댓글

관리자

수정된 파일을 같이 첨부해놨습니다.
본문 내용을 복사해서 붙여넣기 했을 때 잘 안 되면 첨부된 파일에서 갖다 써보세요.

커뮤니티는 당분간 중단하겠습니다.
영카트 강좌 목록
번호 제목
38 영카트 분류 메뉴에 특정 메뉴를 끼워 넣는 방법 - 5.3 버전 모바일
37 pp_cli_x64 파일을 바이너리 타입으로 다시 업로드하여 주십시오.
36 pp_cli_x64 실행권한을 부여해 주십시오. 댓글1
35 상품 목록에 구매시 지급되는 포인트 출력
34 상품 관리 권한을 특정 회원에게 부여하기 (관리 회원 아이디)
33 쇼핑몰 페이지 전체 임시 접근 금지
32 비회원으로 구매하기 클릭시 로그인 창 삭제하기 댓글1
31 상품 목록 정렬 순서를 최근 등록 날짜순으로 변경하기
30 배송 정보를 이미지로 만들어서 넣었을 때 페이지 밀림 방지
29 상품 목록 보기 방식을 갤러리 타입에서 리스트 타입으로 변경
28 상품 이미지를 썸네일이 아닌 원본으로 출력
27 주문서 전하실 말씀 textarea에 내용 미리 입력
26 1:1문의 페이지에 영카트 레이아웃 적용하기 모바일 지원
25 FAQ 페이지에 영카트 레이아웃을 적용하기
24 인덱스 페이지에 특정 상품 분류 페이지를 직접 출력하기 댓글1
23 상품 목록용 썸네일 이미지 별도로 사용하기
22 상품목록 스킨에 최소 최대 구매 수량 출력
21 메인페이지에 상품 문의 최신글 출력 댓글1
20 영카트 레이아웃을 특정 게시판에 적용하기 모바일 지원 댓글1
19 상품 여분 필드에 스마트 에디터 적용
18 상품 리스트 페이지에서 정렬 옵션 선택했을 때 활성화 효과
17 상품 썸네일 이미지 여백 없이 생성 크롭 설정 변경 댓글1
16 상품 여분 필드 사용 방법
15 Datepicker 특정 요일 선택 금지 영카트 희망 배송일에 사용
14 주문내역 목록에서 운송장번호 일괄등록 댓글4
게시물 검색


그누스터디는 그누보드, 영카트 초보 사용자를 위한 정보를 공유합니다.

Copyright © GNUSTUDY. All rights reserved.
상단으로