This question already has answers here:
Passing HTML to template using Flask/Jinja2
(7 answers)
Closed yesterday.
I am using Flask ,Jinja2 template(html file) to post the panda dataframe tables which are stored in results in ABC.py.
Table looks like :Image
I am using dictionary to print it but it is not coming in right format
<div class="col-sm-5 col-sm-offset-1">
{% if results is not none %}
<h2>Compare</h2>
<br>
<div id="results">
<table class="table table-striped" style="max-width: 300px;">
<thead>
<tr>
<th>Specifications</th>
<th>part1</th>
<th>part2</th>
</tr>
</thead>
{% for key,value in results.iterrows() %}
<tr> <option value = {{value[0]}} </option> </tr>
<tr>
<option value = "{{value[0]}}">{{value[1]}}</option>
</tr>
# <option value="{{ value['0']}}">{{value['1'] }}</option>
{% endfor %}
</table>
</div>
{% endif %}
</div>
Have to do other things using jinja2 templates but stuck at very ground level.
Any suggestions please.
Thanks
You can directly render a table by adding the below to your template file:
{{ results.to_html() | safe}}
Related
i have table that changes according to the source
is there any way to change the href content base on a condition?
the only part that chnages in the code below is the following:
"<a href="{% url 'name' action='item' id=item.id %}" target="_blank"
at the moment i have the same code several times
{% for k,v in item.items %}
{% if forloop.counter0 != 0 %}
<td class='clickable-row trhover' ;
data-href="{% url 'name' action='item' id=item.id %}" ;
style="cursor: pointer;" title="Click to see item page">{{ v }}</td>
{% else %}
<td>
<a href="{% url 'name' action='item' id=item.id %}" target="_blank"
style="display:compact;">
<img src="{% static '/css/icons/new_window/popup-link.svg' %}" width="10" height="10" title="Click to open in a new tab">
</a>
{{ v }}
</td>
{% endif %}
{% endfor %}
My task is fairly straightforward but seems it doesn't. I am attempting to send the order confirmation email for out of stock product i.e whose inventory is zero or less. I am allowing to place out of stock order and wants to send order confirmation email as An order will be dispatched by June 17 in email body else for in-stock product just normal email as An order takes about 4-6 business days to be delivered.
I have used the combination of a variable to set conditional statement in order Confirmation newsletter edit box as below:
{% capture email_title %}<h2 style ="color:#F15A25">Thank you for your purchase!</h2> {% endcapture %}
<img src="https://cdn.shopify.com/s/files/1/2202/5979/files/OrderSuccessEmail_jpg.png?1379574749859827384" style="display: block; margin-left: auto; margin-right: auto;" width="570" height"150"/>
{% capture email_body %}
{% if requires_shipping %}
Hi {{ customer.first_name }}, we're getting your order ready to be shipped. Please look out for an email with tracking information.
{% if variant.inventory_quantity < 0 %} Will be dispatched by June 7
{% else %} An order takes about 4-6 business days to be delivered. {% endif %} But there's more good news, read below!<br><br>
<span style ="color:#F15A25">Get Rs. 250 cash back</span>- if you love our product, leave us a review on our website at the https://winknod.com/pages/reviews and we will refund you Rs. 250! No questions asked. <br> <br>
<span style ="color:#F15A25">100 Nights Trial</span> - Your 100 nights trial will start on the day your mattress is delivered. Please make sure to save the originally signed invoice otherwise we will not be able to entertain returns. Also, ensure that mattress is not damaged and there are no stains on a cover for returns to be approved. Please read the return Terms & Conditions here:
<br>
https://winknod.com/apps/help-center/#!tell-me-more-about-the-100-nights-trial
{% endif %}
{% endcapture %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
</style>
</head>
<body>
<table class="body">
<tr>
<td>
<table class="header row">
<tr>
<td class="header__cell">
<center>
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="shop-name__cell">
{%- if shop.email_logo_url %}
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
<h1 class="shop-name__text">
Wink & Nod
</h1>
{%- endif %}
</td>
<td class="order-number__cell">
<span class="order-number__text">
Order {{ order_name }}
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container">
<tr>
<td>
<h2>{{ email_title }}</h2>
<p>{{ email_body }}</p>
{% if order_status_url %}
<table class="row actions">
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell">View your order</td>
</tr>
</table>
{% if shop.url %}
<table class="link secondary-action-cell">
<tr>
<td class="link__cell"><span class='or'>or</span> Visit our store</td>
</tr>
</table>
{% endif %}
</td>
</tr>
</table>
{% else %}
{% if shop.url %}
<table class="row actions">
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell">Visit our store</td>
</tr>
</table>
</td>
</tr>
</table>
{% endif %}
{% endif %}
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Order summary</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>
<table class="row">
{% for line in line_items %}
<tr class="order-list__item">
<td class="order-list__item__cell">
<table>
<td>
{% if line.image %}
<img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% endif %}
</td>
<td class="order-list__product-description-cell">
{% if line.product.title %}
{% assign line_title = line.product.title %}
{% else %}
{% assign line_title = line.title %}
{% endif %}
{% if line.quantity < line.quantity %}
{% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %}
{% else %}
{% assign line_display = line.quantity %}
{% endif %}
<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>
{% if line.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line.variant.title }}</span>
{% endif %}
</td>
<td class="order-list__price-cell">
{% if line.original_line_price != line.line_price %}
<del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">{{ line.line_price | money }}</p>
</td>
</table>
</td>
</tr>{% endfor %}
</table>
<table class="row subtotal-lines">
<tr>
<td class="subtotal-spacer"></td>
<td>
<table class="row subtotal-table">
{% if discounts %}
{% capture discount_title %}Discount {% if discounts.first.code %}({{ discounts.first.code }}){% endif %}{% endcapture %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{ discount_title }}</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ discounts_savings | money }}</strong>
</td>
</tr>
{% endif %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Subtotal</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ subtotal_price | money }}</strong>
</td>
</tr>
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Shipping</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ shipping_price | money }}</strong>
</td>
</tr>
{% for line in tax_lines %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{ line.title }}</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ line.price | money }}</strong>
</td>
</tr>
{% endfor %}
</table>
<table class="row subtotal-table subtotal-table--total">
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Total</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ total_price | money_with_currency }}</strong>
</td>
</tr>
</table>
{% assign transaction_size = 0 %}
{% for transaction in transactions %}
{% unless transaction.kind == "capture" or transaction.kind == "void" %}
{% assign transaction_size = transaction_size | plus: 1 %}
{% endunless %}
{% endfor %}
{% if transaction_size > 1 %}
<table class="row subtotal-table">
<tr><td colspan="2" class="subtotal-table__line"></td></tr>
<tr><td colspan="2" class="subtotal-table__small-space"></td></tr>
{% for transaction in transactions %}
{% if transaction.status == "success" and transaction.kind == "authorization" or transaction.kind == "sale" %}
{% if transaction.payment_details.credit_card_company %}
{% capture transaction_name %}{{ transaction.payment_details.credit_card_company }} (ending in {{ transaction.payment_details.credit_card_last_four_digits }}){% endcapture %}
{% else %}
{% capture transaction_name %}{{ transaction.gateway | replace: "_", " " | capitalize }}{% endcapture %}
{% endif %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{transaction_name}}</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ transaction.amount | money }}</strong>
</td>
</tr>
{% endif %}
{% if transaction.kind == 'refund' %}
{% if transaction.payment_details.credit_card_company %}
{% assign refund_method_title = transaction.payment_details.credit_card_company %}
{% else %}
{% assign refund_method_title = transaction.gateway %}
{% endif %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Refund</span>
<br>
<small>{{ refund_method_title | capitalize }}</small>
</p>
</td>
<td class="subtotal-line__value">
<strong>- {{ transaction.amount | money }}</strong>
</td>
</tr>
{% endif %}
{% endfor %}
</table>
{% endif %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Customer information</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>
<table class="row">
<tr>
{% if requires_shipping and shipping_address %}
<td class="customer-info__item">
<h4>Shipping address</h4>
{{ shipping_address | format_address }}
</td>
{% endif %}
{% if billing_address %}
<td class="customer-info__item">
<h4>Billing address</h4>
{{ billing_address | format_address }}
</td>
{% endif %}
</tr>
</table>
<table class="row">
<tr>
{% if requires_shipping and shipping_address %}
<td class="customer-info__item">
<h4>Shipping method</h4>
<p>{{ shipping_method.title }}</p>
</td>
{% endif %}
{% assign transaction_count = transactions | size %}
{% if transaction_count > 0 %}
<td class="customer-info__item">
<h4>Payment method</h4>
{% for transaction in transactions %}
{% if transaction.status == "success" or transaction.status == "pending" %}
{% if transaction.kind == "authorization" or transaction.kind == "sale" %}
<p class="customer-info__item-content">
{% if transaction.payment_details.credit_card_company %}
{% capture credit_card_url %}notifications/{{ transaction.payment_details.credit_card_company | downcase | replace: " ", "_" }}.png{% endcapture %}
<img src="{{ credit_card_url | shopify_asset_url }}" class="customer-info__item-credit" height="24">
<span>Ending in {{ transaction.payment_details.credit_card_last_four_digits }} — <strong>{{ total_price | money }}</strong></span>
{% else %}
{{ transaction.gateway | replace: "_", " " | capitalize }} — <strong>{{ transaction.amount | money }}</strong>
{% endif %}
</p>
{% endif %}
{% endif %}
{% endfor %}
</td>
{% endif %}
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="footer__cell">
<center>
<table class="container">
<tr>
<td>
<p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at {{ shop.email }}</p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />
</td>
</tr>
</table>
</body>
</html>
When I place out of stock quantity test order from Shopify admin and check email, I always get a normal email with else statement email instead of if email sentence must be printed. What is wrong with my if block? or is there any dependency? I am always placing out of stock product for sure. If entire code is required, ready to share.Thanks.
I have a table with a dynamic row which I hide one of its columns using bootstrap hidden-xs. The next row which is footer is using colspan.
I wonder if it's possible to set the number of colspan depending on `screen-size (hidden-xs).
<table class="table table-bordered">
{% for product in products %}
<tr>
<td class="text-left hidden-xs">{{ product.name }}</td>
<td class="text-left">{{ product.model }}</td>
<td>{% for option in product.option %}
{% if option.type != 'file' %}
<div><small><span class="hidden-xs">{{ option.name }}: </span>{{ option.value }}</small></div>
{% else %}
<div><small><span class="hidden-xs">{{ option.name }}: </span>{{ option.value }}</small></div>
{% endif %}
{% endfor %}</td>
<td class="text-right">{{ product.quantity }}</td>
<td class="text-right">{{ product.price }}</td>
<td class="text-right">{{ product.total }}</td>
</tr>
{% endfor %}
{% for total in totals %}
<tr>
<td colspan="5" class="text-right">{{ total.title }}</td>
<td class="text-right">{{ total.text }}</td>
</tr>
{% endfor %}
<tbody>
UPDATE
For now such an approach came to my mind:
<tr class="hidden-xs">
<td colspan="5" class="text-right">{{ total.title }}</td>
<td class="text-right">{{ total.text }}</td>
</tr>
<tr class="hidden-xl hidden-lg hidden-sm">
<td colspan="4" class="text-right">{{ total.title }}</td>
<td class="text-right">{{ total.text }}</td>
</tr>
Is there any better solution?
First of all, Bootstrap 4 doesn't have a hidden-xs class. In fact, it doesn't have any type of hidden-* utility. Unless you defined such utilities yourself, you should probably use d-none d-sm-table-cell classes instead of hidden-xs.
Documented here
To your question, you can't set colspan responsively on a <td> using CSS.
The proper way to do it is to use JavaScript, along these lines:
const isXs = window.matchMedia('(max-width: 576px)')
const changeColspans = () =>
[...document.querySelectorAll('.variable-colspan')].forEach((cell) => {
cell.setAttribute('colspan', isXs.matches ? 2 : 4)
})
changeColspans()
window.addEventListener('resize', changeColspans)
where 2 and 4 are the colspan values you want to set to colspan when isXs.matches is true/false. You'll need to add variable-colspan class to each cell you want to change.
If you really want to stay away from a JS solution, for whatever reason, you could work around it, by creating a separate <td> for each case and using Bootstrap's display utilities (linked above) to display the appropriate one on the current responsiveness interval. Generic example:
<td coslapn="2" class="d-sm-none">I render on xs only</td>
<td colspan="4" class="d-none d-sm-table-cell">I render on sm and above</td>
The advantage of using JS here is that you don't need to swap DOM elements which has the potential to lose events bound on the element or generate rendering performance issues, on larger tables. These issues can be addressed, of course, but it's better not to have them in the first place.
JS can also easily handle multiple cases, whereas with the CSS workaround you need a separate element for each case.
Let's say I have the following two lists:
names = ['Josh', 'Brad', 'Jordan']
favorite_colors = [['blue', 'red'], ['purple', 'gold', 'yellow'], ['green', 'pink']]
That is to say, Josh's favorite colors are blue and red, Brad's are purple and gold, etc.
I'm passing this data to a jinja2 template via flask and I'm looking to throw it all in a table. I want the table to look like so: https://jsfiddle.net/46qqfef5/
As you can see, I'm using the rowspan attribute to group name and color. However, when I try to iterate over the data using the jinja2 code below the <td rowspan="2"> tag appears in EVERY row (and I need it to only appear the first time a new name occurs).
jinja2:
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
{% for name_index in range(names | count) %}
{% for color_index in range(favorite_colors[name_index] | count %}
<tr>
<td rowspan="{{ favorite_colors[name_index] | count }}">{{ names[name_index] }}</td>
<td>{{ favorite_colors[name_index][color_index] }}</td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
<div
If I remove rowspan={{ ... }} from the jinja2 code above I get the following table but that looks pretty awful to me: https://jsfiddle.net/46qqfef5/3/
I need a way to print the name cell for only the first occurrence of a new name.
You can use special loop variables for checking if current loop is first. In your case loop.first can be used:
<table>
<thead>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
{% for name_index in range(names | count) %}
{% for color in favorite_colors[name_index] %}
<tr>
{% if loop.first %}
<td rowspan="{{ favorite_colors[name_index] | count }}">
{{ names[name_index] }}
</td>
{% endif %}
<td>{{ color }}</td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
I have created a Form but becuase of the alignment problem I try to align myself in my template,
Forms.py
class VolunteerForm(forms.ModelForm):
volposition = forms.CharField(label="Volunteer Position")
roledesc = forms.CharField(label="Role Description")
noofhours = forms.IntegerField(label="Time requirements")
Qualreqt = forms.CharField(label="Qualifications and Requirements")
class Meta:
model = Volunteer
views.py
def volunteer_page(request):
#import pdb
pdb.set_trace()
if request.method == 'POST':
form = VolunteerForm(request.POST)
if form.is_valid():
f = form.save(commit=False)
f.save()
message = "Position added"
return HttpResponseRedirect('.')
else:
form = VolunteerForm()
variable = RequestContext(request,{'form':form})
return render_to_response('registration/volunteer.html',variable)
Volunteer.html
{% extends "base.html" %}
{% block title %}User Registration{% endblock %}
{% block head %}User Registration{% endblock %}
{% block content %}
<form method="post" action".">
<table border="0">
<tr>
{{ form.non_field_errors }}
<div class="fieldWrapper">
{{ form.volposition.errors }}
<th><label for="id_volposition">Volunteer Position</label></th>
<th>{{ form.volposition }}<maxlength="100"></th>
</div>
</tr>
<tr>
<div class="fieldWrapper">
{{ form.roledesc.errors }}
<th><label for="id_roledesc">Role Description:</label></th>
<th>{{ form.roledesc }}</th>
</div>
</tr>
<tr>
<div class="fieldWrapper">
{{ form.noofhours.errors }}
<th><label for="id_noofhours">Number of Hours:</label></th>
<th>{{ form.noofhours }}</th>
</div>
</tr>
<tr>
<div class="fieldWrapper">
{{ form.qualreqt.errors }}
<th><label for="id_qualreqt">Qualification and Requirements</label></th>
<th>{{ form.Qualreqt }}</th>
</div>
</tr>
</table>
<input type="submit" value="register" />
</form>
{% endblock %}
The role description and qualifications/requirements should have a much bigger text area compared to the html generated by this page
What would be my changes?
Well you could define the css attributes in Django...
https://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.Widget.attrs
Or you could simply write the css manually... right click and view source if you're unsure what the id's of your html elements are