Ajax filter by alphabet

Question

I currently have a template to display subcatogories of a category. I created a new template and added to static block and set that in the category end.

Here is the dev link : http://103.231.209.162:60050/index.php/makers-artists.html

<div class="artists-makers-landing">
<div class="artist-filters">
<div class="row">
    <div class="col-sm-6 filter">
        <a href="">Show Filters</a>
    </div>
    <div class="col-sm-6 artist-pagination">
        <ul class="artist-label">
            <li class="aritst-alpha"><a href="">A</a></li>
            <li class="aritst-alpha"><a href="">B</a></li>
            <li class="aritst-alpha"><a href="">C</a></li>
            <li class="aritst-alpha"><a href="">D</a></li>
            <li class="aritst-alpha"><a href="">E</a></li>
            <li class="aritst-alpha"><a href="">A</a></li>
            <li class="aritst-alpha"><a href="">F</a></li>
            <li class="aritst-alpha"><a href="">G</a></li>
            <li class="aritst-alpha"><a href="">H</a></li>
            <li class="aritst-alpha"><a href="">I</a></li>
            <li class="aritst-alpha"><a href="">J</a></li>
            <li class="aritst-alpha"><a href="">K</a></li>
            <li class="aritst-alpha"><a href="">L</a></li>
            <li class="aritst-alpha"><a href="">M</a></li>
            <li class="aritst-alpha"><a href="">N</a></li>
            <li class="aritst-alpha"><a href="">O</a></li>
            <li class="aritst-alpha"><a href="">P</a></li>
            <li class="aritst-alpha"><a href="">Q</a></li>
            <li class="aritst-alpha"><a href="">R</a></li>
            <li class="aritst-alpha"><a href="">S</a></li>
            <li class="aritst-alpha"><a href="">T</a></li>
            <li class="aritst-alpha"><a href="">U</a></li>
            <li class="aritst-alpha"><a href="">V</a></li>
            <li class="aritst-alpha"><a href="">W</a></li>
            <li class="aritst-alpha"><a href="">X</a></li>
            <li class="aritst-alpha"><a href="">Y</a></li>
            <li class="aritst-alpha"><a href="">Z</a></li>
            <li class="aritst-alpha clear"><a href="">Clear</a></li>                        
        </ul>       
    </div>
  </div>
</div>
<div class="artist-section">
  <div class="row">
<?php
$_categories = $this->getCurrentChildCategories();
if ($_categories->count()):
    $categorycount = 0;
    foreach($_categories as $_category):
        if ($_category->getIsActive()):
            $cur_category = Mage::getModel('catalog/category')->load($_category->getId());
            $layer = Mage::getSingleton('catalog/layer');
            $layer->setCurrentCategory($cur_category);
            $imageName = $cur_category->getImage();
            $mediaUrl = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);
            $catName = $this->getCurrentCategory()->getName();
            $catDesc = $this->getCurrentCategory()->getDescription();
            if ($categorycount == 0) {
                $class = "first";
            }
            elseif ($categorycount == 3) {
                $class = "last";
            }
            else {
                $class = "";
            }
?>
        <div class="col-sm-6 col-md-4 col-lg-3 col-xs-12 padding6">
            <div class="artist-makers-image">
            <a href="<?php echo $_category->getURL() ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>"><img src="<?php echo $mediaUrl . 'catalog/category/' . $imageName; ?>" width="100" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" /></a>
            </div>
            <div class="artist-makers-content">
                <span class="artist-name"><a href="<?php echo $_category->getURL() ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>"><?php echo $this->htmlEscape($_category->getName()) ?></a></span>
                <span class="artist-category">Ceremics</span>
                <span class="artist-location">India</span>
            </div>
        </div>
<?php
    endif;
        $categorycount++;
    endforeach;
endif;
?>
</div>
</div>
</div>

This gets me all the subcatories.There is a filter with alphabets at the top. How can i make this work using ajax.Can someone please help.

Answer 1

The way you would do this is by creating an AjaxController in your module at:

app/code/local/{vendor}/{module}/controllers/AjaxController.php

This controller will handle your AJAX calls/functions, if you want to have an url action called getsubcat the function in AjaxController.php would be called getsubcatAction() and would listen to {site}/{storefront (if set)}/{module}/getsubcat.

Then you also need to change your module's config to handle routing, you can do this by altering:

app/code/local/{vendor}/{module}/etc/config.xml

Inside the config node you'll need to make a <routers> node, the routers node looks like the following:

<routers>
    <{module}>
        <use>standard</use>
        <args>
            <module>{vendor}_{module}</module>
            <frontName>{vendor}</frontName> <-- This is the module part in the url
        </args>
     </{module}>
</routers>

Now you would be able to do an ajax request to {module}/getsubcat and fetch your data. (Keep in mind that statics links don't work if you have a storefront set. (It's a bad practice overall but I forgot the function to generate urls)

If I missed anything I would love to hear.