Laravel Javascript - Check if theme exists in session, add class

Question

I'm working on a system where the user can select a product and go to the next page. This product then gets saved in the session using laravel sessions. When the user decides to go to the next page and come back. The chosen product is indeed saved in the session, but the is no way for them to see what product they have chosen because the class isn't applied to the product that was chosen.

The code may clarify it better:

@foreach($themes as $theme)
    <div class="col-md-4 mb-4">
        <div class="card theme-card card-hover depth-2 border-0" id="theme-id-{{$theme->id}}">
            <a href="" class="theme-link" data-toggle="modal" data-target="#theme{{ $theme->id }}">
               <div class="card-image" style="height: 200px; background-image: url('/uploads/{{ $theme->thumbnail }}'); background-size: cover; background-position: center center;"></div>
               <div class="card-body">
                    <div class="row">
                        <div class="col-md-2 vertical-center">
                            <i class="fab fa-magento fa-lg"></i>
                        </div>
                        <div class="col-md-10">
                            <p class="m-0">{!! str_limit($theme->name, $limit =  32, $end = '...') !!}</p>
                            <small class="text-muted">{{ $theme->productable_type }}</small>
                        </div>
                    </div>
                </div>
            </a>
            <div class="card-footer bg-white border-0 text-right pt-0">
                <div class="row">
                    <div class="col-md-6 text-left">
                        <input type="hidden" class="theme-name" name="theme[{{$theme->id}}]">
                        {{--<input type="hidden" value="{{ $theme->composer_package }}">--}}
                        <button data-card-id="{{$theme->id}}"  class="btn btn-orange btn-sm btn-theme-choice">Kiezen</button>
                    </div>
                    <div class="col-md-6 text-right">
                       <span style="font-size: 20px;" >€ {{ $theme->price }} EUR</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

In the above code, I for each trough every so-called "Theme" and I'm giving the ID of the theme as a data target and as ID. Then in my Javascript code, I do the following:

$('.btn-theme-choice').on('click', function (event) {

    event.preventDefault();
    newSelectedCardId = $(event.target).data('card-id');

    if(cardId === null) {
        cardId = newSelectedCardId;
    } else if (cardId !== newSelectedCardId) {
        $('#theme-id-' + cardId).removeClass('theme-chosen').find("input[name='theme["+cardId+"]']").val('');
        cardId = null;
    }

    var card = $('#theme-id-' + cardId );
    card.toggleClass('theme-chosen');
    selectedCardInput = card.find("input[name='theme["+cardId+"]']");

    if( !$('.theme-card').hasClass('theme-chosen') ) {
        selectedCardInput.val('');

    } else if ( $('.theme-card').hasClass('theme-chosen') ) {
        selectedCardInput.val('selected');
    }

    console.log(selectedCardInput);
});

Here I add the class to the card so the user can See which card they've selected. This choice then gets saved in the session using some PHP code in the controller

if( $theme == null ) {

    return redirect('plugins');

} elseif( $theme != null ) {

    foreach($this->predefinedArray as $value) {
        $request->session()->put('chosen_theme.' . $value, $theme->$value);
    }

    $request->session()->put('chosen_theme.composer_package', $theme->productable->composer_package);

    return redirect('plugins');
}

problem

How can I read the session and add the class to the card with the IDs that were stored in the session so if the person leaves the page and comes back, they can see what cards they've selected?

Thanks in advance

No, the chosen themes are put into the session after the user pressed the next button to go to the next page. because then the PHP code gets executed @ab_ab — Rainier laan, May 07 '18 at 08:10
$value = session()->get($key); also you can store variable in session by using shorter: session()->put($key, $value); — NoOorZ24, May 07 '18 at 08:17

score 1 · Accepted Answer · answered May 07 '18 at 08:23

1

Try this in your view..

<div class="card theme-card card-hover depth-2 border-0 {{ \Session::get('chosen_theme.composer_package') == $theme->id ? 'theme-chosen' : '' }}" id="theme-id-{{$theme->id}}">

Whenever the theme id is in the session and the page loaded the class will be added, and if it is not in the session then the class won't be added.

Let me know the result..

answered May 07 '18 at 08:23

iamab.in

2,022
3
18
39

This is what I was looking for! Thanks! – Rainier laan May 07 '18 at 08:27
My suggestion is not to misuse classes for this, what about using `data-attributes`? https://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript – online Thomas May 07 '18 at 08:31
@ThomasMoors The op reloads the page after the session value is set, I just conditionally add the class to the the div based on the session value. How it would be misuse of class? Am not much familiar with the usage of data-attributes for this operation. – iamab.in May 07 '18 at 08:40
My bad, I thought you were adding all possible themes as classes. But you are not, so disregard my comment please :) – online Thomas May 07 '18 at 08:45

Laravel Javascript - Check if theme exists in session, add class

1 Answers1