templates/forms/classified/choose-ad.html.twig line 1

Open in your IDE?
  2. <!-- Modal -->
  3. <div id="modal1" class="center-modal modal fade" role="dialog">
  4.   <div class="modal-dialog">
  6.     <!-- Modal content-->
  7.   <style media="screen">
  8.   /* these changes need to be propagated into the site.css  */
  9.     .close {
  10.       top: 0;
  11.       right: 0;
  12.       color: #a41822;
  13.       position: absolute;
  14.       font-size: 61px;
  15.       height: 58px;
  16.       line-height: 0;
  17.     } 
  19.     .close:hover,
  20.     .close:focus {
  21.       color: #a41822;
  22.       text-decoration: none;
  23.       cursor: pointer;
  24.       -webkit-text-stroke: 1px #a41822;
  25.       outline: unset;
  26.     }
  28.       @media only screen and (max-width: 700px){
  29.         .modal{
  30.           padding: unset;
  31.         }
  32.         .modal-content {
  33.           width: 100%;
  34.           height:auto;
  35.         }
  36.         .close{
  37.           color: #a41822;
  38.           position: absolute;
  39.           font-size: 61px;
  40.           top: -37px;
  41.           right: 5px;
  42.           line-height: unset;
  43.         }
  44.       }
  45.   </style>
  46.     <div class="modal-content">
  47.       
  48.       <div class="modal-header">
  49.       <button type="button" class="close" data-dismiss="modal">&times;</button>
  50.         <center>
  51.             <a href="/rcs-club-sign-up"><img src="https://www.rooferscoffeeshop.com/uploads/media/2019/04/rcs-r-club.png" style="width:450px; align: center;" loading='lazy'></a>
  52.             Join R-Club to save up to 50% on your classified ads!  
  53.         </center>
  54.       </div>
  55.     </div>
  57.   </div>
  58. </div>
  60. {# TODO: test this #}
  61. {#
  62. {% if purchaseItem is not empty %}
  63. {% set temp = purchaseItem.getContent() %}
  64. <div class="alert alert-info clearfix">
  66.     <div class="float-right">
  67.         <button 
  68.             type="submit" 
  69.             name="action"
  70.             value="discard"
  71.             class="btn btn-link p-0"
  72.         ><i class="fa fa-close"></i> Discard</button> or 
  73.         <button
  74.             type="submit"
  75.             class="btn btn-link p-0"
  76.             name="action"
  77.             value="add_to_cart"
  78.         ><i class="fa fa-shopping-cart"></i> Save and create new</button>
  79.     </div>
  80.     
  81.     <i class="fa fa-info"></i>
  82.         You are currently editing
  83.     {% if temp is not empty %}
  84.         your listing: <strong>{{ temp.getTitle() }}</strong>
  85.     {% else %}
  86.         a previous listing.
  87.     {% endif %}
  88. </div>
  89. {% endif %}
  90. #}
  92. {#
  93. <button
  94.     type="submit"
  95.     class="btn btn-secondary float-right"
  96. >Continue to Create Your AD <i class="fa fa-angle-double-right"></i></button>
  98. <h4>Choose a Package</h4>
  99. <p><strong>Purchase Packages:</strong></p>
  101. {% for p in products %}
  102. <div>
  103. <label class="btn-block m-0">
  104.     <table class="table m-0">
  105.     <tr>
  106.         <td style="width: 1px;">
  107.             <input 
  108.                 type="radio" 
  109.                 name="product[product_id]" 
  110.                 value="{{ p.getId() }}"
  111.                 {% if product is not empty %}
  112.                 
  113.                 {{ (product.getId() == p.getId()) ? 'checked' : '' }}
  114.                 {% endif %}
  115.                 required
  116.             />
  117.         </td>
  118.         <td>
  119.             {{ p.getTitle() }}<br />
  120.             <strong>{{ p.getFullPrice() }}</strong>
  121.             {{ p.getDescription() }}
  122.         </td>
  123.     </tr>
  124.     </table>
  125. </label>
  126. </div>
  127. {% endfor %}
  129. <hr />
  131. <p><strong>SW &mdash; Region 1 Southwest Edition, includes:</strong><br />
  132. Southern California, Southern Nevada, Arizona, Texas, New Mexico, Oklahoma and Hawaii.
  133. </p>
  135. <p><strong>NW &mdash; Region 2 Northwest Edition, includes:</strong><br />
  136. Wyoming, Montana, Idaho, Oregon, Washington, Alaska, Northern California, Northern Nevada, Utah and Colorado
  137. </p>
  139. <p><strong>SE &mdash; Region 3 SouthEast Edition, includes:</strong><br />
  140. North Carolina, Tennessee, Florida, Georgia, South Carolina, Alabama, Mississippi, Louisiana and Arkansas
  141. </p>
  143. <p><strong>MW &mdash; Region 4 Midwest Edition includes:</strong><br />
  144. Minnesota, Iowa, Illinois, Wisconsin, Michigan, Indiana, Nebraska, South Dakota, North Dakota, Ohio, Kentucky, Kansas and Missouri.
  145. </p>
  147. <p><strong>NE &mdash; Region 5 Northeast includes:</strong><br />
  148. Pennsylvania, Delaware, Virginia, West Virginia, Maryland, Washington D.C., Connecticut, New Hampshire, New York, Maine, Massachussetts, Vermont, New Jersey, Rhode Island.
  149. </p>
  151. #}
  153. {% if not app.user or (not app.user.isMember() and not app.user.isAdmin()) %}
  154.     <button id="not-member" type="button" class="button" style="display: none;" data-toggle="modal" data-target="#modal1">View</button>
  155.     <script>
  156.         setTimeout(function() { document.getElementById("not-member").click(); }, 3000);
  157.     </script>
  158. {% endif %}
  162. <style>
  163.   .classified-options {
  164.     border: 1px solid #ccc;
  165.     border-radius: 6px;
  166.     padding:20px;
  167.   }
  168.   .classified-options h3 {
  169.     color: #A6252A;
  170.   }
  171.   .btn-classified {
  172.     color: black;
  173.     border: 1px solid #ccc;
  174.     border-radius: 6px;
  175.     width: 100%;
  176.   }
  177.   .cbtn-wrapper {
  178.     padding: 5px;
  179.   }
  183.   .btn-check {
  184.     position: absolute;
  185.     clip: rect(0,0,0,0);
  186.     pointer-events: none;
  187.   }
  189.   .btn-check:checked ~ .btn-classified {
  190.     color: #fff;
  191.     background-color: #A6252A;
  192.   }
  194.   .top-highlight {
  195.     position: absolute;
  196.     font-size: 12px;
  197.     top: -14px;
  198.     background-color: #A6252A;
  199.     color: white;
  200.     width: 96%;
  201.     border-top-right-radius: 6px;
  202.     border-top-left-radius: 6px;
  203.     padding-left: 70px;
  204.     text-transform: uppercase;
  205.     border: 1px solid #ccc;
  206.   }
  209.   
  210. </style>
  212. {# TODO: pull these from database #}
  213. {% set durations = [
  214.   {'id': 1, 'text': '30 Days'},
  215.   {'id': 2, 'text': '60 Days'},
  216.   {'id': 3, 'text': '90 Days'}
  217. ] %}
  219. {% set graphics = [
  220.   {'id': 4, 'text': 'Image'},
  221.   {'id': 5, 'text': 'Video'},
  222.   {'id': 22, 'text': 'Featured'}
  223. ] %}
  225. {% set sites = [
  226.   {'id': 20, 'text': 'RoofersCoffeeShop'},
  227.   {'id': 21, 'text': 'MetalCoffeeShop'},
  228.   {'id': 23, 'text': 'CoatingsCoffeeShop'}
  229. ] %}
  231. {% set regions = [
  232.   {'id': 6, 'text': 'All Regions'},
  233.   {'id': 7, 'text': 'Northeast'},
  234.   {'id': 8, 'text': 'Southeast'},
  235.   {'id': 9, 'text': 'Midwest'},
  236.   {'id': 10, 'text': 'Northwest'},
  237.   {'id': 11, 'text': 'Southwest'},
  238.   {'id': 12, 'text': 'Canada: Alberta'},
  239.   {'id': 13, 'text': 'Canada: British Columbia'},
  240.   {'id': 14, 'text': 'Canada: Manitoba'},
  241.   {'id': 15, 'text': 'Canada: Newfoundland'},
  242.   {'id': 16, 'text': 'Canada: Ontario'},
  243.   {'id': 17, 'text': 'Canada: Prince Edward Island, Nova Scotia, New Brunswick'},
  244.   {'id': 18, 'text': 'Canada: Quebec'},
  245.   {'id': 19, 'text': 'Canada: Saskatchewan'}
  246.   
  247. ] %}
  249. <form id="classified-form">
  250. <div class="classified-options">
  251.   <div class="row">
  253.     <div class="col-lg-6">
  254.       <h3>Duration</h3>
  255.       <div class="row">
  256.         {% for duration in durations %}
  257.           <div class="col-6 cbtn-wrapper">
  258.             <input type="radio" class="btn-check" name="duration" autocomplete="off" value="{{duration.id}}" required>
  259.             {% if duration.text == '60 Days' %}
  260.               <label class="top-highlight">Most Popular</label>
  261.             {% endif %}
  262.             <label class="btn btn-classified">{{duration.text}}</label>
  263.             </input>
  264.           </div>
  265.         {% endfor %}
  266.       </div>
  267.     </div>
  269.     <div class="col-lg-6">
  270.       <h3>Graphics</h3>
  271.       <div class="row">
  272.         {% for graphic in graphics %}
  273.           <div class="col-6 cbtn-wrapper">
  274.             <input type="radio" class="btn-check" name="graphic" autocomplete="off" value="{{graphic.id}}">
  275.             <label class="btn btn-classified">{{graphic.text}}
  276.               {% if graphic.text == "Featured" %}
  277.                 <span class="rtooltip"> <i class="fa fa-question-circle"></i>
  278.                   <div class="rtooltiptext" style="font-size:14px;">
  279.                     Featured classified listings include a video or image, are posted on RoofersCoffeeShop's Twitter, and are highlighted at the top of our classifieds page.
  280.                     <br><br>
  281.                     Selecting this option will automatically select "All Regions" below.
  282.                     <br>
  283.                   </div>
  284.                 </span>
  285.               {% endif %}
  286.             </label>
  287.             </input>
  288.           </div>
  289.         {% endfor %}
  290.       </div>
  291.     </div>
  293.     <div class="col-lg-12 mt-4">
  294.       <h3>Sites</h3>
  295.       <div id="sites-row" class="row">
  296.         {% for site in sites %}
  297.           <div class="col-lg-3 col-6 cbtn-wrapper">
  298.             <input type="checkbox" class="btn-check" name="sites[]" autocomplete="off" value="{{site.id}}" {#required#}>
  299.             <label class="btn btn-classified">{{site.text}}</label>
  300.             </input>
  301.           </div>
  302.         {% endfor %}
  303.       </div>
  304.     </div>
  305.     
  306.     <div class="col-lg-12 mt-4">
  307.       <h3 style="margin-bottom:20px;">Region</h3>
  308.       <div id="regions-row" class="row">
  309.         {% for region in regions %}
  310.           {#<div class="col-3 cbtn-wrapper"><button class="btn btn-classified">{{region}}</button></div>#}
  311.           <div class="col-lg-3 col-6 cbtn-wrapper">
  312.             {% if region.text == 'All Regions' %}
  313.               <label class="top-highlight">Best Value</label>
  314.             {% endif %}
  315.             <input type="checkbox" class="btn-check" name="regions[]" autocomplete="off" value="{{region.id}}">
  316.             <label class="btn btn-classified" {% if region.text|length > 35 %} style="line-height:15px; padding:5px;" {% endif %}>{{region.text}}</label>
  317.             </input>
  318.           </div>
  319.         {% endfor %}
  320.       </div>
  321.     </div>
  323.   </div>
  324. </div>
  326. <div style="padding-top:10px;" class="row">
  327.   <div class="col-3">
  328.     <h2 style="color:#A6252A;">PRICE: $<span id="total-classified-price">30</span></h2>
  329.     <input type="hidden" id="total-price-input" name="total-price-input" value="30"/>
  330.   </div>
  331.   <div class="col-9">
  332.     <button type="submit" class="btn btn-primary" style="color: #fff; background-color: #A6252A;border-radius:6px;">Continue to Create Your Ad</button>
  333.   </div>
  334. </div>
  335. </form>
  337. <script>
  338. (function($){
  339.     $(function(){
  340.     
  341.     $(".btn-classified").click(function (e) {
  343.       var checkBox = $(this).parent().find(".btn-check");
  344.       var checkedVal = checkBox.prop("checked");
  346.       if(checkBox.parent().parent().attr('id') == "regions-row") {
  347.         
  348.         var disabled = false;
  349.         
  350.         $("input[name='graphic']").each(function (index, obj) {
  351.           if($(this).prop("checked") && $(this).val() == 22) {
  352.             disabled = true;
  353.           }
  354.         });
  356.         if(!disabled) {
  357.           checkBox.prop("checked", !checkBox.prop("checked"));
  358.           checkedVal = checkBox.prop("checked");
  360.           if(checkBox.val() == 6 && checkedVal) { // All Regions
  361.             $(this).parent().parent().find(".btn-check").prop("checked", false);
  362.             checkBox.prop("checked", checkedVal);
  363.           }
  364.           else if(checkedVal) {
  365.             $(this).parent().parent().find(":input[value=6]").prop("checked", false);
  366.           }
  367.         }
  368.         
  369.         
  370.       }
  371.       else {
  372.         checkBox.prop("checked", !checkBox.prop("checked"));
  373.         checkedVal = checkBox.prop("checked");
  374.       }
  377.       // If featured: force "All Regions" to be selected
  378.       if(checkBox.val() == 22 && checkedVal) { // Featured
  379.         $("#regions-row .btn-check").each(function (index, obj) {
  380.             $(this).prop("checked", $(this).val() == 6);
  381.         });
  383.         $(this).parent().parent().find(".btn-check").prop("checked", false);
  384.         checkBox.prop("checked", checkedVal);
  385.       }
  388.       var months = 1;
  389.       var totalPrice = 30;
  390.       $("input[name='duration']").each(function (index, obj) {
  391.         if($(this).prop("checked")) {
  392.           switch($(this).val()) {
  393.             case '2':
  394.               totalPrice += 30;
  395.               months = 2;
  396.               break;
  397.             case '3':
  398.               totalPrice += 60;
  399.               months = 3;
  400.               break;
  401.           }
  402.         }
  403.       });
  405.       var featured = false;
  406.       $("input[name='graphic']").each(function (index, obj) {
  407.         if($(this).prop("checked")) {
  408.           switch($(this).val()) {
  409.             case '4':
  410.               totalPrice += 25;
  411.               break;
  412.             case '5':
  413.               totalPrice += 75;
  414.               break;
  415.             case '22':
  416.               totalPrice = (months * 175); //Total price for featured is $175 per month (for one site)
  417.               featured = true;
  418.               break;
  419.           }
  420.         }
  421.       });
  423.       var firstRegion = true;
  424.       $("input[name='regions[]']").each(function (index, obj) {
  425.         if($(this).prop("checked")) {
  426.           if($(this).val() == 6) { // All Regions
  427.             if(!featured) { //All regions included with Featured
  428.               totalPrice += 50;
  429.             }
  430.           }
  431.           else if(firstRegion) {
  432.             firstRegion = false;
  433.           }
  434.           else {
  435.             totalPrice += 10;
  436.           }
  437.         }
  438.       });
  440.       var firstSite = true;
  441.       $("input[name='sites[]']").each(function (index, obj) {
  442.         if($(this).prop("checked")) {
  443.           if(firstSite) {
  444.             firstSite = false;
  445.           }
  446.           else {
  447.             totalPrice += 50;
  448.           }
  449.         }
  450.       });
  451.       
  452.       $("#total-classified-price").text(totalPrice);
  453.       $("#total-price-input").val(totalPrice);
  454.       
  455.     });
  457.     
  458.     //$("#classified-form").submit(function(e) {
  459.     $("form").submit(function(e) { // TODO: Only specific form
  461.       if($("input[name='sites[]']:checked").length == 0) {
  462.         e.preventDefault();
  463.         alert("Please select at least one site to continue.");
  464.       }
  465.       else if($("input[name='regions[]']:checked").length == 0) {
  466.         e.preventDefault();
  467.         alert("Please select at least one region to continue.");
  468.       }
  469.       
  470.     });
  471.     
  473.         
  474.     });
  475. }(jQuery));
  476. </script>