Advertisement:

Author Topic: Car Attributes - Add a range slider for mileage in search form  (Read 2411 times)

ad.min

  • Newbie
  • *
  • Posts: 25
Hello I need help creating a range slider for mileage in the search form just like the ones for the Real Estate rooms, bathrooms, etc

 I added this in search.form php

Code: [Select]
<?php
    $locale       
osc_current_user_locale();
   
    
    
$mileage        explode(" - "Params::getParam('mileage'));
    
$mileageMin     = ($mileage[0]!='')?$mileage[0]:'0';
    
$mileageMax     = (isset($mileage[1]) && $mileage[1]!='')?$mileage[1]:'1500000';
  
?>

<style type="text/css">
    #slider { margin-right:10px; margin-left:10px;};
</style>

<script type="text/javascript">
    $(function() {
       
        $("#mileage-range").slider({
            range: true,
            min: 0,
            max: 1500000,
            step:25000,
            values: [<?php echo $mileageMin?>, <?php echo $mileageMax;?>],
            slide: function(event, ui) {
                $("#mileage").val(ui.values[0] + ' - ' + ui.values[1]);
           
            }
        });
        $("#mileage").val($("#mileage-range").slider("values", 0) + ' - ' + $("#mileage-range").slider("values", 1));   
   
});
</script>
   
   
    <h6><?php _e('Mileage''cars_attributes'); ?></h6>
   
    <div class="row one_input">
        <p>
            <input type="text" id="mileage" name="mileage" style="background-color: transparent; border:0; color:#f6931f; font-weight:bold;" readonly/> &nbsp;
        </p>
        <div class="slider" >
            <div id="mileage-range"></div>
        </div>
    </div>

and in the index.php of car atrributes 2 more conditions
Code: [Select]
case 'mileageMin':
if ( (int)$value >= 0 && (int)$value < 1500000 ) {
Search::newInstance()->addConditions(sprintf("%st_item_car_attr.i_mileage >= '%s'", DB_TABLE_PREFIX, (int)$value));
$has_conditions = true;
}
break;
case 'mileageMax':
if ( (int)$value > 0 && (int)$value < 1500000 ) {
Search::newInstance()->addConditions(sprintf("%st_item_car_attr.i_mileage <= '%s'", DB_TABLE_PREFIX, (int)$value));
$has_conditions = true;
}
break;


   
but something goes wrong.
 Thanks in advance!
« Last Edit: August 25, 2017, 11:10:04 pm by ad.min »

Liath

  • issues
  • Hero Member
  • *
  • Posts: 1346
  • </html> the end is always near
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #1 on: August 25, 2017, 01:08:17 am »
and what exactly is going wrong?

ad.min

  • Newbie
  • *
  • Posts: 25
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #2 on: August 25, 2017, 01:19:32 am »
After i select the range from the slider and press search it displays all ads in car category even those without a mileage  set

Liath

  • issues
  • Hero Member
  • *
  • Posts: 1346
  • </html> the end is always near
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #3 on: August 25, 2017, 02:15:09 am »
what is the value of $value you have sended to "case mileageMin"?

i think you need to explode $value before and then make use of $value[0] and $value[1]

as example:
Code: [Select]
case 'mileageMin':
    $value = explode(" - ", $value);
    if ( (int)$value[0] >= 0 && (int)$value[0] < 1500000 ) {
        Search::newInstance()->addConditions(sprintf("%st_item_car_attr.i_mileage >= '%s'", DB_TABLE_PREFIX, (int)$value[0]));
        $has_conditions = true;
    }
break;
case 'mileageMax':
    $value = explode(" - ", $value);
    if ( (int)$value[1] > 0 && (int)$value[1] < 1500000 ) {
        Search::newInstance()->addConditions(sprintf("%st_item_car_attr.i_mileage <= '%s'", DB_TABLE_PREFIX, (int)$value[1]));
        $has_conditions = true;
    }
break;


you could explode $value before all cases, so you don't need to repeat them for all cases... but i need to see the whole code for this

ad.min

  • Newbie
  • *
  • Posts: 25
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #4 on: August 25, 2017, 02:48:17 am »
Still does not work . I added to the car script only the code above  . I tried to adapt a few things from realestate script to cars plugin but i missed some things

