Help needed with web app search form

Report · Sep 06, 2017

We have the property search box on the following page: http://rentpfi01.bizdev.studio/index_copy

It is searching the 'Property Listings' web app.

The search box is working correctly except for the price and square footage sliders. I'm not sure what is going on.

Here is the code on the /index_copy page:

{module_webapps id="Property Listings" filter="all" collection="search" template=""}

{% comment -%}{% endcomment -%}

{% assign theLocations = search.items | map:"Property Location" | join:"," | split:"," -%}

{% assign theLocations = theLocations | sort -%}

{% comment -%}{% endcomment -%}

{% assign uniqueLocations = "" -%}

{% for item in theLocations -%}

{% assign theitem = item | strip -%}

{% unless uniqueLocations contains theitem -%}

{% capture uniqueLocations -%}{{ uniqueLocations }},{{ theitem }}{% endcapture -%}

{% endunless -%}

{% endfor -%}

{% assign uniqueLocations = uniqueLocations | remove_first:"," | split:"," -%}

{% comment -%}{% endcomment -%}

{% assign theNeighborhoods = search.items | map:"Neighborhood" | join:"," | split:"," -%}

{% assign theNeighborhoods = theNeighborhoods | sort -%}

{% comment -%}{% endcomment -%}

{% assign uniqueNeighborhoods = "" -%}

{% for item in theNeighborhoods -%}

{% assign theitem = item | strip -%}

{% unless uniqueNeighborhoods contains theitem -%}

{% capture uniqueNeighborhoods -%}{{ uniqueNeighborhoods }},{{ theitem }}{% endcapture -%}

{% endunless -%}

{% endfor -%}

{% assign uniqueNeighborhoods = uniqueNeighborhoods | remove_first:"," | split:"," -%}

{% comment -%}{% endcomment -%}

{% assign thePropType = search.items | map:"Property Type" | join:"," | split:"," -%}

{% assign thePropType = thePropType | sort -%}

{% comment -%}{% endcomment -%}

{% assign uniquePropType = "" -%}

{% for item in thePropType -%}

{% assign theitem = item | strip -%}

{% unless uniquePropType contains theitem -%}

{% capture uniquePropType -%}{{ uniquePropType }},{{ theitem }}{% endcapture -%}

{% endunless -%}

{% endfor -%}

{% assign uniquePropType = uniquePropType | remove_first:"," | split:"," -%}

{% assign pricemin = search.items[0].['Price'] | convert: "number" -%}

{% assign pricemax = search.items[0].['Price'] | convert: "number" -%}

{% assign areamin = search.items[0].['Square Foot Area'] | convert: "number" -%}

{% assign areamax = search.items[0].['Square Foot Area'] | convert: "number" -%}

{% for item in search.items %}

{% assign itemprice = item.['Price'] | convert: "number" -%}

{% assign itemarea = item.['Square Foot Area'] | convert: "number" -%}

{% if itemprice < pricemin -%}

{% assign pricemin = itemprice -%}

{% endif -%}

{% if itemprice > pricemax -%}

{% assign pricemax = itemprice -%}

{% endif -%}

{% if itemarea < areamin -%}

{% assign areamin = itemarea -%}

{% endif -%}

{% if itemarea > areamax -%}

{% assign areamax = itemarea -%}

{% endif -%}

{% endfor %}

<option value="*">Location</option>

{% for item in uniqueLocations %}

{% endfor %}

</select>

</div>

<option value="*">Property Type</option>

{% for item in uniquePropType %}

{% endfor %}

</select>

</div>

<option value="*">Bedrooms:</option>

</select>

</div>

<option value="*">Bathrooms:</option>

</select>

</div>

{% comment -%} this hidden section is used by the BC Webapp Search Form...the range sliders drop a value in these fields which are then submitted {% endcomment -%}

<h6>Price Min</h6>

</div>

<h6>Price Max</h6>

</div>

</div>

</div>

<h6>Price</h6>

</div>

</div>

<p class="view-more">More search options <a href="/property-listing">available here</a></p>

</div>

</form>

