Product Finder: multiple category drop-downs

[whitsolltd]

Hi All

Thanks for this great mod. I've successfully integrated it into my site but am trying to get some styling on the <option> elements. Background images and height specifically.

This works great in firefox but other browsers don't allow this to be changed.

Therefore I'm trying to integrate this:

http://www.dfc-e.com/metiers/multime...e/jqtransform/

Once this is installed it seems to kill the auto update after you select the first dropdown. The first category shows in the first option box but then option box 2 just shows 'Please Select'

Any ideas how to overcome this? I guess it's some sort of conflict but Jquery/JS aren't strong points of mine.

This could potentially make an excellent 'select product wizard'. Which is the goal.

Thanks in advance

[Design75]

Hi All

Thanks for this great mod. I've successfully integrated it into my site but am trying to get some styling on the <option> elements. Background images and height specifically.

This works great in firefox but other browsers don't allow this to be changed.

Therefore I'm trying to integrate this:

http://www.dfc-e.com/metiers/multime...e/jqtransform/

Once this is installed it seems to kill the auto update after you select the first dropdown. The first category shows in the first option box but then option box 2 just shows 'Please Select'

Any ideas how to overcome this? I guess it's some sort of conflict but Jquery/JS aren't strong points of mine.

This could potentially make an excellent 'select product wizard'. Which is the goal.

Thanks in advance

without a link to your site we can only guess what is wrong, please post a link

[whitsolltd]

Thanks and you are correct - I was just putting the module back on.

Not at all styled but here it is with three drop down selectors:

http://www.dev-dev.co.uk/event_life/

[Design75]

You are loading two versions of Jquery.
First you start with:
includes/templates/eventlife/jscript/jquery-1.3.2.min.js

And further down you are loading
<script type="text/javascript" src="http://www.dev-dev.co.uk/event_life/js/jquery.js" ></script>

I think you can delete the last one, but may take some trial and error

[whitsolltd]

Thanks for this

I've had an experiment with this but regardless of which library I call I can only get one function or the other.

I guessed this may be some sort of conflict. Anyway to merge the 2 libraries or identify where the conflict is occurring?

The drop down script requires jquery-1.3.2.min.js and jscript_model_year.js

The styling script requires jquery.js and jquery.jqtransform.js

I've tried using the noconflict methods in the past but never had any luck with it.

Thanks again for your help. Much appreciated.

[whitsolltd]

OK, so I'm now looking to abandon the styling script and keep the menus.

What I would really like to do is convert it from a drop down to a radio button/list menu. Has anybody tried this and if so what did you do?

I have created a custom function in html_output.php and changed <option> to a few tags but it just stops working completely.

Any help appreciated as always.

Thanks

[torvista]

The drop down script requires jquery-1.3.2.min.js and jscript_model_year.js

The styling script requires jquery.js and jquery.jqtransform.js

The drop-down requires jquery, it works with jquery version 1.3.2 and I am currently using it with 1.82 so I would assume it works with all versions inbetween.
You just have to load one version of jquery that will be used by any other scripts on the page.
Look at the start of the jquery code to see what version it is.
It should be loaded before the drop-down...i.e. if you have moved the other scripts to the bottom of the page, the jquery call must still be at the top.

[jwaynehinkle]

I am in the process of modding this mod lol, I am trying to add a 4th drop down before it populates data in my store it goes year>make>model>engine before populating a page. I have edited the jscript_model_year.php file to read this

<!-- Product Finder mod
/includes/templates/YOUR_TEMPLATE/jscript/jscript_model_year.php
@license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
@version $Id: jscript_model_year.php 2010-09-29-->

<script type="text/javascript"><!--

$(document).ready(function(){
                            $("#cPath").change(modelList);
                            $("#select_model").change(yearList);
                            $("#select_year").change(engineList);
                            //$("#select_engine").focus();
                            $("#select_engine").change(function()
                                                            {
                              var baseDirectory=document.getElementById("basemodulepath").value;
                                                            var cPath1=$("#cPath").val();
                                                            var cPath2=$("#select_model").val();
                                                            var cPath3=$("#select_year").val();
                                                            var cPath4=$("#select_engine").val();
                                 window.location=(baseDirectory+"index.php?main_page=index&cPath="+cPath1+"_"+cPath2+"_"+cPath3+"_"+cPath4);
                                        }
                                     );
                          });
