I'm trying to add flags to my dropdown for i18n, so far I've tried adding an img tag and using as background image but none of them seem to work
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
{% get_current_language as LANGUAGE_CODE %}
<form action="{% url 'set_language' %}" method="post">
{% csrf_token %}
<input type="hidden" name="next" value="{{ redirect_to }}">
<select name="language" id="" class="icon-menu">
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %}
<option value="{{language.code}}"
{% if language.code == LANGUAGE_CODE %} selected {% endif %}
{% if language.code == "en-gb" %}
style="background-image:url(/static/img/en-gb.png);" alt="english">english
{% elif language.code == "pt-br" %}
>portugues<img src="/static/img/pt-br.png" alt="">
{% else %}
{{ language.name_local }}
{% endif %}
</option>
{% endfor %}
</select>
<input type="submit" value="{% trans 'Go' %}">
</form>
</li>
you should consider using a 3rd javascript library like select2 (https://select2.org/).
To learn more why refer to this doc from Mozilla (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Styling_with_CSS) :
The element's internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.
Related
I am a super beginner with HTML, however, I am trying to resolve an issue with my website. I am trying to concatenate a wildcard(*) to the end of whatever a consumer tries to search so that it picks up similarly tagged items, however, I cannot figure out where to add said code... Our current search query works well when pulling up items based on partial keywords, but when hitting the 'enter' button it will say it could not find any products.
Additional notes: This is a Shopify website with a theme from halothemes so most of this is coded by them.
{% assign grid_results = true %}
<div class="search-page collection-template" data-search-page>
<div class="container">
{% if search.performed %}
{% comment %}
Avoid accessing search.results before the opening paginate tag.
If you do, the pagination of results will be broken.
{% endcomment %}
{% paginate search.results by 15 %}
{% comment %}
We don't have any results to show. Feel free to show off featured products
or suggested searches here.
{% endcomment %}
{% if search.results_count == 0 %}
<header class="page-header">
<h2>
{% render 'multilang' with settings.search_1 %}
<strong> "{{ search.terms }}" </strong>
{% render 'multilang' with settings.search_2 %}
</h2>
</header>
{% else %}
<header class="page-header">
<h2>
{% render 'multilang' with settings.search_3 %}
<strong> "{{ search.terms }}" </strong>
{% render 'multilang' with settings.search_4 %}
</h2>
</header>
{% comment %}
Each result template, based on the grid_layout variable above
{% endcomment %}
<div class="block-row col-main">
{% if grid_results == false %}
<div class="product-collection products-list product-search row">
{% for product in search.results %}
<div class="grid-item col-12{% if settings.product_image_border%} grid-item-border{% endif %}">
{% render 'search-result' with product as product %}
</div>
{% endfor %}
</div>
{% else %}
<div class="products-grid product-search row product-collection">
{% for product in search.results %}
<div class="grid-item col-6 col-md-4{% unless settings.layout_style == 'layout_style_1170' %} col5 col-lg-3{% endunless %}{% if settings.product_image_border%} grid-item-border{% endif %}">
{% if settings.style_product_grid == 'style_product_grid_2' %}
{% render 'product-grid-item-style-2' with product as product %}
{% else %}
{% render 'product-grid-item' with product as product %}
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
{% if paginate.pages > 1 %}
<div class="padding">
{% render 'pagination-page' paginate: paginate %}
</div>
{% endif %}
{% endpaginate %}
{% else %}
{% comment %}
If search.performed is false, someone either accessed the page without
the q parameter, or it was blank.
Be sure to show a search form here, along with anything else you want to showcase.
{% endcomment %}
<header class="page-header">
<h2 style="text-align:center" {% if settings.enable_multilang %}data-translate="general.search.title"{%endif%}>{{ 'general.search.title' | t }}</h2>
<div class="header-search__form">
<form action="/search" method="get" class="search-bar" role="search">
<input type="hidden" name="type" value="product">
<input type="search" name="q"
{% if settings.enable_multilang %} data-translate="general.search.placeholder" translate-item="placeholder"{% endif %}
placeholder="{{ 'general.search.placeholder' | t }}"
class="input-group-field" aria-label="Search Site" autocomplete="off">
<button type="submit" class="btn icon-search">
{% render 'icon-search' %}
</button>
</form>
</div>
</header>
{% endif %}
Please let me know if you guys need any additional information! Thank you!
You can use a simple script to add a wildcard to the search query on submitting the form e.g:
var searchForm = document.querySelector(".search-bar");
searchForm.addEventListener("submit", function(e) {
var searchInput = searchForm.querySelector("[name=q]");
var q = searchInput.value;
if (!q.match(/\*$/)) {
e.preventDefault();
searchInput.value = q + "*";
searchForm.submit();
}
});
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?
I'm currently customising the theme 'Sidecar' for a Bigcartel site, and im trying to add a dropdown menu that populates with only the Artist links on the fixed sidebar.
I've tried using just the simple code to surround the but this doesnn't seem to work. It wont drop down, or show anything at all, other than what is pictured below.
Can anyone help ?
Before I added the dropdown - https://db.tt/gYoAFdW3
Then after I applied the code below - https://db.tt/w3UFxzoA
{% if artists.active != blank %}
<section>
<h2 class="title">Artists</h2>
<select>
<ul>
{% for artist in artists.active %}
<li>
<a href="{{ artist.url }}" class="page {% if page.full_url contains artist.url %}current{% endif %}">
{{ artist.name }}
</a>
</li>
{% endfor %}
</ul>
</select>
</section>
{% endif %}
{% if artists.active != blank %}
<section>
<h2 class="title">Artists</h2>
<select onchange="location = this.options[this.selectedIndex].value;">
{% for artist in artists.active %}
<option value="{{ artist.url }}">{{ artist.name }}</option>
{% endfor %}
</select>
</section>
{% endif %}