Можно ли использовать шаблон колбы для отображения продуктов в сетке / таблице? - PullRequest
Новая
       11

Можно ли использовать шаблон колбы для отображения продуктов в сетке / таблице?

0 голосов
/ 18 февраля 2019

Попытка получить информацию о продукте (название продукта, изображение продукта, цену продукта) для отображения в сетке с использованием шаблона колбы.Существует 10 товаров, я пытался показать 5 товаров по 2 строки.

Я пытался получить информацию о товаре, чтобы отобразить как изображение из этой ссылки: https://schier.co/blog/2014/12/05/html-templating-output-a-grid-in-a-single-loop.html

Но всякий раз, когдаЯ использую

, но ничего не отображается, поэтому я снова использую таблицы. 
<table style="height: 200px;" width="200">
    <tbody>
        <tr>
        {% for x in result %}
            <td style="width: 190px;">
                <a href="/get_asin/{{ x['asin'] }}" target=_blank><img src = {{ x['product_image'] }}></a>
                <a href="/get_asin/{{ x['asin'] }}" " target=_blank>{{ x['product_name'] }}</a><br>
                <a href="/get_asin/{{ x['asin'] }}" " target=_blank>{{ x['TLC'] }}</a>
                <br>
            </td>
        {% endfor %}
        </tr>
    </tbody>
</table>

Я пробовал другие ответы от SO, но элементы либо отображаются в одной строке, либо в одном столбце,и не смог заставить его отображаться в сетке.

Отредактировано: вот что я надеялся получить: 

<table>
<tbody>
<tr>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 1 name</p>
<p>product 1 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 2 name</p>
<p>product 2 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 3 name</p>
<p>product 3 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 4 name</p>
<p>product 4 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 5 name</p>
<p>product 5 price</p>
</td>
</tr>
<tr>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 6 name</p>
<p>product 6 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 7 name</p>
<p>product 7 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 8 name</p>
<p>product 8 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 9 name</p>
<p>product 9 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 10 name</p>
<p>product 10 price</p>
</td>
</tr>
</tbody>
</table>

Отредактировано: app.py содержит следующие строки: 

result = list_matching(keyword)
return render_template('product_list_template.html', result=result)

Переменная «result» представляет собой словарь списков информации о продукте, импортированных из другой функции, которая анализировала информацию из источника. 

[{'product_id': 'IP4D8', 'product_name': ... etc. ... 'price': '12.03'}, 
{'product_id': 'IP4D10', 'product_name': ... etc. ... 'price': '12.03'}]

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Я не могу комментировать, поэтому я должен написать как ответ.Но это зависит от того, что вы получаете в результате.Если вы используете flask-sqlalchemy, то вы должны получать объект модели.Таким образом, если у вас есть модели «Продукт», то результатом будет модель продукта со всеми столбцами.Вы можете получить доступ к ним как: 

{% for product in result %}
<p>{{ product.productname }}</p>
<img src='{{ product.imagename}}'> //ofcourse you have to give complete path before
{% endfor %}
0 голосов
/ 18 февраля 2019

Поскольку весь цикл for находится внутри тега <tr>, который приводит к отображению всего в одной строке.
Проблема связана с вашим HTML-кодом.
Поместите эти <tr> теги внутрь цикла for.

<table style="height: 200px;" width="200">
    <tbody>
        {% for x in result %}
         <tr> {## Here ##}
            <td style="width: 190px;"><a href="/get_asin/{{ x['asin'] }}" target=_blank><img src ="{{ x['product_image'] }}"></a></td>
                <td><a href="/get_asin/{{ x['asin'] }}" target=_blank>{{ x['product_name'] }}</a><br></td>
                <td><a href="/get_asin/{{ x['asin'] }}" target=_blank>{{ x['TLC'] }}</a><br></td>
         </tr> {## And Here ##}
        {% endfor %}
    </tbody>
</table>

Я отредактировал ответ в соответствии с вашим комментарием.

Редактировать: я запустил следующий код, и он отображает все в хорошо отформатированной таблице, попробуйте запустить его один раз (у вас может быть несколькоошибка в app.py файла index.html, как это обычно происходит):
app.py:

from flask import Flask, render_template

app = Flask(__name__)

result = [{'a': 'a', 'b': 'b'}, {'a': 'aa', 'b': 'bb'}]

@app.route("/")
def index():
    return render_template("index.html", result=result)

app.run()

templates / index.html: 

<table style="height: 200px;" width="200">
<tbody>
        {% for x in result %}
        <tr> {## Here ##}
                <td style="width: 190px;">{{ x["a"] }}<br></td>
                <td>{{ x["b"] }}<br></td>
        </tr> {## And Here ##}
        {% endfor %}
</tbody>
</table>

Источник сгенерированногоHTML: 

<table style="height: 200px;" width="200">
<tbody>

    <tr> 
        <td style="width: 190px;">a<br></td>
        <td>b<br></td>
    </tr> 

    <tr> 
        <td style="width: 190px;">aa<br></td>
        <td>bb<br></td>
    </tr> 

</tbody>
</table>
...