[스마트디자인] [PC] 주문서에 통관 정보(개인통관고유부호 인증) 영역 추가(
) - HTML/CSS
▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가합니다.
[구)스마트디자인] 주문서작성
주문
/order/orderform.html
CHANGED
|
@@ -408,6 +408,88 @@
|
|
|
408
408
|
</div>
|
|
409
409
|
</div>
|
|
410
410
|
|
|
411
|
+
<div class="orderArea ecCustomsClearance {$customs_clearance_display|display}">
|
|
412
|
+
<div class="title">
|
|
413
|
+
<h3>Customs Clearance Information</h3>
|
|
414
|
+
<p class="required"><img src="//img.echosting.cafe24.com/skin/base/common/ico_required_blue.gif" alt="Required" /> Required Field</p>
|
|
415
|
+
</div>
|
|
416
|
+
<div class="ec-base-table typeWrite">
|
|
417
|
+
<table border="1" summary="">
|
|
418
|
+
<caption>Enter Customs Clearance Information</caption>
|
|
419
|
+
<colgroup>
|
|
420
|
+
<col style="width:139px;" />
|
|
421
|
+
<col style="width:auto;" />
|
|
422
|
+
</colgroup>
|
|
423
|
+
<tbody>
|
|
424
|
+
<tr>
|
|
425
|
+
<th scope="row">
|
|
426
|
+
Customs Clearance Code <img src="//img.echosting.cafe24.com/skin/base/common/ico_required_blue.gif" alt="Required" />
|
|
427
|
+
<div class="mTooltip">
|
|
428
|
+
<a href="#none" class="eTip"><img src="//img.echosting.cafe24.com/skin/base_en_US/common/ico_tooltip.gif" alt="Help" /></a>
|
|
429
|
+
<div class="ec-base-tooltip">
|
|
430
|
+
<div class="content">
|
|
431
|
+
<strong>Personal Customs Clearance Code</strong>
|
|
432
|
+
<ul class="ec-base-help typeDash gBlank10">
|
|
433
|
+
<li>For products shipped from overseas to the Republic of Korea, the recipient's Personal Customs Clearance Code and order/delivery information must be submitted to the Korea Customs Service in accordance with the Customs Act.</li>
|
|
434
|
+
<li>The Personal Customs Clearance Code is a personal identification number used in place of a resident registration number when filing an import customs declaration, and consists of 13 digits starting with P.</li>
|
|
435
|
+
<li>You can obtain a Personal Customs Clearance Code from the Korea Customs Service website.</li>
|
|
436
|
+
</ul>
|
|
437
|
+
</div>
|
|
438
|
+
<a href="#none" class="btnClose close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close_tip.gif" alt="Close" /></a>
|
|
439
|
+
<span class="edge"></span>
|
|
440
|
+
</div>
|
|
441
|
+
</div>
|
|
442
|
+
</th>
|
|
443
|
+
<td>
|
|
444
|
+
<input type="text" name="personal_clearance_code" id="personal_clearance_code" class="inputTypeText" maxlength="13" placeholder="Enter your Personal Customs Clearance Code. (13 digits starting with P)" />
|
|
445
|
+
<button type="button" id="btnCustomsAuthRequest" class="btnNormal {$customs_auth_display|display}">Request verification</button>
|
|
446
|
+
<p class="customsMessage displaynone" id="customsCooldown"><span class="txtEm">Sent · Resend available in <span id="customsCooldownTime">3:00</span></span></p>
|
|
447
|
+
<p class="customsMessage displaynone" id="customsResendReady">Resend available (3 min after sending)</p>
|
|
448
|
+
<p class="customsMessage displaynone" id="customsErrFormat"><span class="txtWarn">Invalid Customs Clearance Code format (P + 12 digits). Please try again.</span></p>
|
|
449
|
+
<p class="customsMessage displaynone" id="customsErrInvalid"><span class="txtWarn">Your Customs Clearance Code is invalid. Check it on <a href="https://unipass.customs.go.kr/per/persIndex.do" target="_blank">Korea Customs Service UNI-PASS</a> and enter it again.</span></p>
|
|
450
|
+
<p class="customsMessage displaynone" id="customsErrMismatch"><span class="txtWarn">This doesn't match the recipient information registered with the Customs Clearance Code. Please check again. (Enter your Korean name in last name, first name order.) (<a href="https://unipass.customs.go.kr/per/persIndex.do" target="_blank">Korea Customs Service UNI-PASS</a>)</span></p>
|
|
451
|
+
<p class="customsAgree">
|
|
452
|
+
<input type="checkbox" name="customsAgree" id="customsAgree" value="T" /><label for="customsAgree"> <span class="txtEm">[Required]</span> I agree to the collection and use of personal information.</label>
|
|
453
|
+
<a href="#none" id="btnCustomsConsentDetail"><img src="//img.echosting.cafe24.com/skin/base_en_US/common/ico_tooltip.gif" alt="View details" /></a>
|
|
454
|
+
</p>
|
|
455
|
+
</td>
|
|
456
|
+
</tr>
|
|
457
|
+
<tr id="customsEmailAuthRow" class="clearanceEmailAuth typeDisabled {$customs_auth_display|display}">
|
|
458
|
+
<th scope="row">Email verification</th>
|
|
459
|
+
<td>
|
|
460
|
+
<p class="customsGuide displaynone" id="customsEmailGuide"><strong>We've sent a 6-digit verification code to <span id="customsEmailMasked"></span>.</strong> (Email registered with the recipient's Customs Clearance Code)<br />The email will arrive within 1-2 minutes. If you haven't received it, check your spam folder.</p>
|
|
461
|
+
<input type="text" id="customs_auth_code" class="inputTypeText" maxlength="6" placeholder="6-digit verification code" disabled="disabled" />
|
|
462
|
+
<button type="button" id="btnCustomsAuthConfirm" class="btnNormal" disabled="disabled">Verify</button>
|
|
463
|
+
<p class="customsMessage displaynone" id="customsErrCodeMismatch"><span class="txtWarn">Incorrect verification code</span></p>
|
|
464
|
+
<p class="customsMessage displaynone" id="customsSuccessBadge"><span class="txtEm">Verification complete.</span></p>
|
|
465
|
+
<p class="customsMessage">※ If you complete payment more than <strong>30 minutes</strong> after requesting verification, you'll need to verify again.</p>
|
|
466
|
+
<p class="customsMessage displaynone" id="customsExemptGuide"><strong>Your Personal Customs Clearance Code hasn't been renewed yet.</strong> In this case, your order will be processed automatically without email verification.<br />To renew, update your Personal Customs Clearance Code on <a href="https://unipass.customs.go.kr/per/persIndex.do" target="_blank">Korea Customs Service UNI-PASS</a>.</p>
|
|
467
|
+
<p class="customsMessage displaynone" id="customsFailureGuide"><strong>Korea Customs Service verification is temporarily unavailable.</strong><br /><strong>You can complete your order without entering a verification code</strong>, and customs identity verification will be processed automatically once the service resumes. Make sure your Customs Clearance Code and recipient information are entered correctly.</p>
|
|
468
|
+
</td>
|
|
469
|
+
</tr>
|
|
470
|
+
</tbody>
|
|
471
|
+
</table>
|
|
472
|
+
</div>
|
|
473
|
+
<div id="ecCustomsConsentModal" class="customsConsentLayer" hidden="hidden">
|
|
474
|
+
<div class="dimmed"></div>
|
|
475
|
+
<div class="ec-base-layer" role="dialog" aria-modal="true" aria-labelledby="ecCustomsConsentTitle" tabindex="-1">
|
|
476
|
+
<div class="header">
|
|
477
|
+
<h3 id="ecCustomsConsentTitle">[Required] Consent to collection and use of personal information</h3>
|
|
478
|
+
</div>
|
|
479
|
+
<div class="content">
|
|
480
|
+
<p>1. Purpose of collecting and using personal information: Processing import customs clearance for ordered products</p>
|
|
481
|
+
<p>2. Personal information collected: Personal Customs Clearance Code (or passport number)</p>
|
|
482
|
+
<p>3. Retention and use period of personal information: In principle, we will destroy the information without delay once the purpose of collecting and using personal information has been achieved. However, if retention is required under applicable laws, the personal information may be retained for a certain period.</p>
|
|
483
|
+
<p>*You may decline this consent, but doing so may limit your use of the service.</p>
|
|
484
|
+
</div>
|
|
485
|
+
<div class="ec-base-button">
|
|
486
|
+
<button type="button" class="btnSubmitFix sizeS" data-action="confirm">OK</button>
|
|
487
|
+
</div>
|
|
488
|
+
<a href="#none" class="close" data-action="confirm"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close.gif" alt="Close" /></a>
|
|
489
|
+
</div>
|
|
490
|
+
</div>
|
|
491
|
+
</div>
|
|
492
|
+
|
|
411
493
|
<div class="orderArea {$ordadd.display|display}">
|
|
412
494
|
<div class="title">
|
|
413
495
|
<h3>Additional Information</h3>
|
formGlobal.css
css
/css/module/order/formGlobal.css
CHANGED
|
@@ -227,6 +227,23 @@
|
|
|
227
227
|
.xans-order-formglobal #tax_request_email1, .xans-order-formglobal #tax_request_email2 {margin:0 4px 0 0; width:110px; }
|
|
228
228
|
.xans-order-formglobal #tax_request_address1, .xans-order-formglobal #tax_request_address2 { margin:5px 0 0; width:400px; }
|
|
229
229
|
|
|
230
|
+
.xans-order-formglobal .ecCustomsClearance th .mTooltip { display:inline-block; position:relative; margin:0 0 0 2px; vertical-align:middle; }
|
|
231
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip .eTip img { vertical-align:middle; }
|
|
232
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip .ec-base-tooltip { left:-20px; width:330px; font-weight:normal; }
|
|
233
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip .ec-base-tooltip .edge { left:27px; }
|
|
234
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip:hover .ec-base-tooltip,
|
|
235
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip.show .ec-base-tooltip { display:block; }
|
|
236
|
+
.xans-order-formglobal .ecCustomsClearance .inputTypeText.error { border-color:#f76560; }
|
|
237
|
+
.xans-order-formglobal .ecCustomsClearance [class^='btnNormal']:disabled { border-color:#e3e3e3; color:#999; background-color:#fff; cursor:default; }
|
|
238
|
+
.xans-order-formglobal .ecCustomsClearance .customsMessage { margin:5px 0 0; }
|
|
239
|
+
.xans-order-formglobal .ecCustomsClearance .customsGuide { margin:0 0 5px; }
|
|
240
|
+
.xans-order-formglobal .ecCustomsClearance .customsMessage a,
|
|
241
|
+
.xans-order-formglobal .ecCustomsClearance .customsGuide a { color:#295cef; text-decoration:underline; }
|
|
242
|
+
.xans-order-formglobal .ecCustomsClearance .customsAgree { margin:10px 0 0; }
|
|
243
|
+
.xans-order-formglobal .ecCustomsClearance .customsAgree img { vertical-align:middle; }
|
|
244
|
+
.xans-order-formglobal .customsConsentLayer .ec-base-layer { position:fixed; top:150px; left:50%; width:420px; margin:0 0 0 -210px; }
|
|
245
|
+
.xans-order-formglobal .customsConsentLayer .ec-base-layer .content p { margin:0 0 6px; line-height:1.6; }
|
|
246
|
+
|
|
230
247
|
#divNvPointInfo { display:none; position:absolute; z-index:99; width:245px; padding:10px; color:#777; font-size:11px; line-height:14px; background:#fff; border:1px solid #5B9761; }
|
|
231
248
|
#divNvPointInfo a { display:block; padding:5px 0 0; color:#1ec228; }
|
|
232
249
|
#divNvPointInfo a img { vertical-align:middle; }
|