Liath

  • issues
  • Hero Member
  • *
  • Posts: 1346
  • </html> the end is always near
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #5 on: August 25, 2017, 02:55:06 am »
I tried to adapt a few things from realestate script to cars plugin but i missed some things


i need to see all your changes, without this i cannot find the issue

ad.min

  • Newbie
  • *
  • Posts: 25
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #6 on: August 25, 2017, 03:10:25 am »
Here are the only two modified files of cars attributes

Liath

  • issues
  • Hero Member
  • *
  • Posts: 1346
  • </html> the end is always near
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #7 on: August 25, 2017, 03:28:15 am »
mileageMin and mileageMax doesn't seem to be sended to search_form.php, try this changes to add them to the params



change
Code: [Select]
<script type="text/javascript">
    $(function() {
       
        $("#mileage-range").slider({
            range: true,
            min: 0,
            max: 1500000,
            step:25000,
            values: [<?php echo $mileageMin?>, <?php echo $mileageMax;?>],
            slide: function(event, ui) {
                $("#mileage").val(ui.values[0] + ' - ' + ui.values[1]);
           
            }
        });
        $("#mileage").val($("#mileage-range").slider("values", 0) + ' - ' + $("#mileage-range").slider("values", 1));   
   
});
</script>


to
Code: [Select]
<script type="text/javascript">
    $(function() {
       
        $("#mileage-range").slider({
            range: true,
            min: 0,
            max: 1500000,
            step:25000,
            values: [<?php echo $mileageMin?>, <?php echo $mileageMax;?>],
            slide: function(event, ui) {
                $("#mileage").val(ui.values[0] + ' - ' + ui.values[1]);
                $("#mileageMin").val(ui.values[0]);
                $("#mileageMax").val(ui.values[1]);
           
            }
        });
        $("#mileage").val($("#mileage-range").slider("values", 0) + ' - ' + $("#mileage-range").slider("values", 1));   
        $("#mileageMin").val($("#mileage-range").slider("values", 0));   
        $("#mileageMax").val($("#mileage-range").slider("values", 1));   


});
</script>


and
Code: [Select]
<h6><?php _e('Mileage''cars_attributes'); ?></h6>
<div class="row one_input">
    <p>
        <input type="text" id="mileage" name="mileage" style="background-color: transparent; border:0; color:#f6931f; font-weight:bold;" readonly/> &nbsp;
    </p>
    <div class="slider" >
        <div id="mileage-range"></div>
    </div>
</div>


to
Code: [Select]
<h6><?php _e('Mileage''cars_attributes'); ?></h6>
<div class="row one_input">
    <p>
        <input type="text" id="mileage" name="mileage" style="background-color: transparent; border:0; color:#f6931f; font-weight:bold;" readonly/> &nbsp;
        <input type="hidden" id="mileageMin" name="mileageMin" />
        <input type="hidden" id="mileageMax" name="mileageMax" />
    </p>
    <div class="slider" >
        <div id="mileage-range"></div>
    </div>
</div>

i don't know if this works, but it's worth a try
« Last Edit: August 25, 2017, 03:38:03 am by Liath »

ad.min

  • Newbie
  • *
  • Posts: 25
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #8 on: August 25, 2017, 03:57:43 am »
Seems to work only sometimes. When I enter the subcategory for which I applied  the plugin i receive all the the ads in that category  . Here is what happens:

 1) all itemes in that category are displayed and the adress bar changes suddenly from

Quote
index.php?page=search&sCategory=113&sOrder=dt_pub_date&iOrderType=mileage=10000+-+1500000&mileageMin=0&mileageMax=1500000

to

 
Quote
index.php?page=search&sCategory=113&sOrder=dt_pub_date&iOrderType=desc&currency=EUR


2)  i clicked on one of the ad resulted after search in the same category and after i pressed the back button the bar returned to

Quote
index.php?page=search&sCategory=113&sOrder=dt_pub_date&iOrderType=mileage=10000+-+1500000&mileageMin=0&mileageMax=1500000

and the ads were filtered corectly

ad.min

  • Newbie
  • *
  • Posts: 25
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #9 on: August 25, 2017, 04:00:07 am »
Also when i click on that subcategory icon to refresh the slider dissapears and reappears only after page refresh

