Перенести данные о товаре в модальное окно при клике на него

@Ofelion · Регистрация: 26.01.2015

Студворк — интернет-сервис помощи студентам

Доброго дня!
При программировании вёрстки (я только учусь, тренировочный проект) столкнулся с проблемой. Нужно, чтобы при клике на товар появлялось модальное окно с данными этого товара. Самостоятельно пытался прописать ссылку, в конце которой каждому товару присваивался id из базы данных

HTML5
1
<a href="[PHP]echo '/product'.$key['product_id'];[/PHP]"></a>

и в роутах прописать контроллер и экшн. Ошибки были следующие

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

Гуглил, нашёл некоторые похожие решения, через AJAX, но не совсем то. Подскажите, пож-та, как правильно сделать? Убил уже кучу времени.

товар, по клику на ссылку которог откроется модальное окно:

HTML5
1
2
3
     <div class="product-button-2">
           <a href="#" class="modal-view" data-fancybox data-toggle="modal" data-target="#productModal" title="Quickview"><i class="fa fa-search-plus"></i></a>
      </div>

Само модальное окно, которое должно содержать описание кликнутого товара:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
       <div class="modal fade" id="productModal" tabindex="-1" role="dialog">
                <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>
                        </div>
                        <div class="modal-body">
                            <div class="modal-product">
                                <div class="product-images">
                                    <div class="main-image images">
                                        <img alt="#" src="#"/>
                                    </div>
                                </div><!-- .product-images -->
 
                                <div class="product-info">
                                    <h1>Aenean eu tristique</h1>
                                    <input type="hidden" id="item_id" value="ID товара">
                                    ID товара: <span id="item_id_span"></span>
                                    <div class="price-box-3">
                                        <hr />
                                        <div class="s-price-box">
                                            <span class="new-price">$160.00</span>
                                            <span class="old-price">$190.00</span>
                                        </div>
                                        <hr />
                                    </div>
                                    <a href="shop.html" class="see-all">See all features</a>
                                    <div class="quick-add-to-cart">
                                        <form method="post" class="cart">
                                            <div class="numbers-row">
                                                <input type="number" id="french-hens" value="3">
                                            </div>
                                            <button class="single_add_to_cart_button" type="submit">Add to cart</button>
                                        </form>
                                    </div>
                                    <div class="quick-desc">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero.
                                    </div>
                                    <div class="social-sharing">
                                        <div class="widget widget_socialsharing_widget">
                                            <h3 class="widget-title-modal">Share this product</h3>
                                            <ul class="social-icons">
                                                <li><a target="_blank" title="Facebook" href="#" class="facebook social-icon"><i class="fa fa-facebook"></i></a></li>
                                                <li><a target="_blank" title="Twitter" href="#" class="twitter social-icon"><i class="fa fa-twitter"></i></a></li>
                                                <li><a target="_blank" title="Pinterest" href="#" class="pinterest social-icon"><i class="fa fa-pinterest"></i></a></li>
                                                <li><a target="_blank" title="Google +" href="#" class="gplus social-icon"><i class="fa fa-google-plus"></i></a></li>
                                                <li><a target="_blank" title="LinkedIn" href="#" class="linkedin social-icon"><i class="fa fa-linkedin"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div><!-- .product-info -->
                            </div><!-- .modal-product -->
                        </div><!-- .modal-body -->
                    </div><!-- .modal-content -->
                </div><!-- .modal-dialog -->
            </div>

@iplaton · 09.01.2019, 13:49

Сообщение от Ofelion

нашёл некоторые похожие решения, через AJAX, но не совсем то. Подскажите, пож-та, как правильно сделать?

осталось вопрос сформулировать. все правильно, если правильно

@sad67man · 10.01.2019, 16:34

[quote="Ofelion;13219752"] 1) покажите роут
2) покажите action
3) покажите вьюху.

@Ofelion · 11.01.2019, 01:29 **[ТС]**

sad67man, Я немного продвинулся в своём решении. Массив с данными нужного товара научился выводить через AJAX, но вот вывести эти данные в модалке не получается пока что. ВОт порядок моих действий:
1) Код с кнопкой, по нажатию на которую выскакивает модалка:

HTML5
1
2
3
<div class="product-button-2">
      <a href="#" class="modal-view viewPopup" data-id="<?php echo $key['id_product'];?>" data-fancybox data-toggle="modal" data-target="#productModal" title="Quickview"><i class="fa fa-search-plus"></i></a>
      </div>

