Jump to content

Edit History

Sean Raviolli

Sean Raviolli

And this to GENERATE those requests. i modified my blockcategories from my theme, but should be applicable to default module as well:

{$showMMY = !($page_name == 'category' || $page_name == 'product')}
<!-- straight up JS to make MMY working. -->
{if $showMMY }
{literal}
<script type='text/javascript'>
$(document).ready(function() {
// make sure we are on the same page
if ( $('ul.mmy-selector').length > 0 ){
 // Change page's name
 $('#top-categ').find('span').text('Make, Model, Year Search');
 // load the makes initially.
 $.ajax({
   url: '/modules/blocklayered/blocklayered-ajax-r.php',
   data: {mode: 4},
   type: "POST",
  dataType: "JSON",
   success: function (makes){$.each (makes, function (){
  // Append the option bar
  $('#make-selector')
  .append($("<option></option>")
  .attr("value",this.id_attribute)
  .text(this.name));
  });
  $('#make-selector').parent().find('.mmy-loader').hide();
   },
 });
 // Bind event to this one's change attr and fill up the models
 $(document).on('change', '#make-selector', function(){
   $('#model-selector').parent().find('.mmy-loader').show();
   // Send another AJAX request with mode 5 (model) and key 4 (make)
   $.ajax({
   url: '/modules/blocklayered/blocklayered-ajax-r.php',
   data: {mode: 5, make: $('#make-selector').val()},
   type: "POST",
	 dataType: "JSON",
   success: function (models){
    // remove previous options rather than nullifier
    $('#model-selector')
	  .find('option')
	  .remove()
	  .end()
	  .append('<option disabled="disabled" selected="selected">Select...</option>');

   $.each (models, function (){
	 // Append the option bar
	 $('#model-selector')
	 .append($("<option></option>")
	 .attr("value",this.id_attribute)
	 .text(this.name));
   });
  $('#model-selector').parent().find('.mmy-loader').hide();
   },
   });
 });
 // Bind event to model change. pick up years and we're ready to go
 $(document).on('change', '#model-selector', function(){
   $('#year-selector').parent().find('.mmy-loader').show();
   // Send another AJAX request with mode 5 (model) and key 4 (make)
   $.ajax({
   url: '/modules/blocklayered/blocklayered-ajax-r.php',
   data: {mode: 6, make: $('#make-selector').val(), model: $('#model-selector').val()},
   type: "POST",
	 dataType: "JSON",
   success: function (years){
    // remove previous options rather than nullifier
    $('#year-selector')
	  .find('option')
	  .remove()
	  .end()
	  .append('<option disabled="disabled" selected="selected">Select...</option>');

   $.each (years, function (){
	 // Append the option bar
	 $('#year-selector')
	 .append($("<option></option>")
	 .attr("value",this.id_attribute)
	 .text(this.name));
   });
   $('#year-selector').parent().find('.mmy-loader').hide();
   },
   });
 });
 // Bind event to the button
 $(document).on('click', '#mmy-go', function(){
  if ($("#make-selector ")[0].selectedIndex <= 0) {
		    $("#make-selector").prev().css({color:'red'});
		    return false;
	    }
  if ($("#model-selector ")[0].selectedIndex <= 0) {
		    $("#model-selector").prev().css({color:'red'});
		    return false;
	    }
  if ($("#year-selector ")[0].selectedIndex <= 0) {
		    $("#year-selector").prev().css({color:'red'});
		    return false;
	    }
	    // Down here everything is fine, we can simply go
	    var searchString = $('#make-selector option:selected').text() + ' ' +  $('#model-selector option:selected').text() + ' ' + $('#year-selector option:selected').text() ;

	    // paste it into the search box
	    $('#search_query_top').val(searchString);
	    // hit submit
	    $('#search_query_top').next().click();
 });
// End ready and if
}
}); 
</script>
{/literal}
{/if}
<!-- Block categories module -->
<div id="categories_block_left" class="demo-container block">
<div class="tptn-vertical-mega-menu">
{if $showMMY }
<!-- Do the triple level select boxes and a submit button for MMY search -->
<ul id="mega-1" class="menu right mmy-selector">
 <li>
  <a href="#">
  <label for="make-selector">Make: </label>
  <select name="make-selector" id="make-selector">
   <option disabled="disabled">Select...</option>
  </select>
  <img src="{$img_ps_dir}mmy-loader.gif" class="middle mmy-loader" alt="" id="stores_loader" />   </a>
 </li>
 <li>
  <a href="#">
  <label for="model-selector">Model: </label>
  <select name="model-selector" id="model-selector">
   <option disabled="disabled">Select Make.</option>
  </select>
  <img src="{$img_ps_dir}mmy-loader.gif" class="middle mmy-loader" alt="" id="stores_loader" style="display: none; !important;" />   </a>
  </a>
 </li>
 <li>
  <a href="#">
  <label for="year-selector">Year: </label>
  <select name="year-selector" id="year-selector">
   <option disabled="disabled">Select Make.</option>
  </select>
  <img src="{$img_ps_dir}mmy-loader.gif" class="middle mmy-loader" alt="" id="stores_loader" style="display: none; !important;" />   </a>
  </a>
 </li>
 <li>
  <a href="#">
  <button id="mmy-go"> Find my Part</button>
  </a>
 </li> 
</ul>

{else}
 <ul id="mega-1" class="menu right">
 {foreach from=$blockCategTree.children item=child name=blockCategTree}
  {if $smarty.foreach.blockCategTree.last}
   {include file="$branche_tpl_path" node=$child last='true'}
  {else}
   {include file="$branche_tpl_path" node=$child}
  {/if}
 {/foreach}
 </ul>
{/if}
</div>
</div>
<!-- /Block categories module -->
 
Sean Raviolli

