I'm so close on this, but I just can't get the syntax right. I've been messing with this off and on for days. Essentially I have a greeting card message and I want the message to be filled in by the customer for every Greeting Card on the checkout page (cart.liquid) and I need the attribute name to change for every index. Therefore I'm adding the index to each attribute name, but to no avail. For testing purposes, here's a basic input field:
<p class="cart-attribute__field" style="min-width:300px;">
<label for="to{{ forloop.index }}">To:</label>
<input class="checkMe" id="to{{ forloop.index }}" type="text" name="attributes[To{{ forloop.index }}]" maxlength="40" data-stk="{{item.id}}" value="{{ cart.attributes['To'+forloop.index] }}" >
</p>
And its this part (value="{{ cart.attributes['To'+forloop.index] }}") that is giving me trouble.
You cannot use '+' operator in liquid code to append. Try this instead:
{% assign cart_attr = 'To' | append: forloop.index %}
<p class="cart-attribute__field" style="min-width:300px;">
<label for="to{{ forloop.index }}">To:</label>
<input class="checkMe" id="to{{ forloop.index }}" type="text" name="attributes[To{{ forloop.index }}]" maxlength="40" data-stk="{{item.id}}" value="{{ cart.attributes[cart_attr] }}" >
</p>
Note: Improvise as required.
Why would you not just use line item properties as described on https://docs.shopify.com/manual/configuration/store-customization/page-specific/product-page/get-customization-information-for-products
Related
This is in product-form and the below code output product variant. I want to add a if-else condition to add another class on top of it.
<label
for="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="SizeSwatch">{{ value }}
</label>
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 an online store on Shopify. What I am trying to do is on a product page, have a "also needed" type list. I've created all my lists and other items, but what I can't seem to figure out is how to list the variants of one product on another product page.
What I have for my option menu is this:
<select id="product-select" name="id" data-id="{{ 304164943 }}">
{% for variants in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
which outputs:
<select id="product-select" name="id" data-id="304164943">
<option value=""> - </option>
<option value=""> - </option>
<option value=""> - </option>
<option value=""> - </option>
<option value=""> - </option>
<option value=""> - </option>
the data-id of 304164943 is for the product I want to list the variants of but the dropdown menu this generates is empty.
You can not access a product via its ID with Liquid. You can however access it will the handle. So if the handle was known you could do this:
{% assign relatedProduct = all_products['some-handle'] %}
{% for relatedVariant in relatedProduct.variants %}
<option value="{{ relatedVariant.id }}">{{ relatedVariant.title }} - {{ relatedVariant.price | money }}</option>
{% endfor %}
You've also got an error in your loop code posted - it should be for variant, not for variants. I'm guessing that's just a typo here.
The product page will only return the object of the product belonging to that page. It won't return the object of another product. So to access this you'd need to do some javascript jiggery pokery or create a link list. Here is a tutorial using a link list:
http://www.tetchi.ca/shopify-tutorial-how-to-create-a-part-picker-form/
Or, you can go the JS route. You'd need to grab the product object via ajax, and append the returned data to the page. To grab this data, you'd need to do an ajax get using the Ajax api:
https://docs.shopify.com/support/your-website/themes/can-i-use-ajax-api
So if using jquery - something like this would work: (where <product-handl> is the handle of the product you wish to insert)
$.get( "/products/<product-handle>.js", function( data ) {
var variants = data.variants; // all your variants
// Then you can loop over the variants insert the options into your page...
});
As this is added after the page has rendered, you'll need to do some ajaxy cart stuff so you can put stuff in the cart. Your theme may already have some ajaxy cart stuff in it.
i'm pretty new to Shopify and I'm facing a strange issue in linklists.
Yesterday I changed the featured image for a category I displayed into a linklist, but I cannot see the changes in the page that prints the linklist.
I analyze the .liquid file that prints the linklists and I found the snippet that produces the divs:
{% for link in linklists[linklist].links cols: 4 %}
<div class="products item {{ link.handle }}">
<a href="{{ link.url }}" title="Browse our {{ link.object.title | escape }} collection.">
<img src="{{ link.object.image.src | collection_img_url: 'large' }}" alt="{{ link.object.title | escape }}" />
<big>{{ link.title }}</big>
</a>
</div>
{% endfor %}
After some shots I tried to add a data attribute to the image to print again the link.object.title:
{% for link in linklists[linklist].links cols: 4 %}
<div class="products item {{ link.handle }}">
<a href="{{ link.url }}" title="Browse our {{ link.object.title | escape }} collection.">
<img src="{{ link.object.image.src | collection_img_url: 'large' }}" alt="{{ link.object.title | escape }}" data-test="{{ link.object.image.src | collection_img_url: 'large' }}" />
<big>{{ link.title }}</big>
</a>
</div>
{% endfor %}
The strange fact is that it prints two different values for the same object!
<img src="https://cdn.shopify.com/s/files/1/0407/7545/files/trousers-woman_c4633f02-59f7-4a4b-809b-91662635ddc0.jpg?22734" alt="Women's Trousers" data-test="//cdn.shopify.com/s/files/1/0407/7545/collections/DSC_9685_grande_df826b7f-5645-4491-b866-8819c9ad8983_large.jpg?v=1429273629">
The src attribute shows the old image, and the test attribute shows the new one.
Is that because Shopify postprocess the src attributes of the image for caching them into their cdn? How can I fix this?
thanks to #Jason input I found a javascript script that changed the attribute "src" of the image:
$('.collection-woman .webshop .trousers a img').attr('src','https://cdn.shopify.com/s/files/1/0407/7545/collections/DSC_9685_grande_df826b7f-5645-4491-b866-8819c9ad8983_large.jpg?v=1429273629');
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.