templates/shop/new.html.twig line 1

  1. {% extends 'base2.html.twig' %}
  3. {% block title %}New Shop{% endblock %}
  5. {% block body %}
  7. {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
  9. {# Début de mon formulaire #}
  10. <div
  11.       class="dark:bg-background lg:ml-42 ml-0 mt-0 min-h-[calc(100vh-80px)] p-7"
  12.     >
  13. <section class="dark:bg-background">
  14. <div class="container mx-auto">
  16. {# templates/author/validation.html.twig #}
  18. {# DEBUT partie création du compte utilisateur #}
  19. <div class="bg-white shadow-front-2 dark:bg-foreground rounded-lg p-6 mb-7">
  20.       <h4 class="text-gray-700 dark:text-gray-300 text-xl font-semibold mb-7">
  21.         Création du compte utilisateur
  22.       </h4>
  24.       <div class="grid lg:grid-cols-2 grid-cols-1 gap-7">
  26.         {# DEBUT champ Prénom #}
  27.         <div class="lg:col-span-1 col-span-2">
  28.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  29.             {{ form_label(form.users.firstName) }}
  30.           </div>
  31.             {{ form_widget(form.users.firstName) }}
  32.           <div class="text-red-500 text-xs italic">
  33.             {{ form_errors(form.users.firstName) }}
  34.           </div>  
  35.         </div>
  37.         {# DEBUT champ Nom #}
  38.         <div class="lg:col-span-1 col-span-2">
  39.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  40.             {{ form_label(form.users.lastName) }}
  41.           </div>
  42.             {{ form_widget(form.users.lastName) }}
  43.           <div class="text-red-500 text-xs italic">
  44.             {{ form_errors(form.users.lastName) }}
  45.           </div>         
  46.         </div>
  48.         {# DEBUT champ email #}
  49.         <div class="lg:col-span-1 col-span-2">
  50.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  51.             {{ form_label(form.users.email) }}
  52.           </div>
  53.             {{ form_widget(form.users.email) }}
  54.           <div class="text-red-500 text-xs italic">
  55.             {{ form_errors(form.users.email) }}
  56.           </div>  
  57.         </div>
  59.         {# DEBUT champ téléphone #}
  60.         <div class="lg:col-span-1 col-span-2">
  61.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  62.             {{ form_label(form.users.phoneNumber) }}
  63.           </div>
  64.             {{ form_widget(form.users.phoneNumber) }}
  65.           <div class="text-red-500 text-xs italic">
  66.             {{ form_errors(form.users.phoneNumber) }}
  67.           </div>         
  68.         </div>
  70.         {# DEBUT champ password #}
  71.         <div class="lg:col-span-1 col-span-2">
  72.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  73.             {{ form_label(form.users.password) }}
  74.           </div>
  75.             {{ form_widget(form.users.password) }}
  76.           <div class="text-red-500 text-xs italic">
  77.             {{ form_errors(form.users.password) }}
  78.           </div>  
  79.         </div>
  81.         {# DEBUT champ password_confirmed #}
  82.         <div class="lg:col-span-1 col-span-2">
  83.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  84.             {{ form_label(form.users.password_confirmed) }}
  85.           </div>
  86.             {{ form_widget(form.users.password_confirmed) }}
  87.           <div class="text-red-500 text-xs italic">
  88.             {{ form_errors(form.users.password_confirmed) }}
  89.           </div>         
  90.         </div>
  91.         
  92.       </div>
  93. </div>
  94. {# FIN partie création du compte utilisateur #}
  96. {# DEBUT partie informations générales #}
  97. <div class="bg-white shadow-front-2 dark:bg-foreground rounded-lg p-6 mb-7">
  98.       <h4 class="text-gray-700 dark:text-gray-300 text-xl font-semibold mb-7">
  99.         Informations de base
  100.       </h4>
  102.       <div class="grid lg:grid-cols-2 grid-cols-1 gap-7">
  104.         {# DEBUT champ myBusiness #}
  105.         <div class="col-span-2">
  106.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  107.             {{ form_label(form.myBusiness) }}
  108.           </div>
  109.           {{ form_widget(form.myBusiness, {'id': 'myBusinessField'}) }}
  110.           <p class='cursor-pointer text-sm italic text-gray-700 dark:text-gray-400 mb-4'>
  111.             Cet information permet de renseigner automatiquement certains champs et affiche vos horaires d'ouverture sur votre fiche. </br>
  112.             Pour récupérer votre ID Google My Business : <a href='https://www.google.fr/' target="_blank" class='text-sky-500'> cliquez ici &larr;    </a>
  113.           </p>
  114.           <div class="text-red-500 text-xs italic">
  115.             {{ form_errors(form.myBusiness) }}
  116.           </div>
  117.         </div>
  120.         {# DEBUT champ nom #}
  121.         <div id="shopName" class="col-span-2">
  122.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  123.             {{ form_label(form.name) }}
  124.           </div>
  125.             {{ form_widget(form.name) }}
  126.           <div class="text-red-500 text-xs italic">
  127.             {{ form_errors(form.name) }}
  128.           </div>  
  129.         </div>
  130.         
  131.         {# DEBUT champ sous-titre #}
  132.         <div class="col-span-2">
  133.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  134.             {{ form_label(form.subtitle) }}
  135.           </div>
  136.             {{ form_widget(form.subtitle) }}
  137.           <p class='cursor-pointer text-sm italic text-gray-700 dark:text-gray-400 mb-4'>
  138.           Le sous-titre doit comporter entre 10 et 90 caractères.
  139.           <span id="subtitle-character-color">
  140.               <span id="subtitle-character-count">0</span> caractères
  141.           </span>
  142.           </p>
  143.           <div class="text-red-500 text-xs italic">
  144.             {{ form_errors(form.subtitle) }}
  145.           </div>  
  146.         </div>
  148.         {# DEBUT champ email #}
  149.         <div class="lg:col-span-1 col-span-2">
  150.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  151.             {{ form_label(form.email) }}
  152.           </div>
  153.             {{ form_widget(form.email) }}
  154.           <div class="text-red-500 text-xs italic">
  155.             {{ form_errors(form.email) }}
  156.           </div>  
  157.         </div>
  159.         {# DEBUT champ téléphone #}
  160.         <div id="shopPhone" class="lg:col-span-1 col-span-2">
  161.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  162.             {{ form_label(form.phoneNumber) }}
  163.           </div>
  164.             {{ form_widget(form.phoneNumber) }}
  165.           <div class="text-red-500 text-xs italic">
  166.             {{ form_errors(form.phoneNumber) }}
  167.           </div>         
  168.         </div>
  169.       </div>
  170. </div>
  171. {# FIN partie informations générales #}
  173. {# DEBUT partie localisation du commerce #}
  174. <div id="shopLocation" class="bg-white shadow-front-2 dark:bg-foreground rounded-lg p-6 mb-7">
  175.       <h4 class="text-gray-700 dark:text-gray-300 text-xl font-semibold mb-7">
  176.         Localiser votre commerce
  177.       </h4>
  179.       <div class="grid lg:grid-cols-2 grid-cols-1 gap-7">
  180.         <div class="col-span-2">
  181.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  182.             {{ form_label(form.adressStreet) }}
  183.           </div>
  184.             {{ form_widget(form.adressStreet) }}
  185.           <div class="text-red-500 text-xs italic">
  186.             {{ form_errors(form.adressStreet) }}
  187.           </div>
  188.         </div>
  189.         <div class="col-span-2">
  190.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  191.             {{ form_label(form.adressStreet2) }}
  192.           </div>
  193.             {{ form_widget(form.adressStreet2) }}
  194.           <div class="text-red-500 text-xs italic">
  195.           </div>
  196.         </div>
  197.         <div class="lg:col-span-1 col-span-2">
  198.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  199.             {{ form_label(form.addressPostalCode) }}
  200.           </div>
  201.             {{ form_widget(form.addressPostalCode) }}
  202.           <div class="text-red-500 text-xs italic">
  203.             {{ form_errors(form.addressPostalCode) }}
  204.           </div>
  205.         </div>
  206.         <div class="lg:col-span-1 col-span-2">
  207.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  208.             {{ form_label(form.addressCity) }}
  209.           </div>
  210.             {{ form_widget(form.addressCity) }}
  211.           <div class="text-red-500 text-xs italic">
  212.             {{ form_errors(form.addressCity) }}
  213.           </div>
  214.         </div>
  216.         <div class="lg:col-span-1 col-span-2">
  217.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  218.             {{ form_label(form.latitude) }}
  219.           </div>
  220.             {{ form_widget(form.latitude) }}
  221.             <p class='cursor-pointer text-sm italic text-gray-700 dark:text-gray-400 mb-4'>
  222.               Pour obtenir les coordonnées GPS de votre adresse : <a href='https://www.coordonnees-gps.fr/' target="_blank" class='text-sky-500'> cliquez ici &larr;    </a>
  223.             </p>
  224.           <div class="text-red-500 text-xs italic">
  225.             {{ form_errors(form.latitude) }}
  226.           </div>
  227.         </div>
  228.         <div class="lg:col-span-1 col-span-2">
  229.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  230.             {{ form_label(form.longitude) }}
  231.           </div>
  232.             {{ form_widget(form.longitude) }}
  233.             <p class='cursor-pointer text-sm italic text-gray-700 dark:text-gray-400 mb-4'>
  234.               Pour obtenir les coordonnées GPS de votre adresse : <a href='https://www.coordonnees-gps.fr/' target="_blank" class='text-sky-500'> cliquez ici &larr;    </a>
  235.             </p>
  236.           <div class="text-red-500 text-xs italic">
  237.             {{ form_errors(form.longitude) }}
  238.           </div>
  239.         </div>
  240.       </div>
  241. </div>
  242. {# FIN partie localisation du commerce #}
  244. {# DEBUT partie à propos du commerce #}
  246. <div class="bg-white shadow-front-2 dark:bg-foreground rounded-lg p-6 mb-7">
  247.       <h4 class="text-gray-700 dark:text-gray-300 text-xl font-semibold mb-7">
  248.         Les détails de votre commerce
  249.       </h4>
  251.       <div class="grid lg:grid-cols-2 grid-cols-1 gap-7">
  252.         <div class="col-span-2">
  253.                       <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  254.             {{ form_label(form.about) }}
  255.           </div>
  256.             {{ form_widget(form.about) }}
  257.             <p class='cursor-pointer text-sm italic text-gray-700 dark:text-gray-400 mb-4'>
  258.               Votre texte de description peut comporter 1000 caractères maximum.
  259.                 <span id="about-character-color">
  260.                   <span id="character-count">0</span> caractères
  261.                 </span>
  262.             </p>
  263.           <div class="text-red-500 text-xs italic">
  264.             {{ form_errors(form.about) }}
  265.           </div>
  266.         </div>
  267.         
  268.         <div class="lg:col-span-1 col-span-2">
  269.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  270.             {{ form_label(form.facebook) }}
  271.           </div>
  272.             {{ form_widget(form.facebook) }}
  273.           <div class="text-red-500 text-xs italic">
  274.             {{ form_errors(form.facebook) }}
  275.           </div>
  276.         </div>
  277.         <div class="lg:col-span-1 col-span-2">
  278.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  279.             {{ form_label(form.twitter) }}
  280.           </div>
  281.             {{ form_widget(form.twitter) }}
  282.           <div class="text-red-500 text-xs italic">
  283.             {{ form_errors(form.twitter) }}
  284.           </div>
  285.         </div>
  286.         <div class="lg:col-span-1 col-span-2">
  287.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  288.             {{ form_label(form.linkedin) }}
  289.           </div>
  290.             {{ form_widget(form.linkedin) }}
  291.           <div class="text-red-500 text-xs italic">
  292.             {{ form_errors(form.linkedin) }}
  293.           </div>
  294.         </div>
  295.         <div class="lg:col-span-1 col-span-2">
  296.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  297.             {{ form_label(form.instagram) }}
  298.           </div>
  299.             {{ form_widget(form.instagram) }}
  300.           <div class="text-red-500 text-xs italic">
  301.             {{ form_errors(form.instagram) }}
  302.           </div>
  303.         </div>
  304.         <div id="shopWebsite" class="lg:col-span-1 col-span-2">
  305.           {{ form_row(form.website) }}
  306.         </div>
  307.       </div>
  308.     </div>
  309. {# FIN partie à propos du commerce #}
  311. {# DEBUT partie photos du commerce #}
  313. <div class="bg-white shadow-front-2 dark:bg-foreground rounded-lg p-6 mb-7">
  314.       <h4 class="text-gray-700 dark:text-gray-300 text-xl font-semibold mb-7">
  315.         Les photos de votre commerce
  316.       </h4>
  317.       
  318.       <div class="grid lg:grid-cols-2 grid-cols-1 gap-7">
  319.         <div class="lg:col-span-1 col-span-2">
  320.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  321.             {{ form_label(form.picture1) }}
  322.           </div>
  323.             {{ form_widget(form.picture1) }}
  324.           <div class="text-red-500 text-xs italic">
  325.             {{ form_errors(form.picture1) }}
  326.           </div>
  327.         </div>
  328.         <div class="lg:col-span-1 col-span-2">
  329.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  330.             {{ form_label(form.picture2) }}
  331.           </div>
  332.             {{ form_widget(form.picture2) }}
  333.           <div class="text-red-500 text-xs italic">
  334.             {{ form_errors(form.picture2) }}
  335.           </div>
  336.         </div>
  337.         <div class="lg:col-span-1 col-span-2">
  338.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  339.             {{ form_label(form.picture3) }}
  340.           </div>
  341.             {{ form_widget(form.picture3) }}
  342.           <div class="text-red-500 text-xs italic">
  343.             {{ form_errors(form.picture3) }}
  344.           </div> 
  345.         </div>
  346.         <div class="lg:col-span-1 col-span-2">
  347.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  348.             {{ form_label(form.picture4) }}
  349.           </div>
  350.             {{ form_widget(form.picture4) }}
  351.           <div class="text-red-500 text-xs italic">
  352.             {{ form_errors(form.picture4) }}
  353.           </div>
  354.         </div>
  355.         <div class="lg:col-span-1 col-span-2">
  356.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  357.             {{ form_label(form.picture5) }}
  358.           </div>
  359.             {{ form_widget(form.picture5) }}
  360.           <div class="text-red-500 text-xs italic">
  361.             {{ form_errors(form.picture5) }}
  362.           </div>
  363.         </div>
  364.         <div class="lg:col-span-1 col-span-2">
  365.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  366.             {{ form_label(form.picture6) }}
  367.           </div>
  368.             {{ form_widget(form.picture6) }}
  369.           <div class="text-red-500 text-xs italic">
  370.             {{ form_errors(form.picture6) }}
  371.           </div>
  372.         </div>
  373.       </div>
  374.     </div>
  375. {# FIN partie photos du commerce #}
  377. {# DEBUT partie categories #}
  379. <div class="bg-white shadow-front-2 dark:bg-foreground rounded-lg p-6 mb-7">
  380.       <div class="flex justify-between items-center mb-7">
  381.         <h4 class="text-gray-700 dark:text-gray-300 text-xl font-semibold">
  382.           Catégories du commerce
  383.         </h4>
  384.       </div>
  385.       
  386.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  387.             {{ form_label(form.categories) }}
  388.           </div>
  389.             {{ form_widget(form.categories) }}
  390.           <div class="text-red-500 text-xs italic">
  391.             {{ form_errors(form.categories) }}
  392.           </div>
  394.     </div>
  395. {# FIN partie categories #}
  397. {# DEBUT partie tags #}
  399. <div class="bg-white shadow-front-2 dark:bg-foreground rounded-lg p-6 mb-7">
  400.       <div class="flex justify-between items-center mb-7">
  401.         <h4 class="text-gray-700 dark:text-gray-300 text-xl font-semibold">
  402.           Petits plus du commerce
  403.         </h4>
  404.       </div>
  405.       
  406.           <div class='text-base text-gray-700 dark:text-gray-200 block mb-3'>
  407.             {{ form_label(form.tags) }}
  408.           </div>
  409.             {{ form_widget(form.tags) }}
  410.           <div class="text-red-500 text-xs italic">
  411.             {{ form_errors(form.tags) }}
  412.           </div>
  414.     </div>
  415. {# FIN partie tags #}
  417. {# DEBUT partie informations cachées #}
  419. <div class="hidden">
  420.       <div class="flex justify-between items-center mb-7">
  421.         <h4 class="text-gray-700 dark:text-gray-300 text-xl font-semibold">
  422.           Hidden info
  423.         </h4>
  424.       </div>
  425.       
  426.         <div class="lg:col-span-1 col-span-2">
  427.           {{ form_row(form.available) }}
  428.         </div>
  429.         <div class="lg:col-span-1 col-span-2">
  430.           {{ form_row(form.verified) }}
  431.         </div>        
  432.         <div class="lg:col-span-1 col-span-2">
  433.           {{ form_row(form.createdAt) }}
  434.         </div>
  435.         <div class="lg:col-span-1 col-span-2">
  436.           {{ form_row(form.users.roles) }}
  437.         </div>
  438.         <div class="lg:col-span-1 col-span-2">
  439.           {{ form_row(form.users.picture) }}
  440.         </div>
  441.         <div class="lg:col-span-1 col-span-2">
  442.           {{ form_row(form.users.about) }}
  443.         </div>
  445.     </div>
  446. {# FIN partie informations cachées #}
  448. {# DEBUT mention légale #}
  450. <div class="bg-white shadow-front-2 dark:bg-foreground rounded-lg p-6 mb-7">
  451.     <div class="flex items-center mb-7">
  452.         {{ form_widget(form.legalCheck) }}
  453.         <label for="legalCheck" class="text-gray-700 dark:text-gray-300 text-base font-semibold ml-3">
  454.             J'ai pris connaissance des 
  455.             <a class="underline text-blue-500" href="#">conditions générales d'utilisation</a> 
  456.             du site et des 
  457.             <a class="underline text-blue-500" href="#">mentions légales</a>
  458.    
  459.           <div class="text-red-500 text-xs italic">
  460.             {{ form_errors(form.legalCheck) }}
  461.           </div>
  462.         </label>
  463.     </div>
  464. </div>
  466. {# FIN mention légale #}
  468. {# DEBUT submit #}
  470. <div class="flex flex-wrap sm:justify-start justify-center">
  471.       {{ form_row(form.submit) }}
  472.     </div>
  473. {# FIN submit #}
  475.   </div>
  476. </section>
  477. </div>  
  478.   {# FIN de mon formulaire #}
  479. {{ form_end(form) }}
  482. <script>
  483.   // Sélectionner le champ "myBusiness"
  484.   var myBusinessField = document.getElementById('myBusinessField');
  486.   // Sélectionner les champs "name" et "shopLocation"
  487.   var nameField = document.getElementById('shopName');
  488.   var shopLocationField = document.getElementById('shopLocation');
  489.   var shopPhoneField = document.getElementById('shopPhone');
  490.     var shopWebsiteField = document.getElementById('shopWebsite');
  492.   // Fonction pour masquer ou afficher les champs "name" et "shopLocation" en fonction de la valeur de "myBusiness"
  493.   function toggleFields() {
  494.     if (myBusinessField.value !== '') {
  495.       //nameField.classList.add('hidden'); // Masquer le champ "name"
  496.       shopLocationField.classList.add('hidden'); // Masquer le champ "shopLocation"
  497.       shopPhoneField.classList.add('hidden'); // Masquer le champ "shopLocation"
  498.       shopWebsiteField.classList.add('hidden'); // Masquer le champ "shopLocation"
  499.     } else {
  500.       //nameField.classList.remove('hidden'); // Afficher le champ "name"
  501.       shopPhoneField.classList.remove('hidden'); // Afficher le champ "shopLocation"
  502.       shopLocationField.classList.remove('hidden'); // Masquer le champ "shopLocation"
  503.       shopWebsiteField.classList.remove('hidden'); // Masquer le champ "shopLocation"
  504.     }
  505.   }
  507.   // Appeler la fonction une première fois au chargement de la page
  508.   toggleFields();
  510.   // Ajouter un écouteur d'événement pour détecter les changements de valeur dans "myBusiness"
  511.   myBusinessField.addEventListener('input', toggleFields);
  512. </script>
  516. {% endblock %}