We Keep Coding

How send value from django html to django views

I want to make a section with goods in which you can "+" and "-" increase or decrease the quantity of goods
And then, depending on the amount, "sell" it.
Now we need to pass the value {{ el.id }} to django views
My code:
html:
<form method="POST">
{% csrf_token %}
{% for el in form3 %}
{% if el.count > 0 %}
[ {{ el.count }}шт. ] <br>
[ {{ el.title }} ]<br>
<a id="minus{{ el.id }}" href="#"><b>[ - ]</b></a>
<span id="value{{ el.id }}">0</span>
<a id="plus{{ el.id }}" href="#"><b>[ + ]</b></a>
<br>
Function where i + or - from count
<script>
$(function(){
var valueElement = $('#value{{ el.id }}');
function incrementValue(e){
valueElement.text(Math.max(parseInt(valueElement.text()) + e.data.increment, 0));
return false;
}
$('#plus{{ el.id }}').bind('click', {increment: 1}, incrementValue);
$('#minus{{ el.id }}').bind('click', {increment: -1}, incrementValue);
});
</script>
{% endif %}
{% endfor %}
</form>
how can i get the values with "span id=value{{ el.id }}"

Solved
{% for el in form3 %}
{% if el.count > 0 %}
[ {{ el.count }}шт. ] <br>
[ {{ el.title }} ]<br>
<a id="minus{{ el.id }}" href="#"><b>[ - ]</b></a>
<span id="span-value{{el.id}}">0</span>
<a id="plus{{ el.id }}" href="#"><b>[ + ]</b></a>
<br>
<input type="hidden" name=name-{{el.id}} id="input-{{el.id}}" value="0">
<script>
$(function(){
var valueElement = $('#span-value{{el.id}}');
function incrementValue(e){
valueElement.text(Math.max(parseInt(valueElement.text()) + e.data.increment, 0));
var value = $("#span-value{{el.id}}").text();
var lower=$("#input-{{el.id}}").val(value);
return false;
}
$('#plus{{ el.id }}').bind('click', {increment: 1}, incrementValue);
$('#minus{{ el.id }}').bind('click', {increment: -1}, incrementValue);
});
</script>
{% endif %}
{% endfor %}
use this for copy\duplicate span value on input
After this you can user
request.post.dict or request.post.items() for key:values

Shopify variant price change using setCallBack not working

I am trying to update the product price when a variant is selected. So far i have the below; but just cant get it to work.
I have added this script to the theme.liquid
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
I have the price in the product-template.liquid
<div class="product-price"><span id="price-field">{{ product.price | money }}</span></div>
<select
v-model="form.id"
name="id" id="variant-id"
class="minimal mt-2 mb-2 {% if hide_default_title %}hidden{% endif %}">
{% for variant in product.variants %}
{% if variant.available %}
<option
{% if variant == current_variant %}selected="selected"{% endif %}
{% unless variant.available %}disabled="disabled"{% endunless %}
data-inventory-quantity="{{ variant.inventory_quantity }}"
data-price="{{ variant.price | money | strip_html }}"
value="{{ variant.id }}"
class="js-variant-radio">{{ variant.title }}
</option>
{% endif %}
{% endfor %}
</select>
And the callback function here
<script>
// <![CDATA[
var selectCallback = function(variant, selector) {
if (variant) {
if (variant.available) {
// Selected a valid variant that is available.
$('#add').removeClass('disabled').removeAttr('disabled').val('Add to Cart').fadeTo(200,1);
} else {
// Variant is sold out.
$('#add').val('Sold Out').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
}
// Whether the variant is in stock or not, we can update the price and compare at price.
if ( variant.compare_at_price > variant.price ) {
$('#price-field').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "") +'</span>'+' <s class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "")+ '</s>');
} else {
$('#price-field').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "") + '</span>' );
}
} else {
// variant doesn't exist.
$('#add').val('Unavailable').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
}
}
// initialize multi selector for product
jQuery(function($) {
new Shopify.OptionSelectors("variant-id", { product: , onVariantSelected: selectCallback });
});
// ]]>
</script>

Looking at the code, it looks like you're just missing a product object when you try to initialize the Shopify.OptionSelectors
new Shopify.OptionSelectors("variant-id", { product: , onVariantSelected: selectCallback });
Try adding the product object to this line to see if that fixes the problem. The updated line should look like this:
new Shopify.OptionSelectors("variant-id", { product: {{ product | json }}, onVariantSelected: selectCallback });

Related products by variant using metafields for Shopify Liquid

