Rainieren
1 year ago

Laravel - Select item get attributes and submit form

Posted 1 year ago by Rainieren

I'm working on a project which requires a function where the user can select an item and click on the "Next" button to submit the form. The problem is, I don't know how to make this work. I have blade template which has an a form. Within that form, I display all the products using a foreach loop. The user needs to be able to select ONE product from this list and click on next to confirm his choice.

This is the blade template

@extends('layouts.home') @section('content')
<div class="container" id="showEffect">
<div class="row">
<div class="col-md-12">
  <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-3 items-center-left">
            <a href="{{ route('mainsettings') }}" class="back-link">
              <p class="m-0"><i class="fal fa-chevron-left fa-lg mr-2"></i> <span style="font-size: 24px;">Go back</span></p>
            </a>

          </div>
          <div class="col-md-3 text-right items-center-right">
            <button class="btn btn-next bg-transparent" type="submit"><span style="font-size: 24px;">Next</span> <i class="fal fa-chevron-right fa-lg ml-2"></i></button>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-4">
      @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-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-10">
                  <p class="m-0">{!! str_limit($theme->name, $limit = 32, $end = '...') !!}</p>
                  <small>Magento template</small> {{--{{ $themes->composer_package }}--}}
                </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">
                <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">
                <small class="text-muted" style="text-decoration: line-through">145 €</small><span style="font-size: 20px;"> {{ $theme->price }} €</span>
              </div>
            </div>

          </div>
        </div>
      </div>

      @endforeach
    </div>

    <div class="row mt-4 mb-5">
      <div class="col-md-6 items-center-left">
        <a href="{{ route('mainsettings') }}" class="back-link">
          <p class="m-0"><i class="fal fa-chevron-left fa-lg mr-2"></i> <span style="font-size: 24px;">Terug</span></p>
        </a>

      </div>
      <div class="col-md-6 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>
</div>
</div>
</div>

<div class="andcode-clouds">

</div>

@endsection

The chosen theme needs to be saved in a session array like this:

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

PredefinedArray consists of all the fillable fields of the class product Then I get an array with the attributes of the chosen product and I can retrieve the information of that product, Like the name and description like this. session('chosen_theme.name).

How can I make the products selectable and retrieve their info and then submit the main form? Thanks in advance.

Also, Here is a small demonstration of what I want to achieve so you get a visual idea: https://imgur.com/a/tX7Ue

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