вопрос Laravel: дублирование сообщения при нажатии на кнопку

Question

Я хочу вернуть сообщение, когда нажимаю кнопку добавления. Да, действительно, это показывает сообщение. Но в моем случае это 3 изображения, показанные на той же странице, поэтому проблема заключается в том, что при нажатии на кнопку отображается «добавить в корзину успешно» для 3 изображений.

Ниже приведен файл контроллера, но я думаю, что здесь сделано.

public function addItem($id){
  $pro = products::find($id);
  Cart::add(['id' => $pro->id, 'name' => $pro->pro_name,
  'qty' => 1, 'price' => $pro->pro_price,
'options' =>[
  'img' => $pro->pro_img
  ]]);
    return back()->with('status', 'add to cart successfully');
}

Должно быть необходимо внести изменения в файл вида, ниже находится файл вида:

@foreach($data as $p)

              <article class="product-grid-item product-block">
                  <figure class="product-item-thumbnail">
                      <a href="{{url('/productsDetails')}}/{{$p->pro_name}}">
                          <img
                                  src="{{asset('/img/')}}/{{$p->pro_img}}" alt=""
                                  width="400px" height="360px" />
                          <div class="product-item-mask">
                              <div class="product-item-actions">
                                  <button class="button button-secondary button-short">
                                      Quick View
                                  </button>

                                  <a href="{{url('/cart/add')}}/{{$p->id}}" class="button add-cart-cat button--small card-figcaption-button">Add to Cart</a>
                              </div>
                          </div>
                      </a>
                  </figure>


                  <div class="product-item-details">
                      {{--Add Cart Message--}}
                      @if (session('status'))
                          <div class="alert alert-success">
                              {{ session('status') }}
                          </div>
                      @endif
                      {{--End of Add Cart Message--}}
                      <div class="product-item-brand"><label><a href="#" alt="">{{$p->pro_name}}</a></label></div>

                      <h5 class="product-item-title">
                           {{$p->pro_code}}
                      </h5>

                      <!-- snippet location product_rating -->
                      <div class="product-item-price" data-product-price="JPY1,650">
                          <div>

                              <div class="product-price-line" data-product-price-wrapper="without-tax">
                                  {{--<span class="price-rrp highlight">RM-</span>--}}
                                  <meta itemprop="price" content="1650">
                                  <meta itemprop="priceCurrency" content="">
                                  <meta itemprop="availability" content="">
                                  <meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/Condition">
                                  <span class="price-value"> RM{{$p->pro_price}}</span>
                              </div>

                          </div>
                      </div>
                  </div>
              </article>
          @endforeach

Отображение результатов показано ниже: должно отображаться 1 сообщение за клик, а не все сообщения отображаются.

Изображение результата

Answer 1

вы можете сделать что-то вроде ниже:

когда вы нажимаете на кнопку, захватите значение идентификатора и добавьте его к вашему URL

$(document).ready(function() {
    $(document).on('click', ".add-cart-cat", function() {

    var id = $(this).val(); //you can grab the value by any logic 

        $.ajax({
          url: '{{url("/cart/add")}}'+'/'+id,,
          method: 'GET',
          dataType: "json",
           context: this,
          success: function(data) {
            var successHtml = 'your success message div which will append to your desired div';
            // grab the id where you will append the div
            var target = $(this).attr('rel');
            $('#'+target).html(successHtml);

          }
        });

    }

});

в вашем контроллере метод addItem возвращает строку с сообщением об успешном завершении и добавляет ее в желаемый элемент div, где вы хотите его показать. но имейте в виду, что вы должны дать уникальный идентификатор этому div, как показано ниже:

 <div id='{{$p->id}}'>
 //you success message will append it through ajax
</div>

чтобы получить этот уникальный идентификатор, вы должны сделать что-то вроде этого в вашем <a> anchor tag, поставить на него атрибут rel и дать ему динамическое значение, как показано ниже

<a href="#" rel='{{$p->id}}' class="button add-cart-cat button--small card-figcaption-button">Add to Cart</a>

Примечание: Не беспокойтесь о структурировании моего кода, но если вы поймете идею из этой логики, то вы определенно сделаете это легко.

Answer 2

Исходя из ваших данных $ p в $, мы можем получить, что товар в корзине или нет. Если нет, сначала получите эти данные в $ p, а затем проверьте перед этим кодом,

{{--Add Cart Message--}}
    @if($p->is_cart_added)
       @if (session('status'))
          <div class="alert alert-success">
          {{ session('status') }}
          </div>
       @endif
    @endif