I'm trying to build on caroline's solution for related products with metafields to build related product variants. I.e when you click on the white color variant for a desk, you will see the white variant of a chair as a related product. (As opposed to linking the desk product to the chair product regardless of variant.) Caroline's solution is here: https://gist.github.com/carolineschnapp/1003334 and below is my code. Right now it's putting the same product twice on page load, and nothing happens when a different vairant is selected. The way I am formatting the metafield value for each variant is by putting "related-product-handle-1, variant-id-1, related-product-handle-2,variant-id-2, related-product-handle-3, variant-id-3" instead of just the product handles.
{% assign image_size = 'compact' %}
{% assign heading = 'Related Products' %}
{% if product.selected_or_first_available_variant.metafields.recommendations.productHandles %}
<h3>{{ heading }}</h3>
<ul class="related-products"></ul>
{% endif %}
<script>!window.jQuery && document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"><\/script>')</script>
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
setTimeout(function() {
var dd = $('.single-option-selector#product-select-option-0');
var vId = location.search.substring(9);
switchRelated(vId);
dd.on('change', function() {
$('ul.related-products').empty();
var vId = location.search.substring(9);
switchRelated(vId);
});
function switchRelated(vId) {
var list = $('ul.related-products');
var vIdd = parseInt(vId);
{% for variant in product.variants %}
{% if variantId == vIdd %}
{% if variant.metafields.recommendations.productHandles %}
recommendations = jQuery.trim({{ variant.metafields.recommendations.productHandles | json }}).split(/[\s,;]+/);
for (var i=0; i < (recommendations.length); i+=2 ) {
var j = (i + 1);
if (recommendations.length && recommendations[i] && recommendations[j] !== '') {
jQuery.getJSON('/products/' + recommendations[i] + '.js', function(product) {
product.variants.forEach(function(variant) {
if (variant.id == parseInt(recommendations[j])) {
list.append('<li><div class="image"><img src="' + variant.featured_image.src + '" /></div><h4>' + product.title + '</h4></li>');
}
});
});
}
}
{% endif %}
{% endif %}
{% endfor %}
}
}, 1);
});
</script>
Answer edited: The first was extremely helpful once I made some corrections to syntax errors and a couple of short additions. Here is my edited version of the answer for anyone who may need it:
Product.liquid:
{% for variant in product.variants %}
{% capture metafield_data %}{% endcapture %}
{% assign related_products = variant.metafields.recommendations.productHandles | split: '|' %}
{% for related_product in related_products %}
{% assign metafield_items = related_product | split: ',' %}
{% assign r_p = metafield_items[0] %}
{% assign r_v = metafield_items[1] | plus: 0 %}
{% assign r_n = all_products[r_p].title %}
{% for related_variant in all_products[r_p].variants %}
{% if related_variant.id == r_v %}
{% assign r_i = related_variant.image.src | img_url: 'small' %}
{% endif %}
{% endfor %}
{% capture metafield_data %}{{metafield_data}}{{ r_p }},{{ r_v }},{{ r_i }},{{ r_n }}{% unless forloop.last %}|{% endunless %}{% endcapture %}
{% endfor %}
<option id="{{ variant.id }}" data-metafield="{{ metafield_data }}" {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}- {{ related_products.size }}</option>
{% endfor %}
And related-variants javascript snippet:
$(document).ready(function(){
setTimeout(function() {
var dd = $('.single-option-selector#product-select-option-0');
if(location.search.substring(9) != ''){
var vId = location.search.substring(9);
}
else {
var vId = {{ product.selected_or_first_available_variant.id }};
}
switchRelated(vId);
$('#product-select option').each(function(index, element){
$(".single-option-selector#product-select-option-0 option:eq(" + index + ")").attr('id', element.id);
$('.single-option-selector#product-select-option-0 option:eq(' + index + ')').attr('data-metafield', $(element).attr("data-metafield"));
$('#product-select option:eq(' + index + ')').attr('id', '');
});
dd.on('change', function() {
var list = $('ul.related-products');
$(list).children().remove();
$(list).empty();
if(location.search.substring(9) != ''){
var vId = location.search.substring(9);
}
else {
var vId = {{ product.selected_or_first_available_variant.id }};
}
switchRelated(vId);
});
function switchRelated(vId) {
var list = $('ul.related-products');
$(list).children().remove();
$(list).empty();
var vIdd = parseInt(vId);
console.log(vIdd)
var variant_matches = $('#' + vId).attr('data-metafield').split('|');
for (var i=0; i < variant_matches.length; i++) {
var items = variant_matches[i].split(',');
list.append('<li><div class="image"><img src="'+items[2]+'" /></div><h4>' + items[3].replace('_','') + '</h4></li>');
}
}
}, 1);
});
The only thing I'm nervous about is the fact that I am copying over the data from the 'product-select' dropdown over to the 'single-option-selector' dropdown. I am doing this because there is no template for rendering the single-option-selector, it seems to be getting added through javascript. If anyone has any insight into manipulating the single-option-selector in liquid, please let me know. Thank you!!