ad.min

  • Newbie
  • *
  • Posts: 25
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #10 on: August 25, 2017, 04:41:00 am »
the currency appears in adress bar because i added in search form next to the price ;  the problems persists even after i removed it Thanks

ad.min

  • Newbie
  • *
  • Posts: 25
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #11 on: August 26, 2017, 12:42:53 am »
I need to create a range slider for this script regarding the mileage :
Quote
<script type="text/javascript">
$(document).ready(function() {
   var min_mileage_limit = 0;
   var max_mileage_limit = 1500000;

   var min_mileage = $('#min_mileage').val();
   var max_mileage = $('#max_mileage').val();

   /* Rebuild min_mileage selection */
   $.fn.rebuildMinMileage = function() {
      var options = '<option value="">minim</option>';
      var max_mileage_loop = max_mileage_limit;

      // If we already have a good max_mileage set then make sure our loop knows
      if (max_mileage !=0 && max_mileage <= max_mileage_limit && max_mileage >= min_mileage_limit) {
         max_mileage_loop = max_mileage;
      }

      // Rebuild the options
      for (var i = min_mileage_limit; i <= max_mileage_loop; i++) {
         options += "<option value='" +i+"'>"+i+"</option>";
      }
      $('#min_mileage').html(options);

      // Ensure the proper option is set.
      $('#min_mileage').val(min_mileage).change();
   };   

   /* Rebuild max_mileage selection */
   $.fn.rebuildMaxMileage = function() {

      var options = '<option value="">maxim</option>';
      var min_mileage_loop = min_mileage_limit;

      // Make sure min_mileage is in range
      if (min_mileage != 0 && min_mileage >= min_mileage_limit && min_mileage <= max_mileage_limit) {
         min_mileage_loop = min_mileage;
      }

      // Rebuild the options
      for (var i = min_mileage_loop; i <= max_mileage_limit; i++) {
         options += "<option value='" +i+"'>"+i+"</option>";
      }
      $('#max_mileage').html(options);

      // Ensure the proper option is set.
      $('#max_mileage').val(max_mileage).change();
   };   

   /* check if limits are within range when page loads - if not, deal with it */
   if (min_mileage > max_mileage || min_mileage < min_mileage_limit || max_mileage > max_mileage_limit) {
      min_mileage = '';
      max_mileage = '';
      $(this).rebuildMinMileage();
      $(this).rebuildMaxMileage();
   }

   $('#min_mileage').change(function(event) {
      if (event.originalEvent !== undefined) {            // min mileage was changed by user
         min_mileage = $('#min_mileage').val();               // get current selections
         max_mileage = $('#max_mileage').val();
         if (min_mileage > max_mileage && min_mileage < max_mileage_limit && max_mileage != 0) {
            // Because user changed min_mileage it has priority. Reset max_mileage if it falls out of range.
            max_mileage = '';
         }

         $(this).rebuildMaxMileage();               // Call function to rebuild max_mileage selection
      }
   });

   $('#max_mileage').change(function(event) {                  // Logic follows same pattern as #min_mileage change
      if (event.originalEvent !== undefined) {
         min_mileage = $('#min_mileage').val();
         max_mileage = $('#max_mileage').val();   
      
         if (max_mileage < min_mileage && max_mileage > min_mileage_limit && min_mileage != 0) {
            min_mileage = '';
         }

         $(this).rebuildMinMileage();
      }
   });
});
</script>


and this

Quote
    case 'mileageMin':
               if ( (int)$value >= 0 && (int)$value < 1500000 ) {
                  Search::newInstance()->addConditions(sprintf("%st_item_car_attr.i_mileage >= '%s'", DB_TABLE_PREFIX, (int)$value));
                  $has_conditions = true;
               }
            break;
            case 'mileageMax':
               if ( (int)$value > 0 && (int)$value < 1500000 ) {
                  Search::newInstance()->addConditions(sprintf("%st_item_car_attr.i_mileage <= '%s'", DB_TABLE_PREFIX, (int)$value));
                  $has_conditions = true;
               }
            break;

ad.min

  • Newbie
  • *
  • Posts: 25
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #12 on: August 28, 2017, 02:44:22 am »
Hi there i have now this working range slider in the search_form.php

