We Keep Coding

How do I create tiered custom attribute select boxes with SnipCart?

I am looking to have two custom attributes for products, where the second custom attribute has unique options depending on the first attribute selected.
My particular circumstance is selling art that will have many different formats and sizes, where the price of the sizes will be different depending on which format is selected (IE: Print, Framed, Canvas, etc.).
The obvious alternative is to just have different product listings for each format, and not have the double drop down menu's. However, that is not ideally what I am looking to do.
This is the code provided in the documentation for a single select box and custom attribute:
<label>Frame color</label>
<select id="frame_color">
<option value="Black">Black</option>
<option value="Brown">Brown</option>
<option value="Gold">Gold</option>
</select>
<button
id="starry-night"
class="snipcart-add-item"
data-item-id="starry-night"
data-item-price="79.99"
data-item-url="/paintings/starry-night"
data-item-description="High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh."
data-item-image="/assets/images/starry-night.jpg"
data-item-name="The Starry Night"
data-item-custom1-name="Frame color"
data-item-custom1-options="Black|Brown|Gold"
data-item-custom2-name="Gift note">
Add to cart
</button>
<script>
const button = document.querySelector('#starry-night')
const select = document.querySelector('#frame_color')
select.addEventListener('change', () => {
// Sets the default frame color when adding the item
button.setAttribute("data-item-custom1-value", select.value)
})
</script>

This can be done by having multiple products behind the scenes, but making it appear to the user that there is only one product (per item). Then, changing which products (and custom attribute selection boxes) are visible depending on the first selection box.
I am a novice so there may be a simpler way to accomplish this, but this is what I came up with and it works well. Also, I am using a little jQuery in this code so it will require modifications to work without it.
<style>
.hidden{
display:none;
}
</style>
<select id="item-1">
<option value="1">Type 1</option>
<option value="2">Type 2</option>
</select>
<div id="type-1-1" class="item-content-1">
<select id="size-1-1">
<option value="8x8 ($50)">8x8 ($50)</option>
<option value="12x12 ($100)">12x12 ($100)</option>
<option value="20x20 ($200)">20x20 ($200)</option>
</select>
<button id="add-to-cart-1-1" class="snipcart-add-item"
data-item-id="product-1-1"
data-item-price="0.00"
data-item-url="https://example.com"
data-item-description="Product 1 type 1 description"
data-item-image="/img.jpg"
data-item-name="Product 1 type 1"
data-item-custom1-name="Size"
data-item-custom1-options="8x8 ($50)[+50.00]|12x12 ($100)[+100.00]|20x20 ($200)[+200.00]"
data-item-custom1-value="8x8 ($50)"
data-item-custom1-required="true">Add To Cart
</button>
</div>
<div id="type-1-2" class="item-content-1 hidden">
<select id="size-1-2">
<option value="8x8 ($90)">8x8 ($90)</option>
<option value="12x12 ($170)">12x12 ($170)</option>
<option value="20x20 ($300)">20x20 ($300)</option>
</select>
<button id="add-to-cart-1-2" class="snipcart-add-item"
data-item-id="product-1-2"
data-item-price="0.00"
data-item-url="https://example.com"
data-item-description="Product 1 type 2 description"
data-item-image="/img.jpg"
data-item-name="Product 1 type 2"
data-item-custom1-name="Size"
data-item-custom1-options="8x8 ($90)[+90.00]|12x12 ($170)[+170.00]|20x20 ($300)[+300.00]"
data-item-custom1-value="8x8 ($90)"
data-item-custom1-required="true">Add To Cart
</button>
</div>
<select id="item-2">
<option value="1">Type 1</option>
<option value="2">Type 2</option>
</select>
<div id="type-2-1" class="item-content-2">
<select id="size-2-1">
<option value="8x8 ($50)">8x8 ($50)</option>
<option value="12x12 ($100)">12x12 ($100)</option>
<option value="20x20 ($200)">20x20 ($200)</option>
</select>
<button id="add-to-cart-2-1" class="snipcart-add-item"
data-item-id="product-2-1"
data-item-price="0.00"
data-item-url="https://example.com"
data-item-description="Product 2 type 1 description"
data-item-image="/img.jpg"
data-item-name="Product 2 type 1"
data-item-custom1-name="Size"
data-item-custom1-options="8x8 ($50)[+50.00]|12x12 ($100)[+100.00]|20x20 ($200)[+200.00]"
data-item-custom1-value="8x8 ($50)"
data-item-custom1-required="true">Add To Cart
</button>
</div>
<div id="type-2-2" class="item-content-2 hidden">
<select id="size-2-2">
<option value="8x8 ($90)">8x8 ($90)</option>
<option value="12x12 ($170)">12x12 ($170)</option>
<option value="20x20 ($300)">20x20 ($300)</option>
</select>
<button id="add-to-cart-2-2" class="snipcart-add-item"
data-item-id="product-2-2"
data-item-price="0.00"
data-item-url="https://example.com"
data-item-description="Product 2 type 2 description"
data-item-image="/img.jpg"
data-item-name="Product 2 type 2"
data-item-custom1-name="Size"
data-item-custom1-options="8x8 ($90)[+90.00]|12x12 ($170)[+170.00]|20x20 ($300)[+300.00]"
data-item-custom1-value="8x8 ($90)"
data-item-custom1-required="true">Add To Cart
</button>
</div>
<script>
var item_count = 2; //number of items in shop
var type_count = 2; //number of type subdivisions
var i = 1;
for (i = 1; i <= item_count; i++) {
const type_select = document.querySelector('#item-' + i);
const count = i
type_select.addEventListener('change', () => {
$('.item-content-' + count).addClass("hidden");
$('#type-' + count + "-" + type_select.value).removeClass("hidden");
});
var ii = 1;
for (ii = 1; ii <= type_count; ii++) {
const addToCart = document.querySelector('#add-to-cart-' + i + "-" + ii);
const size = document.querySelector('#size-' + i + "-" + ii);
size.addEventListener('change', () => {
addToCart.setAttribute("data-item-custom1-value", size.value);
});
};
};
</script>