Sean Raviolli

And this to GENERATE those requests. i modified my blockcategories from my theme, but should be applicable to default module as well:

{$showMMY = !($page_name == 'category' || $page_name == 'product')}
<!-- straight up JS to make MMY working. Anooshirvan Roozrokh [email protected] -->
{if $showMMY }
{literal}
<script type='text/javascript'>
$(document).ready(function() {
// make sure we are on the same page
if ( $('ul.mmy-selector').length > 0 ){
 // Change page's name
 $('#top-categ').find('span').text('Make, Model, Year Search');
 // load the makes initially.
 $.ajax({
   url: '/modules/blocklayered/blocklayered-ajax-r.php',
   data: {mode: 4},
   type: "POST",
  dataType: "JSON",
   success: function (makes){$.each (makes, function (){
  // Append the option bar
  $('#make-selector')
  .append($("<option></option>")
  .attr("value",this.id_attribute)
  .text(this.name));
  });
  $('#make-selector').parent().find('.mmy-loader').hide();
   },
 });
 // Bind event to this one's change attr and fill up the models
 $(document).on('change', '#make-selector', function(){
   $('#model-selector').parent().find('.mmy-loader').show();
   // Send another AJAX request with mode 5 (model) and key 4 (make)
   $.ajax({
   url: '/modules/blocklayered/blocklayered-ajax-r.php',
   data: {mode: 5, make: $('#make-selector').val()},
   type: "POST",
	 dataType: "JSON",
   success: function (models){
    // remove previous options rather than nullifier
    $('#model-selector')
	  .find('option')
	  .remove()
	  .end()
	  .append('<option disabled="disabled" selected="selected">Select...</option>');

   $.each (models, function (){
	 // Append the option bar
	 $('#model-selector')
	 .append($("<option></option>")
	 .attr("value",this.id_attribute)
	 .text(this.name));
   });
  $('#model-selector').parent().find('.mmy-loader').hide();
   },
   });
 });
 // Bind event to model change. pick up years and we're ready to go
 $(document).on('change', '#model-selector', function(){
   $('#year-selector').parent().find('.mmy-loader').show();
   // Send another AJAX request with mode 5 (model) and key 4 (make)
   $.ajax({
   url: '/modules/blocklayered/blocklayered-ajax-r.php',
   data: {mode: 6, make: $('#make-selector').val(), model: $('#model-selector').val()},
   type: "POST",
	 dataType: "JSON",
   success: function (years){
    // remove previous options rather than nullifier
    $('#year-selector')
	  .find('option')
	  .remove()
	  .end()
	  .append('<option disabled="disabled" selected="selected">Select...</option>');

   $.each (years, function (){
	 // Append the option bar
	 $('#year-selector')
	 .append($("<option></option>")
	 .attr("value",this.id_attribute)
	 .text(this.name));
   });
   $('#year-selector').parent().find('.mmy-loader').hide();
   },
   });
 });
 // Bind event to the button
 $(document).on('click', '#mmy-go', function(){
  if ($("#make-selector ")[0].selectedIndex <= 0) {
		    $("#make-selector").prev().css({color:'red'});
		    return false;
	    }
  if ($("#model-selector ")[0].selectedIndex <= 0) {
		    $("#model-selector").prev().css({color:'red'});
		    return false;
	    }
  if ($("#year-selector ")[0].selectedIndex <= 0) {
		    $("#year-selector").prev().css({color:'red'});
		    return false;
	    }
	    // Down here everything is fine, we can simply go
	    var searchString = $('#make-selector option:selected').text() + ' ' +  $('#model-selector option:selected').text() + ' ' + $('#year-selector option:selected').text() ;

	    // paste it into the search box
	    $('#search_query_top').val(searchString);
	    // hit submit
	    $('#search_query_top').next().click();
 });
// End ready and if
}
}); 
</script>
{/literal}
{/if}
<!-- Block categories module -->
<div id="categories_block_left" class="demo-container block">
<div class="tptn-vertical-mega-menu">
{if $showMMY }
<!-- Do the triple level select boxes and a submit button for MMY search -->
<ul id="mega-1" class="menu right mmy-selector">
 <li>
  <a href="#">
  <label for="make-selector">Make: </label>
  <select name="make-selector" id="make-selector">
   <option disabled="disabled">Select...</option>
  </select>
  <img src="{$img_ps_dir}mmy-loader.gif" class="middle mmy-loader" alt="" id="stores_loader" />   </a>
 </li>
 <li>
  <a href="#">
  <label for="model-selector">Model: </label>
  <select name="model-selector" id="model-selector">
   <option disabled="disabled">Select Make.</option>
  </select>
  <img src="{$img_ps_dir}mmy-loader.gif" class="middle mmy-loader" alt="" id="stores_loader" style="display: none; !important;" />   </a>
  </a>
 </li>
 <li>
  <a href="#">
  <label for="year-selector">Year: </label>
  <select name="year-selector" id="year-selector">
   <option disabled="disabled">Select Make.</option>
  </select>
  <img src="{$img_ps_dir}mmy-loader.gif" class="middle mmy-loader" alt="" id="stores_loader" style="display: none; !important;" />   </a>
  </a>
 </li>
 <li>
  <a href="#">
  <button id="mmy-go"> Find my Part</button>
  </a>
 </li> 
</ul>

{else}
 <ul id="mega-1" class="menu right">
 {foreach from=$blockCategTree.children item=child name=blockCategTree}
  {if $smarty.foreach.blockCategTree.last}
   {include file="$branche_tpl_path" node=$child last='true'}
  {else}
   {include file="$branche_tpl_path" node=$child}
  {/if}
 {/foreach}
 </ul>
{/if}
</div>
</div>
<!-- /Block categories module -->

×
×
  • Create New...