var modelList=function model_list(){
                            var baseDirectory=document.getElementById("basemodulepath").value;
                            var cPath=document.getElementById("cPath").value;
                            $.ajax({
                            type: 'POST',
                            url:baseDirectory+"modellist.php",
                            data:"cPath="+cPath+"&my=1",
                            success: function(data){
                                                // alert(data);
                                                if(data!=""){
                                                arrayVar=new Array();
                                                 arrayVar=data.split("|");
                                                 arrayVarId=new Array();
                                                 arrayVarId=arrayVar[0].split("^");
                                                 arrayVarName=new Array();
                                                 arrayVarName=arrayVar[1].split("^");
                                                 $('#select_model').html("");
                                         $('#select_model').append("<option value=''><?php echo TEXT_PLEASE_SELECT; ?><\/option>");
                                             for(i=1;i<arrayVarId.length-1;i++)
                                                {
            $('#select_model').append($("<option><\/option>").attr("value",arrayVarId[i]).text(arrayVarName[i])); 
                                                 }
                                        }
                                 }
                             });
                       };
var yearList=function year_list(){
                            var baseDirectory=document.getElementById("basemodulepath").value;
                            var cPath=document.getElementById("cPath").value;
                            $.ajax({
                            type: 'POST',
                            url:baseDirectory+"modellist.php",
                            data:"cPath="+cPath+"&my=2",
                            success: function(data){
                                                // alert(data);
                                                if(data!=""){
                                                arrayVar=new Array();
                                                 arrayVar=data.split("|");
                                                 arrayVarId=new Array();
                                                 arrayVarId=arrayVar[0].split("^");
                                                 arrayVarName=new Array();
                                                 arrayVarName=arrayVar[1].split("^");
                                                 $('#select_year').html("");
                                         $('#select_year').append("<option value=''><?php echo TEXT_PLEASE_SELECT; ?><\/option>");
                                             for(i=1;i<arrayVarId.length-1;i++)
                                                {
            $('#select_year').append($("<option><\/option>").attr("value",arrayVarId[i]).text(arrayVarName[i])); 
                                                 }
                                        }
                                 }
                             });
                       };
var engineList=function engine_list(){
                            var baseDirectory=document.getElementById("basemodulepath").value;
                            var cPath=document.getElementById("select_engine").value;
                            $.ajax({
                            type: 'POST',
                            url:baseDirectory+"modellist.php",
                            data:"cPath="+cPath+"&my=3",
                            success: function(data){
                                                if(data!=""){
                                                 arrayVar=new Array();
                                                 arrayVar=data.split("|");
                                                 arrayVarId=new Array();
                                                 arrayVarId=arrayVar[0].split("^");
                                                 arrayVarName=new Array();
                                                 arrayVarName=arrayVar[1].split("^");
                                                 $('#select_engine').html("");
                                                 $('#select_engine').append("<option value=''><?php echo TEXT_PLEASE_SELECT; ?><\/option>");
                                                 
                                             for(i=1;i<arrayVarId.length-1;i++)
                                                {
            $('#select_engine').append($("<option><\/option>").attr("value",arrayVarId[i]).text(arrayVarName[i])); 
                                               }
                                        }
                                   }
                             });
                        };
//--></script>

and I have edited the tpl_product_finder_php file to read this