I believe you can do this with data-item-custom1-value:
data-item-custom1-name="Color"
data-item-custom1-options="Blue|Dark Gray|Light Gray"
data-item-custom1-value="Dark Gray"
Then use Javascript to change the data-item-custom1-value when a select is changed to the value of the select.
Complete Example
<div>
<label for="color">Color</label>
<select name="color" id="color">
<option value="Blue">Blue</option>
<option value="Dark Gray">Dark Gray</option>
<option value="Light Gray">Light Gray</option>
</select>
</div>
<button id="poster-cart-btn" class="snipcart-add-item btn btn-dark"
data-item-id="1"
data-item-price="9.95"
data-item-url="/"
data-item-name="Poster"
data-item-image="img/poster.png"
data-item-description="A pretty poster"
data-item-custom1-name="Color"
data-item-custom1-options="Blue|Dark Gray|Light Gray"
data-item-custom1-value="Blue">
Add to cart
</button>
<script type="text/javascript">
window.addEventListener('load', function() {
document.getElementById('color').onchange = function() {
const val = document.getElementById('color').value;
document.getElementById('poster-cart-btn').setAttribute('data-item-custom1-value', val);
}
});
</script>

iam not realy good in js, is there anyway to give .setAttribute more then 1 value to altering the price? Thanks alot
<select id="size-2-2">
<option value="8x8 ($90)">8x8 ($90)</option>
<option value="12x12 ($170)">12x12 ($170)</option>
<option value="20x20 ($300)">20x20 ($300)</option>
</select>
<select id="color-2-3">
<option value="color_1 ($90)">8x8 ($90)</option>
<option value="color_2 ($170)">12x12 ($170)</option>
<option value="color_3 ($300)">20x20 ($300)</option>
</select>
<button id="add-to-cart-2-2" class="snipcart-add-item"
data-item-id="product-2-2"
data-item-price="0.00"
data-item-url="https://example.com"
data-item-description="Product 2 type 2 description"
data-item-image="/img.jpg"
data-item-name="Product 2 type 2"
data-item-custom1-name="Size"
data-item-custom1-options="8x8 ($90)[+90.00]|12x12 ($170)[+170.00]|20x20 ($300)[+300.00]"
data-item-custom1-value="8x8 ($90)"
data-item-custom1-required="true"
data-item-custom2-name="Color"
data-item-custom2-options="color_1 ($90)[+90.00]|color_2 ($170)[+170.00]|color_3($300)[+300.00]"
data-item-custom2-value="color_1 ($90)"
data-item-custom2-required="true">Add To Cart
</button>
...
addToCart.setAttribute("data-item-custom1-value", size.value);
addToCart.setAttribute("data-item-custom2-value", size.value);
...

