How to implement attributesToSnippet:?

Hello,

I’ve managed to get the vue-instantsearch implemented on the search page. But after styling the hits card I noticed text massively bleeding. These cards are horizontal and about 150px high (roughly).

I searched snippet here on this forum and am uncertain of where to place the attributesToSnippet:. One post included it here in the <ais-instant-search of the Vue ‘template’ section.

From the php docs it appeared it may go on the model, like toSearchableArray. (this is a Laravel implementation)

Then I found another post which solved it via CSS with the textoverflow property.

Could you help point me in the right direction? Or if you have a complete codepen that’d be great.

<template>
    <div class="searchjobdetails">

            <ais-instant-search
                :search-client="searchClient"
                index-name="jobs"
                :routing="routing"
                :hitsPerPage="8"
                :query-parameters="{
                    attributesToSnippet: [
                        'content:80',
                        'body'
                        ],
                 }"
            >

                <div id="searchbox">
                    <!-- Uncomment the following widget to add a search bar  -->

                    <ais-search-box placeholder="/Search for building products/   e.g. 1/2 inch OSB plywood Phoenix, AZ" class="ais-search-box"/>
                </div>

                <div class="search-panel">

                    <div class="search-panel__results">

                        <ais-hits>
                            <template slot="item" slot-scope="{ item }">

                                <h2 class="ais-title">
                                    <a :href="'/jobs/' + item.slug"> <ais-highlight :hit="item" attribute="jobtitle" ></ais-highlight></a>
                                </h2>
                                <div class="ais-img">
                                    <img :src="item.thumbUrl" width=200 height=120 />
                                </div>
                                <p>
                                <div class="ais-body">

<!--                                <ais-configure :attributesToSnippet="['body']"/>--> tried this, too

                                <ais-highlight :hit="item"  attribute="body"/>
                                </div>
                                    <!--           attribute="body"                        <a href="'{!! $job !!}'">  width=120 height=200 alt="image" -->

                            </template>
                        </ais-hits>

                        <div class="pagination">
                            <ais-pagination/>
                        </div>
                    </div>
                </div>
            </ais-instant-search>
    </div>
</template>


<script>

    import algoliasearch from 'algoliasearch/lite';
    import 'instantsearch.css/themes/algolia-min.css';

    // const search = instantsearch({
    //     indexName: 'jobs',
    //     searchClient,
    // });
    //
    // This appeared to be like the docs, but I'm still very new to js.


    // search.addWidgets([
    //     instantsearch.widgets.hits({
    //         container: '#hits',
    //         hitsPerPage: 3,
    //
    //         templates: {
    //             empty: '<p class="info">No results were found with your current filters. Try to remove some filters or change the search query.</p>',
    //             item: yourItemTemplate
    //             attributesToSnippet: [
    //                 'content:80',
    //                 'body'
    //             ],
    //         },
    //     })
    // ]);

    export default {

        data() {
            return {
                props: ['job', 'imageUrl'],
                searchClient: algoliasearch(process.env.MIX_ALGOLIA_APP_ID, process.env.MIX_ALGOLIA_SEARCH),
            }
        }
    };

</script>



<style>
........

</style>

I would recommend using AttributeToSnippet directly in the settings. Set the length you want on the body. It seems like you’re setting length on the content attribute but not the body. Do you have a content attribute as well?

With Laravel Scout Extended, you can manage the settings in your code, otherwise you can do it in your Algolia dashboard.

I believe your use of <ais-highlight> is correct.

Let me know if it worked.

Good morning @julienbourdeau ~

Thank you for the note.

It’s not clear to me where to place:

$index->setSettings([
  'attributesToSnippet' => [
    "*:80"
  ]
]);

Does this go on the model? Is it in the toSearchableArray() ? Also, by setting in Laravel will that clip the data? I’d like the description to be fully searchable but use the snippet on the cards.

I gave this a go:

<div class="ais-description">
    <p>
        <ais-highlight :hit="item"  class="ais-description" attribute="description" :attributesToSnippet="['description:10']" />
    </p>
</div>

It’s not particularly clear where to place the :attributesToSnippet in the vue component.

Also, I did set :attributesToSnippeton the algolia/dashboard:
Screen Shot 2020-05-15 at 9.49.07 AM

Pardon my ignorance, I’m just not able to ascertain from the docs where these items go or how they interact with the vue html. Thank you for your help. Almost there!

Hi, Sorry for the confusion here, but to use the snippeted attribute you have to use ais-snippet, not ais-highlight.

Note that you can pass attributesToSnippet either via the dashboard (like you did), or as a search parameter via ais-configure (<ais-configure :attributesToSnippet="['description']" />)