Sample Store — 地址填写界面预览
body { background:#ffffff; color:#333; font-family:Georgia, serif; margin:0; font-size:17px; }
.site-header { background:#f4f4f4; border-bottom:1px solid #ddd; padding:18px 20px; font:600 18px Georgia, serif; }
.site { max-width:900px; margin:0 auto; padding:0 20px 60px; }
.entry-content a { color:#c0392b; text-decoration:underline; }
.entry-content h2, .entry-content h3, .entry-content h4 { color:#111; text-transform:uppercase; }
.entry-content h2 { font-size:2rem; margin:1.4em 0 .6em; }
.entry-content h3 { font-size:1.4rem; margin:1.3em 0 .5em; }
.entry-content p { margin:1.5em 0; }
.entry-content ul { list-style:disc; padding-left:2.2em; }
.entry-content label { display:block; margin:1em 0 .3em; font-weight:700; }
.entry-content input, .entry-content select, .entry-content textarea {
width:100%; padding:8px; border:1px solid #ccc; border-radius:0; font-family:Georgia, serif; font-size:17px;
background:#fff; color:#333; min-height:44px; }
.entry-content button { font-family:Georgia, serif; }
.entry-content img { border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,.18); }
.entry-content dl { margin:1.4em 0; }
.entry-content dt { font-weight:700; }
.entry-content dd { margin:0 0 .8em 2em; }
/* ==========================================================================
Haofeng Sample Store — 收货地址填写界面(结账 Step 2)
粘贴位置:Appearance → Editor → Styles → Additional CSS(与 additional-css.css 放一起)
作用域:#hfss-addr —— 不影响站点其它页面与其它表单
========================================================================== */
/* ———- 1. 局部重置 ———- */
#hfss-addr, #hfss-addr * { box-sizing: border-box; }
#hfss-addr {
–a-bg: #0e0e0e;
–a-panel: #1a1a1a;
–a-field: #101010;
–a-line: #2b2b2b;
–a-line2: #3a3a3a;
–a-tx: #ececec;
–a-tx2: #a8a8a8;
–a-tx3: #7d7d7d;
–a-gold: #c9a227;
–a-gold2: #e0bb48;
–a-err: #d4694a;
background: var(–a-bg);
color: var(–a-tx);
font-family: “Helvetica Neue”, Helvetica, Arial, “PingFang SC”, “Microsoft YaHei”, sans-serif;
font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
padding: 56px 0;
}
#hfss-addr h1, #hfss-addr h2, #hfss-addr h3, #hfss-addr h4 {
margin: 0 !important; padding: 0 !important; color: #ececec !important;
font-weight: 700 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: -.01em;
}
#hfss-addr p { margin: 0 !important; padding: 0 !important; color: inherit; }
#hfss-addr ul, #hfss-addr ol { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#hfss-addr img { max-width: 100%; height: auto; display: block; border-radius: 0 !important; box-shadow: none !important; }
#hfss-addr a { text-decoration: none !important; }
#hfss-addr label { display: block; }
/* ———- 2. 容器 / 步骤条 ———- */
#hfss-addr .a-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
#hfss-addr .a-eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(–a-gold); font-weight: 700; margin-bottom: 10px !important; }
#hfss-addr .a-title { font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px !important; }
#hfss-addr .a-lede { color: var(–a-tx2); font-size: 15px; max-width: 62ch; }
#hfss-addr .a-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 34px; }
#hfss-addr .a-step { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(–a-tx3); }
#hfss-addr .a-step i {
width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(–a-line2); color: var(–a-tx3);
display: flex; align-items: center; justify-content: center; font-size: 12px; font-style: normal; font-weight: 700; flex: 0 0 auto;
}
#hfss-addr .a-step–done { color: var(–a-tx2); }
#hfss-addr .a-step–done i { border-color: var(–a-gold); color: var(–a-gold); }
#hfss-addr .a-step–now { color: var(–a-tx); font-weight: 700; }
#hfss-addr .a-step–now i { background: var(–a-gold); border-color: var(–a-gold); color: #171100; }
#hfss-addr .a-step-sep { width: 22px; height: 1px; background: var(–a-line2); }
/* ———- 3. 两栏布局 ———- */
#hfss-addr .a-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 30px; align-items: start; }
/* ———- 4. 表单块 ———- */
#hfss-addr .a-card { background: var(–a-panel); border: 1px solid var(–a-line); border-radius: 14px; padding: 24px; margin-bottom: 18px; }
#hfss-addr .a-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
#hfss-addr .a-card__head span {
width: 26px; height: 26px; border-radius: 50%; background: rgba(201,162,39,.15); color: var(–a-gold);
display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: 0 0 auto;
}
#hfss-addr .a-card__head h3 { font-size: 16px; }
#hfss-addr .a-card__note { font-size: 12.5px; color: var(–a-tx3); margin-top: 4px !important; }
#hfss-addr .a-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#hfss-addr .a-row–3 { grid-template-columns: 1.2fr .8fr; }
#hfss-addr .a-field { margin-bottom: 16px; }
#hfss-addr .a-field:last-child { margin-bottom: 0; }
#hfss-addr .a-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(–a-tx3); margin-bottom: 7px; }
#hfss-addr .a-label b { color: var(–a-gold); font-weight: 700; }
#hfss-addr .a-opt { color: var(–a-tx3); text-transform: none; letter-spacing: 0; font-weight: 400; }
#hfss-addr .a-input, #hfss-addr .a-select, #hfss-addr .a-textarea {
width: 100% !important; max-width: 100% !important;
background: var(–a-field) !important; color: var(–a-tx) !important;
border: 1px solid var(–a-line2) !important; border-radius: 10px !important;
padding: 13px 14px !important; font-size: 15px !important; font-family: inherit !important;
line-height: 1.3 !important; height: auto !important; min-height: 48px !important;
box-shadow: none !important; margin: 0 !important; appearance: none;
}
#hfss-addr .a-textarea { min-height: 88px !important; resize: vertical; }
#hfss-addr .a-select {
background-image: linear-gradient(45deg, transparent 50%, #a8a8a8 50%), linear-gradient(135deg, #a8a8a8 50%, transparent 50%) !important;
background-position: calc(100% – 20px) 21px, calc(100% – 15px) 21px !important;
background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important;
padding-right: 40px !important;
}
#hfss-addr .a-input::placeholder, #hfss-addr .a-textarea::placeholder { color: #5f5f5f; }
#hfss-addr .a-input:focus, #hfss-addr .a-select:focus, #hfss-addr .a-textarea:focus {
outline: none !important; border-color: var(–a-gold) !important; box-shadow: 0 0 0 3px rgba(201,162,39,.16) !important;
}
#hfss-addr .a-phone { display: grid; grid-template-columns: 118px 1fr; gap: 10px; }
#hfss-addr .a-hint { font-size: 12px; color: var(–a-tx3); margin-top: 6px !important; }
#hfss-addr .a-err { font-size: 12px; color: var(–a-err); margin-top: 6px !important; display: none; }
#hfss-addr .a-field.is-error .a-input, #hfss-addr .a-field.is-error .a-select, #hfss-addr .a-field.is-error .a-textarea {
border-color: var(–a-err) !important; background: rgba(212,105,74,.06) !important;
}
#hfss-addr .a-field.is-error .a-err { display: block; }
#hfss-addr .a-field.is-hidden { display: none !important; }
/* ———- 5. 承运商 / 勾选 ———- */
#hfss-addr .a-choices { display: grid; gap: 10px; }
#hfss-addr .a-choice {
display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
border: 1px solid var(–a-line2); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s;
}
#hfss-addr .a-choice:hover { border-color: #4a4a4a; }
#hfss-addr .a-choice input { width: 18px !important; height: 18px !important; min-height: 0 !important; margin: 3px 0 0 !important; padding: 0 !important; accent-color: var(–a-gold); flex: 0 0 auto; }
#hfss-addr .a-choice__txt { font-size: 14px; color: var(–a-tx); }
#hfss-addr .a-choice__txt em { display: block; font-style: normal; font-size: 12.5px; color: var(–a-tx3); margin-top: 2px; }
#hfss-addr .a-choice__price { margin-left: auto; font-size: 14px; font-weight: 700; color: var(–a-tx); white-space: nowrap; }
#hfss-addr .a-choice.is-on { border-color: var(–a-gold); background: rgba(201,162,39,.07); }
#hfss-addr .a-check { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; color: var(–a-tx2); margin-top: 14px; cursor: pointer; }
#hfss-addr .a-check:first-of-type { margin-top: 0; }
#hfss-addr .a-check input { width: 18px !important; height: 18px !important; min-height: 0 !important; margin: 3px 0 0 !important; padding: 0 !important; accent-color: var(–a-gold); flex: 0 0 auto; }
#hfss-addr .a-check a { color: var(–a-gold) !important; }
/* ———- 6. 订单摘要 ———- */
#hfss-addr .a-sum { background: var(–a-panel); border: 1px solid var(–a-line); border-radius: 14px; padding: 22px; position: sticky; top: 24px; }
#hfss-addr .a-sum__it { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(–a-line); }
#hfss-addr .a-sum__it img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; background: #0b0b0b; }
#hfss-addr .a-sum__it h4 { font-size: 15px; }
#hfss-addr .a-sum__it p { font-size: 12px; color: var(–a-tx3); margin-top: 3px !important; }
#hfss-addr .a-sum__line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(–a-tx2); padding: 9px 0; }
#hfss-addr .a-sum__line b { color: var(–a-tx); font-weight: 700; }
#hfss-addr .a-sum__line–total { border-top: 1px solid var(–a-line); margin-top: 8px; padding-top: 14px; font-size: 15px; color: var(–a-tx); }
#hfss-addr .a-sum__line–total b { font-size: 22px; color: var(–a-gold); }
#hfss-addr .a-credit {
margin-top: 14px; font-size: 12.5px; color: #e8c98a; background: rgba(201,162,39,.1);
border: 1px solid rgba(201,162,39,.28); border-radius: 10px; padding: 11px 13px;
}
#hfss-addr .a-sum__pay { margin-top: 16px; }
#hfss-addr .a-btn {
display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px;
padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 700; cursor: pointer;
transition: background .18s, opacity .18s; font-family: inherit;
}
#hfss-addr .a-btn–gold { background: var(–a-gold) !important; color: #171100 !important; }
#hfss-addr .a-btn–gold:hover { background: var(–a-gold2) !important; }
#hfss-addr .a-btn–gold[disabled] { opacity: .45; cursor: not-allowed; }
#hfss-addr .a-btn–ghost { background: transparent !important; border-color: var(–a-line2) !important; color: var(–a-tx) !important; }
#hfss-addr .a-btn–ghost:hover { border-color: var(–a-gold) !important; color: var(–a-gold) !important; }
#hfss-addr .a-sum__safe { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(–a-tx3); margin-top: 12px !important; text-align: center; }
#hfss-addr .a-sum__safe i { color: var(–a-gold); font-style: normal; }
/* ———- 7. 校验汇总条 / 核对页 ———- */
#hfss-addr .a-alert {
display: none; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 13px 16px;
border: 1px solid rgba(212,105,74,.5); background: rgba(212,105,74,.1); color: #f0b9a8;
border-radius: 12px; font-size: 13.5px;
}
#hfss-addr .a-alert.is-on { display: flex; }
#hfss-addr .a-review { display: none; }
#hfss-addr .a-review.is-on { display: block; }
#hfss-addr .a-review__box { border: 1px solid var(–a-line); border-radius: 12px; padding: 18px; background: #141414; margin-top: 16px; }
#hfss-addr .a-review__box dl { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 9px 16px; font-size: 14px; }
#hfss-addr .a-review__box dt { color: var(–a-tx3); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding-top: 3px; }
#hfss-addr .a-review__box dd { margin: 0; color: var(–a-tx); }
#hfss-addr .a-review__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
#hfss-addr .a-review__acts .a-btn { width: auto; min-width: 200px; }
#hfss-addr .a-tiny { font-size: 12.5px; color: var(–a-tx3); }
/* ———- 8. 响应式 ———- */
@media (max-width: 940px) {
#hfss-addr .a-grid { grid-template-columns: 1fr; }
#hfss-addr .a-sum { position: static; }
#hfss-addr .a-sum–first { order: -1; margin-bottom: 18px; }
}
@media (max-width: 620px) {
#hfss-addr { padding: 40px 0; }
#hfss-addr .a-wrap { padding: 0 18px; }
#hfss-addr .a-row, #hfss-addr .a-row–3 { grid-template-columns: 1fr; }
#hfss-addr .a-card { padding: 18px; }
#hfss-addr .a-phone { grid-template-columns: 104px 1fr; }
#hfss-addr .a-review__box dl { grid-template-columns: 1fr; gap: 2px 0; }
#hfss-addr .a-review__box dt { padding-top: 10px; }
#hfss-addr .a-review__acts .a-btn { width: 100%; min-width: 0; }
#hfss-addr .a-steps { gap: 8px; margin: 20px 0 26px; }
#hfss-addr .a-step { font-size: 12px; }
#hfss-addr .a-step-sep { width: 12px; }
}
Step 2 of 3 — Shipping details
Where should we send your sample?
We ship with DHL Express and FedEx. Fill in the address exactly as it should appear on the courier label — a courier phone number is required for delivery.
Contact & sample requirements
Used for the order confirmation and for any question about your sample.
Please enter the consignee name.
Please enter a valid email address.
Please enter a reachable phone number.
Describe logo, colour and size here if the sample needs to be personalised.
Shipping address
Field names change automatically with the country you select.
ChinaHong Kong SARTaiwanJapanSouth KoreaSingaporeMalaysiaThailandVietnamIndonesiaPhilippinesIndiaPakistanBangladeshSri LankaNepalCambodiaMyanmarMongoliaUnited KingdomIrelandGermanyFranceItalySpainPortugalNetherlandsBelgiumLuxembourgSwitzerlandAustriaSwedenNorwayDenmarkFinlandPolandCzechiaHungaryRomaniaGreeceUkraineRussiaTurkeyIsraelUnited Arab EmiratesSaudi ArabiaQatarKuwaitMacau SARSouth AfricaEgyptNigeriaKenyaMoroccoGhanaTanzaniaAlgeriaUnited StatesCanadaMexicoBrazilArgentinaChileColombiaPeruEcuadorAustraliaNew ZealandOther country / region
Please select a destination country.
Please enter the street address.
Please enter the city.
Please enter the state or province.
5 digits, or ZIP+4
Please check the postal code format for this country.
DHL / FedEx will call this number on the delivery day.
A delivery phone number is required by the courier.
Delivery & confirmations
Shipping cost updates with the country you chose above.
DHL Express Fastest, door to door, tracking included
US$28
FedEx International Priority Alternative for remote areas
US$30
Ship on my own DHL / FedEx account You are billed directly by the carrier
US$0
Please enter your DHL / FedEx account number.
I understand that duties, taxes and customs clearance fees are paid by the receiver. *
Save this address for my next sample order.
Questions about the address? WhatsApp +86 157 5092 2837 — we reply within 4 working hours.
Please check the address on your courier label
This exact text will be printed on the shipping label. Edit anything that looks wrong.
- Consignee
- —
- Company
- —
- Address
- —
- Country
- —
- Phone
- —
- —
- Carrier
- —
- Sample notes
- —
Next step: PayPal checkout (card accepted without a PayPal account).
(function () {
var root = document.getElementById(‘hfss-addr’);
if (!root || root.dataset.ready) return;
root.dataset.ready = ‘1’;
/* ———- 商品目录:sku -> 名称 / 价格 / 图 ———- */
var CATALOG = {
‘SS-1001’: { n: ‘Blank Cotton Crew Neck Tee’, s: ‘Blank Cotton Tee’, p: 29, img: ‘https://haofenggroup.hk/wp-content/uploads/2026/05/k1.jpg’ },
‘SS-2001’: { n: ‘Fabric Swatch Book \u2014 43 Colorways’, s: ‘Fabric Swatch Book’, p: 39, img: ‘https://haofenggroup.hk/wp-content/uploads/2026/05/P3SS.jpg’ },
‘SS-2002’: { n: ‘Foam Print Craft Swatch’, s: ‘Foam Print Swatch’, p: 25, img: ‘https://haofenggroup.hk/wp-content/uploads/2026/05/N1-2.jpg’ },
‘SS-2003’: { n: ‘3D Silicone Mould Badge’, s: ‘3D Mould Badge’, p: 25, img: ‘https://haofenggroup.hk/wp-content/uploads/2026/05/N1-1.jpg’ },
‘SS-2004’: { n: ‘Gradient Dyed Fabric Panel’, s: ‘Gradient Fabric Panel’, p: 19, img: ‘https://haofenggroup.hk/wp-content/uploads/2026/06/p10s.jpg’ }
};
/* ———- 国家数据 ———-
名称 | ISO | 分区 | 需要省/州 | 省州标签 | 邮编标签 | 邮编提示 | 邮编正则(空=不校验格式)
分区:asia 18 / na 28 / eu 30 / anz 30 / row 35 */
var RAW = [
‘United States|US|na|1|State|ZIP code|5 digits, or ZIP+4|^\\d{5}(-\\d{4})?$’,
‘Canada|CA|na|1|Province|Postal code|A1A 1A1|^[A-Za-z]\\d[A-Za-z][ -]?\\d[A-Za-z]\\d$’,
‘Mexico|MX|na|1|State|Postal code|5 digits|^\\d{5}$’,
‘Brazil|BR|row|0||Postal code|01310-100|^\\d{5}-?\\d{3}$’,
‘Argentina|AR|row|0||Postal code||’,
‘Chile|CL|row|0||Postal code||’,
‘Colombia|CO|row|0||Postal code||’,
‘Peru|PE|row|0||Postal code||’,
‘Ecuador|EC|row|0||Postal code||’,
‘United Kingdom|GB|eu|0|County|Postcode|e.g. SW1A 1AA|^[A-Za-z]{1,2}\\d[A-Za-z\\d]?\\s?\\d[A-Za-z]{2}$’,
‘Ireland|IE|eu|0|County|Eircode||’,
‘Germany|DE|eu|0||Postal code|5 digits|^\\d{5}$’,
‘France|FR|eu|0||Postal code|5 digits|^\\d{5}$’,
‘Italy|IT|eu|0|Province|Postal code|5 digits|^\\d{5}$’,
‘Spain|ES|eu|0|Province|Postal code|5 digits|^\\d{5}$’,
‘Portugal|PT|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Netherlands|NL|eu|0||Postal code|1234 AB|^\\d{4}\\s?[A-Za-z]{2}$’,
‘Belgium|BE|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Luxembourg|LU|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Switzerland|CH|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Austria|AT|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Sweden|SE|eu|0||Postal code|5 digits|^\\d{5}$’,
‘Norway|NO|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Denmark|DK|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Finland|FI|eu|0||Postal code|5 digits|^\\d{5}$’,
‘Poland|PL|eu|0||Postal code|5 digits|^\\d{5}$’,
‘Czechia|CZ|eu|0||Postal code|123 45|^\\d{3}\\s?\\d{2}$’,
‘Hungary|HU|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Romania|RO|eu|0||Postal code|6 digits|^\\d{6}$’,
‘Greece|GR|eu|0||Postal code|5 digits|^\\d{5}$’,
‘Ukraine|UA|eu|0||Postal code||’,
‘Russia|RU|eu|0||Postal code|6 digits|^\\d{6}$’,
‘Turkey|TR|eu|0||Postal code|5 digits|^\\d{5}$’,
‘Israel|IL|row|0||Postal code||’,
‘United Arab Emirates|AE|row|1|Emirate|||’,
‘Saudi Arabia|SA|row|0||Postal code||’,
‘Qatar|QA|row|0||||’,
‘Kuwait|KW|row|0||Postal code||’,
‘China|CN|asia|1|Province|Postal code|6 digits|^\\d{6}$’,
‘Hong Kong SAR|HK|asia|0||||’,
‘Macau SAR|MO|asia|0||||’,
‘Taiwan|TW|asia|0||Postal code|3 or 5 digits|^\\d{3}(\\d{2})?$’,
‘Japan|JP|asia|1|Prefecture|Postal code|150-0001|^\\d{3}-?\\d{4}$’,
‘South Korea|KR|asia|1|Province / City|Postal code|5 digits|^\\d{5}$’,
‘Singapore|SG|asia|0||Postal code|6 digits|^\\d{6}$’,
‘Malaysia|MY|asia|1|State|Postal code|5 digits|^\\d{5}$’,
‘Thailand|TH|asia|1|Province|Postal code|5 digits|^\\d{5}$’,
‘Vietnam|VN|asia|1|Province / City|Postal code||’,
‘Indonesia|ID|asia|1|Province|Postal code|5 digits|^\\d{5}$’,
‘Philippines|PH|asia|1|Province|Postal code||’,
‘India|IN|asia|1|State|PIN code|6 digits|^\\d{6}$’,
‘Pakistan|PK|asia|0||Postal code||’,
‘Bangladesh|BD|asia|0||Postal code||’,
‘Sri Lanka|LK|asia|0||Postal code||’,
‘Nepal|NP|asia|0||Postal code||’,
‘Cambodia|KH|asia|0||Postal code||’,
‘Myanmar|MM|asia|0||Postal code||’,
‘Mongolia|MN|asia|0||Postal code||’,
‘Australia|AU|anz|1|State / Territory|Postcode|4 digits|^\\d{4}$’,
‘New Zealand|NZ|anz|0||Postcode|4 digits|^\\d{4}$’,
‘South Africa|ZA|row|1|Province|Postal code|4 digits|^\\d{4}$’,
‘Egypt|EG|row|0||Postal code||’,
‘Nigeria|NG|row|0||Postal code||’,
‘Kenya|KE|row|0||Postal code||’,
‘Morocco|MA|row|0||Postal code||’,
‘Ghana|GH|row|0||Postal code||’,
‘Tanzania|TZ|row|0||Postal code||’,
‘Algeria|DZ|row|0||Postal code||’,
‘Other country|XX|row|0||Postal code||’
];
var DIAL = [‘+1|United States / Canada’, ‘+44|United Kingdom’, ‘+61|Australia’, ‘+64|New Zealand’, ‘+86|China’, ‘+852|Hong Kong’, ‘+886|Taiwan’, ‘+81|Japan’, ‘+82|South Korea’, ‘+65|Singapore’, ‘+60|Malaysia’, ‘+66|Thailand’, ‘+84|Vietnam’, ‘+62|Indonesia’, ‘+63|Philippines’, ‘+91|India’, ‘+92|Pakistan’, ‘+880|Bangladesh’, ‘+94|Sri Lanka’, ‘+971|United Arab Emirates’, ‘+966|Saudi Arabia’, ‘+974|Qatar’, ‘+965|Kuwait’, ‘+972|Israel’, ‘+90|Turkey’, ‘+49|Germany’, ‘+33|France’, ‘+39|Italy’, ‘+34|Spain’, ‘+351|Portugal’, ‘+31|Netherlands’, ‘+32|Belgium’, ‘+41|Switzerland’, ‘+43|Austria’, ‘+46|Sweden’, ‘+47|Norway’, ‘+45|Denmark’, ‘+358|Finland’, ‘+48|Poland’, ‘+420|Czechia’, ‘+36|Hungary’, ‘+40|Romania’, ‘+30|Greece’, ‘+7|Russia’, ‘+380|Ukraine’, ‘+55|Brazil’, ‘+52|Mexico’, ‘+54|Argentina’, ‘+56|Chile’, ‘+57|Colombia’, ‘+51|Peru’, ‘+27|South Africa’, ‘+20|Egypt’, ‘+234|Nigeria’, ‘+254|Kenya’, ‘+212|Morocco’];
var $ = function (s) { return root.querySelector(s); };
var COUNTRIES = RAW.map(function (r) {
var a = r.split(‘|’);
return { name: a[0], iso: a[1], region: a[2], needState: a[3] === ‘1’, stateLabel: a[4], zipLabel: a[5], zipHint: a[6], zipRe: a[7] ? new RegExp(a[7]) : null };
});
var SHIP = { asia: 18, na: 28, eu: 30, anz: 30, row: 35 };
var state = { country: null, carrier: ‘dhl’, item: null };
/* ———- 初始化下拉 ———- */
var cSel = $(‘#hfss-country’);
var gAsia = [], gEu = [], gAm = [], gOther = [];
COUNTRIES.forEach(function (c) {
if (c.iso === ‘XX’) return;
var o = new Option(c.name, c.iso);
if ([‘CN’, ‘HK’, ‘TW’, ‘JP’, ‘KR’, ‘SG’, ‘MY’, ‘TH’, ‘VN’, ‘ID’, ‘PH’, ‘IN’, ‘PK’, ‘BD’, ‘LK’, ‘NP’, ‘KH’, ‘MM’, ‘MN’].indexOf(c.iso) > -1) gAsia.push(o);
else if ([‘AU’, ‘NZ’].indexOf(c.iso) > -1) gOther.push(o);
else if ([‘US’, ‘CA’, ‘MX’, ‘BR’, ‘AR’, ‘CL’, ‘CO’, ‘PE’, ‘EC’].indexOf(c.iso) > -1) gAm.push(o);
else gEu.push(o);
});
[[‘Asia’, gAsia], [‘Europe / Middle East / Africa’, gEu], [‘Americas’, gAm], [‘Oceania & other’, gOther]].forEach(function (g) {
var og = document.createElement(‘optgroup’);
og.label = g[0];
g[1].forEach(function (o) { og.appendChild(o); });
cSel.appendChild(og);
});
var last = document.createElement(‘option’);
last.value = ‘XX’; last.textContent = ‘Other country / region’;
cSel.appendChild(last);
cSel.value = ‘US’;
var dSel = $(‘#hfss-dial’);
DIAL.forEach(function (d) {
var a = d.split(‘|’);
dSel.appendChild(new Option(a[0] + ‘ ‘ + a[1], a[0]));
});
dSel.value = ‘+1’;
/* ———- 商品:URL ?sku= 优先,否则用默认 ———- */
var params = new URLSearchParams(location.search);
var sku = (params.get(‘sku’) || ”).toUpperCase();
state.item = CATALOG[sku] || CATALOG[root.dataset.fallbackSku];
state.sku = CATALOG[sku] ? sku : root.dataset.fallbackSku;
$(‘#hfss-item-name’).textContent = state.item.n;
$(‘#hfss-item-sku’).textContent = ‘SKU ‘ + state.sku;
$(‘#hfss-item-img’).src = state.item.img;
$(‘#hfss-sum-item-label’).textContent = state.item.s;
/* ———- 国家切换:字段名 / 必填 / 提示 / 运费 ———- */
function country() {
var iso = cSel.value;
var found = COUNTRIES.filter(function (c) { return c.iso === iso; })[0] || COUNTRIES[COUNTRIES.length – 1];
state.country = found;
var sf = $(‘#hfss-state-field’), zf = $(‘#hfss-zip-field’), sl = $(‘#hfss-state-label’), zl = $(‘#hfss-zip-label’);
var st = $(‘#hfss-state’), zp = $(‘#hfss-zip’);
if (found.needState) {
sf.classList.remove(‘is-hidden’);
sl.innerHTML = (found.stateLabel || ‘State / Province’) + ‘ *‘;
st.required = true;
} else {
sf.classList.add(‘is-hidden’);
st.required = false;
st.value = ”;
clearErr(st);
}
if (found.zipLabel) {
zf.classList.remove(‘is-hidden’);
zl.innerHTML = found.zipLabel + ‘ *‘;
zp.required = true;
$(‘#hfss-zip-hint’).textContent = found.zipHint || (found.zipLabel + ‘ of the delivery address.’);
} else {
zf.classList.add(‘is-hidden’);
zp.required = false;
zp.value = ”;
clearErr(zp);
}
updateTotals();
}
/* ———- 运费 / 合计 ———- */
function shipCost() {
if (state.carrier === ‘own’) return 0;
var base = SHIP[state.country.region] || 35;
return state.carrier === ‘fedex’ ? base + 2 : base;
}
function updateTotals() {
var sc = shipCost();
var label = state.carrier === ‘dhl’ ? ‘DHL Express’ : state.carrier === ‘fedex’ ? ‘FedEx International Priority’ : ‘Own carrier account’;
$(‘#hfss-sum-ship-label’).textContent = label;
$(‘#hfss-sum-ship’).textContent = sc === 0 ? ‘US$0 (collect)’ : ‘US$’ + sc;
$(‘#hfss-sum-item-price’).textContent = ‘US$’ + state.item.p;
$(‘#hfss-sum-total’).textContent = ‘US$’ + (state.item.p + sc);
root.querySelectorAll(‘[data-ship]’).forEach(function (el) {
var base = SHIP[state.country.region] || 35;
el.textContent = ‘US$’ + (el.dataset.ship === ‘fedex’ ? base + 2 : base);
});
}
root.querySelectorAll(‘#hfss-carriers input[name=”carrier”]’).forEach(function (r) {
r.addEventListener(‘change’, function () {
state.carrier = r.value;
root.querySelectorAll(‘#hfss-carriers .a-choice’).forEach(function (c) {
c.classList.toggle(‘is-on’, c.contains(r) && r.checked);
});
var acct = $(‘#hfss-acct-field’);
if (r.value === ‘own’) { acct.classList.remove(‘is-hidden’); $(‘#hfss-acct’).required = true; }
else { acct.classList.add(‘is-hidden’); $(‘#hfss-acct’).required = false; clearErr($(‘#hfss-acct’)); }
updateTotals();
});
});
/* ———- 校验 ———- */
function fieldOf(el) { return el.closest(‘.a-field’); }
function setErr(el, on) { var f = fieldOf(el); if (f) f.classList.toggle(‘is-error’, !!on); }
function clearErr(el) { setErr(el, false); }
function valid(el) {
var v = (el.value || ”).trim();
if (el.type === ‘checkbox’) return el.checked;
if (!el.required && !v) return true;
if (!v) return false;
if (el.id === ‘hfss-email’) return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v);
if (el.id === ‘hfss-phone’ || el.id === ‘hfss-cphone’) return v.replace(/[^\d]/g, ”).length >= 6;
if (el.id === ‘hfss-zip’ && state.country && state.country.zipRe) return state.country.zipRe.test(v.toUpperCase().replace(/\s+/g, ‘ ‘));
return true;
}
var FIELDS = [‘#hfss-name’, ‘#hfss-email’, ‘#hfss-phone’, ‘#hfss-country’, ‘#hfss-addr1’, ‘#hfss-city’, ‘#hfss-state’, ‘#hfss-zip’, ‘#hfss-cphone’, ‘#hfss-acct’];
FIELDS.forEach(function (sel) {
var el = $(sel);
el.addEventListener(‘blur’, function () { if ((el.value || ”).trim()) setErr(el, !valid(el)); });
el.addEventListener(‘input’, function () { if (fieldOf(el).classList.contains(‘is-error’) && valid(el)) clearErr(el); });
});
cSel.addEventListener(‘change’, function () { clearErr(cSel); country(); });
$(‘#hfss-duty’).addEventListener(‘change’, function () {
$(‘#hfss-duty-err’).style.display = this.checked ? ‘none’ : ‘block’;
});
/* ———- 提交 -> 核对 ———- */
function submit() {
var bad = [];
FIELDS.forEach(function (sel) {
var el = $(sel);
if (el.closest(‘.a-field.is-hidden’)) return;
if (!valid(el)) { setErr(el, true); bad.push(el); }
});
if (!$(‘#hfss-duty’).checked) { $(‘#hfss-duty-err’).style.display = ‘block’; bad.push($(‘#hfss-duty’)); }
var alert = $(‘#hfss-addr-alert’);
if (bad.length) {
alert.textContent = ‘\u26A0 Please complete the highlighted fields before continuing. (‘ + bad.length + ‘)’;
alert.classList.add(‘is-on’);
var first = bad[0];
var y = first.getBoundingClientRect().top + window.pageYOffset – 90;
window.scrollTo({ top: y, behavior: ‘smooth’ });
first.focus({ preventScroll: true });
return;
}
alert.classList.remove(‘is-on’);
fillReview();
$(‘#hfss-review’).classList.add(‘is-on’);
$(‘#hfss-review’).scrollIntoView({ behavior: ‘smooth’, block: ‘center’ });
}
$(‘#hfss-addr-form’).addEventListener(‘submit’, function (e) { e.preventDefault(); submit(); });
$(‘#hfss-submit-inline’).addEventListener(‘click’, submit);
$(‘#hfss-submit-side’).addEventListener(‘click’, submit);
function fillReview() {
var c = state.country;
var addr = [$(‘#hfss-addr1’).value, $(‘#hfss-addr2’).value, $(‘#hfss-city’).value,
c.needState ? $(‘#hfss-state’).value : ”, c.zipLabel ? $(‘#hfss-zip’).value : ”]
.filter(function (x) { return (x || ”).trim(); }).join(‘, ‘);
$(‘#rv-name’).textContent = $(‘#hfss-name’).value || ‘\u2014’;
$(‘#rv-company’).textContent = $(‘#hfss-company’).value || ‘\u2014 (individual)’;
$(‘#rv-address’).textContent = addr;
$(‘#rv-country’).textContent = c.name;
$(‘#rv-phone’).textContent = dSel.value + ‘ ‘ + $(‘#hfss-phone’).value + ‘ / courier: ‘ + $(‘#hfss-cphone’).value;
$(‘#rv-email’).textContent = $(‘#hfss-email’).value;
$(‘#rv-carrier’).textContent = (state.carrier === ‘dhl’ ? ‘DHL Express’ : state.carrier === ‘fedex’ ? ‘FedEx International Priority’ : ‘Own carrier account’) + ‘ \u00b7 ‘ + $(‘#hfss-sum-ship’).textContent;
$(‘#rv-notes’).textContent = $(‘#hfss-notes’).value || ‘\u2014’;
}
$(‘#hfss-edit’).addEventListener(‘click’, function () {
$(‘#hfss-review’).classList.remove(‘is-on’);
window.scrollTo({ top: root.querySelector(‘#hfss-name’).getBoundingClientRect().top + window.pageYOffset – 90, behavior: ‘smooth’ });
});
$(‘#hfss-pay’).addEventListener(‘click’, function () {
/* ⚠️ 换成你的 PayPal 收款链接;金额与商品名会由 PayPal 侧设置 */
var PAYPAL_LINK = ‘#PAYPAL_LINK’;
if (PAYPAL_LINK.indexOf(‘#’) === 0) {
window.alert(‘\u539f\u578b\u6f14\u793a\uff1a\u6b63\u5f0f\u7ad9\u8fd9\u91cc\u8df3\u8f6c PayPal \u6536\u6b3e\u94fe\u63a5\u3002\n\n\u8ba2\u5355\uff1a’ + state.sku + ‘ ‘ + state.item.n + ‘ ‘ + $(‘#hfss-sum-total’).textContent);
return;
}
location.href = PAYPAL_LINK;
});
country();
})();