1019 lines
41 KiB
PHP
Executable File
1019 lines
41 KiB
PHP
Executable File
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Amazon con Tag NetGescon</title>
|
|
@include('components.google-analytics')
|
|
<style>
|
|
:root {
|
|
--bg: #f3efe7;
|
|
--card: rgba(255, 255, 255, 0.92);
|
|
--ink: #1f2937;
|
|
--muted: #6b7280;
|
|
--line: rgba(31, 41, 55, 0.12);
|
|
--accent: #c66a1f;
|
|
--accent-dark: #8a4313;
|
|
--olive: #276357;
|
|
--olive-soft: rgba(39, 99, 87, 0.12);
|
|
--amber-soft: rgba(198, 106, 31, 0.12);
|
|
--rose-soft: rgba(163, 76, 76, 0.12);
|
|
--shadow: 0 20px 50px rgba(82, 52, 24, 0.14);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
color: var(--ink);
|
|
background:
|
|
radial-gradient(circle at top left, rgba(198, 106, 31, 0.16), transparent 28%),
|
|
radial-gradient(circle at bottom right, rgba(39, 99, 87, 0.14), transparent 24%),
|
|
var(--bg);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.shell {
|
|
width: min(1100px, calc(100% - 32px));
|
|
margin: 32px auto;
|
|
}
|
|
|
|
.hero {
|
|
display: grid;
|
|
gap: 20px;
|
|
grid-template-columns: 1.2fr 0.8fr;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.panel {
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 24px;
|
|
box-shadow: var(--shadow);
|
|
padding: 28px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 12px;
|
|
font-size: clamp(2rem, 3vw, 3.2rem);
|
|
line-height: 1;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 1rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 14px;
|
|
padding: 8px 12px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(198, 106, 31, 0.24);
|
|
background: rgba(198, 106, 31, 0.1);
|
|
color: var(--accent-dark);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 18px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 18px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
padding: 20px 22px;
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0 0 6px;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: clamp(1.6rem, 2.6vw, 2.4rem);
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.form-card h2,
|
|
.tips h2 {
|
|
margin: 0 0 14px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.field {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 0.85rem;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
padding: 14px 16px;
|
|
border-radius: 16px;
|
|
border: 1px solid var(--line);
|
|
background: rgba(255, 255, 255, 0.94);
|
|
font-size: 1rem;
|
|
color: var(--ink);
|
|
}
|
|
|
|
input:focus {
|
|
outline: 2px solid rgba(198, 106, 31, 0.22);
|
|
border-color: rgba(198, 106, 31, 0.45);
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.button,
|
|
.button-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 48px;
|
|
padding: 0 18px;
|
|
border-radius: 14px;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
transition: transform 120ms ease, box-shadow 120ms ease;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
.button {
|
|
background: linear-gradient(135deg, var(--accent), #df8d2b);
|
|
color: white;
|
|
box-shadow: 0 12px 24px rgba(198, 106, 31, 0.24);
|
|
}
|
|
|
|
.button-secondary {
|
|
background: white;
|
|
color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.button:hover,
|
|
.button-secondary:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.tips ul {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
color: var(--muted);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.mini-link {
|
|
color: var(--accent-dark);
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.section-title {
|
|
margin: 0 0 10px;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.section-copy {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.showcase-grid,
|
|
.capability-grid,
|
|
.notes-grid,
|
|
.setup-grid,
|
|
.comparison-grid,
|
|
.kb-grid {
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
|
|
.showcase-grid,
|
|
.notes-grid,
|
|
.setup-grid,
|
|
.comparison-grid,
|
|
.kb-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
}
|
|
|
|
.capability-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.offer-card {
|
|
display: grid;
|
|
grid-template-columns: 108px minmax(0, 1fr);
|
|
gap: 16px;
|
|
align-items: start;
|
|
}
|
|
|
|
.offer-thumb {
|
|
width: 108px;
|
|
height: 108px;
|
|
border-radius: 18px;
|
|
border: 1px solid var(--line);
|
|
background: white;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.offer-thumb img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.thumb-strip {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.thumb-strip img,
|
|
.thumb-strip span {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--line);
|
|
object-fit: cover;
|
|
background: white;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.72rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.offer-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin: 10px 0 0;
|
|
}
|
|
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
font-size: 0.78rem;
|
|
border: 1px solid var(--line);
|
|
background: rgba(255, 255, 255, 0.88);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.price {
|
|
margin-top: 10px;
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.price small {
|
|
font-size: 0.9rem;
|
|
color: var(--muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.comparison-table {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.comparison-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
background: rgba(31, 41, 55, 0.04);
|
|
}
|
|
|
|
.comparison-row strong {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.delta-positive {
|
|
color: #8d4040;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.delta-negative {
|
|
color: var(--olive);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.brand-nav {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.brand-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 40px;
|
|
padding: 0 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--line);
|
|
background: white;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.brand-link.active {
|
|
background: linear-gradient(135deg, var(--accent), #df8d2b);
|
|
color: white;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.cart-shell {
|
|
position: sticky;
|
|
bottom: 18px;
|
|
z-index: 10;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.cart-panel {
|
|
display: grid;
|
|
gap: 14px;
|
|
align-items: start;
|
|
grid-template-columns: 1.3fr 0.7fr;
|
|
}
|
|
|
|
.cart-list {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.cart-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px 14px;
|
|
border-radius: 12px;
|
|
background: rgba(31, 41, 55, 0.04);
|
|
}
|
|
|
|
.cart-item strong,
|
|
.cart-item span {
|
|
display: block;
|
|
}
|
|
|
|
.cart-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.features {
|
|
margin: 12px 0 0;
|
|
padding-left: 18px;
|
|
color: var(--muted);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.status-card {
|
|
padding: 20px;
|
|
}
|
|
|
|
.status-label {
|
|
display: inline-flex;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.tone-live .status-label {
|
|
background: var(--olive-soft);
|
|
color: var(--olive);
|
|
}
|
|
|
|
.tone-next .status-label {
|
|
background: var(--amber-soft);
|
|
color: var(--accent-dark);
|
|
}
|
|
|
|
.tone-review .status-label {
|
|
background: var(--rose-soft);
|
|
color: #8d4040;
|
|
}
|
|
|
|
.setup-list,
|
|
.notes-list {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.setup-item,
|
|
.note-item {
|
|
padding: 18px 20px;
|
|
}
|
|
|
|
.code-block {
|
|
margin-top: 10px;
|
|
padding: 12px 14px;
|
|
border-radius: 16px;
|
|
background: rgba(31, 41, 55, 0.05);
|
|
border: 1px solid rgba(31, 41, 55, 0.08);
|
|
font-family: "Fira Code", "JetBrains Mono", monospace;
|
|
font-size: 0.85rem;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
color: #243041;
|
|
}
|
|
|
|
.comparison-card {
|
|
padding: 22px;
|
|
}
|
|
|
|
.compact-card {
|
|
display: grid;
|
|
gap: 14px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.compact-media {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.compact-thumb {
|
|
width: 100%;
|
|
height: 220px;
|
|
border-radius: 18px;
|
|
border: 1px solid var(--line);
|
|
background: white;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.compact-thumb img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
background: white;
|
|
}
|
|
|
|
.compact-content {
|
|
display: grid;
|
|
gap: 10px;
|
|
align-content: start;
|
|
}
|
|
|
|
.compact-content h3 {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.compact-price {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.compact-note {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.hero,
|
|
.grid,
|
|
.stats,
|
|
.showcase-grid,
|
|
.capability-grid,
|
|
.notes-grid,
|
|
.setup-grid,
|
|
.comparison-grid,
|
|
.kb-grid,
|
|
.cart-panel {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.offer-card {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.offer-thumb {
|
|
width: 100%;
|
|
max-width: 180px;
|
|
height: 180px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<section class="hero">
|
|
<div class="panel">
|
|
<div class="tag">Tag attivo: {{ $associateTag }}</div>
|
|
<h1>Apri Amazon con il link affiliato NetGescon</h1>
|
|
<p>Questa pagina pubblica serve sia ad aprire Amazon con il tag corretto sia a mostrare, in modo visibile e condivisibile, le prove che stiamo costruendo su catalogo interno, offerte, Telegram e prossime integrazioni.</p>
|
|
<p style="margin-top:12px;font-size:0.95rem;color:#8a4313;"><strong>In qualità di Affiliato Amazon io ricevo un guadagno dagli acquisti idonei.</strong></p>
|
|
</div>
|
|
|
|
<div class="panel tips">
|
|
<h2>Stato laboratorio</h2>
|
|
<ul>
|
|
<li>Qui mostriamo le prove reali che stiamo portando nel catalogo interno.</li>
|
|
<li>Le offerte Amazon importate restano riusabili nelle procedure NetGescon.</li>
|
|
<li>Telegram, carrello Amazon, fattura e provenienza venditore sono esposti con stato reale: attivo, pronto o da validare.</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="stats">
|
|
<div class="panel stat-card">
|
|
<div class="eyebrow">Offerte Amazon salvate</div>
|
|
<div class="stat-value">{{ $catalogStats['offers_count'] }}</div>
|
|
<p style="margin-top:8px;">Offerte Amazon attive memorizzate nel catalogo interno.</p>
|
|
</div>
|
|
<div class="panel stat-card">
|
|
<div class="eyebrow">Prodotti collegati</div>
|
|
<div class="stat-value">{{ $catalogStats['products_count'] }}</div>
|
|
<p style="margin-top:8px;">Prodotti NetGescon che hanno gia un aggancio Amazon persistito.</p>
|
|
</div>
|
|
<div class="panel stat-card">
|
|
<div class="eyebrow">Canale Amazon</div>
|
|
<div class="stat-value">{{ $associateTag }}</div>
|
|
<p style="margin-top:8px;">Tag affiliato applicato ai link pubblici e ai referral interni.</p>
|
|
</div>
|
|
<div class="panel stat-card">
|
|
<div class="eyebrow">Brand {{ $selectedBrand }}</div>
|
|
<div class="stat-value">{{ $catalogStats['brand_products_count'] }}</div>
|
|
<p style="margin-top:8px;">Prodotti del brand selezionato gia disponibili nella vetrina interna.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grid">
|
|
<form class="panel form-card" method="GET" action="{{ route('public.amazon.go') }}">
|
|
<h2>Ricerca per testo</h2>
|
|
<div class="field">
|
|
<label for="q">Prodotto da cercare</label>
|
|
<input id="q" name="q" type="text" value="{{ $defaultQuery }}" placeholder="Es. notebook lenovo thinkpad" />
|
|
</div>
|
|
<div class="actions">
|
|
<button class="button" type="submit">Apri ricerca Amazon</button>
|
|
</div>
|
|
</form>
|
|
|
|
<form class="panel form-card" method="GET" action="{{ route('public.amazon.go') }}">
|
|
<h2>Apertura diretta ASIN</h2>
|
|
<div class="field">
|
|
<label for="asin">ASIN Amazon</label>
|
|
<input id="asin" name="asin" type="text" value="{{ $defaultAsin }}" placeholder="Es. B0DN6PD8QS" />
|
|
</div>
|
|
<div class="actions">
|
|
<button class="button" type="submit">Apri scheda prodotto</button>
|
|
</div>
|
|
</form>
|
|
|
|
<form class="panel form-card" method="GET" action="{{ route('public.amazon.go') }}">
|
|
<h2>Normalizza link Amazon</h2>
|
|
<div class="field">
|
|
<label for="url">Link prodotto</label>
|
|
<input id="url" name="url" type="text" value="{{ $defaultUrl }}" placeholder="https://www.amazon.it/dp/..." />
|
|
</div>
|
|
<div class="actions">
|
|
<button class="button" type="submit">Apri link con tag</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="panel" style="margin-top: 20px;">
|
|
<h2 style="margin:0 0 10px;">Esempio pronto</h2>
|
|
<p style="margin-bottom:14px;">Puoi già distribuire anche un link diretto, ad esempio per il prodotto che stavamo testando.</p>
|
|
<a class="mini-link" href="{{ route('public.amazon.go', ['asin' => 'B0DN6PD8QS']) }}">Apri B0DN6PD8QS con tag NetGescon</a>
|
|
<div style="margin-top:14px;font-size:0.9rem;color:#6b7280;">Link base da far girare: {{ route('public.amazon.index') }}</div>
|
|
</section>
|
|
|
|
<section class="panel" style="margin-top: 20px;">
|
|
<h2 class="section-title">Mini sito brand selezionati</h2>
|
|
<p class="section-copy">Questa pagina puo gia funzionare come vetrina del tuo sito: l'utente vede prima i prodotti selezionati nel catalogo NetGescon, poi decide se aprire Amazon tramite il referral.</p>
|
|
<div class="brand-nav">
|
|
<a class="brand-link {{ $selectedBrand === 'EPSON' ? 'active' : '' }}" href="{{ route('public.amazon.index', ['brand' => 'EPSON']) }}">EPSON</a>
|
|
<a class="brand-link {{ $selectedBrand === 'SAMSUNG' ? 'active' : '' }}" href="{{ route('public.amazon.index', ['brand' => 'SAMSUNG']) }}">SAMSUNG</a>
|
|
</div>
|
|
</section>
|
|
|
|
@if(count($featuredComparisons) > 0)
|
|
<section class="panel" style="margin-top: 20px;">
|
|
<h2 class="section-title">Prodotti in evidenza</h2>
|
|
<p class="section-copy">Qui mettiamo le schede piu' curate da usare come vetrina pubblica: immagini pulite, codice prodotto ufficiale e uscita finale verso Amazon.</p>
|
|
<div class="comparison-grid">
|
|
@foreach($featuredComparisons as $item)
|
|
<article class="panel compact-card comparison-card">
|
|
<div class="compact-media">
|
|
<div class="compact-thumb">
|
|
@if($item['image_url'] !== '')
|
|
<img src="{{ $item['image_url'] }}" alt="{{ $item['title'] }}" />
|
|
@else
|
|
Nessuna immagine
|
|
@endif
|
|
</div>
|
|
@if(count($item['image_urls']) > 1)
|
|
<div class="thumb-strip">
|
|
@foreach(array_slice($item['image_urls'], 0, 4) as $imageUrl)
|
|
<img src="{{ $imageUrl }}" alt="miniatura {{ $item['asin'] }}" />
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="compact-content">
|
|
<h3>{{ $item['title'] }}</h3>
|
|
<div class="offer-meta">
|
|
<span class="pill">Brand {{ $item['brand'] }}</span>
|
|
@if(($item['reference']['label'] ?? '') !== '' && ($item['reference']['value'] ?? '') !== '')
|
|
<span class="pill">{{ $item['reference']['label'] }} {{ $item['reference']['value'] }}</span>
|
|
@endif
|
|
</div>
|
|
<div class="compact-price">
|
|
@if($item['amazon_public_price'] !== null)
|
|
{{ number_format((float) $item['amazon_public_price'], 2, ',', '.') }} {{ $item['currency'] }}
|
|
@else
|
|
Prezzo Amazon in aggiornamento
|
|
@endif
|
|
</div>
|
|
@if($item['availability'] !== '')
|
|
<p>Disponibilita Amazon: {{ $item['availability'] }}</p>
|
|
@endif
|
|
<p class="compact-note">{{ $item['note'] }}</p>
|
|
<div class="actions" style="margin-top:4px;">
|
|
@if($item['referral_url'] !== '')
|
|
<button class="button-secondary cart-add-button" type="button" data-cart-title="{{ $item['title'] }}" data-cart-ref="{{ ($item['reference']['label'] ?? '') !== '' ? ($item['reference']['label'] . ': ' . $item['reference']['value']) : '' }}" data-cart-brand="{{ $item['brand'] }}" data-cart-price="{{ $item['amazon_public_price'] !== null ? number_format((float) $item['amazon_public_price'], 2, '.', '') : '' }}" data-cart-currency="{{ $item['currency'] }}" data-cart-url="{{ $item['referral_url'] }}">Aggiungi al carrello</button>
|
|
@endif
|
|
@if($item['referral_url'] !== '')
|
|
<a class="button" href="{{ $item['referral_url'] }}" target="_blank">Vai ad Amazon</a>
|
|
@elseif($item['detail_url'] !== '')
|
|
<a class="button" href="{{ $item['detail_url'] }}" target="_blank">Apri scheda Amazon</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
@if(count($brandCatalog) > 0)
|
|
<section class="panel" style="margin-top: 20px;">
|
|
<h2 class="section-title">Catalogo {{ $selectedBrand }} sul tuo sito</h2>
|
|
<p class="section-copy">Questa sezione e' il primo nucleo del mini sito: schede piu' compatte, leggibili e adatte a stare affiancate anche quando il catalogo cresce.</p>
|
|
<div class="showcase-grid">
|
|
@foreach($brandCatalog as $offer)
|
|
<article class="panel compact-card">
|
|
<div class="compact-media">
|
|
<div class="compact-thumb">
|
|
@if($offer['image_url'] !== '')
|
|
<img src="{{ $offer['image_url'] }}" alt="{{ $offer['title'] }}" />
|
|
@else
|
|
Nessuna immagine
|
|
@endif
|
|
</div>
|
|
@if(count($offer['image_urls']) > 1)
|
|
<div class="thumb-strip">
|
|
@foreach(array_slice($offer['image_urls'], 0, 4) as $imageUrl)
|
|
<img src="{{ $imageUrl }}" alt="miniatura {{ $offer['asin'] }}" />
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="compact-content">
|
|
<h3>{{ $offer['title'] }}</h3>
|
|
<div class="offer-meta">
|
|
@if($offer['internal_code'] !== '')
|
|
<span class="pill">Catalogo {{ $offer['internal_code'] }}</span>
|
|
@endif
|
|
<span class="pill">Brand {{ $offer['brand'] }}</span>
|
|
@if(($offer['reference']['label'] ?? '') !== '' && ($offer['reference']['value'] ?? '') !== '')
|
|
<span class="pill">{{ $offer['reference']['label'] }} {{ $offer['reference']['value'] }}</span>
|
|
@endif
|
|
</div>
|
|
<div class="compact-price">{{ $offer['amazon_price'] !== null ? number_format((float) $offer['amazon_price'], 2, ',', '.') . ' ' . $offer['currency'] : 'Prezzo Amazon in aggiornamento' }}</div>
|
|
@if($offer['availability'] !== '')
|
|
<p>Disponibilita: {{ $offer['availability'] }}</p>
|
|
@endif
|
|
@if(count($offer['feature_points']) > 0)
|
|
<ul class="features">
|
|
@foreach(array_slice($offer['feature_points'], 0, 2) as $point)
|
|
<li>{{ $point }}</li>
|
|
@endforeach
|
|
</ul>
|
|
@endif
|
|
<div class="actions" style="margin-top:4px;">
|
|
@if($offer['referral_url'] !== '')
|
|
<button class="button-secondary cart-add-button" type="button" data-cart-title="{{ $offer['title'] }}" data-cart-ref="{{ ($offer['reference']['label'] ?? '') !== '' ? ($offer['reference']['label'] . ': ' . $offer['reference']['value']) : '' }}" data-cart-brand="{{ $offer['brand'] }}" data-cart-price="{{ $offer['amazon_price'] !== null ? number_format((float) $offer['amazon_price'], 2, '.', '') : '' }}" data-cart-currency="{{ $offer['currency'] }}" data-cart-url="{{ $offer['referral_url'] }}">Aggiungi al carrello</button>
|
|
@endif
|
|
@if($offer['referral_url'] !== '')
|
|
<a class="button" href="{{ $offer['referral_url'] }}" target="_blank">Vai ad Amazon</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<section class="panel" style="margin-top: 20px;">
|
|
<h2 class="section-title">Esempi live dal catalogo interno</h2>
|
|
<p class="section-copy">Qui compaiono le offerte Amazon gia importate e rese disponibili dentro NetGescon. Sono il ponte fra la ricerca API e l'utilizzo operativo interno.</p>
|
|
|
|
@if(count($exampleOffers) > 0)
|
|
<div class="showcase-grid">
|
|
@foreach($exampleOffers as $offer)
|
|
<article class="panel compact-card">
|
|
<div class="compact-media">
|
|
<div class="compact-thumb">
|
|
@if($offer['image_url'] !== '')
|
|
<img src="{{ $offer['image_url'] }}" alt="{{ $offer['title'] }}" />
|
|
@else
|
|
Nessuna immagine
|
|
@endif
|
|
</div>
|
|
@if(count($offer['image_urls']) > 1)
|
|
<div class="thumb-strip">
|
|
@foreach(array_slice($offer['image_urls'], 0, 4) as $imageUrl)
|
|
<img src="{{ $imageUrl }}" alt="miniatura {{ $offer['asin'] }}" />
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="compact-content">
|
|
<h3>{{ $offer['title'] }}</h3>
|
|
<div class="offer-meta">
|
|
@if($offer['internal_code'] !== '')
|
|
<span class="pill">Catalogo {{ $offer['internal_code'] }}</span>
|
|
@endif
|
|
@if($offer['brand'] !== '')
|
|
<span class="pill">Marca {{ $offer['brand'] }}</span>
|
|
@endif
|
|
@if(($offer['reference_label'] ?? '') !== '' && ($offer['reference_value'] ?? '') !== '')
|
|
<span class="pill">{{ $offer['reference_label'] }} {{ $offer['reference_value'] }}</span>
|
|
@endif
|
|
@if($offer['search_query'] !== '')
|
|
<span class="pill">Query {{ $offer['search_query'] }}</span>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="compact-price">
|
|
@if($offer['price_amount'] !== null)
|
|
{{ number_format((float) $offer['price_amount'], 2, ',', '.') }} {{ $offer['currency'] !== '' ? $offer['currency'] : 'EUR' }}
|
|
@else
|
|
Prezzo Amazon in aggiornamento
|
|
@endif
|
|
</div>
|
|
|
|
@if($offer['availability'] !== '')
|
|
<p>Disponibilita: {{ $offer['availability'] }}</p>
|
|
@endif
|
|
|
|
@if(count($offer['feature_points']) > 0)
|
|
<ul class="features">
|
|
@foreach(array_slice($offer['feature_points'], 0, 2) as $point)
|
|
<li>{{ $point }}</li>
|
|
@endforeach
|
|
</ul>
|
|
@endif
|
|
|
|
<div class="actions" style="margin-top:4px;">
|
|
@if($offer['referral_url'] !== '')
|
|
<button class="button-secondary cart-add-button" type="button" data-cart-title="{{ $offer['title'] }}" data-cart-ref="{{ ($offer['reference_label'] ?? '') !== '' ? ($offer['reference_label'] . ': ' . $offer['reference_value']) : '' }}" data-cart-brand="{{ $offer['brand'] }}" data-cart-price="{{ $offer['price_amount'] !== null ? number_format((float) $offer['price_amount'], 2, '.', '') : '' }}" data-cart-currency="{{ $offer['currency'] !== '' ? $offer['currency'] : 'EUR' }}" data-cart-url="{{ $offer['referral_url'] }}">Aggiungi al carrello</button>
|
|
@endif
|
|
@if($offer['referral_url'] !== '')
|
|
<a class="button" href="{{ $offer['referral_url'] }}" target="_blank">Apri referral Amazon</a>
|
|
@endif
|
|
@if($offer['detail_url'] !== '' && $offer['detail_url'] !== $offer['referral_url'])
|
|
<a class="button-secondary" href="{{ $offer['detail_url'] }}" target="_blank">Apri dettaglio</a>
|
|
@endif
|
|
</div>
|
|
|
|
<p style="margin-top:10px;font-size:0.88rem;">Ultimo sync: {{ $offer['synced_at'] !== '' ? $offer['synced_at'] : 'n/d' }} · Sorgente: {{ $offer['sync_source'] !== '' ? $offer['sync_source'] : 'amazon_creators_api' }}</p>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="panel" style="padding:20px;">Nessuna offerta Amazon e' ancora stata importata nel catalogo interno.</div>
|
|
@endif
|
|
</section>
|
|
|
|
<section class="panel" style="margin-top: 20px;">
|
|
<h2 class="section-title">Cosa stiamo facendo adesso</h2>
|
|
<p class="section-copy">Questi blocchi sono pensati anche per rendere partecipe chi ha contribuito all'abilitazione delle API Amazon: mostrano cosa e' gia operativo e cosa stiamo ancora validando.</p>
|
|
<div class="capability-grid">
|
|
@foreach($capabilityCards as $card)
|
|
<article class="panel status-card tone-{{ $card['tone'] }}">
|
|
<div class="status-label">{{ $card['status'] }}</div>
|
|
<h3 style="margin:0 0 8px;font-size:1.02rem;">{{ $card['title'] }}</h3>
|
|
<p>{{ $card['body'] }}</p>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
<section class="setup-grid" style="margin-top: 20px;">
|
|
<div class="panel">
|
|
<h2 class="section-title">Canale Telegram offerte</h2>
|
|
<p class="section-copy">Per collegare il canale {{ '@nethomestorelettronica' }} e iniziare a pubblicare le offerte Amazon servono pochi passaggi, ma vanno fatti bene lato Telegram e lato ambiente.</p>
|
|
<div class="setup-list">
|
|
@foreach($telegramSetup as $item)
|
|
<div class="panel setup-item">
|
|
<strong>{{ $item['label'] }}</strong>
|
|
<p style="margin-top:6px;">{{ $item['value'] }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div class="code-block">TELEGRAM_OFFERS_BOT_TOKEN=
|
|
TELEGRAM_OFFERS_CHAT_ID=
|
|
TELEGRAM_OFFERS_CHANNEL_NAME=@nethomestorelettronica
|
|
TELEGRAM_OFFERS_WEBHOOK_SECRET=</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2 class="section-title">Vincoli da conoscere subito</h2>
|
|
<p class="section-copy">Qui chiarisco le domande chiave aperte, cosi' evitiamo di progettare contro un vincolo della piattaforma.</p>
|
|
<div class="notes-list">
|
|
@foreach($evaluationNotes as $note)
|
|
<div class="panel note-item">
|
|
<strong>{{ $note['title'] }}</strong>
|
|
<p style="margin-top:6px;">{{ $note['body'] }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" style="margin-top: 20px;">
|
|
<h2 class="section-title">KB operativo di questa prova</h2>
|
|
<p class="section-copy">Questi sono i passaggi da riversare nel KB per replicare la stessa configurazione su una macchina dedicata al sito vetrina prodotti Amazon.</p>
|
|
<div class="kb-grid">
|
|
@foreach($kbChecklist as $item)
|
|
<div class="panel note-item">
|
|
<strong>{{ $item['title'] }}</strong>
|
|
<p style="margin-top:6px;">{{ $item['body'] }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel cart-shell">
|
|
<div class="cart-panel">
|
|
<div>
|
|
<h2 class="section-title" style="margin-bottom:8px;">Carrello interno pronto per Amazon</h2>
|
|
<p class="section-copy" style="margin-bottom:12px;">Qui raccogli i prodotti selezionati nel tuo sito. Il checkout finale apre le schede referral Amazon dei prodotti scelti, cosi' il cliente passa dal tuo sito ad Amazon solo all'ultimo step.</p>
|
|
<div class="cart-list" id="amazon-cart-list">
|
|
<div class="panel note-item">Nessun prodotto selezionato.</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="eyebrow">Carrello</div>
|
|
<div class="stat-value" id="amazon-cart-count">0</div>
|
|
<p style="margin-top:8px;">Prodotti selezionati dal mini sito.</p>
|
|
<div class="cart-actions" style="margin-top:14px;">
|
|
<button class="button" type="button" id="amazon-cart-open">Apri selezione su Amazon</button>
|
|
<button class="button-secondary" type="button" id="amazon-cart-clear">Svuota</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
(() => {
|
|
const storageKey = 'netgescon-amazon-cart';
|
|
const list = document.getElementById('amazon-cart-list');
|
|
const count = document.getElementById('amazon-cart-count');
|
|
const openButton = document.getElementById('amazon-cart-open');
|
|
const clearButton = document.getElementById('amazon-cart-clear');
|
|
const addButtons = Array.from(document.querySelectorAll('.cart-add-button'));
|
|
|
|
const loadItems = () => {
|
|
try {
|
|
const parsed = JSON.parse(window.localStorage.getItem(storageKey) || '[]');
|
|
return Array.isArray(parsed) ? parsed : [];
|
|
} catch (error) {
|
|
return [];
|
|
}
|
|
};
|
|
|
|
const saveItems = (items) => {
|
|
window.localStorage.setItem(storageKey, JSON.stringify(items));
|
|
};
|
|
|
|
const render = () => {
|
|
const items = loadItems();
|
|
count.textContent = String(items.length);
|
|
|
|
if (items.length === 0) {
|
|
list.innerHTML = '<div class="panel note-item">Nessun prodotto selezionato.</div>';
|
|
return;
|
|
}
|
|
|
|
list.innerHTML = items.map((item, index) => `
|
|
<div class="cart-item">
|
|
<div>
|
|
<strong>${item.title}</strong>
|
|
<span>${item.brand || ''}</span>
|
|
<span>${item.reference || ''}</span>
|
|
<span>${item.price || ''}</span>
|
|
</div>
|
|
<div>
|
|
<button class="button-secondary cart-remove-button" type="button" data-index="${index}">Rimuovi</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
Array.from(document.querySelectorAll('.cart-remove-button')).forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
const items = loadItems();
|
|
items.splice(Number(button.dataset.index || -1), 1);
|
|
saveItems(items);
|
|
render();
|
|
});
|
|
});
|
|
};
|
|
|
|
addButtons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
const items = loadItems();
|
|
const url = button.dataset.cartUrl || '';
|
|
if (url === '') {
|
|
return;
|
|
}
|
|
|
|
if (!items.some((item) => item.url === url)) {
|
|
items.push({
|
|
title: button.dataset.cartTitle || 'Prodotto Amazon',
|
|
reference: button.dataset.cartRef || '',
|
|
brand: button.dataset.cartBrand || '',
|
|
price: button.dataset.cartPrice ? `${Number(button.dataset.cartPrice).toFixed(2).replace('.', ',')} ${button.dataset.cartCurrency || 'EUR'}` : '',
|
|
url,
|
|
});
|
|
saveItems(items);
|
|
render();
|
|
}
|
|
});
|
|
});
|
|
|
|
openButton?.addEventListener('click', () => {
|
|
loadItems().forEach((item) => {
|
|
if (item.url) {
|
|
window.open(item.url, '_blank', 'noopener');
|
|
}
|
|
});
|
|
});
|
|
|
|
clearButton?.addEventListener('click', () => {
|
|
saveItems([]);
|
|
render();
|
|
});
|
|
|
|
render();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |