{"id":18256,"date":"2025-05-13T17:48:02","date_gmt":"2025-05-13T15:48:02","guid":{"rendered":"https:\/\/ledragonnier.com\/?page_id=18256"},"modified":"2026-04-27T20:49:03","modified_gmt":"2026-04-27T18:49:03","slug":"boutique","status":"publish","type":"page","link":"https:\/\/ledragonnier.com\/index.php\/boutique\/","title":{"rendered":"Boutique"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t \n \n \n \n \n Boutique - Le Dragonnier<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Crimson+Text:wght@400;600&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Immortal:wght@400;500&display=swap\" rel=\"stylesheet\">\n\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n --primary-red: #9D0208;\n --secondary-orange: #FAA307;\n --accent-orange: #E85D04;\n --dark-text: #121212;\n --light-bg: #F8F6F3;\n --warm-white: #FEFCFA;\n --font-family: 'Immortal', 'Playfair Display', serif;\n }\n\n html, body {\n width: 100%;\n overflow-x: hidden;\n }\n\n body {\n font-family: var(--font-family);\n background-color: var(--light-bg);\n color: var(--dark-text);\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 40px;\n }\n\n\n .page-header {\n text-align: center;\n padding: 30px 0 0 0;\n }\n\n .page-title {\n font-size: clamp(2.5rem, 5vw, 4rem);\n color: var(--primary-red);\n margin-bottom: 20px;\n font-weight: 400;\n letter-spacing: 2px;\n position: relative;\n }\n\n .page-title::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 120px;\n height: 3px;\n background: linear-gradient(90deg, var(--secondary-orange), var(--accent-orange));\n }\n\n .page-subtitle {\n font-size: 1.2rem;\n color: var(--dark-text);\n opacity: 0.8;\n margin-top: 16px;\n margin-bottom: 30px;\n }\n\n .products-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 24px;\n padding: 0;\n margin-top: 30px;\n margin-bottom: 60px;\n }\n\n .product-card {\n background: #fff;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 2px 12px rgba(0,0,0,0.08);\n transition: transform 0.25s ease, box-shadow 0.25s ease;\n cursor: pointer;\n text-decoration: none;\n color: inherit;\n display: flex;\n flex-direction: column;\n }\n\n .product-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n }\n\n .product-image {\n width: 100%;\n background: #fff;\n position: relative;\n }\n\n .product-image::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--primary-red), var(--secondary-orange));\n }\n\n .product-image img {\n width: 100%;\n height: auto;\n display: block;\n }\n\n .product-info {\n padding: 22px 22px 24px;\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n .product-name {\n font-size: 1.4rem;\n color: var(--dark-text);\n margin: 0 0 12px 0;\n font-weight: 400;\n }\n\n .product-price-label {\n font-size: 0.75rem;\n color: var(--primary-red);\n margin: 0 0 3px 0;\n }\n\n .product-price {\n font-size: 1.25rem;\n color: var(--secondary-orange);\n font-weight: 600;\n margin: 0 0 14px 0;\n }\n\n .product-description {\n font-size: 0.85rem;\n color: #555;\n line-height: 1.6;\n flex: 1;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n margin-bottom: 0;\n }\n\n .product-btn {\n display: block;\n text-align: center;\n background: var(--primary-red);\n color: white;\n padding: 11px 16px;\n font-family: var(--font-family);\n font-size: 0.7rem;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n border-radius: 4px;\n cursor: pointer;\n text-decoration: none;\n transition: background 0.2s ease;\n margin-top: 24px;\n }\n\n .product-btn:hover {\n background: var(--accent-orange);\n }\n\n .loading-state {\n grid-column: 1 \/ -1;\n text-align: center;\n padding: 60px 20px;\n color: var(--dark-text);\n font-size: 1.1rem;\n }\n\n\n @media (max-width: 768px) {\n .container {\n padding: 0 20px;\n }\n\n .page-header {\n padding: 60px 0 40px 0;\n }\n\n .products-grid {\n grid-template-columns: 1fr;\n gap: 30px;\n }\n\n nav {\n display: none;\n }\n }\n <\/style>\n <\/head>\n <body>\n <main>\n <div class=\"container\">\n <div class=\"page-header\">\n <h1 class=\"page-title\">Boutique<\/h1>\n <p class=\"page-subtitle\">D\u00e9couvrez nos cr\u00e9ations artisanales<\/p>\n <\/div>\n\n <div class=\"products-grid\" id=\"productsGrid\">\n <div class=\"loading-state\">Chargement des produits...<\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <script>\n document.addEventListener('DOMContentLoaded', async function() {\n const productsGrid = document.getElementById('productsGrid');\n\n if (!productsGrid) return;\n\n try {\n console.log('\ud83d\udecd\ufe0f Chargement des produits...');\n\n const apiUrl = `${window.location.origin}\/wp-json\/wc\/store\/v1\/products?per_page=20&orderby=menu_order&order=asc`;\n console.log('\ud83d\udccd URL API:', apiUrl);\n\n const response = await fetch(apiUrl);\n\n if (!response.ok) {\n throw new Error(`Erreur HTTP: ${response.status}`);\n }\n\n const products = await response.json();\n console.log('\u2705 Produits re\u00e7us:', products.length);\n\n if (!Array.isArray(products) || products.length === 0) {\n productsGrid.innerHTML = '<div class=\"loading-state\">Aucun produit disponible<\/div>';\n return;\n }\n\n let html = '';\n products.forEach(product => {\n const image = product.images[0]?.src || '';\n const link = product.permalink || '#';\n const name = product.name || 'Produit sans nom';\n const hasRange = product.prices?.price_range;\n const priceLabel = hasRange ? '\u00c0 partir de' : '';\n const minorUnit = product.prices?.currency_minor_unit ?? 2;\n const rawPrice = hasRange ? product.prices.price_range.min_amount : product.prices?.price;\n const priceHtml = rawPrice\n ? (parseInt(rawPrice) \/ Math.pow(10, minorUnit)).toLocaleString('fr-FR', {minimumFractionDigits: 2, maximumFractionDigits: 2}) + (product.prices?.currency_suffix || ' \u20ac')\n : '';\n const rawDesc = product.short_description || product.description || '';\n const desc = rawDesc.replace(\/<[^>]*>\/g, '').trim();\n\n html += `\n <a href=\"${link}\" class=\"product-card\">\n <div class=\"product-image\">\n ${image ? `<img decoding=\"async\" src=\"${image}\" alt=\"${name}\" loading=\"lazy\">` : '<div style=\"background: var(--light-bg); width: 100%; height: 100%;\"><\/div>'}\n <\/div>\n <div class=\"product-info\">\n <h3 class=\"product-name\">${name}<\/h3>\n ${priceLabel ? `<p class=\"product-price-label\">${priceLabel}<\/p>` : ''}\n <p class=\"product-price\">${priceHtml}<\/p>\n ${desc ? `<p class=\"product-description\">${desc}<\/p>` : ''}\n <span class=\"product-btn\">D\u00c9COUVRIR<\/span>\n <\/div>\n <\/a>\n `;\n });\n\n productsGrid.innerHTML = html;\n console.log('\u2728 Produits affich\u00e9s avec succ\u00e8s');\n\n } catch (error) {\n console.error('\u274c Erreur chargement produits:', error);\n productsGrid.innerHTML = `<div class=\"loading-state\">\n <p>Impossible de charger les produits<\/p>\n <small style=\"opacity: 0.6; margin-top: 10px; display: block;\">${error.message}<\/small>\n <\/div>`;\n }\n });\n <\/script>\n <\/body>\n <\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Boutique – Le Dragonnier Boutique D\u00e9couvrez nos cr\u00e9ations artisanales Chargement des produits…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18256","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/comments?post=18256"}],"version-history":[{"count":204,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18256\/revisions"}],"predecessor-version":[{"id":21491,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18256\/revisions\/21491"}],"wp:attachment":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/media?parent=18256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}