$(document).ready(function() {

var originalActionUrl = $("#home-search").attr("action"),

priceSliderChanged = false,

areaSliderChanged = false;

function updateAction(){

var action = "";

if ($("#CAT_Custom_12").val() != "*"){action = action + "&loc=" + $("#CAT_Custom_12").val();}

if ($("#CAT_Custom_10").val() != "*"){action = action + "&type=" + $("#CAT_Custom_10").val();}

if ($("#CAT_Custom_7_Min").val() != "*"){action = action + "&bd=" + $("#CAT_Custom_7").val();}

if ($("#CAT_Custom_8_Min").val() != "*"){action = action + "&bth=" + $("#CAT_Custom_8").val();}

if (priceSliderChanged) {

action = action + "&minPrice=" + $("#CAT_Custom_3_Min").val();

action = action + "&maxPrice=" + $("#CAT_Custom_3_Max").val();

}

if (areaSliderChanged) {

action = action + "&minArea=" + $("#CAT_Custom_6_Min").val();

action = action + "&maxArea=" + $("#CAT_Custom_6_Max").val();

}

$("#home-search").attr("action", originalActionUrl + action)

}

$('select').change(function () {

updateAction();

});

// Price Range, init the slider and then update hidden fields with values after the slider is moved

var priceMin = $("#priceRange").data("min");

var priceMin = 0;

var priceMax = $("#priceRange").data("max");

$("#CAT_Custom_3_Min").val(priceMin);

$("#CAT_Custom_3_Max").val(priceMax);

var $range = $(".range");

var track = function() {

var $this = $(this),

value = $this.prop("value").split(";");

$("#CAT_Custom_3_Min").val(value[0]);

$("#CAT_Custom_3_Max").val(value[1]);

};

$range.ionRangeSlider({

hide_min_max: true,

keyboard: true,

min: priceMin,

max: priceMax,

from: priceMin,

to: priceMax,

type: 'double',

step: 1,

prefix: "$",

grid: true,

onFinish: function (data) {

priceSliderChanged = true;

console.log("You changed the price");

updateAction();

}

});

$range.on("change", track);

// Area range slider, init the slider and then update hidden fields with values after the slider is moved

var areaMin = $("#areaRange").data("min");

var areaMax = $("#areaRange").data("max");

$("#CAT_Custom_6_Min").val(areaMin);

$("#CAT_Custom_6_Max").val(areaMax);

var $area = $(".area");

var tracking = function() {

var $this = $(this),

value = $this.prop("value").split(";");

$("#CAT_Custom_6_Min").val(value[0]);

$("#CAT_Custom_6_Max").val(value[1]);

};

$area.ionRangeSlider({

hide_min_max: true,

keyboard: true,

min: areaMin,

max: areaMax,

from: 0,

to: areaMax,

type: 'double',

step: 1,

prefix: "",

grid: true,

onFinish: function (data) {

areaSliderChanged = true;

console.log("You changed the area");

updateAction();

}

});

$area.on("change", tracking);

var priceSlider = $range.data("ionRangeSlider");

var areaSlider = $area.data("ionRangeSlider");

});

function checkWholeForm91340(theForm) {

var why = "";

if (why != "") {

alert(why);

return false;

}

return true;

}

</script>

Below is the code for the copy of the inner panel with search content holder:

{module_webapps id="Property Listings" filter="all" collection="search" template=""}

{% comment -%}{% endcomment -%}

{% assign theLocations = search.items | map:"Property Location" | join:"," | split:"," -%}

{% assign theLocations = theLocations | sort -%}

{% comment -%}{% endcomment -%}

{% assign uniqueLocations = "" -%}

{% for item in theLocations -%}

{% assign theitem = item | strip -%}

{% unless uniqueLocations contains theitem -%}

{% capture uniqueLocations -%}{{ uniqueLocations }},{{ theitem }}{% endcapture -%}

{% endunless -%}

{% endfor -%}

{% assign uniqueLocations = uniqueLocations | remove_first:"," | split:"," -%}

{% comment -%}{% endcomment -%}

{% assign theNeighborhoods = search.items | map:"Neighborhood" | join:"," | split:"," -%}

{% assign theNeighborhoods = theNeighborhoods | sort -%}

{% comment -%}{% endcomment -%}

{% assign uniqueNeighborhoods = "" -%}

{% for item in theNeighborhoods -%}

{% assign theitem = item | strip -%}

