yii2 корзина ajax - PullRequest
Новая
       33

yii2 корзина ajax

0 голосов
/ 24 декабря 2018

Я хочу изменить существующую корзину покупок в yii2, чтобы она не перезагружала страницу, а значит заставляла ее работать с помощью ajax.Текущая корзина выглядит так: 

 <form method="post" id="form-prodtobuy-<?= $p->id ?>" action="<?= \Yii::$app->urlManager->createUrl(["site/cart"]) ?>">
 <input type="hidden" name="<?= Yii::$app->request->csrfParam; ?>" value="<?= Yii::$app->request->csrfToken; ?>" />
 <input type="hidden" name="task" value="update" />
 <input id="<?= $p->id ?>" class="form-control buy-input" name="product[<?= $p->id ?>]" value="<?= Purchase::getCartValue($p->id) ?>" data-id="<?= $p->id ?>" placeholder="0">
 <button class="btn btn-primary" type="submit">Buy <i class="glyphicon glyphicon-shopping-cart"></i></button>
 </form>

Работает нормально, но перезагружает страницу.

var_dump ($ _ SESSION);после этого выглядит так: 

 array(2) { ["__flash"]=> array(0) { } ["products"]=> array(3) { [2958]=> string(1) "2" [2959]=> string(1) "1" [2581]=> string(1) "1" } }

Мое очевидное решение - добавить e.preventDefault () для события submit следующим образом: 

 $(document).on('submit', '[id^=form-prodtobuy-]', function(e) {
 e.preventDefault();
 var someVar = $('#someInput').val();
     $.ajax({
        type: "post",
        url: "<?php echo \Yii::$app->urlManager->createUrl(["site/cart"]) ?>",
        data: {???:someVar},
        .....................
     });
 });

Что должно быть в ajax 'data'?
Где или как можно получить имена переменных для правильной установки сеанса?

1 Ответ

0 голосов
/ 24 декабря 2018

В ajax "data" поместите вывод серализации формы.

Позаботьтесь о том, чтобы я использовал формат heredoc, поэтому в последнем EOT_JS не должно быть пробелов перед ним. 

$urlForm = \Yii::$app->urlManager->createUrl(["site/cart"]);

$this->registerJs( <<< EOT_JS 

    $(document).on('submit', '[id^=form-prodtobuy-]', function(e) {
        e.preventDefault();

        var formData = $(this).serialize();

        $.ajax({
            type: "post",
            url: "{$url}",
            data: formData,
            function(data) {
                console.log('form submit output');
                console.log(data);
            }
        });
    });

EOT_JS
);
...