The fastest way to implement this is to let Shopify servers structure the elements for to pull links and image URLs with any AJAX calls. Here's how to do it.
From your example of productHandles, I'm guessing the 3 items in the list are related to a particular variant id xxxxxx. Structure the metafield value this way
rph-1,rph-v-id-1|rph-2,rph-v-id-2|rph-3,rph-v-id-3
Now in product liquid find this section
<select class="product-select" id="product-select" name="id" .... </select>
Change the inside html to the one below -
{% for variant in product.variants %}
{% assign related_products = variant.metafields.recommendations.productHandles | split: '|' %}
{% for related_product in related_products %}
{% assign metafield_items = related_product | split: ',' %}
{% assign r_p = metafield_items[0] %}
{% assign r_v = metafield_items[1] | plus: 0 %} {% comment %} converting string to number {% endcomment %}
{% assign r_n = all_products[r_p].title | replace: ' ','_' %}
{% for related_variant in all_products[r_p].variants %}
{% if related_variant.id == r_v %} {% comment %} fails if r_v is a string {% endcomment %}
{% assign r_i = related_variant.image.src }}
{% endif %}
{% endfor %}
{% capture metafield_data %}{{metafield_data}}{{ r_p }},{{ r_v }},{{ r_i }},{{ r_n }}{% unless forloop.last %}|{% endunless %}{% endcapture %}
{% endfor %}
<option id="{{ variant.id }}" metafield-data={{ metafield_data }}{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
"metafield_data" will contain all the related products information (product,variant,variant image).
JS to replace "switchRelated(vId)"
function switchRelated(vId) {
var list = $('ul.related-products');
var vIdd = parseInt(vId);
list.children().remove()
var variant_matches = $('#vId').attr('metafield-data').split('|')
for (var i=0; i < variant_matches.length; i++) {
var items = variant_matches[i].split(',')
list.append('<li><div class="image"><img src="'+items[2]+'" /></div><h4>'+items[3].replace('_','')+'</h4></li>');
}
}
In layman terms, you are taking the product handle and variant id from the metafields and adding title and image to them using liquid (server side function). You are then matching them to variants and assigning a data variable in the element which you are using again to change the html elements.
P.S. The code is long and not properly aligned and I may have missed code punctuations here and there. Please check them. The logic is simple and the entire weight of AJAX is removed and shifted to normal HTML calls.

Take values from active class and assume to another

I work on a product configurator that works with liquid.
Liquid uses a combination of tags, objects, and filters to load dynamic content.
Every Product has two configuration options. Color and material.
Both options appear as clickable swatches.
We would like to add the effect, that the material swatch change the background color to the color of the selected color variant.
Take place here: http://printnil.com/products/new-standard
swatch.liquid:
{% if swatch == blank %}
{% else %}
{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}
{% for option in product.options %}
{% if option == swatch %}
{% assign found_option = true %}
{% assign option_index = forloop.index0 %}
<style>
#product-select-option-{{ option_index }} { display: none; }
#product-select-option-{{ option_index }} + .custom-style-select-box { display: none !important; }
</style>
<script>$(window).load(function() { $('.selector-wrapper:eq({{ option_index }})').hide(); });</script>
{% assign downcased_option = swatch | downcase %}
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
{% assign is_color = true %}
{% endif %}
{% endif %}
{% endfor %}
{% unless found_option %}
{% else %}
<div class="swatch clearfix swatch-{{swatch}}" data-option-index="{{ option_index }}">
{% assign values = '' %}
{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
<div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }}">
{% if is_color %}
<div class="tooltip">{{ value }}</div>
{% endif %}
<input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %}/>
{% if is_color %}
<label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }};">
</label>
{% else %}
<label for="swatch-{{ option_index }}-{{ value | handle }}">
{{ value }}
</label>
{% endif %}
</div>
{% endunless %}
{% endfor %}
</div>
{% endunless %}
{% endif %}

<script>
var mat = jQuery(".swatch.clearfix.swatch-Material");
var colors = jQuery(".swatch-element.color");
var colChanger = function() {
mat.css("background-color", jQuery(this).css("background-color"));
};
colors.each(function(e) { jQuery(this).click(colChanger); });
mat.css("background-color", "#222");
</script>

