Diff -- /var/www/vhosts/3dshawn.com/affiliate.3dshawn.com/TEMPLATES/webstls_shipping

1

2

3

<style>

4

.ss-tabs { display:flex; gap:4px; border-bottom:1px solid var(--col-border); margin-bottom:18px; }

5

.ss-tab { padding:10px 16px; color:var(--col-text-3); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; text-decoration:none; border-bottom:2px solid transparent; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; }

6

.ss-tab:hover { color:var(--col-text); }

7

.ss-tab.is-active { color:var(--col-accent-bright); border-bottom-color:var(--col-accent); }

8

.ss-pane { display:none; }

9

.ss-pane.is-active { display:block; }

10

11

.ss-card { background:var(--col-surface-1); border:1px solid var(--col-border); border-radius:12px; padding:20px; margin-bottom:14px; }

12

.ss-card h3 { font-family:var(--font-display,inherit); font-size:15px; text-transform:uppercase; letter-spacing:1.5px; color:var(--col-text); margin:0 0 16px; font-weight:700; }

13

.ss-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

14

.ss-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

15

.ss-grid-4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }

16

\@media (max-width: 800px) { .ss-grid-2, .ss-grid-3, .ss-grid-4 { grid-template-columns:1fr; } }

17

18

.ss-carrier-card { border:1px solid var(--col-border); border-radius:10px; padding:14px 18px; margin-bottom:10px; background:var(--col-surface-2); transition:border-color .15s; }

19

.ss-carrier-card.is-on { border-color:rgba(34,197,94,0.5); }

20

.ss-carrier-head { display:flex; justify-content:space-between; align-items:center; }

21

.ss-carrier-name { font-weight:700; font-size:15px; color:var(--col-text); }

22

.ss-carrier-toggle { display:inline-flex; gap:6px; align-items:center; font-size:12px; color:var(--col-text-2); cursor:pointer; }

23

.ss-carrier-body { display:none; margin-top:14px; }

24

.ss-carrier-card.is-on .ss-carrier-body { display:block; }

25

26

.ss-zones-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }

27

.ss-zones-table th { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--col-text-3); font-weight:700; text-align:left; padding:8px 10px; border-bottom:1px solid var(--col-border); }

28

.ss-zones-table td { padding:8px 10px; border-bottom:1px solid var(--col-border); vertical-align:middle; }

29

.ss-zones-table input.input, .ss-zones-table select.select { height:32px; font-size:12px; padding:4px 8px; }

30

</style>

31

32

33

<div>

34

<span class="page-eyebrow"><span class="dot"></span> Studio · Shipping</span>

35

<h1 class="page-title">Shipping setup</h1>

36

<p class="page-subtitle">Origin address, carriers, and zone-based rates. Used by the rate estimator on every physical order.</p>

37

</div>

38

</div>

39

40

[if:$has_flash]

41

42

43

<div class="text-sm fw-600">$flash_msg</div>

44

</div>

45

[/if]

46

47

48

<button type="button" class="ss-tab is-active" data-tab="origin">Origin & defaults</button>

49

<button type="button" class="ss-tab" data-tab="carriers">Carriers</button>

50

<button type="button" class="ss-tab" data-tab="zones">Zones & rates</button>

51

</div>

52

53

54

55

56

57

58

59

<h3>Return / ship-from address</h3>

60

<p class="text-xs text-dim" style="margin:0 0 14px;line-height:1.5">Carriers print this on every label so undeliverable packages come back to you. It also appears on the buyer's packing slip.</p>

61

62

63

64

<label class="form-label">Contact name</label>

65

66

</div>

67

68

<label class="form-label">Company <span class="text-xs text-dim">(optional)</span></label>

69

70

</div>

71

</div>

72

73

74

<label class="form-label">Street address line 1</label>

75

76

</div>

77

78

<label class="form-label">Street address line 2 <span class="text-xs text-dim">(optional)</span></label>

79

80

</div>

81

82

83

84

85

86

</div>

87

88

<label class="form-label">State / province</label>

89

90

</div>

91

92

<label class="form-label">Postal code</label>

93

94

</div>

95

</div>

96

97

98

99

<label class="form-label">Country <span class="text-xs text-dim">(ISO 2-letter code)</span></label>

100

101

</div>

102

103

<label class="form-label">Phone</label>

104

105

</div>

106

107

<label class="form-label">Email</label>

108

109

</div>

110

</div>

111

</div>

112

113

114

<h3>Defaults</h3>

115

116

117

<label class="form-label">Default carrier</label>

118

119

<option value="manual">Manual / paper label</option>

120

121

122

<option value="fedex">FedEx</option>

123

124

<option value="other">Other</option>

125

</select>

126

</div>

127

128

<label class="form-label">Default service <span class="text-xs text-dim">(carrier service name)</span></label>

129

130

</div>

131

</div>

132

133

134

135

<label class="form-label">Handling fee (cents)</label>

136

137

</div>

138

139

<label class="form-label">Handling time (days)</label>

140

141

</div>

142

143

<label class="form-label">Default insurance (cents) <span class="text-xs text-dim">(optional)</span></label>

144

145

</div>

146

147

148

<input type="checkbox" name="auto_email_tracking" value="1" $auto_email_tracking_chk> Email tracking to buyer automatically

149

</label>

150

151

<input type="checkbox" name="require_signature" value="1" $require_signature_chk> Require signature by default

152

</label>

153

</div>

154

</div>

155

</div>

156

157

158

<button type="submit" class="btn btn-primary">Save origin & defaults</button>

159

</div>

160

</form>

161

162

163

// Pre-select the saved default carrier

164

document.getElementById('ssDefaultCarrier').value = '$default_carrier';

165

</script>

166

</div>

167

168

169

170

171

172

