I'm new in flask. When you use QuerySelectMultipleField in the jinja2 it shows as a drop-down select-box. but I don't like the drop-down and I prefer the options to be visible permanently without drop-down like checkbox. Is it possible?
Lets assume you have a queryselectmultiplefield for a field named 'answer'
{% for item in form.answer %}
<div>
<input type="checkbox" name="{{ item.name }}" value="{{ item.data }}">
{{ item.label }}
</div>
{% endfor %}
Related
I'm trying to make it so that when the inventory levels for certain products are less than 1, it changes the button to say "Made to Order" instead of "Add to Cart" so that it implies they won't ship immediately.
I made a new product template and product form and everything associated with that, but when I change the button code, it doesn't seem to do anything.
I'm using the most recent version of the Palo Alto theme.
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn" data-add-to-cart>
<span id="AddToCartText" data-add-to-cart-text>
{%- if variants_count < 1 -%}
{{- 'products.product.made_to_order' | t -}}
{%- else -%}
{{- 'products.product.add_to_cart' | t -}}
{%- endif -%}
</span>
{%- render 'icon-loading' -%}
</button>
You probably want to issue a little code to tell you the value of the liquid variable variants_count. It is not at all clear what that is set to. Is it the quantity of the current variant in inventory? If so, then your code should work. If not, why are you using it as a check? You can always access the quantity of a variant using the current variant in your variant rendering loop. variant.inventory_quantity is the value you probably should be using.
So the first thing you are probably not doing right is checking for the quantity of a variant outside the product.variants rendering loop. The Add to Cart button is most often outside the scope of this loop, as it usually pertains to adding a product to the cart using a form submit.
So now your challenge is instead to listen to the variant currently selected by the customer. When that variant is selected, the quantity will be used to decide what to print on the button. So you need some Javascript to alter the button text.
Does that make sense? Changing the text once is never going to work unless you only ever have one variant, in which case, checking quantity would work, but as I said, this is a rare thing for most shops, to only ever have one variant.
Try this, code is not tested;
Basically, added data-qty when inventory is less than 1. When that option is selected, use js to check the attr and change the text of the button.
<select name="id" id="productSelect" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}"
{% if variant.inventory_quantity < 1 %}
data-qty="qty"
{% endif %}
>{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
<div class="form__column{% if section.settings.enable_payment_button %} form__column--shopify-payment-btn{% endif %}">
<label> </label>
<button type="submit" name="add" id="AddToCart-{{ section.id }}" class="btn btn--fill btn--regular btn--color{% if section.settings.enable_payment_button %} btn--shopify-payment-btn btn--secondary-accent{% endif %}">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
<script>
$(document).ready(function(){
var qty = $("#productSelect option:selected").attr('data-qty');
if (qty){
$('#AddToCartText').text('Made to Order');
}
else {
$('#AddToCartText').text('Order Now');
}
$('#productSelect').on('change', function (){
qty = $("#productSelect option:selected").attr('data-qty');
if (qty){
$('#AddToCartText').text('Made to Order');
}
else {
$('#AddToCartText').text('Order Now');
}
});
});
</script>
my Question is: I want do a condition in Django Template with css but it didnt work.
<label>{% if not typ.required %}
{% trans 'Bitte Auswahl treffen' %}{% endif %}</label>
<input type="checkbox" {% if typ.required %} style="display:none;" checked="checked"
{% endif %} name="checkbox"
data-toggle="toggle" id="{{ typ.typ_id }}"
value="{{ cookie_id }}" />
{% if typ.required %} style="display:none;" checked="checked"{% endif %}
checked="checked" works but the Style not.
If i press f12 to watch the site i see this style in the input type
Thank you guys
i find the solution. The div above overwrite the style of the checkbox :-)
I'm sure there's better ways of doing this but I'm just curious if this is an insecure way of passing data to the view
Template:
{% for object in order.all %}
...other code
<form method="POST">
{% csrf_token %}
{{ form }}
<input type="hidden" name="cart_id" value="{{ object.cart_id }}">
{% endfor %}
I created a custom template tag in Django called text_field
#register.inclusion_tag('form_field_tags/text_field.html')
def text_field(field, prefix=None, field_type=None, attr=None, **kwargs):
return {
'field': field,
'prefix': prefix,
'field_type': field_type,
'placeholder': '',
'attrs': parse_attrs(attr)
}
Where parse_attrs is a function that takes as input something like this class=form-control mb-4, v-model=property_name.
{% text_field form.property_name attr="class=form-control mb-4, v-model=property_name" %}
parse_attrs then create a dictionary of HTML attribute and value that can be looped over, so in my text_field.html i can loop over all the attrs passed in from the text_field custom template tag
<label >
{% if field.field.required %}
<strong> {{ field.label }} <span> * </span> </strong>
{% else %}
{{ field.label }}
{% endif %}
</label>
<input
{% if field_type == "password" %}
type="password"
{% else %}
type="text"
{% endif %}
{% for attr, val in attrs.items %}
{{ attr }} = {{ val }}
{% endfor %}
name="{% if prefix %}{{prefix}}-{% endif %}{{ field.name }}"
placeholder="{{ placeholder }}"
id="{% if prefix %}{{prefix}}-{% endif %}{{ field.name }}"
{% if field.field.required %}
required="required"
{% endif %}
{% if field.value %}
value="{{ field.value }}"
{% endif %}>
However, when I try to refresh the browser and see the rendered output what I get is
<input type="text" class="form-control mb-4" name="property_name" placeholder="" id="property_name" required="required">
instead of this
<input type="text" v-model="property_name" class="form-control mb-4" name="property_name" placeholder="" id="property_name" required="required">
Any thoughts on how to go about this?
So I realized that the browser I was using (Firefox Dev) wasn't showing the v-model directive when viewed with the browser inspector nevertheless if you look at the HTML that gets sent in the browser through the network tab, the v-model directive is definitely there so Vue.js would recognize it.
Let's say I'm making some page where you can upvote several items in a list. Using django templates I might make a form encompassing the upvote button, or encompassing the entire list of posts, i.e.:
<ul>
{% for post in posts %}
<li> {{ post.url }}
<form action="/upvote" method="POST">
<button name="post_id" value="{{ post.id }}" type="submit">Upvote</button>
</form> </li>
{% endfor %}
</ul>
or
<form action="/upvote" method="POST">
<ul>
{% for post in posts %}
<li> {{ post.url }} <button name="post_id" value="{{ post.id }}" type="submit">Upvote</button>
{% endfor %}
</ul>
</form>
Which one is better practice?
I guess this could be a duplicate of this question: Each Radiobutton for each form or 1 Form for all radiobuttons?