0

Dynamic display sub categories(like 7S) clicking main category(like apple)

enter image description here

I am not able to start, can any one suggest something from where to start, or what should I do, to achieve this.

I know I can fetch all category and sub category, but the real task is how to fetch sub category on click of Main category.

Any one please suggest some step, that how this can be achieved, may be I need to use ajax, but I don't know how to do it.

UPDATE 1

UPDATE 2 My module is created with the help of @MIke so posting my code so that it may help some one new in Magento as me .

I trying to create a module for this.

C:\xampp\htdocs\m1\app\code\local\Maddy\Custombrand\controllers\AjaxController.php

<?php
class Maddy_Custombrand_AjaxController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        //echo "hello from controller";
        $params = $this->getRequest()->getParams();
        $parentCategoryId = $params["id"];

        $cat = Mage::getModel('catalog/category')->load($parentCategoryId);
        $subcats = $cat->getChildren();

        // Get 1 Level sub category of Parent category
        echo '<option value="" disabled selected>Select Model</option>';

        foreach (explode(',',$subcats) as $subCatid) {
            $_category = Mage::getModel('catalog/category')->load($subCatid);
            if ($_category->getIsActive()) {
                echo '<option value="'.$_category->getId().'">'.$_category->getName().'</option>';
            }
        }
    }

    public function maddyurlAction()
    {
        $params = $this->getRequest()->getParams();
        $parentCategoryId = $params["iD"];

        // echo "from ajax controller";
        $cat = Mage::getModel('catalog/category')->load($parentCategoryId);
        $urlcat = $cat->getUrl();

        echo '<a href="'.$cat->getUrl().'"> SUBMIT</a>';
    }
}

C:\xampp\htdocs\m1\app\code\local\Maddy\Custombrand\etc\

<?xml version="1.0"?>
    <config>
    <modules>
        <Maddy_Custombrand>
            <version>0.1.0</version>
        </Maddy_Custombrand>
    </modules>
    <frontend>
        <routers>
            <custombrand>
                <use>standard</use>
                <args>
                    <module>Maddy_Custombrand</module>
                    <frontName>custombrand</frontName>
                </args>
            </custombrand>
        </routers>
        <layout>
            <updates>
                <custombrand>
                    <file>custombrand.xml</file>
                </custombrand>
            </updates>
        </layout>
    </frontend>
</config>

C:\xampp\htdocs\m1\app\design\frontend\default\default\template\custombrand\custombrand.php

 <?php
 /*
 Module Name : Maddy_Custombrand
 Author: Created By Saurabh Ranjan
 Description : This page calls controllers using ajax onchange event.
 */

?>
<?php
$parentCategoryId = 251;
$cat = Mage::getModel('catalog/category')->load($parentCategoryId);
$subcats = $cat->getChildren();
?>

<select class="selectBrand">
<option value="" disabled selected>Select Brand</option>
<?php
foreach (explode(',',$subcats) as $subCatid) {
    $_category = Mage::getModel('catalog/category')->load($subCatid);
    if ($_category->getIsActive()) {
        echo '<option value="'.$_category->getId().'">'.$_category->getName().'</option>';
    }
}
?>
</select>


<select id="mySelect">
    <option value="" disabled selected>Select Model</option>
</select>


<div id="submitlink"> <a href="">SUBMIT</a></div>

<script type="text/javascript">
/*
jQuery(".businessTypePullDown").change(function(){
    var categoryId = this.value;
    alert( categoryId );
});
*/


jQuery(document).ready(function () {
    jQuery('.selectBrand').change(function() {
        var categoryId = this.value;
        //alert( categoryId );
        jQuery.ajax({
            type: "GET",
            url: "<?php echo $this->getUrl('custombrand/ajax/index') ?>",
            data:   "id="+ categoryId,
            success: function(html) {
                jQuery("#mySelect").html(html);
            },
            error: function() {
                $('#mySelect').html('An error occurred');
            }
        });
    });

    jQuery('#mySelect').change(function() {
        var categoryId = this.value;
        //alert( categoryId );
        jQuery.ajax({
            type: "GET",
            url: "<?php echo $this->getUrl('custombrand/ajax/maddyurl') ?>",
            data:   "iD="+ categoryId,
            success: function(html) {
                jQuery("#submitlink").html(html);
            },
            error: function() {
                $('#submitlink').html('An error occurred');
            }
        });
    });
});
</script>

Thank you.

0

Create a controller to return the subcategories of the ID provided (i.e APPLE) and use AJAX to get the categories on change of the Brand Select Field and after successfull AJAX request load the returned values

Add the following script in your respective phtml inside <script type="text/javascript"></script> tag

jQuery(document).ready(function () {
    jQuery('#brand').change(function(){
        jQuery.ajax({
            type: "GET",
            url: "path/to/controller",
            data:   "id="+ categoryId
            success: function(html){
                jQuery("#mySelect").html(html);
            }
        });
    });
});

Update the select field ID to match your brand and brand options.

Note: Make sure you have loaded the jQuery.js in your header.

  • Thank you for suggestions, let me create the module, if stuck i will ask again – inrsaurabh Jul 13 '17 at 8:38
  • where to write this ajax function – inrsaurabh Jul 13 '17 at 9:05
  • You have write this in your script file or in our respective phtml. – Mike Jul 13 '17 at 9:23
  • i update my post can you see once , i never worked on ajax in magento – inrsaurabh Jul 13 '17 at 9:40
  • Updated my answer – Mike Jul 13 '17 at 9:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.