<?php
/**
 * blank sidebox - allows a blank sidebox to be added to your site
 *
 * @package templateSystem
 * @copyright 2007 Kuroi Web Design
  * @copyright Portions Copyright 2003-2007 Zen Cart Development Team
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: blank_sidebox.php 2007-05-26 kuroi $
 */

  $content = '';
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">';
  //$content .= '<p>' . TEXT_BLANK_SIDEBOX . '</p>';
  //<!--BOF Product Finder-->
    $content .= '<form action="">';            

    $content .= '<div>' . "\n" . '<div>';
      
        $model1[]=array('id'=>'','text'=>TEXT_PLEASE_SELECT);
            if(isset($_REQUEST['cPath1'])){
            $value=$_REQUEST['cPath1'];
            }     
    $content .= '<span id="pf_title">'.strip_tags(TEXT_FIND_ALL_PRODUCTS).'</span>
    <span class="pf_selectbox_name">'.TEXT_MAKE . "</span>" . zen_draw_pull_down_menu('cPath1',array_merge($model1,zen_get_category_tree()),$value, 'id="cPath" class="pf_selectbox_text"'); 
    
    $content .= '</div>' . "\n";
   
    $content .= '<div class="pf_noscript">';   
    $content .= '<noscript>';
        $content .= zen_my_image_submit(PF_NOSCRIPT_SUBMIT, "Go");
              if($_REQUEST['cPath1']!=""){
                   $value=$_REQUEST['cPath1'];
                   $dropdownArray=zen_get_category_tree($value);
               }
    $content .= '</noscript>';
    $content .= '</div>' . "\n";    

    $content .= '<div>';
        $modulePath="".DIR_WS_CATALOG;
        $content .= zen_draw_hidden_field('basemodulepath',$modulePath,'id="basemodulepath" ');
        $model=array();
        $model[]=array('id'=>'',
            'text'=>TEXT_PLEASE_SELECT
             );
                if($_REQUEST['cPath1']!=""){
                    $model=array_merge($model,$dropdownArray);
                    }
                if(isset($_REQUEST['select_model'])){
                $value=$_REQUEST['select_model'];
                }
        $content .= '<span class="pf_selectbox_name">' . TEXT_MODEL .'</span>' 
        . zen_draw_pull_down_menu('select_model', $model, $value, 'id="select_model" class="pf_selectbox_text"'); 
    $content .= '</div>' . "\n";

    $content .= '<div class="pf_noscript">';
    $content .= '<noscript>';
        if($_REQUEST['select_model']!=""){
            $value=$_REQUEST['select_model'];
            $dropdownArray=zen_get_category_tree($value); 
            }
        $content .= zen_my_image_submit(PF_NOSCRIPT_SUBMIT, 'Go');     
    $content .= '</noscript>';
    $content .= '</div>' . "\n";

        $content .= '<div>';
        $modulePath="".DIR_WS_CATALOG;
        $content .= zen_draw_hidden_field('basemodulepath',$modulePath,'id="basemodulepath" ');
        $year=array();
        $year[]=array('id'=>'',
            'text'=>TEXT_PLEASE_SELECT
             );
                if($_REQUEST['cPath1']!=""){
                    $model=array_merge($year,$dropdownArray);
                    }
                if(isset($_REQUEST['select_year'])){
                $value=$_REQUEST['select_year'];
                }
        $content .= '<span class="pf_selectbox_name">' . TEXT_YEAR .'</span>' 
        . zen_draw_pull_down_menu('select_year', $year, $value, 'id="select_year" class="pf_selectbox_text"'); 
    $content .= '</div>' . "\n";

    $content .= '<div class="pf_noscript">';
    $content .= '<noscript>';
        if($_REQUEST['select_year']!=""){
            $value=$_REQUEST['select_year'];
            $dropdownArray=zen_get_category_tree($value); 
            }
        $content .= zen_my_image_submit(PF_NOSCRIPT_SUBMIT, 'Go');     
    $content .= '</noscript>';
    $content .= '</div>' . "\n";

    $content .= '<div>';
        $engine=array();
        $engine[]=array('id'=>'',
            'text'=>TEXT_PLEASE_SELECT
            );
        if($_REQUEST['select_year']!=""){
            $engine=array_merge($engine,$dropdownArray);
            }                                  
        if(isset($_REQUEST['cPath'])){
        $value=$_REQUEST['cPath'];
        }
        if($_REQUEST['select_year']!=""){
        $content .= '<span class="pf_selectbox_name">' . TEXT_ENGINE . '</span>' . 
        zen_draw_pull_down_menu('cPath',$engine , $value, 'id="select_engine" class="pf_selectbox_text"');
        }
        else {
        $content .= '<span class="pf_selectbox_name">' . TEXT_ENGINE .'</span>' .
        zen_draw_pull_down_menu('cPath22',$engine , $value, 'id="select_engine" class="pf_selectbox_text"');
        }     
    $content .= '</div>' . "\n";

    $content .= '<div class="pf_noscript">';
    $content .= '<noscript>';
        if($_REQUEST['cPath']!=""){
            $value=$_REQUEST['cPath'];
            }
        $content .= zen_my_image_submit(PF_NOSCRIPT_SUBMIT, 'Go');
    $content .= '</noscript>';
    $content .= '</div>' . "\n";

    $content .= '</div>';
    $content .= '</form>';
  //<!--EOF Product Finder-->
  $content .= '</div>';
?>

I think I have edited these right, however I could have made a mistake somewhere, or need to edit another file somewhere.

anyways here is my "bullys performance dot com"

let me know if any of you all have any thoughts.

[jwaynehinkle]

I am thinking that I need to modify the modellist.php file also, but I am not sure where to start with that one, I was able to create the new box for the 4th drop down, and also I believe that the jquery is correct, now to modify this one, the rest of the files I believe in this module are fine and do not to be modified for a 4th drop down I will keep working on this and see if I can come up with something special.

[torvista]

anyways here is my "bullys performance dot com"

Where are the drop-downs....?