관리-도구
편집 파일: thank-you.blade.php
@extends('layouts.store') @section('content') @php $currency = $s->currency_code ?? '$'; use App\Models\StoreSetting; $s = $s ?? StoreSetting::first(); @endphp <section class="border-bottom bg-gradient-subtle"> <div class="container py-4 text-center"> <h1 class="h4 mb-0">{{ __('messages.ThankYou') }}</h1> </div> </section> <div class="container py-5" id="ty-app"> <div class="row justify-content-center"> <div class="col-lg-8"> <div class="card border-0 shadow-sm rounded-4"> <div class="card-body p-4"> <div id="ty-empty" class="text-center text-muted d-none"> <div class="display-6">🛒</div> <p class="mt-2">{{ __('messages.NoRecentOrder') }}</p> <a href="{{ route('store.shop') }}" class="btn btn-outline-primary">{{ __('messages.GoToShop') }}</a> </div> <div id="ty-receipt" class="d-none"> <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3"> <div> <h5 class="mb-0">{{ __('messages.OrderPlaced') }}</h5> <div class="text-muted small" id="ty-date">—</div> </div> <div class="brand-badge" id="ty-no">#—</div> </div> <div id="ty-list"></div> <hr> <div class="d-flex justify-content-between small text-muted"> <span>{{ __('messages.Subtotal') }}</span> <strong id="ty-subtotal">{{ $currency }}0.00</strong> </div> <div class="d-flex justify-content-between h5 mt-2"> <span>{{ __('messages.GrandTotal') }}</span> <strong id="ty-grand">{{ $currency }}0.00</strong> </div> <div class="mt-4 d-flex gap-2"> <a href="{{ route('store.shop') }}" class="btn btn-primary">{{ __('messages.ContinueShopping') }}</a> <button class="btn btn-outline-secondary" id="ty-print"><i class="bi bi-printer"></i> {{ __('messages.Print') }}</button> </div> </div> </div> </div> <div class="small text-muted text-center mt-3"> {{ __('messages.ReceiptSavedInBrowser') }} </div> </div> </div> </div> <style> .bg-gradient-subtle{ background: linear-gradient(90deg, rgba(108,92,231,.05), rgba(0,194,255,.05)); } .ty-thumb{ width:54px; height:54px; object-fit:cover; border-radius:.5rem; } .ty-line{ display:flex; align-items:center; gap:.75rem; padding:.5rem 0; } </style> <script> (function(){ const CURRENCY = document.querySelector('meta[name="currency"]')?.content || @json($currency); const NOIMG = @json(asset('images/products/no-image.png')); const fmt = v => CURRENCY + Number(v || 0).toFixed(2); const empty = document.getElementById('ty-empty'); const wrap = document.getElementById('ty-receipt'); const noEl = document.getElementById('ty-no'); const dateEl = document.getElementById('ty-date'); const listEl = document.getElementById('ty-list'); const subEl = document.getElementById('ty-subtotal'); const grandEl = document.getElementById('ty-grand'); const printBtn= document.getElementById('ty-print'); let rec = null; try { rec = JSON.parse(localStorage.getItem('shop.last_order') || 'null'); } catch(e){ rec = null; } if (!rec || !Array.isArray(rec.items) || !rec.items.length){ empty.classList.remove('d-none'); return; } wrap.classList.remove('d-none'); noEl.textContent = '#' + (rec.order_no || '—'); const dt = new Date(rec.placed_at || Date.now()); const htmlLang = document.documentElement.getAttribute('lang') || undefined; dateEl.textContent = htmlLang ? dt.toLocaleString(htmlLang) : dt.toLocaleString(); listEl.innerHTML = ''; rec.items.forEach(it => { const name = String(it.name || ''); const line = document.createElement('div'); line.className = 'ty-line'; line.innerHTML = ` <img class="ty-thumb" src="${it.image || NOIMG}" alt="${name.replace(/"/g,'"')}"> <div class="flex-grow-1"> <div class="fw-semibold text-truncate" title="${name.replace(/"/g,'"')}">${name}</div> <div class="small text-muted">{{ __('messages.Qty') }}: ${Number(it.qty||0)}</div> </div> <div class="fw-semibold">${fmt((Number(it.price)||0) * (Number(it.qty)||0))}</div> `; listEl.appendChild(line); }); const subtotal = Number(rec.totals?.subtotal || 0); subEl.textContent = fmt(subtotal); grandEl.textContent = fmt(Number(rec.totals?.grand ?? subtotal)); printBtn?.addEventListener('click', () => window.print()); })(); </script> @endsection