347 lines
18 KiB
PHP
347 lines
18 KiB
PHP
<?php
|
|
/**
|
|
* Archive template for Products (navier_product)
|
|
* URL: /produits/
|
|
*
|
|
* @package Navier_Instruments
|
|
*/
|
|
|
|
get_header();
|
|
|
|
// Get contact page URL
|
|
$contact_page = get_page_by_path('contact');
|
|
$contact_url = $contact_page ? get_permalink($contact_page) : home_url('/contact/');
|
|
?>
|
|
|
|
<!-- Page Header -->
|
|
<section class="page-hero">
|
|
<div class="container">
|
|
<div class="page-hero-content animate animate-fade-up">
|
|
<span class="section-badge">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
|
|
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
|
|
</svg>
|
|
Catalogue
|
|
</span>
|
|
<h1 class="page-hero-title">Nos Produits</h1>
|
|
<p class="page-hero-description">Découvrez notre gamme complète d'instruments de prélèvement d'air conçus pour les environnements industriels et de laboratoire.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Products Filter (optional) -->
|
|
<section class="products-filter-section">
|
|
<div class="container">
|
|
<div class="products-filter animate animate-fade-up">
|
|
<button class="filter-btn active" data-filter="all">Tous</button>
|
|
<button class="filter-btn" data-filter="industriel">Industriel</button>
|
|
<button class="filter-btn" data-filter="laboratoire">Laboratoire</button>
|
|
<button class="filter-btn" data-filter="portable">Portable</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Products Grid -->
|
|
<section class="section products-page">
|
|
<div class="container">
|
|
<div class="products-grid-full">
|
|
<?php
|
|
$products = new WP_Query(array(
|
|
'post_type' => 'navier_product',
|
|
'posts_per_page' => -1,
|
|
'orderby' => 'date',
|
|
'order' => 'DESC',
|
|
));
|
|
|
|
if ($products->have_posts()) :
|
|
$delay = 1;
|
|
while ($products->have_posts()) : $products->the_post();
|
|
$categories = get_the_terms(get_the_ID(), 'product_category');
|
|
$category_slug = $categories && !is_wp_error($categories) ? sanitize_title($categories[0]->name) : '';
|
|
?>
|
|
<article class="product-card animate animate-fade-up animate-delay-<?php echo esc_attr($delay); ?>" data-category="<?php echo esc_attr($category_slug); ?>">
|
|
<div class="product-image">
|
|
<?php if (has_post_thumbnail()) : ?>
|
|
<?php the_post_thumbnail('navier-product'); ?>
|
|
<?php else : ?>
|
|
<div class="product-image-placeholder">
|
|
<svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="var(--navier-primary)" stroke-width="1">
|
|
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
|
|
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
|
|
</svg>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php if ($categories && !is_wp_error($categories)) : ?>
|
|
<span class="product-tag"><?php echo esc_html($categories[0]->name); ?></span>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="product-content">
|
|
<h4 class="product-title"><?php the_title(); ?></h4>
|
|
<p class="product-description"><?php echo esc_html(get_the_excerpt()); ?></p>
|
|
<a href="<?php the_permalink(); ?>" class="product-link">
|
|
En savoir plus
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
<polyline points="12 5 19 12 12 19"></polyline>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
<?php
|
|
$delay++;
|
|
if ($delay > 3) $delay = 1;
|
|
endwhile;
|
|
wp_reset_postdata();
|
|
else :
|
|
// Placeholder products if no products exist
|
|
$placeholder_products = array(
|
|
array(
|
|
'title' => 'AirSampler Pro X500',
|
|
'desc' => 'Solution de prélèvement d\'air haute performance pour environnements industriels avec certification ATEX. Débit réglable de 1 à 50 L/min.',
|
|
'tag' => 'Industriel',
|
|
'features' => array('Certification ATEX', 'Écran tactile', 'Batterie longue durée'),
|
|
),
|
|
array(
|
|
'title' => 'AirSampler Pro X700',
|
|
'desc' => 'Version avancée avec connectivité IoT et monitoring en temps réel. Idéal pour les environnements critiques.',
|
|
'tag' => 'Industriel',
|
|
'features' => array('Connectivité IoT', 'Monitoring temps réel', 'Cloud analytics'),
|
|
),
|
|
array(
|
|
'title' => 'LabAnalyzer L200',
|
|
'desc' => 'Analyseur de précision pour laboratoire avec analyse en temps réel et interface logicielle avancée.',
|
|
'tag' => 'Laboratoire',
|
|
'features' => array('Haute précision', 'Interface logicielle', 'Calibration automatique'),
|
|
),
|
|
array(
|
|
'title' => 'LabAnalyzer L300',
|
|
'desc' => 'Analyseur multi-paramètres pour analyses complexes. Compatible avec tous les protocoles standards.',
|
|
'tag' => 'Laboratoire',
|
|
'features' => array('Multi-paramètres', 'Protocoles standards', 'Export données'),
|
|
),
|
|
array(
|
|
'title' => 'MiniAir Portable M100',
|
|
'desc' => 'Solution portable ultra-compacte pour les mesures de qualité d\'air sur le terrain avec GPS intégré.',
|
|
'tag' => 'Portable',
|
|
'features' => array('Ultra-compact', 'GPS intégré', 'Autonomie 12h'),
|
|
),
|
|
array(
|
|
'title' => 'MiniAir Portable M200',
|
|
'desc' => 'Version professionnelle avec capteurs multi-gaz et transmission de données en temps réel.',
|
|
'tag' => 'Portable',
|
|
'features' => array('Multi-gaz', 'Transmission 4G', 'App mobile'),
|
|
),
|
|
);
|
|
|
|
$delay = 1;
|
|
foreach ($placeholder_products as $product) :
|
|
$category_slug = sanitize_title($product['tag']);
|
|
?>
|
|
<article class="product-card animate animate-fade-up animate-delay-<?php echo esc_attr($delay); ?>" data-category="<?php echo esc_attr($category_slug); ?>">
|
|
<div class="product-image">
|
|
<div class="product-image-placeholder">
|
|
<svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="var(--navier-primary)" stroke-width="1">
|
|
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
|
|
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="product-tag"><?php echo esc_html($product['tag']); ?></span>
|
|
</div>
|
|
<div class="product-content">
|
|
<h4 class="product-title"><?php echo esc_html($product['title']); ?></h4>
|
|
<p class="product-description"><?php echo esc_html($product['desc']); ?></p>
|
|
<div class="product-features">
|
|
<?php foreach ($product['features'] as $feature) : ?>
|
|
<span class="product-feature">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
<?php echo esc_html($feature); ?>
|
|
</span>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<a href="#contact" class="product-link">
|
|
Demander un devis
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
<polyline points="12 5 19 12 12 19"></polyline>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
<?php
|
|
$delay++;
|
|
if ($delay > 3) $delay = 1;
|
|
endforeach;
|
|
endif;
|
|
?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="section cta">
|
|
<div class="container">
|
|
<div class="cta-inner animate animate-scale">
|
|
<div class="cta-content">
|
|
<h2 class="section-title">Besoin d'une Solution Sur Mesure ?</h2>
|
|
<p class="cta-description">Notre équipe d'experts peut concevoir des solutions personnalisées adaptées à vos besoins spécifiques. Contactez-nous pour discuter de votre projet.</p>
|
|
<div class="cta-buttons">
|
|
<a href="<?php echo esc_url($contact_url); ?>" class="btn btn--primary btn--large">
|
|
Demander un Devis
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
<polyline points="12 5 19 12 12 19"></polyline>
|
|
</svg>
|
|
</a>
|
|
<a href="tel:+33344000000" class="btn btn--secondary btn--large">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
|
</svg>
|
|
Nous Appeler
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="cta-image">
|
|
<div class="cta-image-placeholder" style="background: linear-gradient(135deg, var(--navier-primary) 0%, var(--navier-accent) 100%); width: 100%; height: 300px; border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center;">
|
|
<svg width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" style="opacity: 0.5;">
|
|
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
|
|
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="section contact">
|
|
<div class="container">
|
|
<div class="contact-inner">
|
|
<div class="contact-info animate animate-fade-right">
|
|
<span class="section-badge">Contact</span>
|
|
<h2 class="section-title">Une Question sur nos Produits ?</h2>
|
|
<p>Notre équipe technique est disponible pour répondre à toutes vos questions et vous accompagner dans le choix de vos équipements.</p>
|
|
|
|
<div class="contact-item">
|
|
<div class="contact-item-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="contact-item-label">Téléphone</p>
|
|
<p class="contact-item-value">
|
|
<a href="tel:+33344000000">+33 (0)3 44 00 00 00</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-item">
|
|
<div class="contact-item-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
|
<polyline points="22,6 12,13 2,6"></polyline>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="contact-item-label">Email</p>
|
|
<p class="contact-item-value">
|
|
<a href="mailto:commercial@navier-instruments.com">commercial@navier-instruments.com</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-form animate animate-fade-left">
|
|
<h3>Demande de Renseignements</h3>
|
|
<form id="navier-contact-form" method="post">
|
|
<?php wp_nonce_field('navier_nonce', 'navier_contact_nonce'); ?>
|
|
<input type="hidden" name="form_source" value="products_page">
|
|
|
|
<div class="form-group">
|
|
<label for="contact-name" class="form-label">Nom complet *</label>
|
|
<input type="text" id="contact-name" name="name" class="form-input" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contact-email" class="form-label">Adresse email *</label>
|
|
<input type="email" id="contact-email" name="email" class="form-input" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contact-company" class="form-label">Entreprise</label>
|
|
<input type="text" id="contact-company" name="company" class="form-input">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contact-product" class="form-label">Produit concerné</label>
|
|
<select id="contact-product" name="product" class="form-input">
|
|
<option value="">Sélectionnez un produit</option>
|
|
<option value="AirSampler Pro X500">AirSampler Pro X500</option>
|
|
<option value="AirSampler Pro X700">AirSampler Pro X700</option>
|
|
<option value="LabAnalyzer L200">LabAnalyzer L200</option>
|
|
<option value="LabAnalyzer L300">LabAnalyzer L300</option>
|
|
<option value="MiniAir Portable M100">MiniAir Portable M100</option>
|
|
<option value="MiniAir Portable M200">MiniAir Portable M200</option>
|
|
<option value="Autre">Autre / Solution sur mesure</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contact-message" class="form-label">Votre demande *</label>
|
|
<textarea id="contact-message" name="message" class="form-textarea" required placeholder="Décrivez votre besoin ou votre question..."></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn--primary btn--large" style="width: 100%;">
|
|
Envoyer ma demande
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="22" y1="2" x2="11" y2="13"></line>
|
|
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
|
</svg>
|
|
</button>
|
|
|
|
<div id="form-response" style="margin-top: var(--spacing-md); display: none;"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
// Product Filter functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
|
const productCards = document.querySelectorAll('.product-card');
|
|
|
|
filterBtns.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const filter = this.dataset.filter;
|
|
|
|
// Update active button
|
|
filterBtns.forEach(b => b.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
// Filter products
|
|
productCards.forEach(card => {
|
|
if (filter === 'all' || card.dataset.category === filter) {
|
|
card.style.display = '';
|
|
card.style.opacity = '1';
|
|
card.style.transform = 'translateY(0)';
|
|
} else {
|
|
card.style.opacity = '0';
|
|
card.style.transform = 'translateY(20px)';
|
|
setTimeout(() => {
|
|
card.style.display = 'none';
|
|
}, 300);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<?php
|
|
get_footer();
|