13 / 13 / 16
Регистрация: 26.01.2015
Сообщений: 213
1

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

07.01.2019, 01:33. Показов 4773. Ответов 10

Доброго дня!
При программировании вёрстки (я только учусь, тренировочный проект) столкнулся с проблемой. Нужно, чтобы при клике на товар появлялось модальное окно с данными этого товара. Самостоятельно пытался прописать ссылку, в конце которой каждому товару присваивался id из базы данных
HTML5
1
<a href="[PHP]echo '/product'.$key['product_id'];[/PHP]"></a>
и в роутах прописать контроллер и экшн. Ошибки были следующие
  1. При клике на ссылку содержание модального окна вместо нужного контента (карточки товара) содержало копию самой исходной страницы
  2. 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>
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
07.01.2019, 01:33
Ответы с готовыми решениями:

Модальное окно при клике
Здравствуйте! Есть таблица, выводится из бд, как сделать, чтобы при клике на ячейках выскакивало...

MessageBox: Как сделать так, чтобы если окно модальное, при клике на родительское окно MessageBox мигал?
Здравия всем! Никак не найду нужный MB_*, как можно сделать так, чтобы если сделать MessageBox...

Как при изменении данных в одном справочнике перенести некоторые данные в него из другого справочника?
Подскажите пожалуйста! Возможно ли такое? Есть справочник &quot;База контрагентов&quot; так скажем,...

Переделать модальное окно так, чтобы в него можно было загружать внешний файл
Кто нибудь может помочь и подсказать как это модальное окно переделать так что бы в него можно было...

10
-45 / 16 / 4
Регистрация: 01.12.2018
Сообщений: 106
09.01.2019, 13:49 2
Цитата Сообщение от Ofelion Посмотреть сообщение
нашёл некоторые похожие решения, через AJAX, но не совсем то. Подскажите, пож-та, как правильно сделать?
осталось вопрос сформулировать. все правильно, если правильно
0
1423 / 956 / 505
Регистрация: 23.08.2015
Сообщений: 2,476
10.01.2019, 16:34 3
[quote="Ofelion;13219752"] 1) покажите роут
2) покажите action
3) покажите вьюху.
0
13 / 13 / 16
Регистрация: 26.01.2015
Сообщений: 213
11.01.2019, 01:29  [ТС] 4
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"}

Как теперь эти данные подставить в вёрстку модального окна?
0
1929 / 1521 / 701
Регистрация: 17.11.2012
Сообщений: 6,567
11.01.2019, 23:33 5
Лучший ответ Сообщение было отмечено Ofelion как решение

Решение

Цитата Сообщение от Ofelion Посмотреть сообщение
Как теперь эти данные подставить в вёрстку модального окна?
Javascript
1
2
3
var  obj = JSON.parse(data);
$('element').html(obj.product_name);
$('element-1').html(obj.price);
1
13 / 13 / 16
Регистрация: 26.01.2015
Сообщений: 213
13.01.2019, 14:59  [ТС] 6
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 я использовал свои классы, которые прописал для соответствующих тегов попапа.
0
1929 / 1521 / 701
Регистрация: 17.11.2012
Сообщений: 6,567
13.01.2019, 15:42 7
del
0
13 / 13 / 16
Регистрация: 26.01.2015
Сообщений: 213
13.01.2019, 16:06  [ТС] 8
fanatikus, это как? Уже долго сижу с этим(
0
1929 / 1521 / 701
Регистрация: 17.11.2012
Сообщений: 6,567
13.01.2019, 19:59 9
Цитата Сообщение от fanatikus Посмотреть сообщение
del
это я просто удалил сообщение.
0
13 / 13 / 16
Регистрация: 26.01.2015
Сообщений: 213
14.01.2019, 02:04  [ТС] 10
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;                
            });
        });
0
9 / 8 / 5
Регистрация: 17.02.2016
Сообщений: 283
04.11.2021, 02:20 11
Возникла примерная проблема, тема старая, но всё таки, вдруг кто нибудь придёт сюда как я из поисковика. Моё решение:
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>
Не знаю на сколько правильно, но пока всё работает как планировалось.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
04.11.2021, 02:20

Передать данные в модальное окно
Всем хорошего дня! Помогите пожалуйста в решении задачи. Есть на сайте выведенные flex новостные...

Добавить данные через модальное окно
Добрый день. У меня есть таблица которая выводится из бд, есть функция добавления данных через...

Как передать данные в модальное окно
В основном окне у меня есть var tur = oImg.src; Я открываю модальное окно...

Ввести данные в модальное окно HTML
Доброй ночи! При переходе на определенный сайт, всплывает модальное окно с просьбой ввести...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.