Car Attributes - Add a range slider for mileage in search form

[ad.min]

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!

[Liath]

and what exactly is going wrong?

[ad.min]

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]

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]

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]

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]

Here are the only two modified files of cars attributes

[Liath]

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

[ad.min]

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

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

to

 

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

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]

Also when i click on that subcategory icon to refresh the slider dissapears and reappears only after page refresh

[ad.min]

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]

I need to create a range slider for this script regarding the mileage :

<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

    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]

Hi there i have now this working range slider in the search_form.php

<?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]

I tried this in search-form.php

      <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

  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]

Hi. Did you make it work? If so, can you please help me too? Tanks