Quote
<?php
    $locale       = osc_current_user_locale();
   
   
   
    $mileageMin     = ($mileage[0]!='')?$mileage[0]:'0';
    $mileageMax     = (isset($mileage[1]) && $mileage[1]!='')?$mileage[1]:'1500000';
 
?>
<style type="text/css">
    #slider { margin-right:10px; margin-left:10px;};
</style>

<script type="text/javascript">
    $(function() {
       
        $("#mileage-range").slider({
            range: true,
            min: 0,
            max: 1500000,
            step:10000,
            values: [<?php echo $mileageMin; ?>, <?php echo $mileageMax;?>],
            slide: function(event, ui) {
                $("#mileage").val(ui.values[0] + ' - ' + ui.values[1]);
            }
        });
        $("#mileage").val($("#mileage-range").slider("values", 0) + ' - ' + $("#mileage-range").slider("values", 1));   
    });
</script>

   
    <h6><?php _e('Mileage', 'cars_attributes'); ?></h6>
   
    <div class="row one_input">
        <p>
           
            <input type="text" id="mileage" name="mileage" style="background-color: transparent; border:0; color:#f6931f; font-weight:bold;" readonly/> &nbsp;
        </p>
        <div class="slider" >
            <div id="mileage-range"></div>
        </div>
    </div>
   
 


I need help now to submit the slider's values and after searching to database to retrieve and display all the items with mileage values in that range. Many thanks 

ad.min

  • Newbie
  • *
  • Posts: 25
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #13 on: August 31, 2017, 05:58:57 am »
I tried this in search-form.php

