Rainieren
1 year ago

Laravel - Select a card and go to next step

Posted 1 year ago by Rainieren

Hello, I'm making a project which needs to give the user the option to select a specific card by clicking on a button within that card. When the user made the right choice they'll press the "next" button in the top right corner and their choice gets submitted. How can I accomplish this?

The layout of the form looks like this:


<form method="POST" action="{{ route('saveTheme') }}" >
                    {{ csrf_field() }}
                    <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">
                    <div class="card depth-1">
                        <div class="card-body">
                            <div class="row">                              
                                <div class="col-md-12 text-right items-center-right">
                                    <button class="btn btn-next bg-transparent" type="submit"><span style="font-size: 24px;">Next Step</span> <i class="fal fa-chevron-right fa-lg ml-2"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        @foreach($themes->products as $theme)
                        <div class="col-md-4 mb-4">
                            <a href="" class="theme-link" data-toggle="modal" data-target="#theme{{ $theme->id }}">
                                <div class="card theme-card card-hover depth-1 border-0">
                                    <div class="card-header p-0">
                                        @if($theme->thumbnail != 0)
                                        <img src="https://s.tmimgcdn.com/scr/67400/magento-thema-over-boxen_67400-original.jpg?width=502&height=502" width="502" height="350" class="theme-card-img" alt="">
                                        @else
                                            <img src="http://jis.gov.jm/media/blank.png" class="theme-card-img" alt="">
                                        @endif
                                    </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-7">
                                                <p class="m-0">{!! str_limit($theme->name, $limit =  21, $end = '...') !!}</p>
                                                <small>Magento template</small>
                                            </div>
                                            <div class="col-md-3 vertical-center">
                                                <button class="btn btn-success btn-sm btn-theme-choice">Kiezen</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-white border-0 text-right pt-0">
                                        <small class="text-muted" style="text-decoration: line-through">145 €</small><span style="font-size: 20px;" > {{ $theme->price }} €</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                       
                    <div class="row mt-4 mb-5">
                       
                        <div class="col-md-12 text-right">
                            <button class="btn btn-next bg-transparent" type="submit"><span style="font-size: 24px;">Volgende stap</span> <i class="fal fa-chevron-right fa-lg ml-2"></i></button>
                        </div>
                    </div>
                </form>

Each card is in an anchor tag. So each card is selectable. (They can only choose ONE card)

When the user made their choice (By clicking on a card) and they click on the "Next" button to go to the next page. The theme's choice needs to be saved in a session like this: $request->session()->put('theme_choice', $request->all()); And with the request comes all the data of the selected card.

I honestly have no clue how to make this work. Also, the user needs some kind of feedback. That, if the user chose the product, The card gets a green border for example. But this can easily be done with jQuery I assume.

How can I accomplish this? Thanks in advance!

Please sign in or create an account to participate in this conversation.