Price Alert: Как передать всплывающее окно с ценой товара из списка товаров?

Question

У меня есть список товаров, для каждого товара у меня есть кнопка «Создать оповещение о цене». Когда я нажимаю на кнопку, появляется всплывающее окно с ценой текущего товара:

<link href="{{ asset('../web/main.css') }}" rel="stylesheet">

<h1>Products</h1>
<table border="1">
    <tr>
        <td>Name</td>
        <td>Image</td>
        <td>Brand</td>
        <td>Category</td>
        <td>URL</td>
        <td>Shop</td>
    </tr>
    {% for product in products %}
        <tr>
            <td>{{product.name}}</td>
            <td><img src="{{product.image}}" ></td>
            <td>{{product.brand}</td>
            <td>{{product.category}}</td>
            <td>{{product.url}}</td>
            <td>{{product.shop}}</td>
            <td><div class="box"><a class="button" href="#popup1">Create a price Alert</a></div>


            </td>
        <div id="popup1" class="overlay">
            <div class="popup">

                <h4>We will keep you updated</h4>
                <h4>Actual Price</h2> ???<br>       <a class="close" href="#">&times;</a>
                    <h4>Desired amount</h4><input type="text" name="montant_souhaite" ><br>



            </div>
        </div>

    </tr>  


{% endfor %}    

</table>    

Answer 1

У вас есть много способов сделать это.

Попробуйте это:

    <h1>Products</h1>
    <table border="1">
        <tr>
            <td>Name</td>
            <td>Image</td>
            <td>Brand</td>
            <td>Category</td>
            <td>URL</td>
            <td>Shop</td>
        </tr>
        {% for product in products %}
            <tr>
                <td>{{product.name}}</td>
                <td><img src="{{product.image}}" ></td>
                <td>{{product.brand}</td>
                <td>{{product.category}}</td>
                <td>{{product.url}}</td>
                <td>{{product.shop}}</td>
                <td>
                <div class="box">
                    <a class="button" href="#popup-{{ product.id }}">Create a price Alert</a>
                </div>  
                </td>
                <div id="popup-{{product.id}}" class="overlay">
                    <div class="popup">
                        <h4>We will keep you updated</h4>
                        <h4>Actual Price</h2> {{ product.price }}<br>
                        <a class="close" href="#">&times;</a>
                        <h4>Desired amount</h4>
                        <input type="text" name="montant_souhaite" ><br>
                    </div>
                </div>
            </tr>  
        {% endfor %}    
    </table> 

Вы также можете использовать ajax.Вы не загрузите все модалы на одной странице.

(кстати, используйте th вместо tr в качестве заголовка таблицы)

Answer 2

Это скрипт:

<script>
    $('.alert').on('click', function(){
      $('.price').html($(this).data("price"));
   }
);
</script>

HTML будет выглядеть так:

<link href="{{ asset('../web/main.css') }}" rel="stylesheet">

<h1>Products</h1>
<table border="1">
    <tr>
        <td>Name</td>
        <td>Image</td>
        <td>Brand</td>
        <td>Category</td>
        <td>URL</td>
        <td>Shop</td>
    </tr>
    {% for product in products %}
        <tr>
            <td>{{product.name}}</td>
            <td><img src="{{product.image}}" ></td>
            <td>{{product.brand}</td>
            <td>{{product.category}}</td>
            <td>{{product.url}}</td>
            <td>{{product.shop}}</td>
            <td><div class="box"><a class="alert button" data-price="{{ product.price }}" href="#popup1">Create a price Alert</a></div>


            </td>
        <div id="popup1" class="overlay">
            <div class="popup">

                <h4>We will keep you updated</h4>
                <h4>Actual Price</h2> <span class='price'></span><br>       <a class="close" href="#">&times;</a>
                    <h4>Desired amount</h4><input type="text" name="montant_souhaite" ><br>



            </div>
        </div>

    </tr>  


{% endfor %}    

</table> 

Answer 3

Используете ли вы lib для обработки всплывающих окон, или вы используете пользовательский JS?

Если это пользовательский JS, есть много способов сделать это, одним из них является добавление атрибута «data-price» к вашему <tr>, содержащему цену, и класса «price» к <span> отметьте цену в вашем всплывающем окне.

Затем вы можете сделать это, например:

$('.box button').on('click', function(){
      $('#popup1 .price').html($(this).parents('tr').first().data('price'));
   }
);

Ваш HTML будет выглядеть так:

<link href="{{ asset('../web/main.css') }}" rel="stylesheet">

<h1>Products</h1>
<table border="1">
    <tr>
        <td>Name</td>
        <td>Image</td>
        <td>Brand</td>
        <td>Category</td>
        <td>URL</td>
        <td>Shop</td>
    </tr>
    {% for product in products %}
        <tr data-price='{{ product.price }}'>
            <td>{{product.name}}</td>
            <td><img src="{{product.image}}" ></td>
            <td>{{product.brand}</td>
            <td>{{product.category}}</td>
            <td>{{product.url}}</td>
            <td>{{product.shop}}</td>
            <td><div class="box"><a class="button" href="#popup1">Create a price Alert</a></div>


            </td>
        <div id="popup1" class="overlay">
            <div class="popup">

                <h4>We will keep you updated</h4>
                <h4>Actual Price</h2> <span class='price'>???</span><br>       <a class="close" href="#">&times;</a>
                    <h4>Desired amount</h4><input type="text" name="montant_souhaite" ><br>



            </div>
        </div>

    </tr>  


{% endfor %}    

</table> 

Если вы используете библиотеку lib, посмотрите документацию, есть специальные функции обратного вызова, чтобы добавить в нее пользовательский процесс.