templates/components/configurator-mobile.html.twig line 1

Open in your IDE?
  1. <div id="item-carroussel-header">
  2.     <div class="item-title-in">Vous êtes un(e) ...</div>
  3.     <div class="item-mob-cg-anim">
  4.         <div class="item-list">
  5.             <div class="item-choice active" data-name="type" data-value="Association">
  6.                 <img class="icon" alt="" src="{{ asset('/images/configurator/icon-association.svg') }}" />
  7.                 <span class="item-name">Association</span>
  8.             </div>
  9.             <div class="item-choice" data-name="type" data-value="Salle de sport">
  10.                 <img class="icon" alt="" src="{{ asset('/images/configurator/icon-salle-de-sport.svg') }}" />
  11.                 <span class="item-name">Salle de sport</span>
  12.             </div>
  13.             <div class="item-choice" data-name="type" data-value="Coach">
  14.                 <img class="icon" alt="" src="{{ asset('/images/configurator/icon-coach.svg') }}" />
  15.                 <span class="item-name">Coach</span>
  16.             </div>
  17.             <div class="item-choice" data-name="type" data-value="Hotel">
  18.                 <img class="icon" alt="" src="{{ asset('/images/configurator/icon-hotel.svg') }}" />
  19.                 <span class="item-name">Hotel</span>
  20.             </div>
  21.             <div class="item-choice" data-name="type" data-value="Autres">
  22.                 <img class="icon" alt="" src="{{ asset('/images/configurator/icon-other.svg') }}" />
  23.                 <span class="item-name">Autres</span>
  24.             </div>
  25.         </div>
  26.     </div>
  28.     <div id="nav-configurator">
  29.         <div id="configurator-mob" class="nav-container nav-page" style="background-color:#40B46E;">
  30.             <div class="header">
  31.                 <div class="back-step erase">
  32.                     <i class="fas fa-chevron-left"></i>&nbsp;
  33.                     <span class="size-12">
  34.                         Etape <span class="step"></span>
  35.                     </span>
  36.                 </div>
  37.                 <div class="nav-logo">
  38.                     <div class="compagny-name">
  39.                         &nbsp;Sport adhesion&nbsp;
  40.                     </div>
  41.                 </div>
  42.                 <div class="cancel-step">
  43.                     <i class="fa fa-times fa-lg" aria-hidden="true"></i>
  44.                 </div>
  45.             </div>
  47.             <div class="nav-bl step2">
  48.                 <div class="nav-scroll-container">
  49.                     <div class="title">
  50.                         Trouver l’offre qui vous correspond !
  51.                     </div>
  53.                     <div class="item-ask with-margin-bottom-30">
  54.                         Vous êtes un(e)
  55.                     </div>
  56.                     <div class="item-answer step1"></div>
  58.                     <div class="item-ask">
  59.                         Vous rechercher une solution de
  60.                     </div>
  61.                     <div class="item-answer" data-step="2">
  62.                         <div class="item-answer-display">
  63.                             <div class="item-choice" data-name="utilities" data-value="comptabilities">
  64.                                 <img class="icon" alt="" src="{{ asset('/images/icons/configurator/icon-conf-comptabilities.svg') }}" />
  65.                                 <span class="item-name">Gestion comptable</span>
  66.                             </div>
  67.                             <div class="item-choice" data-name="utilities" data-value="members">
  68.                                 <img class="icon" alt="" src="{{ asset('/images/icons/configurator/icon-conf-members.svg') }}" />
  69.                                 <span class="item-name">Gestion membres</span>
  70.                             </div>
  71.                         </div>
  72.                         <div class="item-answer-display">
  73.                             <div class="item-choice" data-name="utilities" data-value="online_payment">
  74.                                 <img class="icon" alt="" src="{{ asset('/images/icons/configurator/icon-conf-online-payment.svg') }}" />
  75.                                 <span class="item-name">Paiement en ligne</span>
  76.                             </div>
  77.                             <div class="item-choice" data-name="utilities" data-value="grounds">
  78.                                 <img class="icon" alt="" src="{{ asset('/images/icons/configurator/icon-conf-grounds.svg') }}" />
  79.                                 <span class="item-name">Gestion terrain</span>
  80.                             </div>
  81.                         </div>
  82.                         <div class="item-choice with-margin-top-15" data-name="utilities" data-value="all">
  83.                             <img class="icon" alt="" src="{{ asset('/images/icons/configurator/icon-conf-ticks.svg') }}" />
  84.                             <span class="item-name">Gestion Complète</span>
  85.                         </div>
  86.                     </div>
  87.                     <div class="item-stepper">
  88.                         <div class="stepper">
  89.                             <div class="circle-step done"></div>
  90.                             <div class="line-step done"></div>
  91.                             <div class="circle-step"></div>
  92.                             <div class="line-step"></div>
  93.                             <div class="circle-step"></div>
  94.                         </div>
  95.                     </div>
  96.                 </div>
  97.             </div>
  99.             <div class="nav-bl step3 erase">
  100.                 <div class="nav-scroll-container">
  101.                     <div class="title">
  102.                         Encore un effort !
  103.                     </div>
  105.                     <div class="item-ask">
  106.                         Vous êtes environs moins de ...
  107.                     </div>
  108.                     <div class="item-answer" data-step="3">
  109.                         <div class="item-answer-display">
  110.                             <div class="item-choice" data-name="members" data-value="120">
  111.                                 <span class="number-choice">
  112.                                     120
  113.                                 </span>
  114.                                 <span class="item-name">membres</span>
  115.                             </div>
  116.                             <div class="item-choice" data-name="members" data-value="250">
  117.                                 <span class="number-choice">
  118.                                     250
  119.                                 </span>
  120.                                 <span class="item-name">membres</span>
  121.                             </div>
  122.                         </div>
  123.                         <div class="item-answer-display">
  124.                             <div class="item-choice" data-name="members" data-value="500">
  125.                                 <span class="number-choice">
  126.                                     500
  127.                                 </span>
  128.                                 <span class="item-name">membres</span>
  129.                             </div>
  130.                             <div class="item-choice" data-name="members" data-value="2000">
  131.                                 <span class="number-choice">
  132.                                     2000
  133.                                 </span>
  134.                                 <span class="item-name">membres</span>
  135.                             </div>
  136.                         </div>
  137.                     </div>
  138.                     <div class="item-stepper">
  139.                         <div class="stepper">
  140.                             <div class="circle-step done"></div>
  141.                             <div class="line-step done"></div>
  142.                             <div class="circle-step done"></div>
  143.                             <div class="line-step done"></div>
  144.                             <div class="circle-step"></div>
  145.                         </div>
  146.                     </div>
  147.                 </div>
  148.             </div>
  150.             <div class="nav-bl step4 erase">
  151.                 <div class="nav-scroll-container">
  152.                     <div id="renderSearchMob">
  153.                         <div class="width-max align">
  154.                             <img src="{{ asset('/images/loader/loader.gif') }}" width="40" height="40" border="0"/>
  155.                         </div>
  156.                     </div>
  158.                     <div id="call-success">
  159.                         <i class="fas fa-check-circle fa-2x"></i>
  160.                         <br/><br/>
  161.                         Nous avons bien pris note de votre demande, nous vous rappellerons dans les plus brefs délais.
  162.                     </div>
  163.                     <div id="call-frame">
  164.                         <div class="title marginT-mob-30">
  165.                             On en discute ?
  166.                         </div>
  167.                         <div class="align marginB-mob-30">
  168.                             Etre rappelé par un conseiller
  169.                         </div>
  172.                         <form id="call" action="{{ path('signup') }}" method="POST" class="">
  173.                             <div class="col-xs-6">
  174.                                 <input name="name" type="text" placeholder="Nom" class="form-control" required="required"/>
  175.                             </div>
  176.                             <div class="col-xs-6">
  177.                                 <input name="email" type="email" placeholder="Email" class="form-control" required="required"/>
  178.                             </div>
  179.                             <div class="col-xs-12 with-margin-top-10">
  180.                                 <input name="phone" type="tel" placeholder="Téléphone" class="form-control" required="required"/>
  181.                             </div>
  182.                             <input name="type_lead" type="hidden" value="{{ website_name ~ ' :: mob home configurator' }}"/>
  183.                             <input name="hash" type="hidden" value="{{ hashSales }}"/>
  184.                             <div class="col-xs-6 with-margin-top-10">
  185.                                 <a href="{{ path('signup', {'trial':1}) }}" class="left button_blue try-success width-max size-16">
  186.                                     Faire un essai
  187.                                 </a>
  188.                             </div>
  189.                             <div class="col-xs-6 with-margin-top-10">
  190.                                 <button class="button_theme width-max">
  191.                                     Être rappelé
  192.                                 </button>
  193.                             </div>
  195.                             <a href="{{ path('prices') }}" class="try-success col-xs-12 align size-12 marginT-mob-30 grey-color">
  196.                                 Peut-être plus tard
  197.                             </a>
  198.                         </form>
  199.                     </div>
  201.                     <div class="item-stepper">
  202.                         <div class="stepper">
  203.                             <div class="circle-step done"></div>
  204.                             <div class="line-step done"></div>
  205.                             <div class="circle-step done"></div>
  206.                             <div class="line-step done"></div>
  207.                             <div class="circle-step done"></div>
  208.                         </div>
  209.                     </div>
  210.                 </div>
  211.             </div>
  212.         </div>
  213.     </div>
  214. </div>
  216. {% block javascriptFooter %}
  217. <script>
  218.     $(document).ready(function(){
  219.         step = 1;
  220.         hashSales = '{{ hashSales }}';
  222.         $(document).on('click', '.try-success', function(ea){
  223.             ea.preventDefault();
  224.             var location = $(this).attr('href');
  225.             if($('#call input[name="email"]').val() != "" && typeof $('#call input[name="phone"]').val() != ""){
  226.                 $.ajax({
  227.                     url: '/send/call',
  228.                     type: "POST",
  229.                     data:$('#call').serialize(),
  230.                     success: function(data, textStatus, jqXHR) {
  231.                     },
  232.                     complete: function() {
  233.                         window.location.href = location;
  234.                     },
  235.                     error: function(jqXHR, textStatus, errorThrown) {
  236.                     }
  237.                 });
  238.             }else{
  239.                 window.location.href = location;
  240.             }
  241.         });
  243.         // sub
  244.         //
  245.         $(document).on('submit', '#call', function(ea){
  246.             ea.preventDefault();
  247.             $.ajax({
  248.                 url: '/send/call',
  249.                 type: "POST",
  250.                 data:$(this).serialize(),
  251.                 success: function(data, textStatus, jqXHR) {
  252.                 },
  253.                 complete: function() {
  254.                     $('#call-frame, .back-step').hide();
  255.                     $('#call-success').show();
  256.                 },
  257.                 error: function(jqXHR, textStatus, errorThrown) {
  258.                 }
  259.             });
  260.         });
  262.         // Select an answer
  263.         //
  264.         $(document).on('click', '#item-carroussel-header .item-choice', function(){
  265.             var name = $(this).data('name');
  266.             var value = $(this).data('value');
  267.             var copy = $(this).clone();
  268.             complete = 0;
  269.             step = $(this).closest('.item-answer').data('step');
  270.             $(this).closest('.item-answer').find('.item-choice').removeClass('active');
  271.             $(this).addClass('active');
  272.             if(typeof step !== "undefined"){
  273.                 $('#nav-configurator .step' + step).hide();
  274.                 $('#nav-configurator .step').html(step);
  275.                 step = parseInt(step) + 1;
  276.                 $('#nav-configurator .step' + step).show();
  277.                 $('#nav-configurator .back-step').show();
  278.             }else{
  279.                 $('#nav-configurator .item-answer.step1').html(copy);
  280.                 $('#nav-configurator .item-answer.step1 .item-choice').addClass('active');
  281.                 $('#nav-configurator').show();
  282.             }
  283.             
  284.             if(step == 4){
  285.                 complete = 1;
  286.                 $('#nav-configurator .back-step').hide();
  287.             }
  288.             $.ajax({
  289.                 url: '/send/configurator',
  290.                 type: "POST",
  291.                 data: {
  292.                     'name': name,
  293.                     'value': value,
  294.                     'complete':complete,
  295.                     'type': 'phone :: Home',
  296.                     'hash':hashSales,
  297.                 },
  298.                 success: function(data, textStatus, jqXHR) {
  299.                     save_data = data;
  300.                     if(step == 4){
  301.                         $('#renderSearchMob').html(data);
  302.                     }
  303.                 },
  304.                 complete: function() {
  305.                 },
  306.                 error: function(jqXHR, textStatus, errorThrown) {
  308.                 }
  309.             });
  310.         });
  312.         // Back to the previous step
  313.         //
  314.         $(document).on('click', '#nav-configurator .back-step', function(){
  315.             $('#nav-configurator .step' + step).hide();
  316.             step = parseInt(step) - 1;
  317.             $('#nav-configurator .step' + step).show();
  318.             if(step == 2){
  319.                 $('#nav-configurator .back-step').hide();
  320.             }
  321.             $('#nav-configurator .step').html(step);
  322.         });
  324.         // Cancel window
  325.         //
  326.         $(document).on('click', '.cancel-step', function(){
  327.             $('#nav-configurator').hide();
  328.         });
  329.     });
  330. </script>
  331. {% endblock %}