I have a form set up using Django's form facilities and it gets rendered in the template like so:
{% block content %}
<h1>Register to join Forge Design</h1>
<form method="post" action="">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="{% trans 'Submit' %}" />
</form>
{% endblock %}
I have the fields First name, Last name, Email and Available date, which will render out my fields vertically with their labels left aligned. What I would like is to control each field such that I will have a layout like in the screenshot below:
Desired form layout
Could anyone best advise how to customise so that I can intersperse labels in between fields such as the "Name" and "Email Address *" and change the positioning of the first and last name labels so that they sit below their respective fields. Is this something I must do by replacing in the template {{form.as_p}} with the individual {{form fields}} and then wrapping that in a div to be controlled by CSS?
Thanks
You can access to each field by name define in your form
{{ form.first_name.errors }} # Error of your field first name
{{ form.first_name.label_tag }} # Label of your field first name, generate a label tag
{{ form.first_name }} # Input for your field first name
https://docs.djangoproject.com/en/1.10/topics/forms/#rendering-fields-manually
Related
I am attempting to add a product meta fields in a quick view product option on my product collection,
Here is the code I am using, the meta field in the tag is not working
{%- if collection.title == "vluevlockers" -%}
<div class="sizing-text">
<h2 class="help-text">sizing information of the frames</h2>
<p>{{ product.metafields.custom.frames_set_blueblocker }}</p>
<div class="bold_options"> </div>
</div>
{%- endif -%}
When I try to console.log the meta field it gives me null, But the same meta field is working fine on the single product page.
What I want to do:
Capture two variables {{section.settings.{{title}}_modal_title}}
Context:
The links in the linklist are not really used as links, but purely so user can reorganize it in their Shopify portal.
External javascript file creates elements (modals) on click event, value from section.settings.XXX_modal_title is supposed to be used in the created modals.
The linklist:
<ul class="menu">
{% for link in linklists.main-menu.links %}
<li data-menu="{{ link.title | upcase }}" class="menu-link">
<p class="menu-title">[{{ link.title | upcase }}]</p> <-- Click event
</li>
{% endfor %}
</ul>
What I tried:
My first try was adding the liquid tag itself with .insertAdjacentHTML('afterbegin', {{section.settings.${attLowerCase}_modal_title}}) when the element is created, but soon realized that liquid renders the values first. The output of doing this is literally "{{ }}"
My second try was to capture two variables and put it in a hidden input.
{% assign title = link.title | downcase %}
{% capture section_title_variable %}
{{section.settings.{{title}}_modal_settings}}
{% endcapture %}
<hr class="item-line">
<p class="ueq-menu-title">[{{ link.title | upcase }}]</p>
<input type="hidden" id="about_modal_title" value="{{section_title_variable}}">
In depth example:
section.settings
{
"type": "text",
"id": "about_modal_title",
"label": "About window title",
"default": "ABOUT"
},
User clicks on link ABOUT
<ul class="menu">
{% for link in linklists.ueq-menu.links %}
<li data-menu="{{ link.title | upcase }}" class="menu-link"> <-- "ABOUT"
{% assign title = link.title | downcase %} <-- downcase to "about"
{% capture section_title_variable %}
{{section.settings.{{title}}_modal_title}}
{% endcapture %}
<hr class="item-line">
<p class="menu-title">[{{ link.title | upcase }}]</p>
<input type="hidden" id="about_modal_title" value="{{section_title_variable}}"> <-- captured should look like this {{section.settings.about_modal_title}}
</li>
{% endfor %}
</ul>
on click event, get the value from hidden input, and use it when creating elements.
"Why not use {% javascript %}?"
I prefer to do it this way, since most of my script files are external. I like to keep it that way.
"Why capture it like that?"
The links in the linklist are already known, this was in the design. Thats why in sechema one of them is called "about_modal_title". Since this is used inside a for loop, this was the only way I could come up with to connect the title and schema settings with each other.
If someone knows a better way to do this instead of putting it in a hidden input, please let me know :)
In proper Liquid syntax, curly-brackets are never embedded inside curly-brackets
The syntax {{ something_{{ you }}_want }} is illegal Liquid syntax - once an expression is started, using either {{ or {%, everything up to the next }} or %} is evaluated as one template command.
In your example, you're looking to combine two strings in order to get the name of a setting that you want to access. In a dedicated programming language, we would expect there to be nice shortcuts for something like this. Liquid, however, is first and foremost a templating language, and doesn't have such shortcuts. Instead, we will need to accomplish our goal in two steps.
The first thing we need to know is that we can access properties in two ways: {{ settings.fieldname }} is equivalent to {{ settings['fieldname'] }}
Thanks to that second syntax, we can access an arbitrary setting using a variable:
{% assign field = 'fieldname' %}
{{ settings[fieldname] }}
So to do something more complicated, we just need to use assign (or capture - just be aware that capture includes whitespace as well!) to get a variable that contains the name of the field we want to access, then pass that in to the square brackets:
{% assign title_field = link.title | downcase | append: '_modal_title' %}
{{ section.settings[title_field] }}
I am looking for a simple way to implement a simple "coming soon" (pre-launch) page for my project. Users should be able to leave an email and name in order to be notified when the project is launched.
You already have an email field on this page. When enters his email and clicks the Notify button, an inactive customer account will be created for that user. On launching your store you can send account invites to all the customers that submitted this form, using standard Shopify functionality.
You mentioned that you also want to collect customers names. You can do that by adding additional fields to this form. You're using Debut theme so just open the sections/password-content.liquid file and add these fields between {% form 'customer' %} ... {% endform %} tags. Note, as Shopify customer will be created, you have to use two fields - one for the first name and one for the second name. Just duplicate the email field and change name attributes. See an example below how these fields may look like, note how field names are grouped with contact[...]:
<input type="text" name="contact[first_name]" placeholder="First Name">
<input type="text" name="contact[last_name]" placeholder="Last Name">
You can also change the tags to be applied to the customer on creation. In the Debut theme, these tags are password page and prospect by default.
Adding more fields
You can collect more information on this page. Just add "note" fields with names like contact[note][Field name]. The information from these fields will be displayed in the Customer Note field. For example, if you want to ask customer leave a phone number you would use something like that:
<input type="text" name="contact[note][Phone]" placeholder="Phone">
You can follow the logic from this tutorial: Add fields to the customer registration form. Just make sure you're grouping fields with contact[] prefix rather than customer[] as described in the tutorial, which is actually about another form.
What I found with the Debut theme is that if you put
<input type="text" name="contact[first_name]" placeholder="First Name">
<input type="text" name="contact[last_name]" placeholder="Last Name">
in between these tags {% form 'customer' %} ... {% endform %}
The form fields get squished together.
I found that the below worked for me, if you add it before the section {% form 'customer' %} ... {% endform %}:
<center><input
type="text"
name="contact[first_name]"
placeholder="First Name">
<input
type="text"
name="contact[last_name]"
placeholder="Last Name"
></center>
<br>
I've added a screenshot to show you what it looks like in Shopify
This is the final result of my code
I have got it working to capture the first and second name by adding these fields:
<label>First Name</label>
<input
type="text"
name="contact[first_name]"
id="{{ formId }}-first_name"
class="input-group__field {% if form.errors contains 'first_name' %} input--error{% endif %}"
placeholder="Please enter your first name..."
{%- if form.errors contains 'first_name' -%}
aria-invalid="true"
aria-describedby="{{ formId }}-first_name-error"
data-form-status
{%- endif -%}
>
<label>Last Name</label>
<input
type="text"
name="contact[last_name]"
id="{{ formId }}-last_name"
class="input-group__field {% if form.errors contains 'last_name' %} input--error{% endif %}"
placeholder="Please enter your surname..."
{%- if form.errors contains 'last_name' -%}
aria-invalid="true"
aria-describedby="{{ formId }}-last_name-error"
data-form-status
{%- endif -%}
>
I'd love to know how to display errors if the fields are left blank though. Anyone know how to do this?
Many thanks.
I recently started to use this bootstrap_form from django_bootstrap3 package. It's a nightmare... Here is a simplified version of what I want to do:
- I have 2 textboxes for user to enter data
- POST the data to a local database through clicking a "submit" button
What I had originally was to have a base_form.html file that store the form such as:
{% extends "expense/base.html" %}
{% block content %}
<form method="post">
{% csrf_token %}
<input id="field1" type="text" name="field1" value="{{ field1 }}">
<input id="field2" type="number" name="field2" value="{{ field2 }}">
<input id="submit" type="submit" value="Submit">
</form>
Then I would just call this form in my base.html, everything works, just ugly. Now that I started to use django_bootstrap3 package, it's great looking, less code, just nothing works. With django_bootstrap3, I no longer need the base_form.html (it grabs data from forms.py directly), instead I just need to call {% bootstrap_form form %} like the following:
{% bootstrap_form form %}
{% buttons %}
<button type="submit" class="btn btn-primary btn-lg btn-block" data-loading-text="Loading...">
{% bootstrap_icon "star" %} Submit
</button>
{% endbuttons %}
However, there is no place for me to say this is a form POST not GET. Also, there is no place for me to say these are all input field, and submit button should actually submit. Right now the behavior is that after I write some data to the field, and click submit button, nothing is posting to the database. The submit button doesn't work at all.
I don't know what I am missing here. I am very new to web development using django and bootstrap framework. Please help.
On my product page, with the following line of code in the product.liquid template, it generates 3 seperate dropdowns for the 3 different product options the product has, eg Type Color Size..
<div class="select">
<select id="product-select" name="id">
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
{% endfor %}
</select>
</div>
however, i used the same code in the product-loop.liquid to show the same drop down on the collections page (without the option to add to cart).. but this time the dropdown appears as 1 single combined dropdown.
how do i split them up like before?
heres a screenshot of what both dropdowns look like :
You need to include option_selection.js in your collection.liquid template.
paste the following line at top or bottom of your collection.liquid template
{{ 'option_selection.js' | shopify_asset_url | script_tag }}