Проблема отношения Laravel

Question

У меня проблема с получением параметров продуктов, которые они отображают в отдельных полях вместо группировки.

Логика

1. Группа параметров получает тип и значения
2. Параметры принадлежатв группы также к продуктам
3. Товары получают Опции

Модели

Product

public function options(){
  return $this->belongsToMany(Option::class, 'product_options', 'product_id', 'option_id');
}

Option Group

public function values(){
  return $this->hasMany(Option::class, 'option_id');
}

Option

public function group(){
  return $this->belongsTo(OptionGroup::class, 'option_id');
}

public function products(){
  return $this->belongsToMany(Product::class);
}

Вид лезвия

@if(count($product->options)>0)
<!-- options -->
<div class="tt-swatches-container">
    <div class="tt-wrapper">
    @foreach($product->options as $option)
        <div class="tt-title-options">{{$option->group->title}}:</div>
        @if($option->group->type == 'color')
            <ul class="tt-options-swatch options-large">
                <li><a class="options-color" style="background-color: {{$option->color}}" href="#"></a></li>
            </ul>
        @elseif($option->group->type == 'dropdown')
            <form class="form-default">
                <div class="form-group">
                    <select class="form-control">
                        <option>{{$option->title}}</option>
                    </select>
                </div>
            </form>
        @else
            <ul class="tt-options-swatch options-large">
                <li><a href="#">{{$option->title}}</a></li>
            </ul>
        @endif
    @endforeach
    </div>
</div>
<!-- options -->
@endif

Результаты

AsВы видите, что у меня есть дублированные данные в моем представлении, цвета должны отображаться в одной группе рядом друг с другом, и раскрывающиеся опции также должны стать единым целым.

Кто-нибудь может сказать, где я допустил ошибку?

Обновление

Я добавил mapToGroups в свой контроллер, теперь результаты стали намного чище, но все же есть проблема с выпадающим списком

Controller

$options = $product->options->mapToGroups(function ($item, $key) {
  return [$item->group->title => $item];
});

Blade

@if(count($options)>0)
<!-- options -->
<div class="tt-swatches-container">
    @foreach($options as $group => $option)
    <div class="tt-wrapper">
        <div class="tt-title-options">{{$group}}:</div>
        @foreach($option as $opt)
        @if($opt->group->type == 'color')
            <ul class="tt-options-swatch options-large">
                <li><a class="options-color" style="background-color: {{$opt->color}}" href="#"></a></li>
            </ul>
        @elseif($opt->group->type == 'dropdown')
            <form class="form-default">
                <div class="form-group">
                    <select class="form-control">
                         <option>{{$opt->title}}</option>
                    </select>
                </div>
            </form>
        @else
            <ul class="tt-options-swatch options-large">
                <li><a href="#">{{$opt->title}}</a></li>
            </ul>
        @endif
        @endforeach
    </div>
    @endforeach
</div>
<!-- options -->
@endif

Результат

Answer 1

Ваша итерация совершенно неверна.Что вы делаете, это создаете полный ul для каждого цвета, полный выбор для каждого выпадающего списка, а также полный ul для каждого образца.

Самый простой способ достичь своей цели - использовать волшебные стеки * лезвия ;Мы просто помещаем каждую опцию в свой стек (цвет, выпадающий список, образец) и, наконец, печатаем стек:

@if(count($product->options)>0)
    @foreach($product->options as $option)
        @if($option->group->type == 'color')
            @push('color')
                <li>
                    <a class="options-color" style="background-color: {{$option->color}}" href="#"></a>
                </li>
            @endpush
        @elseif($option->group->type == 'dropdown')
            @push('dropdown')
                <option>{{$option->title}}</option>
            @endpush
        @else
            @push('swatch')
                <li>
                    <a href="#">{{$option->title}}</a>
                </li>
            @endpush
        @endif
    @endforeach
@endif


<div class="tt-swatches-container">
    <div class="tt-wrapper">
        <div class="tt-title-options">color:</div>
        <ul class="tt-options-swatch options-large">
            @stack('color')
        </ul>
        <div class="tt-title-options">option:</div>
        <form class="form-default">
            <div class="form-group">
                <select class="form-control">
                    @stack('dropdown')
                </select>
            </div>
        </form>
        @if($__env->yieldPushContent('swatch'))
           <div class="tt-title-options">swatch:</div>
           <ul class="tt-options-swatch options-large">
               @stack('swatch')
           </ul>
        @endif
    </div>
</div>

Удачи.