Magento Question posted in
The official documentation can be found here.

Change php to can select the html in css – Magento

I have a php code that display all categories of my store, the only problem with this code is give me this structure: ul > li > ul > li. I want to be able to change in css for example the Parent Category to have the color red and Child Category to have the color blue.

I try to use something like:

.sidebar.sidebar-additional ul li:first-child {color: red;}

but is not okay, both texts Parent Category and Child Category have the same red color.

What I can do be able to select both texts separately?

function categoryLoop($id){
    $objectManager = MagentoFrameworkAppObjectManager::getInstance();
    $categories = $objectManager->create('MagentoCatalogModelCategory')->load($id);
    if($categories->hasChildren()){
    echo '<ul>';
        $subcategories = explode(',', $categories->getChildren());
        foreach ($subcategories as $category) {
            $subcategory = $objectManager->create('MagentoCatalogModelCategory')->load($category);
            echo '<li>';
            echo $subcategory->getName();
            echo "</li>";
            if($subcategory->hasChildren()){ categoryLoop($category); }
        }
    echo "</ul>";
    }
}

The html output is:

<ul>
    <li>Parent Category</li>
        <ul>
            <li>Child Category 1</li>
            <li>Child Category 2</li>
            <li>Child Category 3</li>
        </ul>
    </li>
</ul>

Thank you

Tags:

3

Answers


  1. 0

    You can set all li to red, and then target the li you want to be blue, by specifically selecting those that are nested within two ul

    ul li {
  color: red;
}

ul ul li {
  color: blue;
}
    <ul>
  <li>Parent Category
    <ul>
      <li>Child Category 1</li>
      <li>Child Category 2</li>
      <li>Child Category 3</li>
    </ul>
  </li>
</ul>
    Login or Signup to reply.
  2. 0

    you can use the direct child selector ul > li which selects only the direct child and not the lower childs

    ul > li {
    /*the first level*/
}
ul > li > ul > li{
    /*the second level*/
}

    Alternatively:

    function categoryLoop($id){
$objectManager = MagentoFrameworkAppObjectManager::getInstance();
$categories = $objectManager->create('MagentoCatalogModelCategory')->load($id);
if($categories->hasChildren()){
echo '<ul class="second_level">';
    $subcategories = explode(',', $categories->getChildren());
    foreach ($subcategories as $category) {
        $subcategory = $objectManager->create('MagentoCatalogModelCategory')->load($category);
        echo '<li>';
        echo $subcategory->getName();
        echo "</li>";
        if($subcategory->hasChildren()){ categoryLoop($category); }
    }
echo "</ul>";
}

    }

    CSS

    ul > li {color: red}
ul.second_level > li {color: blue}
    Login or Signup to reply.
  3. 0

    There are two ways to get this done:

    1. CSS

    Style the parent as red and the children to blue.

    .container > ul > li {
    color: blue;
}

.container > ul > li > ul > li {
    color: red;
}

    2. PHP

    Output the parent with some predefined class, and children also with a different class:

    <?php

$output = "";
foreach($groups as $group){
    $output .= "<ul class='parent'>";  // <---- add class here
    foreach($parent as $key => $category){
        $children = get_children($key);
        $output .= "<li>" . $category . "</li>";
        if(count($children) > 0){
            $output .= "<ul class='child'>";   // <---- add class here
            foreach($children as $key2 => category2){
                $output .= "<li>" . $category2 . "</li>";        
            } 
            $output .= "</ul>";
        } 
    }
}

    Then with CSS:

    .parent {
    color: blue;
}

.child {
    color: red;
}

    The code you provided should change like this:

    function categoryLoop($id, $is_sub = false){
    $objectManager = MagentoFrameworkAppObjectManager::getInstance();
    $categories = $objectManager->create('MagentoCatalogModelCategory')->load($id);
    if($categories->hasChildren()){
    echo '<ul' . (($is_sub) ? ' class="category_children"' : '') . '>';
        $subcategories = explode(',', $categories->getChildren());
        foreach ($subcategories as $category) {
            $subcategory = $objectManager->create('MagentoCatalogModelCategory')->load($category);
            echo '<li>';
            echo $subcategory->getName();
            echo "</li>";
            if($subcategory->hasChildren()){ categoryLoop($category, true); }
        }
    echo "</ul>";
    }
}

    And then:

    .sidebar.sidebar-additional ul li {
   color: blue;
}

.sidebar.sidebar-additional ul.category_children li {
   color: red;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search