MiniVend Akopia Services

[Date Prev][Date Next][Thread Prev][Thread Next][Minivend by date ][Minivend by thread ]

Advanced Search using minivend + javascript



Some time ago, I posted a question on this mailing-list but did not get an
answer... I thought about it and finally figured out a solution...

One of you might have tried to customize a Search page with Minivend but felt
limited when allowing the user to customize the search fields/values using an
HTML Form... here is the answer to that problem; 

The key here is to create a one-click search and POST-PROCESS the "HREF" value
before actually returning it to minivend. I find that method to be very flexible compared 
to the Minivend's [process-search] method. 

I provide a source code example from what you can derive your own page. 
Here it is:

------8<------ cut here -----8<------

<html> 
<head>
<script language="JavaScript">

<!--
function processForm(myLink)
{
   var idx,str,val1,val2,retVal;
   var popular,newProduct,awards,day_care;
   var language,searchText,fieldName,designed;
   var price,rangeMin,rangeMax;

   language 	= document.srchForm.language;
   searchText	= document.srchForm.searchText;
   fieldName	= document.srchForm.fieldName;
   designed	= document.srchForm.designed;

   popular	= document.srchForm.is_popular;
   newProduct	= document.srchForm.is_new;
   awards	= document.srchForm.awards;
   day_care	= document.srchForm.day_care_suitable;

   price	= document.srchForm.price;

   str = "";
   retVal = true;

// Get the Design location from the listbox
   idx = designed.selectedIndex;
   if( idx != 0 )
   {
      val1 = designed.options[idx].value; 
      str += "/su=no/sf=conception/se=" + val1;
   }

// Get the Language from the listbox
   idx = language.selectedIndex;
   if( idx != 0 )
   {
      val1 = language.options[idx].value; 
      str += "/su=no/sf=toy_language/se=" + val1;
   }
        
// Get the Field Name from the listbox & searchText from textarea
   idx = fieldName.selectedIndex;
   if( idx != 0 )
   {
      val1 = fieldName.options[idx].value; 
      val2 = searchText.value;
      if (val2 == "")
      {
         alert("[L]You must enter a text value for text search[/L].");
         retVal = false;
      }
      str += "/su=yes/sf=" + val1 + "/se=" + val2;
   }

   if( popular.checked == true )
   {
      str += "/su=no/sf=is_popular/se=1"
   }

   if( newProduct.checked == true )
   {
      str += "/su=no/sf=is_new/se=1"
   }

   if( awards.checked == true )
   {
      str += "/su=no/sf=awards/se=1"
   }

   if( day_care.checked == true )
   {
      str += "/su=no/sf=day_care_suitable/se=1"
   }

   if( price.checked == true )
   {
      rangeMin = document.srchForm.range_min.value;
      rangeMax = document.srchForm.range_max.value;
      if (rangeMin >= rangeMax)
      {
         alert("[L]Invalid price range[/L].");
         retVal = false;
      }
      str += "/rl=price" + "/rm=" + rangeMin + "/rx=" + rangeMax;
   }

/* parse the HREF value built by [area scan] to find the previous and next
 * substring where to insert our new query parameters
 * everything after "/st=sql" and before "?" in the HREF
 * will be replaced by our new query parameters
 */
   idx = myLink.href.lastIndexOf("sql") + 3; // inserts right after "/st=sql"
   prevStr = myLink.href.substring(0,idx); // insert before "?"      

   idx = myLink.href.lastIndexOf("?");
   nextStr = myLink.href.substring(idx, myLink.href.length-1);      
    
// insert our parameters in between
   myLink.href = prevStr + str + nextStr;

   return retVal;
}
-->
</script>

[body 1]

<table align=center>  <td>
<FORM name="srchForm" onSubmit="return false;"> 

  [L]Designed in[/L]:
  <SELECT name="designed" size="1"> 
  <OPTION value="default"> [L]-select design location-[/L]
  <OPTION value="1"> [L]quebec[/L]
  <OPTION value="2"> [L]canada[/L]
  <OPTION value="3"> [L]other[/L]
  </SELECT><BR>
  <BR>

  [L]Toy language[/L]:
  <SELECT name="language" size="1"> 
  <OPTION value="default"> [L]-select language-[/L]
  <OPTION value="1"> [L]french[/L]
  <OPTION value="2"> [L]english[/L]
  <OPTION value="3"> [L]french & english[/L]
  <OPTION value="4"> [L]french, english & others[/L]
  </SELECT> <BR>
  <BR>
    
  [L]Search text field[/L]: <BR>
  <SELECT name="fieldName" size="1"> 
  <OPTION value="default"> [L]-select search field-[/L]
  <OPTION value="brand"> [L]brand[/L]
  <OPTION value="[L]toy_name[/L]"> [L]toy name[/L]
  </SELECT>
  <INPUT type="text" size="20" name="searchText" value=""><BR>
  <BR> 
  
  <INPUT type="checkbox" name="is_popular"> [L]Popular products[/L] <BR>
  <INPUT type="checkbox" name="is_new" > [L]New products[/L] <BR>
  <INPUT type="checkbox" name="awards" > [L]Awarded products[/L] <BR>
  <INPUT type="checkbox" name="day_care_suitable" > [L]Day-care suitable products[/L] <BR>
  <BR>

  <INPUT TYPE=checkbox NAME="price"> [L]Price range[/L]: &nbsp;&nbsp;
  
  [L]from[/L]: &nbsp;<INPUT type="text" size="10" name="range_min" value="10">
  [L]to[/L]: &nbsp; <INPUT type="text" size="10" name="range_max" value="15"> <BR>
  <BR>
  
</FORM>     
</td>
<tr><td>

<A MV="area scan os=no/ml=10/tf=price,code/st=sql" HREF="scan.html" onClick="'return processForm(this)'">[L]search[/L]</A>

</td></tr>
</table>

</body> 
</html>

------8<------ cut here -----8<------

Any questions/comments can be sent to me, I'll be happy to help!

-- marc

Useless Invention: How-to cassettes for the deaf.


[body 1]
[L]Designed in[/L]:

[L]Toy language[/L]:

[L]Search text field[/L]:


[L]Popular products[/L]
[L]New products[/L]
[L]Awarded products[/L]
[L]Day-care suitable products[/L]

[L]Price range[/L]:    [L]from[/L]:   [L]to[/L]:  

[L]search[/L]

Search for: Match: Format: Sort by: