Display the first item's results of the filtered categories first

Questions
1

Silverstripe Version: 4

Question: I need help with displaying the results of the first category when a user visits the page first time.

I have a page where it lists online courses under each course category. I need help with displaying the results of the first category when a user visits the page first time. For ex: I want to show the courses in under Microsoft category first whenever a user visits the page. Currently the Microsoft category tab is active on the first load but all the courses under each category are shown. However if I click any category tab, it displays the courses relevent to each category correctly. Theres no issue in that. I only want to display the Courses under first category which is ‘Microsoft’ when a user visits the page first time.

image
image1228×515 30.9 KB

Working photo when a tab is clicked:

image
image1130×327 9.4 KB

How I want it to view when the page load first:

image
image1150×488 21.1 KB

Thanks.

// Template.ss

<div class="filter-menu -mx-4 py-4">

    <% if $Categories %>
        <ul class="flex flex-wrap px-2">
            <% loop $Categories %>
                <li class="filter-menu__item mx-2 mb-2 <% if $Category =='Microsoft' %> active <% end_if %>" active data-filter=".$LowerCaseName">
                    <a class="button">$Category</a>
                </li>
            <% end_loop %>
        </ul>
    <% end_if %>

</div>
<div class="-mx-4">
    <% if $Courses %>
        <ul class="filter-items flex flex-wrap">
            <% loop $courses %>
                <li class="item $Category.LowerCaseName p-4 w-full md:w-1/2 lg:w-1/3">
                    <a href="$Top.CoursesPageURLSegment/course/$URLSegment"
                       class="bottom-border w-full h-full py-4 block flex items-center justify-between">
                        <div class="flex flex-wrap">
                            <% if $Icon.Extension == 'svg' %>
                                <img class="w-1/6" src="$Icon.URL">
                            <% else %>
                                <img class="w-1/6" src="$Icon.Fill(100, 100).URL">
                            <% end_if %>
                            <span class="mt-5 pl-3">$Title</span>
                        </div>
                        <span class="w-6">
                            <% include Icons Icon=RightArrow %>
                        </span>
                    </a>
                </li>
            <% end_loop %>
        </ul>
    <% else %>
        <p>No items found</p>
    <% end_if %>
</div>


//------  Elemental PHP Code -------//

public function getCategories()
    {
        $categories = CourseCategory::get();
        if ($categories && $categories->exists()) {
            return $categories;
        }
    }

    public function getCourses()  //gets all courses
    {
        $courses = Course::get();
        if ($courses && $courses->exists()) {
            return $courses;
        }
    }

    public function getCoursesPageURLSegment()
    {
        $page = \Page::get()->filter('Title', 'Courses')->first();
        if ($page && $page->exists()) {
            return $page->URLSegment;
        }
    }

//------  CourseCategory Model -------//
private static $db = [
        'Category' => 'Varchar'
    ];

    private static $summary_fields = [
        'Category'
    ];

    private static $table_name = 'CourseCategory';
    public function getLowerCaseName()
    {
        return strtolower($this->Category);
    }
3

It looks to me like the courses list is supposed to be updated by js rather than being a site tree / page load problem.

Without seeing the javascript it’s impossible to diagnose the problem here.

A quick look at the template you’ve pasted, I’d try and remove the active attribute that will be appearing on all of the <li>'s:
eg. From:

<li class="filter-menu__item mx-2 mb-2 <% if $Category =='Microsoft' %> active <% end_if %>" active data-filter=".$LowerCaseName">

To:

<li class="filter-menu__item mx-2 mb-2 <% if $Category =='Microsoft' %> active <% end_if %>" data-filter=".$LowerCaseName">

Or, wrap the active attr in a category if statement like you’re doing with the class
This is just based on a big assumption here, would be able to help more if you paste the related JS.

1 Like
4

@kaftka Thank you for the response. I’ve removed the active attr. It;s still the same. Here’s the js anything to change here?

37: [function(t, e, i) { "use strict"; var n = document.querySelector(".filter-items"),
        r = document.querySelectorAll(".filter-menu__item"),
        o = t("isotope-layout"); if (r && n) { var s = new o(n, { itemSelector: ".item", layoutMode: "fitRows" });
        r.forEach((function(t) { t.addEventListener("click", (function(t) { r.forEach((function(t) { return t.classList.remove("active") })), t.currentTarget.classList.add("active"); var e = t.currentTarget.getAttribute("data-filter");
                s.arrange({ filter: e }) })) })) } }, { "isotope-layout": 20 }],
2

AFAIU, you have the following tree:

  • Our courses
    • Microsoft
    • Adobe
    • Crystal Reports
    • …

… and you want to show the Microsoft page by default. This is a quite common issue: sometime you want a generic page and sometime you don’t want it.
In the latter case, I just usually set Our courses as a RedirectorPage and set the Microsoft URL as target link.

1 Like
5

Thank you for the response. Will check it out

6

Added an id and a click() event to achieve this. It is sorted thanks!
//
const get = document.getElementById(‘coursebtn’);
get.click();