Les meilleurs développeurs web freelances sont sur Codeur.com
Fermé · Moins de 500 € · 33 offres · 1815 vues · 45 interactions
Nous recherchons une personne capable de nous créer un second site internet e-commerce avec de bonnes connaissance en SEO pour accompagner notre boutique physique à Nice , nous somme deja present sur backmarket, ebay et d'autres plateformes . notre premier site internet est citytechfrance.com , le nom de domain du nouveau site est city-tech.fr il y aura également un code QR renvoyant sur la page secondaire (city-tech.fr/1) . notre principale activité est la vente , conseil , prestation de services informatique, videosurveillance , smartphones, tablettes , solutions d'impression , produits hitech & accessoire... nous avons besoin d'un site facile a configurer, creation rapide de fiche produits , solutions de paiement paypal, virement , cb . toute les options de livraison (en point relais, chronopost, colissimo, etc..) nous vous fournirons le logo , la carte de visite et charte graphique. Une application mobile est envisageable avec ce projet...
mise à jour ,
en attendant de reprendre ce projet (du a un retard sur la livraison d'autre elements essentiels au developpement du futur site) nous recherchons une personne experimentée pour ameliorer le site citytechfrance.com , revoir le menu de navigation , les categories, l'arborescence, le tout en garantissant un bon rendu pour les supports mobile et desktop , verifier tout les frais de ports , corriger ou ajouter les elements SEO friendly ,etc...
Cahier des charges pour l'intégration de la navbar dans WooCommerce
1. Présentation du projet
Objectif :
Intégrer une navbar moderne et responsive pour le site e-commerce City Tech France fonctionnant sous WooCommerce.
Fonctionnalités clés :
Menu déroulant multi-niveaux
Barre de recherche intégrée
Adaptation mobile avec menu hamburger
Liens vers le compte client et le panier
Design aux couleurs de la marque (bleu #002a5c et orange #ffa500)
2. Prérequis techniques
WordPress avec WooCommerce installé et configuré
Un thème enfant créé pour éviter les pertes lors des mises à jour
Accès FTP ou au gestionnaire de fichiers de l'hébergement
Connaissance de base de l'édition de fichiers PHP et CSS
3. Étapes d'intégration
3.1. Création du thème enfant (si non existant)
Créer un dossier pour le thème enfant dans
/wp-content/themes/
Créer les fichiers
style.css
et
functions.php
avec les références au thème parent
3.2. Intégration des ressources externes
Ajouter la police Montserrat via Google Fonts
Intégrer Tailwind CSS (via CDN ou installation locale)
3.3. Modification du header
Créer un fichier
header.php
dans le thème enfant
Copier le code HTML de la navbar fourni
Remplacer les liens statiques par des liens dynamiques WordPress
3.4. Adaptation pour WooCommerce
Remplacer les éléments statiques par leurs équivalents WordPress :
<!-- Logo avec lien vers l'accueil -->
<a href="<?php echo home_url(); ?>" class="flex items-center">
<!-- Logo SVG -->
<span class="font-bold text-xl tracking-tight"><?php echo get_bloginfo('name'); ?></span>
</a>
<!-- Barre de recherche -->
<?php get_product_search_form(); ?>
<!-- Lien vers le compte -->
<a href="<?php echo wc_get_page_permalink('myaccount'); ?>" class="text-sm hover:text-[#ffa500]">Mon compte</a>
<!-- Lien vers le panier avec nombre d'articles -->
<a href="<?php echo wc_get_cart_url(); ?>" class="text-sm hover:text-[#ffa500]">
Panier <?php echo WC()->cart->get_cart_contents_count() > 0 ? '(' . WC()->cart->get_cart_contents_count() . ')' : ''; ?>
</a>
<!-- Menu principal -->
<?php
wp_nav_menu(array(
'theme_location' => 'primary-menu',
'container' => false,
'menu_class' => 'flex flex-wrap justify-center space-x-1 xl:space-x-3',
'fallback_cb' => false,
));
?>
3.5. Ajout des styles CSS
Créer un fichier
navbar.css
dans le thème enfant
Y copier les styles de la navbar
Enregistrer et charger ce fichier CSS dans
functions.php
function citytech_enqueue_styles() {
wp_enqueue_style('google-fonts', '[URL visible pour les membres [Email visible pour les membres Pro]');
wp_enqueue_style('tailwind', '[URL visible pour les membres Pro]', array());
wp_enqueue_style('citytech-navbar', get_stylesheet_directory_uri() . '/navbar.css', array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'citytech_enqueue_styles');
3.6. Ajout des scripts JavaScript
Créer un fichier
navbar.js
dans le thème enfant
Y copier les scripts de la navbar
Enregistrer et charger ce fichier JS dans
functions.php
function citytech_enqueue_scripts() {
wp_enqueue_script('citytech-navbar', get_stylesheet_directory_uri() . '/navbar.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'citytech_enqueue_scripts');
4. Configuration du menu dans WordPress
Aller dans WordPress Admin > Apparence > Menus
Créer un nouveau menu "Menu Principal"
Ajouter les catégories et pages souhaitées
Organiser la hiérarchie des menus pour créer les sous-menus
Attribuer ce menu à l'emplacement "Primary Menu"
5. Test et optimisation
Tester la navbar sur différents appareils et navigateurs
Vérifier que tous les liens fonctionnent correctement
S'assurer que la barre de recherche fonctionne avec WooCommerce
Optimiser les performances (minification CSS/JS, lazy loading)
6. Maintenance et mise à jour
Documenter les modifications apportées
Prévoir une sauvegarde avant toute mise à jour
Tester après chaque mise à jour de WordPress ou WooCommerce
7. Ressources nécessaires
Logo City Tech (format SVG recommandé)
Informations de contact à jour (téléphone, email)
Liste complète des catégories de produits
Accès administrateur WordPress
Budget indicatif : Moins de 500 €
Publication : 20 mai 2025 à 16h57
Profils recherchés : Développeur web freelance , Consultant SEO freelance , Développeur e-commerce freelance
33 freelances ont répondu à ce projet
22 propositions de devis en moins de 2h
Montant moyen des devis proposés : 1 300 €
Estimation du délai : 10 jours
Nos ressources utiles
Allez plus loin avec nos ressources liées à ce projet !
Simulateur de prix : Combien coûte une charte graphique ?
Téléchargement : Cahier des charges pour votre charte graphique
Simulateur de prix : Combien coûte une refonte de logo ?
Simulateur de prix : Combien coûte un logo ?
Téléchargement : Cahier des charges pour créer un logo