{% unless uniqueNeighborhoods contains theitem -%}

{% capture uniqueNeighborhoods -%}{{ uniqueNeighborhoods }},{{ theitem }}{% endcapture -%}

{% endunless -%}

{% endfor -%}

{% assign uniqueNeighborhoods = uniqueNeighborhoods | remove_first:"," | split:"," -%}

{% comment -%}{% endcomment -%}

{% assign thePropType = search.items | map:"Property Type" | join:"," | split:"," -%}

{% assign thePropType = thePropType | sort -%}

{% comment -%}{% endcomment -%}

{% assign uniquePropType = "" -%}

{% for item in thePropType -%}

{% assign theitem = item | strip -%}

{% unless uniquePropType contains theitem -%}

{% capture uniquePropType -%}{{ uniquePropType }},{{ theitem }}{% endcapture -%}

{% endunless -%}

{% endfor -%}

{% assign uniquePropType = uniquePropType | remove_first:"," | split:"," -%}

{% assign pricemin = search.items[0].['Price'] | convert: "number" -%}

{% assign pricemax = search.items[0].['Price'] | convert: "number" -%}

{% assign areamin = search.items[0].['Square Foot Area'] | convert: "number" -%}

{% assign areamax = search.items[0].['Square Foot Area'] | convert: "number" -%}

{% for item in search.items %}

{% assign itemprice = item.['Price'] | convert: "number" -%}

{% assign itemarea = item.['Square Foot Area'] | convert: "number" -%}

{% if itemprice < pricemin -%}

{% assign pricemin = itemprice -%}

{% endif -%}

{% if itemprice > pricemax -%}

{% assign pricemax = itemprice -%}

{% endif -%}

{% if itemarea < areamin -%}

{% assign areamin = itemarea -%}

{% endif -%}

{% if itemarea > areamax -%}

{% assign areamax = itemarea -%}

{% endif -%}

{% endfor %}

<option value=" ">Locations</option>

{% for item in uniqueLocations %}

{% endfor %}

</select>

</div>

<option value=" ">Neighborhoods</option>

{% for item in uniqueNeighborhoods %}

{% endfor %}

</select>

</div>

<option value=" ">Property Type</option>

{% for item in uniquePropType %}

{% endfor %}

</select>

</div>

<h6>Bedrooms</h6>

</select>

</div>

<h6>Bathrooms</h6>

</select>

</div>

{% comment -%} this hidden section is used by the BC Webapp Search Form...the range sliders drop a value in these fields which are then submitted {% endcomment -%}

<h6>Price Min</h6>

</div>

<h6>Price Max</h6>

</div>

</div>

</div>

<h6>Price</h6>

</div>

</div>

</div>

</form>

function searchResultsUpdate() {

$(".search-msg .loc").html( $("#CAT_Custom_12").val() );

$(".search-msg .neighborhood").html( $("#CAT_Custom_14").val() );

$(".search-msg .type").html( $("#CAT_Custom_10").val() );

var bedNum = $("#CAT_Custom_7").val();

if(bedNum >= 0){

$(".search-msg .bd").html( $("#CAT_Custom_7").val() + "+" );

} else {

$(".search-msg .bd").html("");

}

var bathNum = $("#CAT_Custom_8").val();

if(bathNum >= 0){

$(".search-msg .bh").html( $("#CAT_Custom_8").val() + "+" );

} else {

$(".search-msg .bh").html("");

}

$(".search-msg .p-range").html( formatCurrency( $("#CAT_Custom_3_Min").val() ) + " to " + formatCurrency($("#CAT_Custom_3_Max").val() ) );

$(".search-msg .a-range").html( formatNumeric( $("#CAT_Custom_6_Min").val() ) + " to " + formatNumeric($("#CAT_Custom_6_Max").val() ) );

};

function submitForm() {

$(".my-search-results").fadeOut();

var $form = $("#property-search");

var submitForm = $.post($form.attr("action"), $form.serialize(), function (html) {

//alert( "success" );

var response = $(html).find('.webapp-search-results');

$("div.my-search-results").html(response);

searchResultsUpdate();

})

.done(function () {

//alert( "second success" );

})

.fail(function () {

//alert( "error" );

})

.always(function () {

//alert( "finished" );

$(".my-search-results").fadeIn();

});

console.log("got here");

$('.matchheightme').matchHeight();

return false; // prevent normal submit

};

