Hello I have this code using Django in a HTML file :
<select class="form-control" data-formsource="test" id="id_test1" name="type">
{% for x,y in opt %}
<option value="{{ y }}" data-select="{{ y }}">{% trans y %}</option>
{% endfor %}
</select>
And there is an option which is "available" but I don't want to see this option ... How can I do this ?
Thank you very much !
<select class="form-control" data-formsource="test" id="id_test1" name="type">
{% for x,y in opt %}
{% if x != 'available' %}
<option value="{{ y }}" data-select="{{ y }}">{% trans y %}</option>
{% endif %}
{% endfor %}
</select>
Related
Hello I have the following code :
<select name="test1" class="form-control">
<option value=""></option>
{% for test in tests %}
<option value="{{ test.id }}">{{ test.name }}</option>
{% endfor %}
</select>
Then I want to do something like this ;
{% if test.id %}
# show something but I need to know if there is sometinh in test.id
# I think the problem comes from this line, in fact I want this condition is realised if test.id is not empty else the condition is not realised.
{% endif %}
How can I do this ?
See if this approach can help.
<select name="test1" class="form-control">
<option value=""></option>
{% for test in tests %}
<option value="{{ test.id }}">{{ test.name }}</option>
{% if test.id %}
#show what you want..
{% empty %} <<<<======
#if empty do this...
{% endif %}
{% endfor %}
</select>
Just an example:
import Http Response from django
from django.shortcuts import render
#create a function
def your_view(request):
# create a dictionary
context = {
#enter code here
"data" : [],
}
# return response
return render(request, "template.html", context)
Now in templates/template.html,
{% for i in data %}
<div class="row">
{{ i }}
</div>
{% empty %}
<h4>There is nothing in this list</h4>
{% endfor %}
You can have a better look at this link:
https://www.geeksforgeeks.org/for-empty-loop-django-template-tags/
How to change image on variant selection if we have javascript associative array of variant_id and variant_img_src?
html Code:-
<select name="id" >
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}"> {{ variant.title }} - {{ variant.price | money }}</option>
{% else %}
{% endfor %}
Javascipt Code:-
var images = [];
{% for variant in product.variants %}
{% for image in product.images %}
images[ {{ variant.id }}] = "{{ variant.image.src | product_img_url: 'medium' }}";
{% endfor %}
{% endfor %}
Like this
const images = {
"default": document.getElementById("img").src,
"variant2": "http://lorempixel.com/400/200/sports/2/",
"variant3": "http://lorempixel.com/400/200/sports/3/"
};
document.getElementById("variants").addEventListener("change", function() {
document.getElementById("img").src = images[this.value];
})
<select id="variants">
<option value="default">Please select</option>
<option value="variant2">Variant 2</option>
<option value="variant3">Variant 3</option>
</select><hr/>
<img src="http://lorempixel.com/400/200/sports/1/" id="img" />
I'm trying to fix my option selection because previously this company had Bold Installed and it messed with our option selection. I've got the Option selection to show but EXACTLY how I want it but it works for now... But the price will not change no matter what I do! Can anyone help me figure what I'm missing here?
The first code snippet is contained in my 'product-form.liquid' snippet
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="form-vertical">
<select name="id" id="ProductSelect" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
{% if settings.product_swatches %}
{% if product.available and bold_variants_size > 1 %}
{% for option in product.options %}
{% include 'swatch' with option %}
{% endfor %}
{% endif %}
{% endif %}
{% if settings.product_different_swatches %}
{% include 'different_product_swatches' with product.type, titlee: settings.product_different_swatches_title %}
{% endif %}
<div class="formWrap">
<div class="price-variant-wrap">
<span class="priceText">PRICE:</span>
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span id="ProductPrice" class="h2" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
{% if product.compare_at_price_max > product.price %}
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<p id="ComparePrice">
{{ 'products.product.compare_at' | t }} {{ current_variant.compare_at_price | money }}
</p>
{% endif %}
</div>
{% assign isFreeGift=false %}
{% for tag in product.tags %}
{% if tag =='SECOMAPP_FREEGIFT'%}
{% assign isFreeGift=true %}
{% endif %}
{% endfor %}
{% if isFreeGift == false %}
<div class="product-bottom-wrap">
<div class="fancy_btn_wrap">
<div class="product-single__add-to-cart">
{% if settings.prod_quantity == 'plus-minus' %}
{% include 'quantity' %}
{% elsif settings.prod_quantity == 'number' %}
<label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
{% endif %}
<div class="submit-container">
<button type="submit" name="add" id="AddToCart" data-price="{{ current_variant.price | money_without_currency }}" class="btn {{settings.product_page_button_type}} ">
<input type="hidden" name="return_to" value="back" />
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
</div>
</div>
</div>
</div>
{% endif %}
</div>
<div id="shopmessage-checkbox" class="fbmessage"></div>
</form>
<div class="sca-fg-cat-list" style="display: none;" name="secomapp-fg-data-{{ product.id }}"> </div>
This code below is in my product.template
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
{% if settings.product_description_location == 'above_form' %}
<div class="product-description rte" itemprop="description">
{% if product.description contains '<!-- split -->' %}
{{ description[0] }}
{% else %}
{{ product.description }}
{% endif %}
</div>
{% endif %}
{% comment %}
ID addToCartForm is a selector for the ajax cart plugin
{% endcomment %}
{% include 'product-form' %}
{% include 'addthis' %}
</div>
<script>
var selectCallback = function(variant, selector) {
{% if settings.product_swatches %}
// BEGIN SWATCHES
if (variant) {
var form = jQuery('#' + selector.domIdPrefix).closest('form');
for (var i=0,length=variant.options.length; i<length; i++) {
var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
if (radioButton.size()) {
radioButton.get(0).checked = true;
}
}
}
// END SWATCHES
{% endif %}
timber.productPage({
money_format: "{{ shop.money_format }}",
variant: variant,
selector: selector
});
};
jQuery(function($) {
new Shopify.OptionSelectors('productSelect', {
product: {{ product | 'json' }},
onVariantSelected: selectCallback,
enableHistoryState: false
});
// Add label if only one product option and it isn't 'Title'. Could be 'Size'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
$('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
{% endif %}
// Hide selectors if we only have 1 variant and its title contains 'Default'.
{% if bold_variants_size == 1 and bold_selected_or_first_available_variant.title contains 'Default' %}
$('.selector-wrapper').hide();
{% endif %}
});
{% unless product.title == 'Gift Card' %}
var checkExist = setInterval(function() {
if ($('.spr-badge .spr-badge-caption').length) {
var rating = $('.spr-starrating.spr-summary-starrating').html();
var noOfRatings = $('.spr-summary-caption').html();
var ratingHolder = $('.ratingHolder');
ratingHolder.prepend(noOfRatings);
ratingHolder.prepend(rating);
ratingHolder.click(function(){
$('#product_tabs .tab_3 a').trigger('click');
$('html, body').animate({
scrollTop: $("#product_tabs").offset().top - $('.site-header').outerHeight() - 30
}, 1000);
});
clearInterval(checkExist);
}
});
{% endunless %}
</script>
Not quite sure what's happening here pretty much the code from the live code but bold is removed and the is different. the 'productSelect' is lower cased on live code as oppose to it being uppercase which actually makes the 'select' show.
Thanks!
If you go back to the liquid before you used Bold, you will be in a good place. Your code should just work. From that point, you can customize to make it as you wish today. Shopify has a primitive support for going back in time. Have you tried that? Or getting a copy of your theme from your theme supplier before Bold? That would also give you clean working Liquid.
Currently I'm trying to get Shopify's cart.js to add my products to cart.
It used to work perfectly but when I added variants it's started to break and for the life of me I can't get it to work. When clicking the button - it doesn't add the product to the bag at all.
<form action="/cart/add" method="post" data-cart-submit>
{% if product.variants.size > 1 %}
<div class="w-form">
<div class="inpost-form-option w-clearfix">
<label class="inpost-form-label">{{ product.options.first }}</label>
<select id="variant-select" class="inpost-quantity w-select">
{% for variant in product.variants %}
{% if variant.available == true %}
<option value="{{ variant.id }}">{{ variant.title }}</option>
{% endif %}
{% endfor %}
</select>
</div>
</div>
{% endif %}
<button class="inpost-buy w-button" type="submit" data-cart-add="{{ variant.id }}">Add to Bag →</button>
</form>
Added Javascript
<script type="text/javascript">
jQuery(function() {
CartJS.init({{ cart | json }});
});
</script>
Console Error
shop_events_listener-91b4691….js:1 POST
https://monah-uk.myshopify.com/cart/add.js 404 (Not Found)
I'm trying to set up a language selector using the Framework Django.
I used this code:
<form action="/i18n/setlang/" method="post">
{% csrf_token %}
<input name="next" type="hidden" value=""/>
<select class="select-style" name="language" onchange="this.form.submit();" style="width:100px">
{% for lang in LANGUAGES %}
<option value="{{ lang.0 }}" {% if lang.0 == LANGUAGE_CODE %} selected="selected"{% endif %}>{{ lang.1 }}</option>
{% endfor %}
</select>
</form>
It works well with Chrome and Safari but not Firefox.
The 1st language (English) is not displayed in the drop-down menu.
/ setting.py /
LANGUAGES = (
('en', gettext('English')),
('fr', gettext('French')),
('nl', gettext('Dutch')),
('it', gettext('Italian')),
('es', gettext('Spanish')),
('th', gettext('Thai')),
)
Thanks
EDIT
I've finally fixed my problem adding a selected=selected field option which is displayed only in Chrome and Safari but at least all languages are displayed in FF.
<form action="/i18n/setlang/" method="post">
{% csrf_token %}
<input name="next" type="hidden" value=""/>
<select class="select-style" name="language" onchange="this.form.submit();" style="width:100px;font-size:12px;">
<option selected="selected" disabled="disabled">Select your language</option>
{% for lang in LANGUAGES %}
<option value="{{ lang.0 }}" {% if lang.0 == LANGUAGE_CODE %} selected="selected"{% endif %}>{{lang.1|title}}</option>
{% endfor %}
</select>
</form>