Trigger Change event

the event trigger seems to be not working.
Here is my code:
{% for DepartureDate, LfidElement in Flight%}
var DepartureDateCurrentVol = "{{DepartureDate}}";
var weekDayRange=new Date(DepartureDateCurrentVol).getDay();
weekDayName=returnWeekDayName(weekDayRange);
{% for LFID, VarTypeElement in LfidElement %}
{% for VarTypeID, FareInfosElement in VarTypeElement %}
{% for FareId,FareInfo in FareInfosElement.FareInfos %}
var flagMin = "{{ FareInfo.FlagMinAmt|e }}";
var amountCurrentVol="{{ FareInfo.BaseFareAmtInclTax|e }}";
var fareIdDeparture="{{FareId}}";
if(DepartureDateCurrentVol == dateDepartureRequest)
{
moinsCherArrivalSelected=0;
montantGlobal+=parseFloat(amountCurrentVol);
dateDepartureRequestedFound=1;
$('#aller').append('<div class="v2_blocselectionorange"><div class="v2_blocselectionorangehaut">'+weekDayName+'<br />'+DepartureDateCurrentVol+'</div><div class="v2_blocselectionorangebas">à partir de <br /><span class="v2_prixselection">'+amountCurrentVol+' dt</span><div class="v2_prixselectionradio"><input type="radio" id="selectionr'+fareIdDeparture+'" name="selectionr" value="1" checked="checked"></div></div></div>');
volSelected['Departure']=fareIdDeparture;
$('#retour').empty();
//$("#selectionr"+fareIdDeparture).change();
$("#selectionr"+fareIdDeparture).trigger("change");
}
$("#selectionr"+fareIdDeparture).change(function(){
var idFareIDCurrent=$(this).attr('id').substring(10);
FareInfo=idFareIDCurrent;
{% for key,pas in FareInfo.ReturnFlightSegmentDetails%}
var arrivalDate="{{key}}";
var weekArrivalDayRange=new Date(arrivalDate).getDay();
weekArrivalDayName=returnWeekDayName(weekArrivalDayRange);
{% for key2,ReturnFlightSegmentDetailsInfosValue in pas %}
{% for key3,ReturnFlightSegmentTypeInfo in ReturnFlightSegmentDetailsInfosValue %}
{% for key4,ReturnFlightSegmentInfo in ReturnFlightSegmentTypeInfo %}
var amountArrivalDate="{{ ReturnFlightSegmentInfo.BaseFareAmtInclTax|e }}";
var flagArrivalMin="{{ ReturnFlightSegmentInfo.FlagMinAmt|e }}";
//console.info(arrivalDate);console.info(arrivalDate == dateArrivalRequest);
if( arrivalDate == dateArrivalRequest)
{
montantGlobal+=parseFloat(amountArrivalDate);
volSelected['Arrival']="{{key4}}";
$('#retour').append('<div class="v2_blocselectionorange"><div class="v2_blocselectionorangehaut">'+weekArrivalDayName+'<br />'+arrivalDate+'</div><div class="v2_blocselectionorangebasblanc">à partir de <br /><span class="v2_prixselection">'+amountArrivalDate+' dt</span><div class="v2_prixselectionradio"><input type="radio" id="selectionRetour'+"{{key4}}"+'" name="selectionRetour" value="1" checked="checked"></div></div></div>');
dateArrivalRequestedFound =1;
}else {
if(flagArrivalMin =! 1){
$('#retour').append('');
}else {
$('#retour').append('<div class="v2_blocselection"><div class="v2_blocselectionhaut">'+weekArrivalDayName+'<br />'+arrivalDate+'</div><div class="v2_blocselectionbasjaune">à partir de <br /><span class="v2_prixselection">'+amountArrivalDate+' dt</span><div class="v2_prixselectionradio"><input type="radio" name="selectionRetour" id="selectionRetour'+"{{key4}}"+'" value="1"></div></div></div>');
if(dateArrivalRequestedFound==0 && moinsCherArrivalSelected==0){
$('input[type=radio][name=selectionRetour]').attr('checked', 'checked');
moinsCherArrivalSelected=1;
montantGlobal+=parseFloat(amountArrivalDate);
}
}
}
{% endfor %}
{% endfor %}
{% endfor%}
{% endfor %}
});
{% endfor %}
{% endfor %}
{% endfor %}
{% endfor %}
can anybobody tell me how to force the exécution of the event Change?! i want to declare my function change in a first step then i will execute it each time i have a change, in fact on the loading of my page the change must be executed then if the user click to another radio button the change will be re-executed. am i doing the right alternative?