I am working on a shopify theme project. On the product page the customer will need to selection the color then after the size. Which mean that every product got 2 option with 2 to 3 value.
I need to use variant to generate a ID for each different variants. Looping option1 and nesting option2 loop.
But sadly option 1 is not even looping. Is my syntax wrong ?
<header class="c-modal__header">
<h2 class="c-modal__title">Please select your{{ product.options[0] }}and{{ product.options[1] }}Before check out !</h2>
</header>
{% for option1 in product.variants.option1 %}
<p class="c-modal__caption">{{ product.option1 }}</p>
<ul class="c-modal__content-list">
{% for option2 in product.variants.option2 %}
<li class="c-modal__content--item c-modal__content--item--sku"><span class="c-modal__content__lineup">{{ variant.option2 }}</span>
<div class="c-modal__content__buttonarea">
<form class="c-modal__content__button c-button" method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="submit" value="In the cart!" class="btn" />
</form>
</div>
</li>
{% endfor %}
</ul>
{% endfor %}
Thanks a lot !
option1 or option2 do not exist as properties, as far as I know.
You're looking for something like this
{% for product_option in product.options_with_values %}
<label>
{{ product_option.name }}
<select>
{% for value in product_option.values %}
<option {% if product_option.selected_value == value %}selected{% endif %}>
{{ value }}
</option>
{% endfor %}
</select>
</label>
{% endfor %}
Or if you know the name of the option
<label>
Color
<select>
{% for color_option in product.options_by_name['Color'].values %}
<option>{{ color_option }}</option>
{% endfor %}
</select>
</label>
Related
I am trying to show the selected value in Shopify outside the for loop.
How do I show the selected radio option in the label after "Color:"? I want to display it where it says "SHOW SELECTED OPTION".
Does anyone know how to solve this?
<label>Color: SHOW SELECTED OPTION</label>
<fieldset class="single-option-color-selector"
id="ProductSelect-option-{{ forloop.index0 }}">
{% assign option_index = forloop.index %}
{% for value in option.values %}
{% assign variant_label_state = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_label_state = false %}
{% endunless %}
{% endif %}
<input type="radio"
{% if option.selected_value == value %} checked="checked"{% endif %}
value="{{ value | escape }}"
data-index="option{{ option_index }}"
name="color"
class="single-option-selector__radio"
id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
<label class="option-color-{{ value | escape }}" for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}" title="{{ value | escape }}">{{ value | escape }}</label>
{% endfor %}
</fieldset>
Based on the code you shared, it looks like you can try this:
<label>Color: {{ option.selected_value }}</label>
By the end of the code, i have a button which value="{{ product.selected[0].id }}" , it does select only the first value [0] of the array no matter what i select, please what should i change to make sure it selects a value based on vaiant ?
<div>
{% if section.settings.show_quantity_selector %}
<div id="error-quantity-{{ section.id }}" class="form-message form-message--error product__quantity-error hide" tabindex="-1">
{% include 'icon-error' %} {{ 'products.product.quantity_minimum_message' | t }}
</div>
{% endif %}
{% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}
<!-- Partie Product select -->
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% endif %}
{% endfor %}
</select>
<!-- END Partie Product select -->
<div>
<form class="product-form" action="/cart/add" data-productid="{{product.id}}" method="post" style="padding-top: 0px; padding-bottom: 50px">
<input type="hidden" name="id" data-productid="{{product.id}}" class="product-select" value="{{ product.selected[0].id }}" data-variant-title="{{ product.variants[0].title }}"/>
<input type="submit" value="Add To Cart" class="btn btn btn-default"/>
</form>
</div>
{% endform %}
</div>
Thank you !!
At the moment you have a form in a form, which is a big NO NO!
{% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
...
<form class="product-form" action="/cart/add" data-productid="{{product.id}}" method="post" style="padding-top: 0px; padding-bottom: 50px">
In addition you have two fields with a name="id".
<select name="id" id="ProductSelect-{{ section.id }}"
and
<input type="hidden" name="id"
Remove the inner form and the hidden field with name="id" and you should be good to go.
I'm using Django and AngularJS in a log in form. In this case, the username is in email format. My login form's button will only become un-disabled when the user enters a string formatted like an email address and a password of at least eight characters. But clicking the login button does nothing. Nothing fires. No POST request is made.
forms.py:
class LoginForm(AuthenticationForm):
'''
Form to log in a user
'''
error_messages= {
"invalid_login": _("Incorrect %(username)s/password combo")
}
title= "Sign in"
username= forms.EmailField(label=_("Email"), widget=forms.TextInput(attrs={"id":"id_login_username", "type":"email", "placeholder":"Email", "ng-model":"login.email"}))
password= forms.CharField(label=_("Password"), widget=forms.PasswordInput(attrs={"placeholder":"Password", "ng-model":"login.pw", "ng-minlength":settings.MIN_PW_LENGTH}))
urls.py:
urlpatterns += [url("^login-register/$", views.login_register, name="login_register"),]
views.py:
def login_register(request, template="pages/login_register.html"):
registration_form= RegisterForm()
return render(request, template, {"registration_form":registration_form})
login_register.html:
{% extends "base.html" %}
{% load i18n mezzanine_tags staticfiles %}
{% block meta_title %}{% trans "Register or log in" %}{% endblock %}
{% block title %}{% trans "Register or log in" %}{% endblock %}
{% block extra_head %}
<meta name="robots" content="noindex">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
{% compress js %}
<script src="{% static "js/login-register.js" %}"></script>
{% endcompress %}
{% endblock %}
{% block main %}
<div id="login-register-wrapper" ng-app="app" ng-controller="Ctrl">
<form id="login-form" name="loginForm" method="post">
{% csrf_token %}
{% if login_form.non_field_errors %}
<p class="text-danger" role="alert">{{ login_form.non_field_errors.as_text|cut:"* "|escape }}</p>
{% endif %}
{% for field in login_form %}
<p>{{ field }}</p>
{% if field.errors %}
<small class="text-danger" role="alert">{{ field.errors.as_text|cut:"* "|escape }}</small>
{% endif %}
{% endfor %}
<button id="login-button" class="btn btn-primary" type="submit" ng-disabled="!loginForm.username.$valid || !login.pw">Log in</button>
</form>
</div>
{% endblock main %}
login-register.js:
var app= angular.module("app",[]);
app.config(function($interpolateProvider){
$interpolateProvider.startSymbol("[[[");
$interpolateProvider.endSymbol("]]]");
});
app.controller("Ctrl",function($scope, $rootScope){
});
Why does the form not submit when I click the login button after I properly fill out the "Email" and "Password" fields? And why does the button successfully submit when I remove all AngularJS from my files?
Update: And here's what the form HTML looks like in the browser.
<form method="post" name="loginForm" class="ng-invalid ng-dirty ng-valid-email ng-valid-parse ng-valid-required ng-invalid-minlength ng-submitted">
<input type="hidden" name="csrfmiddlewaretoken" value="aHUiUqU1EDmTcqgr5SpyELLnR8dsNh6mTExN7FqmiwX1ykPYlZBcrOBWjRA9YlBj"> <p><input id="id_login_username" name="username" ng-model="login.email" placeholder="Email" type="email" required="" class="ng-not-empty ng-dirty ng-valid-required ng-valid ng-valid-email ng-touched"></p>
<p><input id="id_password" name="password" ng-minlength="8" ng-model="login.pw" placeholder="Password" type="password" required="" class="ng-invalid ng-not-empty ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched"></p>
<button class="btn btn-primary" type="submit">Log in</button>
</form>
The form data won't go anywhere unless you tell it where to go. Your form does not submit because it lacks an action or ng-submit.
The action attribute is a form handler that you put on the form element, e.g.
<form id="login-form" name="loginForm" method="post" action="/your-endpoint">
But the angular way is to specify an ng-submit function.
<form id="login-form" name="loginForm" method="post" ng-submit="foo()">
$scope.foo = function() {
// ...
// do whatever extra logic you need to, then
// $http.post('./your-endpoint', formdata)
}
I'm having some problems loading a simple AngularJS with symfony app.
Here is my index.html.twig:
{% extends "::base.html.twig" %}
{% block body %}
<div ng-app>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
</div>
{% endblock %}
{% block javascripts %}
{% javascripts output='js/main.js' debug=false
'bundles/acmesqltest/js/angular.min.js' -%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
When i see the source code on the browser and click the angular.min.js reference.. all the code is there.
But, if i add, next to the input {{yourName}}, symfony says the variable does not exist.
Is there any other configuration that i need to do ?
Once again I have a small problem to get this done in django. But at least you guys help me understand things better.
Here is my view:
def editUserprofile(request):
rc = context_instance=RequestContext(request)
u=request.user
if request.method=='POST':
form = UserProfileEdit(request.POST, request.FILES)
if form.is_valid():
u = UserProfile.objects.get(user=u)
u.avatar = request.FILES['avatar']
u.first_name = form.cleaned_data['first_name']
u.last_name = form.cleaned_data['last_name']
u.email = form.cleaned_data['email']
u.country = form.cleaned_data['country']
u.date_of_birth = form.cleaned_data['date_of_birth']
u.save()
return HttpResponseRedirect("/editprofile")
else:
u = UserProfile.objects.get(user=u)
form = UserProfileEdit()
return render_to_response('users/editprofile.html',
{'form':form, 'u':u},
rc)
No errors but my model doesn't get modified.. here is my template too:
<form method="POST" action=".">
{% csrf_token %}
{% if u.avatar %}
<img src="{{ MEDIA_URL }}{{ u.avatar }}" height="80px" />
{% else %}
<p>You have no avatar</p>
{% endif %}
<p>Change Avatar: {{form.avatar}}</p>
<br />
{% if u.first_name %}
<p>First Name: {{u.first_name}}</p>
{% else %}
<p>First Name: No first name added </p>
{% endif %}
<p>Modify:{{form.first_name}}</p>
<br />
{% if u.last_name %}
<p>Last Name: {{u.last_name}}</p>
{% else %}
<p>Last Name: No last name added </p>
{% endif %}
<p>Modify:{{form.last_name}}</p>
<br />
{% if u.email %}
<p>Email: {{ u.email }}</p>
{% else %}
<p>Email: No email added</p>
{% endif %}
<p>Modify:{{ form.email }}</p>
<br />
{% if u.date_of_birth %}
<p>Date of birth: {{ u.date_of_birth }}
{% else %}
<p>Date of birth: No birthday added </p>
{% endif %}
<p>Modify:{{form.date_of_birth}}</p>
<br />
{% if u.country %}
<p>Country: {{ u.country }}</p>
{% else %}
<p>Country: No Country added</p>
{% endif %}
<p>Modify:{{form.country}}</p>
<br />
<input type="submit" value="Save Changes">
</form>
Hope you can help me guys..!
Is form.is_valid() True in your form validation ?