function formatCurrency(theValue) {

var neg = false;

if(theValue < 0) {

neg = true;

total = Math.abs(theValue);

}

theValue = theValue.replace(/,/g, "");

return (neg ? "-$" : '$') + parseFloat(theValue, 10).toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();

}

function formatNumeric(theValue) {

var neg = false;

if(theValue < 0) {

neg = true;

total = Math.abs(theValue);

}

theValue = theValue.replace(/,/g, "");

return parseFloat(theValue, 10).toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();

}

function checkWholeForm8107(theForm) {

submitForm();

return false;

}

$(document).ready(function() {

{% comment -%}If parameters were passed from another page update this pages search fields before submitting the form{% endcomment -%}

{% if globals.get.loc and globals.get.loc != "" -%}

var passedLocation = {{globals.get.loc | json}};

$('#CAT_Custom_12').val(passedLocation);

{% endif -%}

{% if globals.get.nhd and globals.get.nhd != "" -%}

var passedNeighborhood = {{globals.get.nhd | json}};

$('#CAT_Custom_14').val(passedNeighborhood);

{% endif -%}

{% if globals.get.type and globals.get.type != "" -%}

var passedType = {{globals.get.type | json}};

$('#CAT_Custom_10').val(passedType);

{% endif -%}

{% if globals.get.bd and globals.get.bd != "" -%}

var passedBedrooms = {{globals.get.bd | json}};

$('#CAT_Custom_7').val(passedBedrooms);

{% endif -%}

{% if globals.get.bth and globals.get.bth != "" -%}

var passedBathrooms = {{globals.get.bth | json}};

$('#CAT_Custom_8').val(passedBathrooms);

{% endif -%}

{% if globals.get.minPrice and globals.get.minPrice != "" -%}

var priceMin = {{globals.get.minPrice | json}};

{% else -%}

//var priceMin = $("#priceRange").data("min");

var priceMin = 0;

{% endif -%}

{% if globals.get.maxPrice and globals.get.maxPrice != "" -%}

var priceMax = {{globals.get.maxPrice | json}};

{% else -%}

var priceMax = $("#priceRange").data("max");

{% endif -%}

$("#CAT_Custom_3_Min").val(priceMin);

$("#CAT_Custom_3_Max").val(priceMax);

{% if globals.get.minArea and globals.get.minArea != "" -%}

var areaMin = {{globals.get.minArea | json}};

{% else -%}

//var priceMin = $("#areaRange").data("min");

var areaMin = 0;

{% endif -%}

{% if globals.get.maxArea and globals.get.maxArea != "" -%}

var areaMax = {{globals.get.maxArea | json}};

{% else -%}

var areaMax = $("#areaRange").data("max");

{% endif -%}

$("#CAT_Custom_6_Min").val(areaMin);

$("#CAT_Custom_6_Max").val(areaMax);

submitForm();

// Price range slider, init the slider and then update hidden fields with values after the slider is moved

var $range = $(".range");

var track = function() {

var $this = $(this),

value = $this.prop("value").split(";");

$("#CAT_Custom_3_Min").val(value[0]);

$("#CAT_Custom_3_Max").val(value[1]);

};

$range.ionRangeSlider({

hide_min_max: true,

keyboard: true,

min: priceMin,

max: priceMax,

from: priceMin,

to: priceMax,

type: 'double',

step: 1,

prefix: "$",

grid: true,

onFinish: function (data) {

submitForm();

}

});

$range.on("change", track);

// Area range slider, init the slider and then update hidden fields with values after the slider is moved

var $area = $(".area");

var tracking = function() {

var $this = $(this),

value = $this.prop("value").split(";");

$("#CAT_Custom_6_Min").val(value[0]);

$("#CAT_Custom_6_Max").val(value[1]);

};

$area.ionRangeSlider({

hide_min_max: true,

keyboard: true,

min: areaMin,

max: areaMax,

from: 0,

to: areaMax,

type: 'double',

step: 1,

prefix: "",

grid: true,

onFinish: function (data) {

submitForm();

}

});

$area.on("change", tracking);

var priceSlider = $range.data("ionRangeSlider");

var areaSlider = $area.data("ionRangeSlider");

var timer;

$('input.cat_textbox').on('input', function(){

clearTimeout(timer);

timer = setTimeout(submitForm, 600);

});

// submit the form if a dropdown is changed

$('select').change(function () {

submitForm();

});

$("#property-search #resetBtn").click(function() {

priceMin = 0;

priceMax = $("#priceRange").data("max");

areaMin = 0;

areaMax = $("#areaRange").data("max");

priceSlider.reset();

areaSlider.reset();

$range.data("ionRangeSlider").update({min:0});

$range.data("ionRangeSlider").update({from:0});

$range.data("ionRangeSlider").update({max:priceMax});

$range.data("ionRangeSlider").update({to:priceMax});

$area.data("ionRangeSlider").update({min:0});

$area.data("ionRangeSlider").update({from:0});

$area.data("ionRangeSlider").update({max:areaMax});

$area.data("ionRangeSlider").update({to:areaMax});

$('#CAT_txtKeywords').val('');

$('select').val('');

$('input:text').val('');

$("#CAT_Custom_3_Min").val(priceMin);

$("#CAT_Custom_3_Max").val(priceMax);

$("#CAT_Custom_6_Min").val(areaMin);

$("#CAT_Custom_6_Max").val(areaMax);

submitForm();

});

</script>

Below is the code for the property listing page:

<h1>{module_pagename}</h1>

</div>

{module_contentholder, name="Inner Side Panel with Search Copy2"}

</div>

</div>

<h4>You searched for...</h4>

</div>

<div class="medium-4 columns"><strong>Location:</strong><span class="loc"> All </span></div>

<div class="medium-4 columns"><strong>Neighborhood:</strong><span class="neighborhood">All </span></div>

<div class="medium-4 columns"><strong>Property Type:</strong><span class="type"> All Types </span></div>

<div class="medium-6 columns"> <strong># of Bedrooms:</strong><span class="bd"></span></div>

<div class="medium-6 columns"> <strong># of Bathrooms:</strong><span class="bh"></span></div>

<div class="medium-6 columns"><strong>Price Range:</strong><span class="p-range"></span></div>

<div class="medium-6 columns"><strong>Sqft Range:</strong><span class="a-range"></span></div>

</div>

</div>

I need help figuring out why the sliders for the price and square footage are not working on either the index_copy page or the property listing page. Everything else seems to be working fine.

Report · Sep 06, 2017

Just a guess, but could it be that the input value is not matching what BC is expecting to search against or to what is in the WebApp field? perhaps a number/string issue???

Report · Sep 07, 2017

As mentioned by Adam - You can not do range sliders.

BC search is exact match (But also not consistent and not in some cases like classifications, AND A BIT BROKE TOO) BUT if you have a man and min custom field for example.. BC will not pull results of values in between those two values. Just the values of the match.

IF you have 5 steps between two values you would have to tag every step for each of those values for those items to show up at those possible values selected etc.

But that of course does not work properly and cover what you need... So you basically can not do effective range sliders.

Report · Sep 07, 2017

Perhaps once the search results are returned (minus the price and area values) one could use liquid to further filter the results (greater/less than) the price and area values set.

Liam, can the search result become available as a liquid collection? and could you pass the price and area values to the search results/collection via URL parameters???

Just thinking out loud...

Report · Sep 07, 2017

YES, BUT

The results will be minus some items in use cases you will need. So Liquid wont sort it because there will be missing items.

Don't do sliders or projects that require forms of Fuzzy Logic Search results.

BC does not do that.

Report · Sep 08, 2017

Well it seems I actually got the sliders to work. I think it wasn't

working before because I was using text (string) as the field type for the

price and square footage area instead of number. When using number, BC

generates a web app search form with inputs for min and max. So no it's

working perfectly. Take a look at the following link:

http://rentpfi01.bizdev.studio/property-listing

On Thu, Sep 7, 2017 at 6:32 PM, Liam Dilley <forums_noreply@adobe.com>

Report · Sep 09, 2017

I though WebApps did have a min/max search option but didn't have time to jump in are see...

Good to know it was a string/number issue as I initially expected. Glad you got it sorted.

Adobe Community

Help needed with web app search form