how to get the selected option from dropdown list and convert all product prices according to base currency in laravel

Issue

This is my code to get all currencies exchange rate according to base currency through api key.

public function rates()
    {
        $uri = sprintf($this->config('api_key'));
        $request = $this->httpClient->get($uri);
        $content = $request->getBody()->getContents();
        $response = json_decode($content);
        return (array) $response;

    }

This is my controller

public function json(){
         $cur= ExchangeRate::rates();
         return $cur;
    }

This is my route

Route::get('/json-api', 'IndexController@json');

after that I am getting this

base    "INR"
date    "2020-01-10"
time_last_updated   1578615072
rates   
INR 1
AED 0.05119
ARS 0.833853
AUD 0.020417
BGN 0.024695
BRL 0.056974
BSD 0.013941
CAD 0.018283
CHF 0.013624
CLP 10.648733
CNY 0.097143
COP 44.541667

I have also created the dropdown list for getting all the currencies from the json data

 <select name="current" id="current"  class="form-control">
                               @foreach($cur as $key=> $value)
                                   <option value="{{ $key->value }}"> {{ $value->value }}</option>
                               @endforeach
                        </select>

Everything is working fine now I Want to convert all product prices according to the selection of dropdown in all pages. like Convert (product_price, base:INR, to USer selected option.

Solution

You’d need to change the value with javascript. Add the base price for default currency as an attribute on each of your products, and add the exchange rates on each of your select elements as attributes as well. Then its just simple js. Here’s an example with vanila JS

<select name="current" id="current"  class="form-control">
    @foreach($cur as $key=> $value)
        <option data-value="{{$value}}" value="{{ $key->value }}"> {{ $value->value }}</option>
        //*******************^^^^^^^^^********/
        //Put the exchange value here in data-value, such as 0.05119,0.833853, etc
    @endforeach
</select>

Im putting up a snippet that shows the working

(function() {
    const select = document.getElementById('current');
    const price = document.getElementsByClassName('price');
    select.onchange = function() {
        const option_index = this.selectedIndex;
        const multiplier = select.querySelectorAll('option')[option_index].getAttribute('data-value');
        const length = price.length;
        for (var i = 0; i < length; i++) {
            price[i].innerHTML = price[i].getAttribute('data-base-price') * multiplier;
        }
    };
})();

<select name="current" id="current" class="form-control">
    <option data-value="1" value="1">INR</option>
    <option data-value="0.05119" value="0.05119">AED</option>
    <option data-value="0.833853" value="0.833853">ARS</option>
    <option data-value="0.2041" value="0.2041">AUD</option>
</select>

<ul>
    <li class="price" data-base-price=10>10</li>
    <li class="price" data-base-price=20>20</li>
    <li class="price" data-base-price=30>30</li>
    <li class="price" data-base-price=40>40</li>
</ul>

Answered By – Arun A S

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0