Thanks a lot #justin I modify your way dirty and it works fine for me! Now snipcart snacks all the values from the select fields with one button. I know there is a better way to load "window.addEventListener" x times. Feel free to post a better and simpler solution.
<div>
<label for="color-1">Color 1</label>
<select name="Color select 1" id="color_1">
<option value="color_1_1">0</option>
<option value="color_1_2">+11</option>
<option value="color_1_3">+111</option>
</select>
<label for="color-2">Color 2</label>
<select name="Color select 2" id="color_2">
<option value="color_2_1">0</option>
<option value="color_2_2">+12</option>
<option value="color_2_3">+112</option>
</select>
<label for="color-3">Color 3</label>
<select name="Color select 3" id="color_3">
<option value="color_3_1">0</option>
<option value="color_3_2">+13</option>
<option value="color_3_3">-113</option>
</select>
</div>
<button id="poster-cart-btn" class="snipcart-add-item"
data-item-id="1"
data-item-price="0.00"
data-item-url="/"
data-item-name="Poster"
data-item-image="img/poster.png"
data-item-description="A pretty poster"
data-item-custom1-name="Color 1"
data-item-custom1-options="color_1_1|color_1_2[+11.00]|color_1_3[+111.00]"
data-item-custom1-value="color_1_1"
data-item-custom2-name="Color 2"
data-item-custom2-options="color_2_1|color_2_2[+12.00]|color_2_3[+112.00]"
data-item-custom2-value="color_2_1"
data-item-custom3-name="Color 3"
data-item-custom3-options="color_3_1|color_3_2[+13.00]|color_3_3[+113.00]"
data-item-custom3-value="color_3_1">
Add to cart
</button>
<script type="text/javascript">
window.addEventListener('load', function() {
document.getElementById('color_1').onchange = function() {
const val = document.getElementById('color_1').value;
document.getElementById('poster-cart-btn').setAttribute('data-item-custom1-value', val);
}
document.getElementById('color_2').onchange = function() {
const val = document.getElementById('color_2').value;
document.getElementById('poster-cart-btn').setAttribute('data-item-custom2-value', val);
}
document.getElementById('color_3').onchange = function() {
const val = document.getElementById('color_3').value;
document.getElementById('poster-cart-btn').setAttribute('data-item-custom3-value', val);
}
});
</script>

JavaScript - Dropdown value dependent

I have two dropdown right now. I want to when the user selects "NO" the other automatically selects "YES" and vice versa.
I'm assuming I use JS here to make this occur, but not sure where to start. Below is my dropdown html code. If someone could help me get started, it would be helpful.
Code:
<div class="cmicrophone" id="cmicrophone">Currently:
<select id="cmicrophone" name="cmicrophone">
<option value=" " selected = "selected"> </option>
<option value="on">ON</option>
<option value="off">OFF</option>
</select>
</div>
<div class="microphone" id="microphone">Microphone:
<select id="microphone" name = "microphone">
<option value=" " selected="selected"> </option>
<option value="on" >ON</option>
<option value="off">OFF</option>
</select>
</div

You can assign a same class to each select element and bind change event listener.
$('.elem').on('change', function() {
if ($(this).val() == 'on') {
$('.elem').not(this).val('off');
} else {
$('.elem').not(this).val('on');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cmicrophone" id="cmicrophone">Currently:
<select id="cmicrophone" class='elem' name="cmicrophone">
<option value="" selected = "selected"></option>
<option value="on">ON</option>
<option value="off">OFF</option>
</select>
</div>
<div class="microphone" id="microphone">Microphone:
<select id="microphone" class='elem' name="microphone">
<option value="" selected = "selected"></option>
<option value="on">ON</option>
<option value="off">OFF</option>
</select>
</div>

A good starting point might be listening for changes on one select, and when the change happens, selecting the other <select> and setting the right value

Here's a vanilla JS solution (no jquery required).
The idea here is to:
select both <select> elements and save them into variables to refer to later using document.querySelector
add input event listeners on both elements that call a function to handle the event
then use inside the function selectElement.selectedIndex to check the selected index of one element and use that to set the value of the other.
// select the `<select>` elements
const cmicrophone = document.querySelector('#cmicrophone');
const microphone = document.querySelector('#microphone');
// define function to handler the events
function inputHandler(thisSelect, otherSelect) {
if (thisSelect.selectedIndex == 1) {
otherSelect.selectedIndex = 2;
} else if (thisSelect.selectedIndex == 2) {
otherSelect.selectedIndex = 1;
} else {
thisSelect.selectedIndex = 0;
otherSelect.selectedIndex = 0;
}
}
// add event listeners that will 'fire' when the input of the <select> changes
cmicrophone.addEventListener('input', event => {
inputHandler(cmicrophone, microphone);
});
microphone.addEventListener('input', event => {
inputHandler(microphone, cmicrophone);
});
<div>Currently:
<select id="cmicrophone" name="cmicrophone">
<option value=" " selected = "selected"> </option>
<option value="on">ON</option>
<option value="off">OFF</option>
</select>
</div>
<div>Microphone:
<select id="microphone" name="microphone">
<option value=" " selected="selected"> </option>
<option value="on" >ON</option>
<option value="off">OFF</option>
</select>
</div>
One more thing to add: You assigned the same value to multiple ids. You should only assign one unique id per element.

HTML/JavaScript Form Muli List Select Alert not working

I have the following form and javascript:
function test() {
var options = document.getElementById('genres1').options,
count = 0;
for (var i = 0; i < options.length; i++) {
if (options[i].selected) count++;
}
alert(options);
}
<form>
<select name="genres" id="genres1" size="6">
<option value="r&b">R&B</option>
<option value="jazz">Jazz</option>
<option value="blues">Blues</option>
<option value="newAge">New Age</option>
<option value="classical">Classical</option>
<option value="opera">Opera</option>
</select><br><br>
<input type="button" value="How many are selected?" onclick="test();" />
</form>
I'm trying to produce an alert message which will give the number of items selected by the user from the list. I keep hitting dead ends, including not being able to select more than one option. Help much appreciated.

The reason why the number of items selected by the user is not showing is because you're not displaying the count.
you're doing alert(options); , I'd assume that was a mistake and you meant to write alert(count);.
secondly, for you to be able to select more than one option the solution below should do:
<form>
<select name="genres" id="genres1" size="6" multiple> <!-- note the use of "multiple" -->
<option value="r&b">R&B</option>
<option value="jazz">Jazz</option>
<option value="blues">Blues</option>
<option value="newAge">New Age</option>
<option value="classical">Classical</option>
<option value="opera">Opera</option>
</select><br><br>
<input type="button" value="How many are selected?" onclick="test();"/>
</form>
Also, keep in mind selecting multiple options vary in different operating systems and browsers:
For windows: Hold down the control (ctrl) button to select multiple
options
For Mac: Hold down the command button to select multiple options

please check this code
<script type="text/javascript">
function test()
{
count = 0;
var x=document.getElementById("genres1");
for (var i = 0; i < x.options.length; i++) {
if(x.options[i].selected ==true){
alert(x.options[i].value);
count++;
}
}
alert(count)
}
</script>
and html code
<form>
<select name="genres" id="genres1" size="6" multiple="">
<option value="r&b">R&B</option>
<option value="jazz">Jazz</option>
<option value="blues">Blues</option>
<option value="newAge">New Age</option>
<option value="classical">Classical</option>
<option value="opera">Opera</option>
</select><br><br>
<input type="button" value="How many are selected?" onclick="test();"/>
</form>

Change Dropdown values based on input in textfield

I try to find a solution, but I can't find it and I am not able to program it by myself. I hope you can help me.
I have 2 elements: A textfield and a drop down menu (select/options).
Based on the birth/year of a person I enter into the textfield, I want to have a related drop down values.
If the person is 0-17 years old, the values in the drop down should bei 0, 100, 200, 300, 400, 500, 600.
If the person is 18 years old or older, the values in the drop down should bei 300, 500, 1000, 1500, 2000, 2500.
Example: If I enter 1978 into the text field, the drop down menu should show the values 300, 500,…
If I enter 2002 into the text field, the drop down menu should show the values 100, 200,…
I hope it is understandable what I am looking for.
I have checked this one:
Change dropdown value based on Text Input
and also this one, which looks also similar to what I need:
jQuery - Change hidden value based on input field
But I can't make it.
A jsfiddle would be really cool!
Thank you in advance.
<input name="Year" type="text" value="" />
<select name="Results">
<option selected="selected" value="">please choose:</option>
<option value="300">300.-</option>
<option value="500">500.-</option>
<option value="1000">1000.-</option>
<option value="1500">1500.-</option>
<option value="2000">2000.-</option>
<option value="2500">2500.-</option>
</select>
<select name="Results">
<option selected="selected" value="">please choose:</option>
<option value="100">100.-</option>
<option value="200">200.-</option>
<option value="300">300.-</option>
<option value="400">400.-</option>
<option value="500">500.-</option>
<option value="600“>600.-</option>
</select>
Kind regards,
Andy

You could handle this by taking advantage of data-* attributes and using jQuery to determine which values should be shown based on your selection :
<!-- Assumes a valid year is entered -->
<input name="Year" type="text" value="" />
<!-- Notice your possible values data options -->
<select name="Results">
<option selected="selected" value="">please choose:</option>
<option value="300" data-under-18="100" data-over-18="300">300.-</option>
<option value="500" data-under-18="200" data-over-18="500">500.-</option>
<option value="1000" data-under-18="300" data-over-18="1000">1000.-</option>
<option value="1500" data-under-18="400" data-over-18="1500">1500.-</option>
<option value="2000" data-under-18="500" data-over-18="2000">2000.-</option>
<option value="2500" data-under-18="600" data-over-18="2500">2500.-</option>
</select>
<script>
$(function(){
// When your year changes...
$('[name="Year"]').change(function(){
// Check that the value is a year (assumes 4 digit number)
if(/^\d{4}/.test($(this).val())){
// Parse the value
var year = parseInt($(this).val());
// Determine the user's age
var age = new Date().getFullYear() - year;
// Use the data attributes to set each value (ignore the first one)
$('[name="Results"] option:not(:first)').each(function(){
var valueToUse = (age >= 18) ? $(this).attr('data-over-18') : $(this).attr('data-under-18');
$(this).val(valueToUse).text(valueToUse);
});
}
else{
alert('Please enter a year! (any 4-digit number will do)');
$(this).val('').focus();
}
})
})
</script>
You can see a complete working example here and demonstrated below :

https://jsfiddle.net/erjc0fna/
Basically each option has a class that identifies it as lessThan18 or over18. The ones without classes are available for either case according to what you wrote. On keyup for the textbox it then calculates the age and hides/shows the correct options.

Include jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
After add ids to the input(inputId) and the 2 select(select1 and select2)
<input id="inputId" name="Year" type="text" value="" />
<select id="select1" name="Results">
<option selected="selected" value="">please choose:</option>
<option value="300">300.-</option>
<option value="500">500.-</option>
<option value="1000">1000.-</option>
<option value="1500">1500.-</option>
<option value="2000">2000.-</option>
<option value="2500">2500.-</option>
</select>
<select id="select2" name="Results">
<option selected="selected" value="">please choose:</option>
<option value="100">100.-</option>
<option value="200">200.-</option>
<option value="300">300.-</option>
<option value="400">400.-</option>
<option value="500">500.-</option>
<option value="600“>600.-</option>
</select>
Code jquery
<script>
//here the code
$( document ).ready(function() {
$("#inputId").keypress(function(e)
{
if(e.which == 13) //When you press enter key one select is hide an the other is show
{
var aux = parseInt($(this).val());
if( aux >= 1999)
{
$("#select2").show();
$("#select1").hide();
}
else
{
$("#select1").show();
$("#select2").hide();
}
}
});
});
<script>

how to modify the dropdown text onchange event and onclick when the select box expands should have original value

Here is the dropdown i have, if i select 2.0 then the text should be changed to "Android 2.0", I can display the text using the value. But i need to know how to reset the value back to 2.0 when onclick ( ie on expanding the dropdown). This does not work in IE browsers.
<div id="select_id">
<select name="androidSelect" >
<option value="">Select Option</option>
<option value="Android">Android</option>
<option value="Android 2.0">2.0</option>
<option value="Android 3.0">3.0</option>
<option value="IPhone">IPhone</option>
<option value=" IPhone 2.0">2.0</option>
<option value=" IPhone 3.0">3.0</option>
<option value=" IPhone 4.0">4.0</option>
</select>
</div>

Store the name as a data attribute along with the value so you can switch back and forth between them:
<option value="Android 2.0" data-name="2.0">2.0</option>

[updated]
here you go
<div id="select_id">
<select name="androidSelect" >
<option value="Select Option" orig="Select Option">Select Option</option>
<optgroup label="Android"></optgroup>
<option value="Android 2.0" orig="2.0">2.0</option>
<option value="Android 3.0" orig="3.0">3.0</option>
<optgroup label="IPhone"></optgroup>
<option value=" IPhone 2.0" orig="2.0">2.0</option>
<option value=" IPhone 3.0" orig="3.0">3.0</option>
<option value=" IPhone 4.0" orig="4.0">4.0</option>
</select>
</div>
js:
$('[name="androidSelect"]').change(function(){
var i = $(this)[0].selectedIndex ;
console.log(i);
var x = $(this).val();
$(this).children('option').each(function(){
$(this).html($(this).attr('orig'));
});
$(this).children('option:eq('+i+')').html(x);
console.log($(this).children(':eq('+i+')'));
});
DEMO
[update] :
js:
$('[name="androidSelect"]').change(function(){
var i = $(this)[0].selectedIndex ;
console.log(i);
var x = $(this).val();
$(this).children('option').each(function(){
$(this).html($(this).attr('orig'));
});
$(this).children('option:eq('+i+')').html(x);
console.log($(this).children(':eq('+i+')'));
}).mousedown(function(){
$(this).children('option').each(function(){
$(this).html($(this).attr('orig'));
});
});
DEMO
This still can be optimized ..