Как правильно формировать верстку для ответа AJAX в yii2?

Question

[Евгений]

В общем делаю чуть ленивую фильтрацию ноутбуков.
Есть в асайде разные чекбоксы и ползунки с ценами. По клику кнопки Подобрать посылается аякс на сервер и получает нужные ноутбуки.

Но мне проще формировать вёрстку на стороне сервера.

Нужно сформировать вёрстку, где каждый ноутбук что-то подобное

<div class="col-md-4 col-xs-6">
                        <div class="product">
                            <div class="product-img">
                                <img src="./img/product01.png" alt="">
                                <div class="product-label">
                                    <span class="sale">-30%</span>
                                    <span class="new">NEW</span>
                                </div>
                            </div>
                            <div class="product-body">
                                <p class="product-category">Ноутбук</p>
                                <h3 class="product-name"><a href="product.html">product name goes here</a></h3>
                                <h4 class="product-price">$980.00 <del class="product-old-price">$990.00</del></h4>
                                <div class="product-rating">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                            </div>
                            <div class="add-to-cart">
                                <a href="product.html"><button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> Посмотреть</button></a>
                            </div>
                        </div>
                    </div>

Правильно ли формировать вёрстку для фильтрации на стороне сервера и как правильно отправить вёрстку в JSON ответом?

Answer 1

[Дмитрий]

Доброе утро.
В yii2 существует такой метод renderAjax().
Он возвращает представление в ответе на ajax запрос. Первым параметром принимает файл, в котором располагается необходимая Вам вёрстка, а вторым может принимать модель с необходимыми данными.

return $this->renderAjax('path/to/file', ['model' => $model])

Comments

[Евгений]

Спасибо, попробую. Суть то в чём. Допустим прилетает на сервер запрос "Мне нужны ноутбуки в диапазоне цены 300-500 долларов производителя ASUS или Lenovo игрового типа.

И я на сервере формирую верстку из нужных ноутбуков и отправляю обратно вёрсточку.

Правда пока не знаю как её правильно вставить, но думаю найду в документации jquery

[Mysterion]

Евгений, создайте вьюху и ей передавайте результат отфильтрованного поиска. Во вьюхе будет рисоваться содержимое и эту вьюху возвращайте в результат аякс запроса. А при получении результата вставляйте полученный код в нужное место на сайте.

[Дмитрий]

Евгений, что Вы не понимаете?
В файле, который идёт первым параметром, уже готовая вёрстка, в переменной $model результат работы запроса к базе данных.
Всё!
Более полно это выглядит приблизительно так:

public function actionViewNtebook()
{
   if(Yii::$app->request->isAjax){
      $price = Yii::$app->request->post('price');
      $model = Notebook::find()->where(['price=:price', [':price' => $price])->all();
      return $this->renderAjax('path/to/file', ['model' => $model);
   }
}

В file находится Ваша вёрстка, которую Вы показали в своём вопросе. Перебираете в цикле foreach() $model и подставляете в вёрстку необходимые значения.

[Евгений]

slo_nik, Пока пытаюсь протестировать на выборе цены и галочек производителя.

Вот отправляю аякс

$('#selnote').on('click', function (e)
    {
        e.preventDefault();
        var pricemin = $("#price-min").val();
        var pricemax = $("#price-max").val();
        //var price = $("#price option:selected").text();
        //var maz = $('#formsub .optradio:checked').val();
        let values = $('.producer').find('input[type="checkbox"]:checked').toArray().map(n => $(n).val());
        if (!values.length) {
            values = 0;
        }

        $.ajax(
            {
                url:'index.php?r=site/catalog',              
                data: {price:[pricemin,pricemax,  values]},
                type: 'POST',
                success: function (res) {
                    alert('Успешно');
                    console.log(res);
                },
                error: function () {
                    alert('Ошибка отправки заявки');
                }
            }
        );
    });

В контроллере

public function actionCatalog()
    {
        if (Yii::$app->request->isAjax && Yii::$app->request->isPost)
        {
            $selection = Yii::$app->request->post('price');

            $answeronajax = Notebooks::find()->where(['between', 'price', $selection[0], $selection[1]])->all();

            return $this->asJson([$selectionajax]);

        }
        return $this->render('catalog');
    }

(Пока Вёрстку ещё не делал)

Но вопросик именно по чекбоксам. Так как если выбран хотя бы 1 чекбокс $selection[2] уже будет массивом (Если выбор не сделан будет 0 не массивом)

Т е нужно сформироват запрос так чтобы where 'producer' = первое значение массива and where 'producer' = следующее значения массива и тд. Но это полбеды. Это погуглю мб сделаю.

Но если ни 1 чекбокс не выбран, прилетает там 0 вместо массива, следовательно where те уже будут не актуальны. Как сделать правильно проверку я не знаю и в голову приходит только костыльная идея

if (is_array($selection[2]))
{  Запрос с where которые ключают значения чекбоксов}
else
{ Вариант запроса без лишнего where}

А чекбоксов или радиобатонов будет у 6-8 параметров фильтрации, и что делать везде проверки такие с кучей кода?

[Дмитрий]

Евгений, задайте для checkbox-ов значения по умолчанию.

[Евгений]

slo_nik, Что-то такое получилось без верстки

public function actionCatalog()
    {
        if (Yii::$app->request->isAjax && Yii::$app->request->isPost)
        {
            $selection = Yii::$app->request->post('price');

            if (is_array($selection[2]))
            {
                $answeronajax = Notebooks::find()->where(['between', 'price', $selection[0], $selection[1]])->andWhere(['producer_id'=> $selection[2]])->all();

            }
            else
            {
                $answeronajax = Notebooks::find()->where(['between', 'price', $selection[0], $selection[1]])->all();
            }

            return $this->asJson([$answeronajax]);

        }
        return $this->render('catalog');
    }

[Дмитрий]

Евгений, можно сократить.

$answeronajax = Notebooks::find()->where(['between', 'price', $selection[0], $selection[1]])->all();
if (is_array($selection[2]))
{
    $answernoajax->andWhere(['producer_id'=> $selection[2]]);
}

[Евгений]

slo_nik, В общем вставка вёрстки оказалась куда проще чем я ожидал. Поставлю ответ решением. А как делать пагинацию в данной выборке, а особенно без обновления страницы и потери данных фильтрации пока думать не хочу так как страшно)