Its possible to query javascript client side including site information, as an example a cookie for the country?

Dear Team,

Im very interested in Algolia with InstantSearch. I have one doubt, if an ecommerce platform wants to display product prices with modifications based on eg.:

  • VAT for a country in product prices.

how do we have to manage the index or response technically to perform that operation?.

My idea is for example, you would have within your records {“price_FR”: “15€”, “price_US”: “15$”, …}, and choose in your front-end logic which price to display depending on the country of your customer.

My main question is:

its possible to query javascript client side including site information, as an example a cookie for the country?

or

only using server side processing you can modify the query in order to retrieve customized information based on cookie (eg.: if the country value is france, retrieve “price_FR”:“15€”).

thanks!,

It is definitely doable. You would need to pass the information from your back-end to your front-end, and there are many many ways to do this, cookies being one of them.

Once with this information, you could accordingly select the correct facet in your front-end code.

thanks @Jerska , I checked in document but I cannot find any tutorial displaying a similar solution.

I read https://scotch.io/tutorials/build-search-functionality-with-laravel-scout-and-vue-js building a search functionality with laravel scout and vue, but I have to cover the part of frontend using instantsearch.js.

I read about filter results around a location https://www.algolia.com/doc/tutorials/geo-search/filter-results-around-a-location/ and I will check to implement the following example ->

/*
‘94.228.178.246’ should be replaced with the actual IP you would like to search around.
Depending on your stack there are multiple ways to get this information.
*/
$ip = ‘94.228.178.246’;

$client->setExtraHeader(‘X-Forwarded-For’, $ip);

$results = $index->search(’’, [
‘aroundLatLngViaIP’ => true
]);

But If you know any other example I will appreciate!. best regards and thank you.

Oh but here you’re talking about back-end search.

You know, passing this value to the front-end can be as easy as:

echo '<div class="algolia-lang" value="fr"></div>';

And in your front-end, if you have jQuery:

var lang = $('.algolia-lang').attr('value')

The reason why you don’t have any tutorials for that is because there are so many ways to achieve this.
Start simple, and refine afterwards. :slight_smile:

1 Like

Taking into consideration your info I decided to implement Algolia Vue-InstantSearch in a Laravel Project. Since we’re editing a blade file, the {{ }} sequence will be interpreted by the php template engine. We can tell Blade to ignore those, to make sure they are only interpreted by Vue, in JavaScript, by prepending an @.

Taking this into consideration, I would like to pass cookie variable with a text inside @{{}}, but I cannot find the way. As an example I tried:

$a = "price ";

$var = $a . "result";

but when I print @{{$var}} , no value is displayed

This is my original code:

<ais-results>
    <template scope="{ result }">
            <!-- BEGIN item -->
            <div class="item">
                <div class="item-info">
                    <div class="item-price">@{{$var}}</div>
                </div>
            </div>
            <!-- END item -->
        <!-- END col-2 -->
    </template>
</ais-results>

Any Help Appreciated.

cc @rayrutjes for the Vue + PHP part :slight_smile:

1 Like

Thanks @Jerska / @rayrutjes , I tried the following approach in order to process it using Vue:

new Vue({
  el: '#app',
  data: {
    var: 'foo'
  }
});

But In my case I received:

"Undefined variable: var "

I believe its because {{$var}} is expecting to be a laravel variable coming from controller and not coming from New Vue.

Now I realized that the problem disapeared changing var to another name (varsin in this case). Now is printing the value at the page. My script:

<script>
    new Vue({
        el: '#app', // or wherever you are mounting your instance
        data: {
            varsin: 'result.price'
        }
    });
</script>

and with my blade code:

> <div class="item-price">@{{varsin}}</div>

now I only have to solve why varsin prints

result.price

as a text. And If I try removing ''

varsin: result.price

in order to obtain @{{result.price}} as I need in order to retrieve the value from Algolia database, everything disappear and nothing is displayed in page.

thank you!.

Hi @siherrera,

I think there is some confusion between what is handled by the Vue InstantSearch library, Vue itself and what can be provided by PHP.

As a first step, I think it would be nice if you could create an example for what you are trying to achieve without the PHP aspect.

After that works you’ll be able to couple it with your backend with ease.

If you are to proceed in that direction, please share us a codepen, or JSFiddle so that we can help you out.

Cheers,

1 Like