it seems a stupid question but I do not really get the connection.
I use tghe latest bootstrap version ad have this template:
<div class="form-group"{% if form.name.errors %} error{% endif %}>
<label for="name" class="col-md-2 control-label">Name:</label>
<div class="col-md-10">
<input type="text" class="form-control" id="name" placeholder="Enter your name here">
{% for error in form.name.errors %}
<span class="help-inline">[{{ error }}]</span><br>
{% endfor %}
</div>
</div>
The field is rendered as desired but no matter what I enter there my form will raise the error, that this field is required.
Please let me know what I miss here - how do I link the field in the template to my form properly?
The issue was that the "name" attribute was missing - only having the "id" is insufficient.
Related
I'm building a component which checks the character count of a custom product metafield; if it's above 24 characters, the data is output as an accordion, otherwise the metafield content is printed in its entirety. The conditional below fails as the metafield size always returns 0, but I can see the content printing via the else statement so I'm certain the path is valid:
{% if product.metafields.custom.product_note.size >= 24 %}
<div class="product-note has--dropdown">
<span class="item__heading item__trigger">Product information</span>
<div class="item__content">
{{ product.metafields.custom.product_note }}
</div>
</div>
{% else %}
<div class="product-note">
<div class="item__content">
{{ product.metafields.custom.product_note }}
</div>
</div>
{% endif %}
I'm not sure it's relevant, but the product_note metafield is a multi-line text field. If anyone could point me in the right direction as to why size is failing to produce a value, I'd appreciate it massively.
You could always try working off the value contained in the metafield. It appears you are short-cutting by referring to just the combo of namespace and key, without actually saying: what is the length of the value stored at that namespace and key. Just a thought. You could at least try that.
Final answer, courtesy of #David Lazar's suggestion:
{% assign data_product_note = product.metafields.custom.product_note.value %}
{% if data_product_note.size >= 24 %}
<div class="product-note has--dropdown">
<span class="item__heading item__trigger">Product information</span>
<div class="item__content">
{{ data_product_note }}
</div>
</div>
{% else %}
<div class="product-note">
<div class="item__content">
{{ data_product_note }}
</div>
</div>
{% endif %}
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 have a client asking to add an "ADD TO CART" button under each product in their collections and I can't figure out how.
I'm new to the Shopify platform and I am not familiar with Liquid but I did try to use the built in "Channel" of adding a Buy Button, but when trying to paste in the code it didn't populate anything in the preview page.
Any help would be wonderful.
Use the shopify API by adding this into the collection.liquid
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variant.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Buy" class="btn" />
</form>
Add that somewhere in this loop
{% for product in collection.products %}
...
{% endfor %}
product.variant.id identifies which item is added to the cart and it could be replaced with product.variants.first.id
This details how it works and applies to standard, non ajax, forms too
https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#add-to-cart
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.
reading in a JSON for sport. using a partial for matchup markup.
awayteam and home team for most part share identical markup but the JSON properties which I have no control are such below:
<div class="away {{game.awayTeam_last_name|slugify}}">
<a href="#" title="{{game.awayTeam_first_name}} {{game.awayTeam_last_name}}">
<span class="{{league}}-logo"></span>
<span class="city">{{game.awayTeam_first_name}}</span>
{% if game.event_status != "pre-event" %}
<span title="score">{{game.awayTeam_score}}</span>
{% else %}
<span title="record entering game">(0-0)</span>
{% endif %}
</a>
</div>
<span>#</span>
<div class="home {{game.homeTeam_last_name|slugify}}">
<a href="#" title="{{game.homeTeam_first_name}} {{game.homeTeam_last_name}}">
<span class="{{league}}-logo"></span>
<span class="city">{{game.homeTeam_first_name}}</span>
{% if game.event_status != "pre-event" %}
<span title="score">{{game.homeTeam_score}}</span>
{% else %}
<span title="record entering game">(0-0)</span>
{% endif %}
</a>
</div>
is there a way to shrink/refactor the above like some expression valuator to make home and away passed via a variable.
didn't answer own question but i did get Data guys to better format the data, so became..
awayteam: { first_name:'', last_name:'', score:'' }
hometeam: { first_name:'', last_name:'', score:'' }
allowing me to shrink in half the template =)