<strong>How this works:</strong> turn on carriers you ship with so they appear in the dropdown when you create a label. Adding API credentials here is optional — until live carrier API integration is wired up, labels are recorded manually (you paste the tracking number from the carrier's site). Saved credentials wait for the API integration.

173

</p>

174

</div>

175

176

[loop:@carriers]

177

178

179

180

181

182

<div>

183

184

[if:$loop1.is_configured]<div class="text-xs text-dim" style="margin-top:2px">Saved.</div>[/if]

185

</div>

186

187

<input type="checkbox" name="is_enabled" value="1" $loop1.is_enabled class="ss-carrier-enable"> Enabled

188

</label>

189

</div>

190

191

192

<p class="text-xs text-dim" style="margin:0 0 12px;line-height:1.5">$loop1.connect_help</p>

193

194

195

<label class="form-label">Display name</label>

196

197

</div>

198

199

<label class="form-label">Default service</label>

200

201

</div>

202

</div>

203

204

205

<label class="form-label">Account number</label>

206

207

</div>

208

209

210

211

</div>

212

213

<label class="form-label">API secret</label>

214

215

</div>

216

</div>

217

218

219

220

<span>Live mode <span class="text-xs text-dim">(unchecked = test/sandbox API)</span></span>

221

</label>

222

</div>

223

224

<label class="form-label">Internal notes</label>

225

226

</div>

227

228

229

</div>

230

</div>

231

</div>

232

</form>

233

[/loop]

234

</div>

235

236

237

238

239

240

<strong>How zones work:</strong> the rate estimator walks zones in <em>sort order</em>, picks the first whose country list matches the buyer's country, and quotes <code>base + per_kg * weight</code> (rounded to whole cents). Leave the country list empty for a catch-all (always last). Set <code>free_over_cents</code> to give buyers free shipping above a subtotal threshold.

241

</p>

242

</div>

243

244

245

<h3>Existing zones</h3>

246

[if:$has_zones]

247

248

<thead>

249

<tr>

250

251

<th>Countries</th>

252

253

254

255

256

<th>Carrier hint</th>

257

258

259

</tr>

260

</thead>

261

<tbody>

262

[loop:@zones]

263

<tr>

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

</div>

279

</td>

280

281

282

283

284

<input type="checkbox" name="is_enabled" value="1" $loop1.is_enabled_chk> on

285

</label>

286

287

</td>

288

</tr></table>

289

</form>

290

<form method="POST" action="/shipping_settings.cgi" style="display:inline"

291

data-confirm-title="Delete this zone?"

292

data-confirm-message="Quotes for destinations only matched by this zone will fall through to the next matching zone."

293

data-confirm-style="danger">

294

295

296

<button type="submit" class="btn btn-danger btn-sm" style="margin:8px 10px;float:right">Delete zone</button>

297

</form>

298

</td>

299

</tr>

300

[/loop]

301

</tbody>

302

</table>

303

[/if]

304

[if:!$has_zones]

305

<p class="text-xs text-dim">No zones yet. Add one below.</p>

306

[/if]

307

</div>

308

309

310

311

<p class="text-xs text-dim" style="margin:0 0 12px;line-height:1.5">Prices below are <strong>in cents</strong> (no dollar sign). e.g. \$9.50 = <code>950</code>. Country codes are comma-separated 2-letter ISO codes; leave empty for a catch-all zone.</p>

312

313

314

315

316

317

318

</div>

319

320

<label class="form-label">Countries <span class="text-xs text-dim">(empty = catch-all)</span></label>

321

322

</div>

323

</div>

324

325

326

<label class="form-label">Base (cents)</label>

327

328

</div>

329

330

<label class="form-label">Per kg (cents)</label>

331

332

</div>

333

334

<label class="form-label">Free over (cents)</label>

335

336

</div>

337

338

<label class="form-label">Sort order</label>

339

340

</div>

341

</div>

342

343

344

<label class="form-label">Delivery min days</label>

345

346

</div>

347

348

<label class="form-label">Delivery max days</label>

349

350

</div>

351

352

<label class="form-label">Carrier hint</label>

353

354

</div>

355

</div>

356

357

358

</div>

359

</form>

360

</div>

361

</div>

362

363

364

(function(){

365

// Tab switching

366

var tabs = document.querySelectorAll('.ss-tab');

367

var panes = document.querySelectorAll('.ss-pane');

368

tabs.forEach(function(t){

369

t.addEventListener('click', function(){

370

tabs.forEach(function(x){ x.classList.remove('is-active'); });

371

panes.forEach(function(p){ p.classList.remove('is-active'); });

372

t.classList.add('is-active');

373

document.querySelector('.ss-pane[data-pane="'+t.dataset.tab+'"]').classList.add('is-active');

374

});

375

});

376

377

// Show carrier body when enabled toggles on (visual hint only).

378

document.querySelectorAll('.ss-carrier-enable').forEach(function(cb){

379

var card = cb.closest('.ss-carrier-card');

380

function refresh(){ card.classList.toggle('is-on', cb.checked); }

381

cb.addEventListener('change', refresh);

382

refresh();

383

});

384

385

// Convert dollars typed in the zone table into the cents the

386

// server expects. The Save button serializes the field value, so

387

// we replace it pre-submit.

388

document.querySelectorAll('input[data-cents="1"]').forEach(function(inp){

389

inp.closest('form').addEventListener('submit', function(){

390

var v = (inp.value || '').replace(/[^\d.]/g, '');

391

if (!v.length) return;

392

// Already in dollar format (e.g. "9.50"); convert to cents.

393

var dollars = parseFloat(v);

394

if (isNaN(dollars)) { inp.value = ''; return; }

395

inp.value = Math.round(dollars * 100);

396

});

397

});

398

})();

399

</script>

/var/www/vhosts/3dshawn.com/affiliate.3dshawn.com/TEMPLATES/webstls_shipping_settings.html