lundi 7 mai 2018

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

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-">
                                <a href="" class="theme-link" data-toggle="modal" data-target="#theme">
                                    <div class="card-image" style="height: 200px; background-image: url('/uploads/'); 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"></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[]">
                                            ">--}}
                                            <button data-card-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;" >€  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



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire