Help Center

카페24 소식

[상점관리] 현금영수증 결제페이지 표시 설정 기능 추가

2014-12-03


안녕하세요, 카페24 운영도우미 입니다.


주문완료 후에만 신청할 수 있었던 현금영수증을 이젠 주문서 작성화면에서도 신청할 수 있습니다.

추가된 현금영수증 발행관련 표시설정 기능을 쇼핑몰 운영에 활용해보세요.


자세한 내용은 아래를 참조해 주세요.



■ 적용일자 : 2014-11-19 (수)

■ 업데이트 내용


   - 추가된 메뉴 : 상점관리 > 결제관리 > 현금영수증 관리 > 발행설정 > 주문서 표시설정

   

   - "표시함" 선택 후 설정완료 저장하시면, 프론트 주문서작성 시 구매자가 직접 현금영수증을 신청할 수 있습니다.

      단, 주문 관련 화면에서 현금영수증 신청/확인 디자인을 추가해 주셔야 합니다. 아래 디자인 설정안내를 참고하세요.


   - "표시함" 선택에서 "현금영수증 발행 선택 조건에서 '신청안함' 사용하지 않음" 체크된 상태로 설정완료 저장하시면

      프론트 주문서작성 > 현금영수증 발행에서 개인, 사업자 선택만 가능하고 '신청안함'은 보이지 않게 사용할 수 있습니다.



   ▼ 참고 화면1 - 어드민


   ▼ 참고 화면2 - 프론트(PC)


■ 디자인 설정 안내

▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가 합니다.

1. PC 디자인(뉴상품)


   1) HTML 파일

       - 위치 : 디자인관리 > 디자인편집하기 > 스마트디자인 편집창 > 주문 > 주문서 작성(/order/orderform.html)


##  상단 생략 ##

            <div class="agree">
                <table border="1" summary="">
                <caption>결제관련동의</caption>

             <!-- 현금영수증 발행 -->

             <tr id="{$cashreceipt_display_area}" class="{$cashreceipt_display|display}" >

                        <th scope="row">현금영수증 신청</th>
                        <td>
                            <div class="methods">
                                {$form.cashreceipt_regist}
                            </div>
                             <div id="{$cashreceipt_form_area}" class="ec-base-table cash">
                                <table border="1" summary="">
                                    <caption>현금영수증 발급 정보 입력</caption>
                                    <colgroup>
                                        <col style="width:129px" />
                                        <col style="width:auto" />
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <th scope="row">구분</th>
                                            <td>{$form.cashreceipt_user_type2}</td>
                                        </tr>
                                        <tr class="mobile" id="{$cashreceipt_mobile_display_area}">
                                            <th scope="row">핸드폰 번호</th>
                                            <td>{$form.cashreceipt_user_mobile}</td>
                                        </tr>
                                        <tr class="regno" id="{$cashreceipt_regno_display_area}">
                                            <th scope="row">사업자 번호</th>
                                            <td>{$form.cashreceipt_reg_no}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>


                <!-- 청약철회방침 -->
                <tbody class="{$subscription_display|display}">

##  하단 생략 ##


       - 위치 : 디자인관리 > 디자인편집하기 > 스마트디자인 편집창 > 주문 > 주문완료(/order/order_result.html)



##  상단 생략 ##

<th scope="row">결제수단</th>
    <td>
        <strong>{$paymethod_name}</strong>
        <p>
            {$paymethod_detail}
            <span class="{$bank_go_display|display}"><a href="#none" id="{$btn_bank_go_id}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/order/btn_banking.gif" alt="인터넷뱅킹 바로가기" /></a></span>
            <span class="{$paymenturl_display|display}"><a href="#none" id="{$btn_payment_link_id}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/order/btn_order_payment.gif" alt="결제사이트 바로가기" /></a></span>
        </p>
       <p class="cashreciept {$cashreceipt_display|display}"><!-- <<사용여부에 따른 display변수 필요 -->
           현금영수증 발행 :
      
    <strong class="type1 {$cashreceipt_type_complete_display|display}">
       
    신청 <span>({$cashreceipt_identy_type}) {$cashreceipt_identification}</span></strong>
      
    <strong class="type2 {$cashreceipt_type_notapply_display|display}">
       
    신청안함</strong>
      
    <strong class="type3 {$cashreceipt_type_fail_display|display}">
       
    신청실패<br><span class="grid">하단의 주문확인하기를 클릭하고 주문상세조회에서 다시 신청하시기 바랍니다.</span>
      
    </strong>
       </p>


##  하단 생략 ##



   2) CSS 파일

      - 위치 : 디자인관리 > 디자인편집하기 > 스마트디자인 편집창 > CSS > 모듈 > 주문(/css/module/order/form.css)


 

##  상단 생략 ##


