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>
Related
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>
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 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 ?
I'm a programming newbie. How do I pass a variable from a drop-down menu with Jinja2 templating into my Python 2.7 code? I'm using the webapp2 framework on Google App Engine.
My code currently looks like this:
class AccountNew(Handler):
def get(self):
activities = ['Select one', 'Camping', 'Hiking', 'Fishing']
self.render('account-new.html', activities = activities)
def post(self):
acct_name = self.request.get('acct_name')
activity = self.request.get('activity')
self.write(acct_name)
self.write(activity)
My Jinja2 template is named "account-new.html" and looks like this:
<form method="post">
<label>
<div>Account Name</div>
<input type="text" name="acct_name" value="{{ acct_name }}">
</label>
<label>
<div>Parent</div>
<select>
{% for activity in activities %}
<option value="{{ activity }}">{{ activity }}</option>
{% endfor %}
</select>
</label>
<input type="submit">
</form>
The acct_name string gets passed back, but the activity string seems to come back as an empty string. Any insights would be greatly appreciated.
You have left the 'name' attribute off the select element. Should be like this:
<select name="activity">
{% for activity in activities %}
<option value="{{ activity }}">{{ activity }}</option>
{% endfor %}
</select>
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 ?