Laravel Vue InstantSearch Tree Menu

Hi,

I’m using Laravel and Vue InstantSearch.

I’m having trouble formatting the data for a tree menu.

For my Laravel website users can create a profile.

A lot of the data collected when a user creates a profile is dynamic, meaning a lot of fields will be null.

The forms I’ve setup to collect the data follows a hierarchical structure, which I believe makes this data perfect for a tree menu in the search.

For example this is how one of hierarchical structures in the tree menu could look:

lvl0 - Musician
lvl1 - Musician > Solo Musician
lvl2 - Musician > Solo Musician > Drums & Percussion’s
lvl3 - Musician > Solo Musician > Drums & Percussion’s > Steel Drums

I realise this is how the data should be formatted for algolia, I’m just not sure how to achieve this in Laravel.

I know I could use the Laravel Scout property:

public function toSearchableArray() 
{

}

However trying to populate a PHP array dynamically with variables from the Profile Model instance doesn’t work.

Like this:

public function toSearchableArray() 
{
      switch ( $this->service_provided )
        {
            case "Musician | Singer"
            $profile['service'] = [
                "lvl0" => "Musician | Singer",
                "lvl1" => "Musician | Singer >" . $this->music_provider_type,
                "lvl2" => "Musician | Singer >" . $this->music_provider_type . ">" . $this->music_solo_musician_type,
            ];
            break;
        }
}

This of course doesn’t work, also the “music_solo_musician_type” is conditional meaning it may not be used at all (which I don’t think helps the chances of this becoming a reality either).

There’s got to be a better way to do this, has anyone encountered this before or has any ideas ?

Thanks in advance.

Hello,

I think you are following the correct approach! You may want to take a look at this: How to structure product data for nested catalogue facets?.

Please don’t forget you need to return something from the toSearchableArray(), like the following example:

    public function toSearchableArray()
    {
        $array = $this->toArray();

        // ...

        switch ($this->service_provided)
        {
            case "Musician | Singer":
                $array['service'] = ["lvl0" => $this->service_provided];

                if (! empty($this->music_provider_type)) {
                    $array['service']['lvl1'] = $array['service']['lvl0'] . ' > ' . $this->music_provider_type;

                    if (! empty($this->music_solo_musician_type)) {
                        $array['service']['lvl2'] = $array['service']['lvl1'] . ' > ' . $this->music_solo_musician_type;
                    }
                }
                break;
        }

        // ...

        return $array;
    }

Note: All attributes (service.lvl0, service.lvl1, service.lvl2) should be defined as attributesForFaceting in your index configuration.

Tell me if this works for you.
Thanks.

1 Like

Thank you, my data is now being formatted properly and I have a fully functioning tree menu!

1 Like