.xans-order-form .payArea .agree th { width:130px; padding:20px 0; border-top:1px solid #e8e8e8; font-weight:normal; text-align:left; }
.xans-order-form .payArea .agree td { padding:20px 0; border-top:1px solid #e8e8e8; }
.xans-order-form .payArea .agree .cashReceipt label { padding:0 30px 0 0; }
.xans-order-form .payArea .agree .cashReceipt strong { font-weight:normal; }
.xans-order-form .payArea .agree .cashReceipt .mobile,
.xans-order-form .payArea .agree .cashReceipt .regno { margin:10px 0 0; }
.xans-order-form .payArea .agree .cashReceipt .grid { margin:4px 0 0; }


##  중간 생략 ##


.xans-order-form #rphone1_1, .xans-order-form #rphone2_1 { width:60px; }
.xans-order-form #rphone1_1, .xans-order-form #rphone2_1,
.xans-order-form #cashreceipt_user_mobile1 { width:60px; }


##  중간 생략 ##


.xans-order-form #rphone2_2, .xans-order-form #rphone2_3 { width:60px; margin:0 4px; }
.xans-order-form #rphone2_2, .xans-order-form #rphone2_3,
.xans-order-form #cashreceipt_user_mobile2, .xans-order-form #cashreceipt_user_mobile3 { width:60px; margin:0 4px; }
.xans-order-form #cashreceipt_reg_no { width:70px; }


##  하단 생략 ##



      - 위치 : 디자인관리 > 디자인편집하기 > 스마트디자인 편집창 > CSS > 모듈 > 주문(/css/module/order/result.css)


 

##  상단 생략 ##

.xans-order-result .boardView .price { padding-top:6px; padding-bottom:7px; color:#008bcc; font-size:17px; }
.xans-order-result .boardView .price .tail { font-size:12px; }
.xans-order-result .boardView .cashReciept span { font-weight:normal; }
.xans-order-result .boardView .cashReciept .grid { font-size:11px; color:#757575; }


##  하단 생략 ##




2. Mobile 디자인


※ 디자인 자동 업그레이드가 탑재된 원터치 주문서를 사용하는 몰은 디자인 가이드를 적용하지 않아도 됩니다.

※ 원터치 주문서에 대한 안내는 및 전환하는 방법은 [원터치 주문서 안내] 와 [원터치 주문서 적용 방법] 을 참고해 주세요.


   1) HTML 파일

       - 위치 : 모바일쇼핑몰 > 디자인편집하기 > 스마트디자인 편집창 > 주문 > 주문서 작성(/order/orderform.html)



##  상단 생략 ##

<tr>
     <th scope="row">결제방식</th>
     <td class="payment">
         {$form.addr_paymethod}

       ...

</tr>
<!-- 현금영수증 발행 -->
<tr id="{$cashreceipt_display_area}" class="{$cashreceipt_display|display}">
    <th scope="row">현금영수증<br />발행</th>
    <td class="cashReceipt">
        {$form.cashreceipt_user_type}
        <div class="mobile" id="{$cashreceipt_mobile_display_area}">
            <strong>휴대전화</strong>
            {$form.cashreceipt_user_mobile}
        </div>
        <div class="regno" id="{$cashreceipt_regno_display_area}">
            <strong>사업자등록번호</strong>
            {$form.cashreceipt_reg_no}
            <p class="grid">입력 시 '-' 없이 숫자만 입력하세요.</p>
        </div>
    </td>
</tr>


##  하단 생략 ##



       - 위치 : 모바일쇼핑몰 > 디자인편집하기 > 스마트디자인 편집창 > 주문 > 주문완료(/order/order_result.html)



##  상단 생략 ##

                    <tr class="paymethod">
                        <th scope="row">결제수단</th>
                        <td>
                            <strong>{$paymethod_name}</strong>
                            <p>{$paymethod_detail}</p>
                        </td>
                    </tr>
                <!-- 현금 영수증 신청 -->
                <tr class="cashReceipt {$cashreceipt_display|display}">
                    <th scope="row">현금영수증<br>발행</th>
                    <td>
                        <p class="{$cashreceipt_type_complete_display|display}">신청 <span>({$cashreceipt_identy_type}) {$cashreceipt_identification}</span></p>
                        <p class="{$cashreceipt_type_notapply_display|display}">신청안함</p>
                        <p class="{$cashreceipt_type_fail_display|display}">신청실패<br><span class="grid">PC 버전에서 신청 또는 관리자에게 문의하시기 바랍니다.</span></p>
                    </td>
                </tr>
                    <tr class="{$eguarantee_display|display}">
                        <th scope="row">전자보증보험<br>서비스정보</th>
                        <td>{$eguarantee_detail}</td>
                    </tr>

##  하단 생략 ##



   2) CSS 파일

      - 위치 : 모바일쇼핑몰 > 디자인편집하기 > 스마트디자인 편집창 > CSS > 모듈 > 주문(/css/module/order/form.css)



##  상단 생략 ##


.xans-order-form .boardWrite .help p { margin:0; padding:7px 0 7px 34px; font-size:11px; }

.xans-order-form .boardWrite .cashReceipt strong { display:block; margin:4px 0; font-weight:normal; color:#757575; }
.xans-order-form .boardWrite .cashReceipt .grid { margin:2px 0 0; font-size:11px; color:#757575; }

.xans-order-form .boardWrite.discount th { padding:14px 0 14px 14px; width:68px; vertical-align:top; }


##  중간 생략 ##


.xans-order-form #rphone2_1 { width:33%; }
.xans-order-form #rphone2_1,
.xans-order-form #cashreceipt_user_mobile1 { width:33%; }


##  중간 생략 ##


.xans-order-form #rphone2_3 { width:25%; margin:0 4px; }
.xans-order-form #rphone2_3,
.xans-order-form #cashreceipt_user_mobile2,
.xans-order-form #cashreceipt_user_mobile3 { width:25%; margin:0 4px; }


##  하단 생략 ##



      - 위치 : 디자인관리 > 디자인편집하기 > 스마트디자인 편집창 > CSS > 모듈 > 주문(/css/module/order/result.css)



##  상단 생략 ##

.xans-order-result .boardView td { padding:14px 38px 14px 0; border-bottom:1px solid #d5d5d5; font-size:13px; text-align:right; background-color:#fff; }

.xans-order-result .totalList .boardList .cashReceipt .grid { color:#757575; }
.xans-order-result .totalList .boardList .totalPay { color:#508bed; border-bottom:1px solid #d5d5d5;}


##  하단 생략 ##




2. PC 디자인(구상품)

   1) 구상품의 경우 표시함으로 설정을 하면 결제 팝업창에 현금영수증 발행 여부를 묻는 영역이 추가가 됩니다.
      주문완료 페이지 상에 현금영수증 정보 표기를 위해서 아래와 같이 디자인을 수정해 주시기 바랍니다.

   2) HTML 파일(주문완료 페이지 수정)

      - 위치 : 디자인관리 > (구)디자인 관리 > HTML 디자인설정 > 주문관련화면 > 주문완료 > 페이지 모듈 리스트 > 결제결과페이지 > 무통장결제정보


<tr height="26" bgcolor="{{$tab_array.c_3.td_bgcolor}}">
  <td height="26" align="center">현금</td>
  <td bgcolor="{{$tab_array.c_3.td_bgcolor}}" align="right">{{$total_price_n}}</td>
  <td>입금자: {{$order_detail.p_name}}, 계좌번호 : {{$bank_info.bank_name}} {{$bank_info.bank_acc_no}} ({{$bank_info.bank_depositor}})
<br>
<!-- 현금영수증 신청결과 -->
<p class="cashreciept" style="display: {{$cashreceipt_display}}">
                            현금영수증 발행 : <strong class="type1" style="display: {{$cashreceipt_type_complete_display}}">
                                신청 <span style="font-weight:normal;">({{$cashreceipt_identy_type}}) {{$cashreceipt_identification}}</span></strong>
                            <strong class="type2" style="display: {{$cashreceipt_type_notapply_display}}">
                                신청안함</strong>
                            <strong class="type3" style="display: {{$cashreceipt_type_fail_display}}">
                                신청실패<br><span class="grid" style="font-weight:normal; font-size:11px; color:#757575;">하단의 주문확인하기를 클릭하고 주문상세조회에서 다시 신청하시기 바랍니다.</span>
                            </strong>
                        </p>
<!-- //현금영수증 신청결과 -->
</td>
</tr>


      - 위치 : 디자인관리 > (구)디자인 관리 > HTML 디자인설정 > 주문관련화면 > 주문완료 > 페이지 모듈 리스트 > 결제결과페이지 > 예치금결제정보



<tr height="26" bgcolor="{{$tab_array.c_3.td_bgcolor}}">

  <td height="26" align="center">예치금</td>

  <td bgcolor="{{$tab_array.c_3.td_bgcolor}}" align="right">{{$deposit_used}}</td>

  <td><!-- 현금영수증 신청결과 -->

<p class="cashreciept" style="display: {{$cashreceipt_display}}">

        현금영수증 발행 : <strong class="type1" style="display: {{$cashreceipt_type_complete_display}}">

            신청 <span style="font-weight:normal;">({{$cashreceipt_identy_type}}) {{$cashreceipt_identification}}</span></strong>

        <strong class="type2" style="display: {{$cashreceipt_type_notapply_display}}">

            신청안함</strong>

        <strong class="type3" style="display: {{$cashreceipt_type_fail_display}}">

            신청실패<br><span class="grid" style="font-weight:normal; font-size:11px; color:#757575;">하단의 주문확인하기를 클릭하고 주문상세조회에서 다시 신청하시기 바랍니다.</span>

        </strong>

    </p>

<!-- //현금영수증 신청결과 --></td>

</tr>






카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.

궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]