I have the following code on a page:
PHP code section
function onSelecaoGE(){
$this['temp'] = post('selecaoge');
}
and on page html
<div class="col ptxt1">
<select class="form-control"
name="selecaoge"
data-request="onSelecaoGE"
data-request-update="_foe_rec_nivel: '#selnivel'"
id="escolhage">
<option disabled selected> -- Escolha um Grande Edifício --</option>
{% for ge in ge_all %}
{% if ge.era_id == 0 %}
{% set conta = ge.recompensa_ge_conta2[0].count %}
{% else %}
{% set conta = ge.recompensa_ge_conta[0].count %}
{% endif %}
<option value="{{ ge.id }}">{{ ge.nome }} ({{ conta }})</option>
{% endfor %}
</select>
</div>
<div class="col ptxt1" id="selnivel">
{% partial "_foe_rec_nivel" %}
</div>
and on partial just have
{{ temp }}
also i have jquery loaded and {% framework extras%} in layout file.
Everything looks good as per documentation and some examples i found.
But when i make any selection on the select it starts the ajax call, but it never ends.
After several changes i can't figure out what is wrong. Any help will be appreciated.
TIA
JL
With the help of "alxy" on Slack we found that the problem is related with the version of jquery loaded. I'm loading jquery-3.3.1.slim.min.js that appears to not have complete ajax support. I changed to load the regular version jquery-3.3.1.min.js and is working perfectly.
JL
Related
I have edited my store to have an add to cart button and variant selector in the collection page and it's working. But my boss want another change, how can I change the dropdown list to button selector?
My code form
{% unless sold_out %}
<form action="/cart/add" method="post" enctype="multipart/form-data" id="product-form-{{ product.id }}" class="product-form">
<div class="add-to-cart__wrapper" style="margin-top:0px; margin-bottom: 10px;">
<button type="submit" name="add" class="btn btn--splash btn--full uppercase addToCart">
<span id="AddToCartText">Add to Order</span>
</button>
</div>
{% if product.variants.size == 1 %}
<input type="hidden" id="variant-select" name="id" value="{{ product.variants.first.id }}" />
{% else %}
<div class="selector-wrapper">
<select name="id" id="productSelect" class="product-single__variants btn--full uppercase">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
</div>
{% endif %}
</form>
{% endunless %}
Please advise.
Thank you!
You could change the select element to a radio button element and style the radios as regular buttons. This pattern is fairly common, you just need to make sure your event listener target for the variant selection is the same as you have now.
I've built the following liquid for loop to retrieve & output data from a repeating advanced custom field in Shopify. The ACF namespace is faq, and contains heading and content data. My current loop is as follows:
<div class="feed-faqs">
{% if page.metafields.faq != blank %}
{% assign faqs = page.metafields.faq %}
{% for item in faqs %}
{% assign i = forloop.index %}
<div class="item item--{{ i }}">
{{ heading[i] }}
{{ content[i] }}
</div>
{% endfor %}
{% endif %}
</div>
However, on the frontend, this loop returns the following:
<div class="feed-faqs">
<div class="item item--1">
</div>
<div class="item item--2">
</div>
</div>
Is what I'm trying to achieve (to output multiple values from a repeating ACF field) possible with this approach, and if so, where have I gone wrong in fetching the header & content data?
Worked it out, so leaving this answer for anyone else in the future:
<div class="feed--faqs">
{% if page.metafields.faq != blank %}
{% assign faqs = page.metafields.faq.heading %}
{% for value in faqs %}
{% assign i = forloop.index0 %}
<div class="item item--{{ i }}">
<h4>{{ page.metafields.faq.heading[i] }}</h4>
<p>{{ page.metafields.faq.content[i] }}</p>
</div>
{% endfor %}
{% endif %}
</div>
Metafield value type is set to 'Json String'.
For reference, I'm using the ArenaCommerce Advanceds Custom Fields app: https://apps.shopify.com/advanced-custom-field.
Currently I am trying to show/hide an inline element on the page when a specific variant of the product is selected in a <select> input. I've tried multiple tries with jquery to access the select with no luck and even tried inline <% if %> liquid tag. Any help would be greatly appreciated!
Basically I want a textbox to show when two of the options are selected else not show the textbox.
Below is what I have:
{% if product.variants.size > 1 %}
<div id="product-variants" class="card_options">
<select id="product-select-{{ product.id }}" name="id" class="hidden line-item-property__field">
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
</div>
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
{% endif %}
Now if only I could add something like below to add the textbox when option1 or option2 are selected.
<-- Same as above -->
{% if product.variants.size > 1 %}
<div id="product-variants" class="card_options">
<select id="product-select-{{ product.id }}" name="id" class="hidden line-item-property__field">
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
</div>
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
{% endif %}
<-- End Same as above -->
<-- New Code -->
{% if variant != option1 %}
<p class="line-item-property__field" id=card_message>
<label for="card-message">Card Message:</label>
<span id="char-counter"></span><span id="message-alert"></span>
<textarea id="message-textarea" maxlength="250" name="properties[Card Message]"></textarea>
</p>
{% else %}
<span id="placeholder"></span>
{% endif %}
This is what it should look like:
UPDATE: Apparently my solution with jQuery worked. I was just targeting the wrong select on the page. I had to retrieve the select dynamically instead of finding it by class or id. For some reason Shopify creates a second <select> input and hides the one you see in products.liquid document. So I had to resort to using $(".selector-wrapper select").bind('change', function(event) {//do something} and var selected = $('.selector-wrapper select option:selected').val(); to retrieve the values of the options. I'll link a fiddle I created with the same logic, you will just have to update it with what I listed above. Hope this helps anyone looking for same solution.
Fiddle Demo
After selecting a language in a language switcher form, I got a CSRF error:
The form is in base.html
<form action="{% url 'set_language' %}" method="post" class="form-inline">
{% csrf_token %}
<input name="next" type="hidden" value="" />
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-globe" aria-hidden="true"></i></div>
<select name="language" class="form-control" id="lang-switcher">
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %}
<option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected="selected"{% endif %}>
{{ language.name_local }} ({{ language.code }})
</option>
{% endfor %}
</select>
</div>
</div>
</form>
I submit the form with JS:
jQuery('#lang-switcher').change(
function(){
jQuery(this).closest('form').trigger('submit');
});
my template file art.html is as follow:
{% extends "base.html" %}
{% load staticfiles %}
{% load i18n %}
{% block content %}
....
{% endblock %}
views.py is as follow:
from django.template import RequestContext
from django.shortcuts import render_to_response
from .models import Exhibition, Picture
def index(req):
highlight = Exhibition.objects.latest()
exhibitions = Exhibition.objects.all()[1:]
return render_to_response('art.html', RequestContext(req,{'highlight': highlight, 'exhibitions': exhibitions}))
urls.py is as follow:
urlpatterns = [
url(r'^i18n/', include('django.conf.urls.i18n')),
url(r'^admin/', admin.site.urls),
url(r'^art/', index),
url(r'^$', views.flatpage, {'url': '/home/'}, name='home')
]
I can load the page w/o problems, then when I submit the form to switch language I get the CSRF error.
edit
I must add that the form works well when I'm on root.
I finally solved it by using a different render function in my view:
return render(req, 'art.html', {'highlight': highlight, 'exhibitions': exhibitions})
My template is, my context variable is zipped into three different variables
{% extends "question/base_home.html" %}
{% load staticfiles%}
{% block questions %}
{% for result, prev_answers, answerForm in context.zipped_results%}
<form action="/q/answer/" method="post" style="display:none;" class="answer_form" >
{% csrf_token %}
{% if forloop.counter == 1 %}
{# below code did not work #}
{{ context.zipped_results.2.management_form }}
{% endif %}
{# neither this #}
{# {{ context.zipped_results.2.management_form }} #}
{# this worked by but it disturbs the way I display forms #}
{# {{ context.answersFormset}} #}
{{ answerForm.as_p }}
{# {{ answerForm.management_form }} #}
<input type="hidden" name="q_id_a" id="q_id_a" value="{{ result.object.id }}">
<input type="submit" value="Submit" />
</form>
</div>
</div>
</div>
{% endfor %}
{% endblock questions %}
and my post view is
def answer(request):
if request.method=='POST':
form=AnswerForm(request.POST)
answerFormset=formset_factory(AnswerForm)
formset=answerFormset(request.POST)
if formset.is_valid():
for form in formset:
print form
answer=form.cleaned_data['answer']
q_id=request.POST.get("q_id_a", "")
a=Answers.objects.create(questions_id=q_id,answer=answer, time_stamp=datetime.datetime.now(), upvote=0, downvote=0)
return HttpResponse("your answer is posted succesfully")
else:
return HttpResponse("somethign went wrong while posting the answer")
I followed the documentation mentioned here but i always end up with this error. The only case when I am not getting this error is when i use {{ context.zipped_results.2 }}, as per the document when formset is displayed this say management_form need not be used in template. I think the issue is with the management_form. I am not able to figure out how to use it.
I am zipping the results in context variable as context={'results':results, 'form':form, 'zipped_results':zipped_results, 'answersFormset':answersFormset}