Jednoduchý e-shop Laravel 5.3 část 11 – malé vylepšení modal okno pro přidání do košíku

28.3.2017 MaMusha Comments 2 comments

Tento článek je 11 z 11 v seriálu Jednoduchý e-shop Laravel 5.3

Dneska jen takové miniaturní vylepšení po přidání zboží do košíku si zobrazíme modla okno. Upravovat budeme pouze view home.blade.php a to konkrétně že si upravíme kod pro přidání zboží do košíku, kde si předáme název a cenu zboží.

<a href="#" id="add" class="btn btn-primary" data-id="{{ $product->id }}" data-product="{{ $product->name }}" data-price="{{ $product->price }}">Koupit</a>

1	<a href="#" id="add" class="btn btn-primary" data-id="{{ $product->id }}" data-product="{{ $product->name }}" data-price="{{ $product->price }}">Koupit</a>

dále přidáme kod pro zobrazení modal okna

    <div class="modal fade" tabindex="-1" role="dialog" id="add-modal">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                     <h4 class="modal-title">Zboží přidáno do košíku</h4>
                 </div>
                 <div class="modal-body">
                     <div class="modal-product"></div>
                     <div class="modal-price"></div>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Pokračovat v nákupu</button>
                     <a href="{{ URL::to('cart') }}" type="button" class="btn btn-primary">Objednat</a>
                 </div>
             </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
     </div><!-- /.modal -->

<h4 class="modal-title">Zboží přidáno do košíku</h4>

</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Pokračovat v nákupu</button>

<a href="{{ URL::to('cart') }}" type="button" class="btn btn-primary">Objednat</a>

</div>

</div>

</div>

</div>

a nakonec ještě upravíme náš script tak, aby po přidání zboží do košíku se zobrazilo modal okno s informacemi o přidaném zboží.

@section('scripts')
    $(document).ready(function() {

        $.ajaxSetup({
        headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
        });

        $('a#add').click( function() {
            var product_id = $(this).data('id');
            var url = "/ajaxadd";
            var product_name = $(this).data('product');
            var product_price = $(this).data('price');

            $.ajax({

                type: "POST",
                url: url,
                data: { product_id: product_id },
                success: function (msg) {
                console.log(JSON.stringify(msg));
                var obj = JSON.parse(JSON.stringify(msg));
                $('.badge').html(obj.msg);
                $('#add-modal .modal-product').html(product_name);
                $('#add-modal .modal-price').html(product_price);
                $('#add-modal').modal();

                },
                error: function (data) {
                console.log('Error:', data);
                }
            });
        });
    });
@stop

@section('scripts')

$(document).ready(function() {

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

$('a#add').click( function() {

var product_id = $(this).data('id');

var url = "/ajaxadd";

var product_name = $(this).data('product');

var product_price = $(this).data('price');

$.ajax({

type: "POST",

url: url,

data: { product_id: product_id },

success: function (msg) {

console.log(JSON.stringify(msg));

var obj = JSON.parse(JSON.stringify(msg));

$('.badge').html(obj.msg);

$('#add-modal .modal-product').html(product_name);

$('#add-modal .modal-price').html(product_price);

$('#add-modal').modal();

error: function (data) {

console.log('Error:', data);

}

});

@stop

Series Navigation<< Jednoduchý e-shop Laravel 5.3 část 10 – přidání zboží do košíku AJAXEM

Post Views: 415

2 thoughts on “Jednoduchý e-shop Laravel 5.3 část 11 – malé vylepšení modal okno pro přidání do košíku”

Super DIKY!
to na CZ NETu chybelo 🙂

Odpovědět

MaMusha napsal:

16.6.2017 (9:43)

Ahoj Petře,

děkuji za pochvalu ta vždycky potěší. Seriál jsem si psala původně sama pro sebe, ale pak mi to bylo líto a myslela jsem, že třeba někomu pomůže i někomu jinému. Určitě by šel hodně vylepšit, ale spíše jsem chtěla ukázat jak i úplný začátečník dospěje k fungujícímu řešení, ikdyž kod není tedy žádná hitparáada a žádal by si vylepšení. Budu ráda za jakoukoli připomínku v komentářích nebo poukázání ny chybu.

Odpovědět

Co hledám

co neumím, to se naučím

2 thoughts on “Jednoduchý e-shop Laravel 5.3 část 11 – malé vylepšení modal okno pro přidání do košíku”

Napsat komentář Zrušit odpověď na komentář