Вот код попапа, который должен выскочить:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
Alexey Danilov, [09.01.19 01:18]
Привет)
Я сделал, немного по-другому, без json-массива. Данные распечатываются, но почему-то теперь пропал попап, не выводится при клике на лупу(
 
Вот код лупы:
<div class="product-button-2">
      <a href="#" class="modal-view viewPopup" data-id="<?php echo $key['id_product'];?>" data-fancybox data-toggle="modal" data-target="#productModal" title="Quickview"><i class="fa fa-search-plus"></i></a>
      </div>
 
Вот мой попап:
      <div class="modal fade" id="productModal" tabindex="-1" role="dialog">
                <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>
                        </div>
                        <div class="modal-body">
                            <div class="modal-product">
                                <div class="product-images">
                                    <div class="main-image images">
                                        <img alt="#" src="#"/>
                                    </div>
                                </div><!-- .product-images -->
 
                                <div class="product-info">
                                    <h1>Aenean eu tristique</h1>
                                    <input type="hidden" id="item_id" value="ID товара">
                                    ID товара: <span id="item_id_span"></span>
                                    <div class="price-box-3">
                                        <hr />
                                        <div class="s-price-box">
                                            <span class="new-price">$160.00</span>
                                            <span class="old-price">$190.00</span>
                                        </div>
                                        <hr />
                                    </div>
                                    <a href="shop.html" class="see-all">See all features</a>
                                    <div class="quick-add-to-cart">
                                        <form method="post" class="cart">
                                            <div class="numbers-row">
                                                <input type="number" id="french-hens" value="3">
                                            </div>
                                            <button class="single_add_to_cart_button" type="submit">Add to cart</button>
                                        </form>
                                    </div>
                                    <div class="quick-desc">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero.
                                    </div>
                                    <div class="social-sharing">
                                        <div class="widget widget_socialsharing_widget">
                                            <h3 class="widget-title-modal">Share this product</h3>
                                            <ul class="social-icons">
                                                <li><a target="_blank" title="Facebook" href="#" class="facebook social-icon"><i class="fa fa-facebook"></i></a></li>
                                                <li><a target="_blank" title="Twitter" href="#" class="twitter social-icon"><i class="fa fa-twitter"></i></a></li>
                                                <li><a target="_blank" title="Pinterest" href="#" class="pinterest social-icon"><i class="fa fa-pinterest"></i></a></li>
                                                <li><a target="_blank" title="Google +" href="#" class="gplus social-icon"><i class="fa fa-google-plus"></i></a></li>
 
<li><a target="_blank" title="LinkedIn" href="#" class="linkedin social-icon"><i class="fa fa-linkedin"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div><!-- .product-info -->
                            </div><!-- .modal-product -->
                        </div><!-- .modal-body -->
                    </div><!-- .modal-content -->
                </div><!-- .modal-dialog -->
            </div>

Вот мой AJAX:

JavaScript
1
2
3
4
5
6
7
8
9
        $(document).ready(function(){
            $(".viewPopup").click(function () {
                var id = $(this).attr("data-id");
                $.post("/product/view/"+id, {}, function (data) {
                    $("#result").html(data);
                });
                return;
            });
        });

AJAX формирует ссылку, которую я прописываю в роутах:
'product/view/([0-9]+)'=>'catalog/modal/$1'

Дальше CatalogController и в нём action:

PHP
1
2
3
4
5
6
7
    public function actionModal($id) {
        $product = array();
        $product = Catalog::getProductById($id);
        echo '<pre>';
        print_r($product);
        echo '</pre>';
    }

Модель:

PHP
1
2
3
4
5
6
7
    public static function getProductById($id){
        $id = intval($id);
        $db=Db::getConnection();
        $result=$db->query("SELECT * FROM products WHERE id_product=$id");
        $row=$result->fetch();
        return $row;
    }

Добавлено через 2 часа 6 минут
В общем, получил я JSON-массив:

PHP
1
2
3
4
5
6
7
8
    public function actionModal($id) {
        $product = array();
        $product = Catalog::getProductById($id);
        $product=array('product_name'=>$product['product_name'],
            'product_photo'=>$product['product_photo'],
            'price'=>$product['price'],'old_price'=>$product['old_price']);
        echo json_encode($product);
    }

Вывелось у меня при клике на товар:
{"product_name":"Laptop 1","product_photo":"\/views\/img\/product\/images\/laptops\/1.jpg","price":"500","old_price":"600"}

Как теперь эти данные подставить в вёрстку модального окна?

@fanatikus · 11.01.2019, 23:33

Сообщение от Ofelion

Как теперь эти данные подставить в вёрстку модального окна?

JavaScript
1
2
3
var  obj = JSON.parse(data);
$('element').html(obj.product_name);
$('element-1').html(obj.price);

@Ofelion · 13.01.2019, 14:59 **[ТС]**

fanatikus, сделал вот так, но никаких данных в попапе не отображается... Может, я js код не так написал?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
        $(document).ready(function(){
            $(".viewPopup").click(function () {
                var id = $(this).attr("data-id");
                $.post("/product/view/"+id, {}, function (data) {
                    $("#result").html(data);
                    var  obj = JSON.parse(data);
                    $('element').html(obj.product_name);
                    $('element-1').html(obj.price);
                });
                return;
            });
        });

Ну, вместо element и element-1 я использовал свои классы, которые прописал для соответствующих тегов попапа.

@fanatikus · 13.01.2019, 15:42

del

@Ofelion · 13.01.2019, 16:06 **[ТС]**

fanatikus, это как? Уже долго сижу с этим(

@fanatikus · 13.01.2019, 19:59

Сообщение от fanatikus

del

это я просто удалил сообщение.

@Ofelion · 14.01.2019, 02:04 **[ТС]**

fanatikus, а я правильно интегрировал ваш js в свой?

Добавлено через 1 час 5 минут
fanatikus, вот, что попадает в мой json:

{"product_name":"Phone 1","product_photo":"\/views\/img\/product\/images\/mobile\/1.jpg","price":"250","old_price":"300"}
Warning: call_user_func_array() expects parameter 1 to be a valid callback, class 'HomeController' does not have a method 'actionIndexphome' in C:\OSPanel\domains\localhost\components\ Router.php on line 57

Откуда Warning взялся?

Добавлено через 1 час 16 минут
Вопрос закрыт!
1) Чтобы Working'а не было, нужно у экшена прописать return: true;

PHP
1
2
3
4
5
6
7
8
9
10
    public function actionModal($id) {
        $product = array();
        $product = Catalog::getProductById($id);
        $product=array("product_name"=>$product['product_name'],
            "product_photo"=>$product['product_photo'],
            "price"=>$product['price'],"old_price"=>$product['old_price']);
        $product_json = json_encode($product);
        echo $product_json;
        return true;
    }

2) Вот так js-функция должна быть:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        $(document).ready(function(){
            $(".viewPopup").click(function () {
                var id = $(this).attr("data-id");
                $.post("/product/view/"+id, {}, function (data) {
                    $("#result").html(data);
                    var obj=JSON.parse(data);
                    $('.pName').html(obj.product_name);
                    $('.new-price').html(obj.price);
                    $('.old-price').html(obj.old_price);
                    $('.pic').attr("src",obj.product_photo);
                    $('.pic').attr("alt",obj.product_name);                    
                }); 
                return;                
            });
        });

@Fruit · 04.11.2021, 02:20

Возникла примерная проблема, тема старая, но всё таки, вдруг кто нибудь придёт сюда как я из поисковика. Моё решение:

HTML5
1
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal<?php echo $item->order_id;?>">Кнопка окна</button>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="modal fade" id="exampleModal<?php echo $item->order_id;?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                <div class="modal-body modal-body-order">
                    <h3>Данные по заказу <?php echo $item->order_id; ?>:</h3>
                    Данные заказа ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                    <button type="button" class="btn btn-primary">Удалить заказ</button>
                </div>
                </div>
            </div>
        </div>

Не знаю на сколько правильно, но пока всё работает как планировалось.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,834
	10.01.2019, 16:34
	[quote="Ofelion;13219752"] 1) покажите роут 2) покажите action 3) покажите вьюху. 0

@fanatikus 1932 / 1523 / 703 Регистрация: 17.11.2012 Сообщений: 6,585
	13.01.2019, 15:42
	del 0

@Ofelion 14 / 14 / 16 Регистрация: 26.01.2015 Сообщений: 213
	13.01.2019, 16:06 [ТС]
	fanatikus, это как? Уже долго сижу с этим( 0

Перенести данные о товаре в модальное окно при клике на него

Решение