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 -->
.png.022b5452a8f28f552bc9430097a16da2.png)