Init PercoVitrine — app de gestion de fiches produits
This commit is contained in:
perco
+153
@@ -0,0 +1,153 @@
|
||||
<?php
|
||||
require __DIR__ . '/includes/db.php';
|
||||
require __DIR__ . '/includes/helpers.php';
|
||||
require __DIR__ . '/includes/layout.php';
|
||||
|
||||
$id = (int)($_GET['id'] ?? 0);
|
||||
if (!$id) { header('Location: /'); exit; }
|
||||
|
||||
$p = $pdo->query("SELECT p.*, c.name as cat_name FROM products p LEFT JOIN categories c ON c.id=p.category_id WHERE p.id=$id")->fetch();
|
||||
if (!$p) { header('Location: /'); exit; }
|
||||
|
||||
$medias = $pdo->query("SELECT * FROM product_media WHERE product_id=$id ORDER BY sort_order")->fetchAll();
|
||||
$images = array_filter($medias, fn($m) => $m['type']==='image' && $m['filename']);
|
||||
$videos = array_filter($medias, fn($m) => $m['type']==='video');
|
||||
|
||||
$etsyKey = $pdo->query("SELECT value FROM settings WHERE key='etsy_api_key'")->fetchColumn();
|
||||
|
||||
layout_head(h($p['title']));
|
||||
layout_sidebar('');
|
||||
layout_main_open();
|
||||
?>
|
||||
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<a href="/" style="color:var(--muted);text-decoration:none;font-size:.85rem">← Tous les produits</a>
|
||||
<div class="page-title" style="margin-top:.25rem"><?= h($p['title']) ?></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:.5rem">
|
||||
<a href="/form.php?id=<?= $id ?>" class="btn btn-secondary"><i class="fas fa-pen"></i> Modifier</a>
|
||||
<?php if ($etsyKey && $p['status']==='prêt' && !$p['etsy_listing_id']): ?>
|
||||
<button onclick="publishEtsy(<?= $id ?>)" class="btn btn-success"><i class="fab fa-etsy"></i> Publier sur Etsy</button>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-detail-grid">
|
||||
|
||||
<!-- Médias -->
|
||||
<div>
|
||||
<?php
|
||||
$allMedia = array_merge(array_values($images), array_values($videos));
|
||||
$first = $allMedia[0] ?? null;
|
||||
?>
|
||||
<div class="media-main" id="mediaMain">
|
||||
<?php if ($first): ?>
|
||||
<?php if ($first['type']==='image'): ?>
|
||||
<img src="/file.php?f=<?= urlencode($first['filename']) ?>" alt="">
|
||||
<?php else: ?>
|
||||
<video src="<?= $first['filename'] ? '/file.php?f='.urlencode($first['filename']) : h($first['video_url']) ?>" controls style="width:100%;border-radius:10px;aspect-ratio:1;object-fit:cover"></video>
|
||||
<?php endif ?>
|
||||
<?php else: ?>
|
||||
<div style="aspect-ratio:1;background:var(--bg-card);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--border);font-size:4rem"><i class="fas fa-image"></i></div>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<?php if (count($allMedia) > 1): ?>
|
||||
<div class="media-thumbs">
|
||||
<?php foreach ($allMedia as $i => $m): ?>
|
||||
<div class="media-thumb<?= $i===0?' active':'' ?>" onclick="switchMedia(this,'<?= $m['type'] ?>','<?= $m['filename'] ? '/file.php?f='.urlencode($m['filename']) : h($m['video_url']) ?>')">
|
||||
<?php if ($m['type']==='image'): ?>
|
||||
<img src="/file.php?f=<?= urlencode($m['filename']) ?>" alt="">
|
||||
<?php else: ?>
|
||||
<div style="width:100%;height:100%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--muted)"><i class="fas fa-play"></i></div>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($p['description']): ?>
|
||||
<div class="card" style="margin-top:1.25rem">
|
||||
<div style="font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem">Description</div>
|
||||
<div class="desc-block"><?= nl2br(h($p['description'])) ?></div>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
|
||||
<!-- Infos produit -->
|
||||
<div class="product-info-card">
|
||||
<div class="card">
|
||||
<div class="price-block"><?= fmtPrice($p['price']) ?></div>
|
||||
<?php if ($p['shipping'] > 0): ?>
|
||||
<div class="shipping-block" style="margin-top:.35rem"><i class="fas fa-truck" style="margin-right:.3rem"></i>Frais de port : <?= fmtPrice($p['shipping']) ?></div>
|
||||
<?php else: ?>
|
||||
<div class="shipping-block" style="margin-top:.35rem"><i class="fas fa-truck" style="margin-right:.3rem"></i>Livraison gratuite</div>
|
||||
<?php endif ?>
|
||||
<div style="margin-top:.75rem"><?= statusBadge($p['status']) ?></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<?php if ($p['cat_name']): ?>
|
||||
<div class="info-row"><span class="info-label">Catégorie</span><span><?= h($p['cat_name']) ?></span></div>
|
||||
<?php endif ?>
|
||||
<?php if ($p['sku']): ?>
|
||||
<div class="info-row"><span class="info-label">Référence</span><code style="font-size:.8rem"><?= h($p['sku']) ?></code></div>
|
||||
<?php endif ?>
|
||||
<?php if ($p['tags']): ?>
|
||||
<div class="info-row"><span class="info-label">Tags</span><span style="text-align:right;color:var(--muted);font-size:.8rem"><?= h($p['tags']) ?></span></div>
|
||||
<?php endif ?>
|
||||
<div class="info-row"><span class="info-label">Créé le</span><span style="font-size:.82rem;color:var(--muted)"><?= date('d/m/Y', strtotime($p['created_at'])) ?></span></div>
|
||||
<div class="info-row"><span class="info-label">Modifié</span><span style="font-size:.82rem;color:var(--muted)"><?= date('d/m/Y H:i', strtotime($p['updated_at'])) ?></span></div>
|
||||
<?php if ($p['etsy_listing_id']): ?>
|
||||
<div class="info-row"><span class="info-label">Etsy ID</span><span style="font-size:.82rem;font-family:monospace"><?= h($p['etsy_listing_id']) ?></span></div>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
|
||||
<?php if ($etsyKey): ?>
|
||||
<div class="etsy-panel">
|
||||
<div class="etsy-logo"><i class="fab fa-etsy"></i> Etsy</div>
|
||||
<?php if ($p['etsy_listing_id']): ?>
|
||||
<div class="mt-2 etsy-status-ok"><i class="fas fa-check-circle"></i> Publié sur Etsy (ID <?= h($p['etsy_listing_id']) ?>)</div>
|
||||
<?php elseif ($p['status']==='prêt'): ?>
|
||||
<div class="mt-2" style="font-size:.82rem;color:var(--muted)">Prêt à publier — clique sur "Publier sur Etsy"</div>
|
||||
<?php else: ?>
|
||||
<div class="mt-2 etsy-status-ko"><i class="fas fa-clock"></i> Statut "prêt" requis pour publier</div>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="etsy-panel">
|
||||
<div class="etsy-logo"><i class="fab fa-etsy"></i> Etsy</div>
|
||||
<div class="mt-2 etsy-status-ko"><i class="fas fa-key"></i> Clé API non configurée — <a href="/settings.php" style="color:var(--primary)">Réglages</a></div>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<div style="display:flex;gap:.5rem">
|
||||
<a href="/form.php?id=<?= $id ?>" class="btn btn-secondary" style="flex:1"><i class="fas fa-pen"></i> Modifier</a>
|
||||
<button onclick="if(confirm('Supprimer ce produit ?'))deleteProduct(<?= $id ?>)" class="btn btn-danger"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchMedia(thumb, type, src) {
|
||||
document.querySelectorAll('.media-thumb').forEach(t=>t.classList.remove('active'));
|
||||
thumb.classList.add('active');
|
||||
const main = document.getElementById('mediaMain');
|
||||
if (type === 'image') {
|
||||
main.innerHTML = `<img src="${src}" alt="" style="width:100%;border-radius:10px;aspect-ratio:1;object-fit:cover">`;
|
||||
} else {
|
||||
main.innerHTML = `<video src="${src}" controls style="width:100%;border-radius:10px;aspect-ratio:1;object-fit:cover"></video>`;
|
||||
}
|
||||
}
|
||||
async function deleteProduct(id) {
|
||||
const r = await fetch('/api.php?action=product&id='+id, {method:'DELETE'});
|
||||
const j = await r.json();
|
||||
if (j.ok) window.location='/';
|
||||
else toast(j.error||'Erreur','error');
|
||||
}
|
||||
async function publishEtsy(id) {
|
||||
toast('Publication Etsy pas encore disponible (API en cours d\'intégration)');
|
||||
}
|
||||
</script>
|
||||
<?php layout_foot(); ?>
|
||||
Reference in New Issue
Block a user