Quote

      <div class="row one_input">
        <h6><?php _e('Mileage', 'cars_attributes'); ?></h6>
   
      <select name="min_mileage" id="min_mileage">
            <?php $min_mileage = Params::getParam('min_mileage') ; ?>
            <option value=""><?php _e('min', 'cars_attributes');?></option>
            <option value="0"><?php $min_mileage = 0; ?><?php _e('0 km', 'cars_attributes');?></option>
            <option value="50000"><?php $min_mileage = 50000; ?><?php _e('50.000 km', 'cars_attributes');?></option>
            <option value="100000"><?php $min_mileage = 100000; ?><?php _e('100.000 km', 'cars_attributes');?></option>
            <option value="150000"><?php $min_mileage = 150000; ?><?php _e('150.000 km', 'cars_attributes');?></option>
            <option value="200000"><?php $min_mileage = 200000; ?><?php _e('200.000 km', 'cars_attributes');?></option>
            <option value="250000"><?php $min_mileage = 250000; ?><?php _e('250.000 km', 'cars_attributes');?></option>
            <option value="300000"><?php $min_mileage = 300000; ?><?php _e('300.000 km', 'cars_attributes');?></option>
            <option value="350000"><?php $min_mileage = 350000; ?><?php _e('350.000 km', 'cars_attributes');?></option>   
            <option value="400000"><?php $min_mileage = 400000; ?><?php _e('400.000 km', 'cars_attributes');?></option>
            <option value="450000"><?php $min_mileage = 450000; ?><?php _e('450.000 km', 'cars_attributes');?></option>
            <option value="500000"><?php $min_mileage = 500000; ?><?php _e('500.000 km', 'cars_attributes');?></option>
            <option value="550000"><?php $min_mileage = 550000; ?><?php _e('550.000 km', 'cars_attributes');?></option>
            <option value="600000"><?php $min_mileage = 600000; ?><?php _e('600.000 km', 'cars_attributes');?></option>
            <option value="650000"><?php $min_mileage = 650000; ?><?php _e('650.000 km', 'cars_attributes');?></option>
            <option value="700000"><?php $min_mileage = 700000; ?><?php _e('700.000 km', 'cars_attributes');?></option>
            <option value="750000"><?php $min_mileage = 750000; ?><?php _e('750.000 km', 'cars_attributes');?></option>
            <option value="800000"><?php $min_mileage = 800000; ?><?php _e('800.000 km', 'cars_attributes');?></option>
            <option value="850000"><?php $min_mileage = 850000; ?><?php _e('850.000 km', 'cars_attributes');?></option>
            <option value="900000"><?php $min_mileage = 900000; ?><?php _e('900.000 km', 'cars_attributes');?></option>
            <option value="950000"><?php $min_mileage = 950000; ?><?php _e('950.000 km', 'cars_attributes');?></option>
            <option value="1000000"><?php $min_mileage = 1000000; ?><?php _e('1.000.000 km', 'cars_attributes');?></option>   
      </select>   
     
            <select name="max_mileage" id="max_mileage">
            <?php $max_mileage = Params::getParam('max_mileage') ; ?>
            <option value=""><?php _e('max', 'cars_attributes');?></option>
            <option value="0"><?php $max_mileage = 0; ?><?php _e('0 km', 'cars_attributes');?></option>
            <option value="50000"><?php $max_mileage = 50000; ?><?php _e('50.000 km', 'cars_attributes');?></option>
            <option value="100000"><?php $max_mileage = 100000; ?><?php _e('100.000 km', 'cars_attributes');?></option>
            <option value="150000"><?php $max_mileage = 150000; ?><?php _e('150.000 km', 'cars_attributes');?></option>
            <option value="200000"><?php $max_mileage = 200000; ?><?php _e('200.000 km', 'cars_attributes');?></option>
            <option value="250000"><?php $max_mileage = 250000; ?><?php _e('250.000 km', 'cars_attributes');?></option>
            <option value="300000"><?php $max_mileage = 300000; ?><?php _e('300.000 km', 'cars_attributes');?></option>
            <option value="350000"><?php $max_mileage = 350000; ?><?php _e('350.000 km', 'cars_attributes');?></option>   
            <option value="400000"><?php $max_mileage = 400000; ?><?php _e('400.000 km', 'cars_attributes');?></option>
            <option value="450000"><?php $max_mileage = 450000; ?><?php _e('450.000 km', 'cars_attributes');?></option>
            <option value="500000"><?php $max_mileage = 500000; ?><?php _e('500.000 km', 'cars_attributes');?></option>
            <option value="550000"><?php $max_mileage = 550000; ?><?php _e('550.000 km', 'cars_attributes');?></option>
            <option value="600000"><?php $max_mileage = 600000; ?><?php _e('600.000 km', 'cars_attributes');?></option>
            <option value="650000"><?php $max_mileage = 650000; ?><?php _e('650.000 km', 'cars_attributes');?></option>
            <option value="700000"><?php $max_mileage = 700000; ?><?php _e('700.000 km', 'cars_attributes');?></option>
            <option value="750000"><?php $max_mileage = 750000; ?><?php _e('750.000 km', 'cars_attributes');?></option>
            <option value="800000"><?php $max_mileage = 800000; ?><?php _e('800.000 km', 'cars_attributes');?></option>
            <option value="850000"><?php $max_mileage = 850000; ?><?php _e('850.000 km', 'cars_attributes');?></option>
            <option value="900000"><?php $max_mileage = 900000; ?><?php _e('900.000 km', 'cars_attributes');?></option>
            <option value="950000"><?php $max_mileage = 950000; ?><?php _e('950.000 km', 'cars_attributes');?></option>
            <option value="1000000"><?php $max_mileage = 1000000; ?><?php _e('1.000.000 km', 'cars_attributes');?></option>   
      </select>   
     
    </div>




And as conditions in the index.php

Quote
  case 'min_mileage':
                  if ((int)$value >= 0 && (int)$value < 1000000) {
                  Search::newInstance()->addConditions(sprintf("%st_item_car_attr.i_mileage >= '%s'", DB_TABLE_PREFIX, (int)$value));
                  $has_conditions = true;
               }
            break;
            case 'max_mileage':
               if ( (int)$value > 0 && (int)$value < 1000000 ) {
                  Search::newInstance()->addConditions(sprintf("%st_item_car_attr.i_mileage <= '%s'", DB_TABLE_PREFIX, (int)$value));
                  $has_conditions = true;
               }
            break;


After I press  Search button , during the process of searching i see being prepared for display for a very short time the item wich has the mileage in the interval submitted and and after page refresh instead of that filtered item  the search parametres dissapear and all other ads in the same categoy are displayed. I think i missed something

kiknol

  • Newbie
  • *
  • Posts: 2
Re: Car Attributes - Add a range slider for mileage in search form
« Reply #14 on: April 12, 2019, 06:53:50 pm »
Hi. Did you make it work? If so, can you please help me too? Tanks