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>

Get different Checkbox options for Dropdown selections

The page consists of 2 dropdowns and one checkbox.
The checkbox options in Q03 should depend according to the user selections in Q01 and Q02.
As an instance, if the user selects "shower" in the Q01 and "Burke" as the design in the Q02.
In that case, Q03 should be a single specific checkbox value.
Code
<html>
A) What are you building?
<br />
<select id="build">
<option value="Change">Change Rooms</option>
<option id="showers" value="showers ">showers </option>
<option id="Toilets " value="Toilets ">Toilets</option>
<option value="All">All</option>
</select>
<br />
B) Choose your design:
<br />
<select id="design">
<option hidden>Choose the Design</option>
<option id="Burke" value="Burke">The Burke</option>
<option value="Burke">The Sturt</option>
<option value="Wentworth">The Wentworth</option>
</select>
<br/>
C) Choose your material
<div id="append_checkbox">
</div>
</html>
<script>
jQuery(function() {
jQuery('#build').on('change', function() {
var slct = jQuery(this).prop("selectedIndex");
var amount = jQuery('#build').val();
//alert(amount);
if(slct == 1 && amount=='showers')
{
$("#append_checkbox").html('<input type="checkbox" name="designs[]" value="13mm Compact Laminate only"/>13mm Compact Laminate only');
}
else if (slct == 2 && amount=='showers')
{
$("#append_checkbox").html('<input type="checkbox" name="designs[]" value="13mm Compact Laminate only"/>James Hardie Fibre Cement only');
}
});
});
</script>
Even there are no console errors when it runs via the browser the expected result won't be shown.
It is expected to get different checkboxes in those 2 instances.

You have manythings going wrong here,
value="showers " should be value="showers" (without space)
You should not use index as the the check
Take a look at this code, I have added one condition you can add other as per your requirement.
$('#build,#design').on('change', function() {
var amount = $('#build').val();
var designVal = $('#design').val();
//alert(amount);
if (amount == 'showers' && designVal == 'Burke') {
$("#append_checkbox").html('<input type="checkbox" name="designs[]" value="13mm Compact Laminate only"/>13mm Compact Laminate only');
}
//your other conditions
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
A) What are you building?
<br />
<select id="build">
<option value="Change">Change Rooms</option>
<option id="showers" value="showers">showers </option>
<option id="Toilets " value="Toilets">Toilets</option>
<option value="All">All</option>
</select>
<br />
B) Choose your design:
<br />
<select id="design">
<option hidden>Choose the Design</option>
<option id="Burke" value="Burke">The Burke</option>
<option value="Burke">The Sturt</option>
<option value="Wentworth">The Wentworth</option>
</select>
<br/>
C) Choose your material
<div id="append_checkbox">
</div>

show the image with specific named using javascript

I have some picture in folder "../../images"
I give the name of picture with example
101_2018_1_1.jpg
101_2018_1_2.jpg
101_2018_1_3.jpg
101 is on var1
2018 is on id year
and 1 is on var3
and the last is auto increment
how can I call all the images with specific named based on combo box I chose with javascript and show the image on my page?
here the example of my form
<form>
<select name="var1" id="var1" >
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="<?php echo date('Y'); ?>">
<select name="var3" id="var3" >
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<button type="submit" name="search">search</button>
</form>

Using jQuery you can do something like:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
var URL = "www.example.com/image/";
//Get the values of form element
var var1 = $("#var1").val();
var year = $("#year").val();
var var3 = $("#var3").val();
//Check Up to 10 increments
for (i = 1; i <= 10; i++) {
var img = URL + var1 + "_" + year + "_" + var3 + "_" + i + ".jpg";
getImage(img);
}
return false;
});
});
/*
Check if image exist and add it.
If not, just console
*/
function getImage(image_url) {
$.get(image_url)
.done(function() {
// Image does exist - append on #image-container container
$("#image-container").append('<img src="' + image_url + '">');
}).fail(function() {
// Image doesn't exist - do nothing.
console.log(image_url + " does not exist.");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select name="var1" id="var1">
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="2018">
<select name="var3" id="var3">
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<div id="image-container"> </div>
<button type="submit" name="search">search</button>
</form>

If I understand correctly, you would do something like:
var imgUrl, counter = 3;
document.getElementById('search').addEventListener('click', function() {
imgUrl = "../../" + document.getElementById('var1').value + "_" + document.getElementById('year').value + "_" + document.getElementById('var3').value + "_";
alert(imgUrl);
for (var i = 0; i < counter; i++) {
var img = document.createElement("IMG");
var url = imgUrl + i.toString() + ".jpg"
//img.setAttribute('src', );
alert(url);
}
});
<form>
<select name="var1" id="var1">
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="<?php echo date('Y'); ?>">
<select name="var3" id="var3">
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<input type="submit" name="search" id='search'>
</form>
That would get you the image url, set the src attribute to that url, then append it to the body.

Protractor function error generating random option Selectui

<tr class="form-row form-row-odd form-row-err form-cols-2 form_element_company_id">
<th>Company
<span class="required">*</span>
</th>
<td>
<select name="company_id" class="selectmenu input-inf select2-initialized select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<option value="">— None —</option>
<option value="1" class="sub-option-0 ">Option 1</option>
<option value="14" class="sub-option-0 ">Option 2</option>
<option value="45" class="sub-option-1 " data-parent-name="Option 2="14">Option 2-1</option>
<option value="46" class="sub-option-1 " data-parent-name="Option 2" data-parent-id="14">Option 2-2</option>
<option value="47" class="sub-option-1 " data-parent-name="Option 2" data-parent-id="14">Option 2-3</option>
<option value="29" class="sub-option-0 ">Option 3</option>
<option value="30" class="sub-option-0 ">Option 4</option>
<option value="31" class="sub-option-0 ">Option 5</option>
</select>
</td>
</tr>
I'm trying to create a function that will automaticaly pick an option from the select2 name="company_id" :
So far I have tried :
function setUserCompany(selector){
var companyField = selector;
if (companyField.length == 0) {
return;
}
var options = companyField.find('option')
if (options.length == 0) {
return;
}
var randomIdx = Math.floor((Math.random() * selector.length)+1);
var randomValue = $(options.get(randomIdx)).attr('value');
companyField.select2().val(randomValue).trigger('change');
}
^ doesn't seem to work properly aswell.

I think you want to get the random value or click on random option. You almost done just missed on getting the select box by css name. Try this,
var companySelectBox = browser.element(by.css('[name="company_id"]'));
companySelectBox.all(by.tagName('option')).then(function(options){
//random id between option length
var randomId = Math.floor((Math.random() * options.length)+1);
console.log('random id ' + randomId);
options[randomId].getText().then(function(text){
console.log('random option text ' + text);
});
//click on random option
options[randomId].click();
//TODO: whatever other task similar
});

Add data into a Select

I have this select; to select countries and add to a new select multiple with a limit of 5 countries, but I just want to add 1 country by select or more countries if i do a multiple select.
My mistake is in my function addC(), when I want to add more than 1 country in my select, it add the several countries in 1 option tag like this:
<option>South KoreaUSAJapan</option>
What I can modify to display the following way if i do a multiple select?:
<option>South Korea</option>
<option>USA</option>
<option>Japan</option>
My code:http://jsbin.com/osesem/4/edit
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected").text());
$("#addCountry").append("<option>" + newC + "</option>");
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<label for="provincia2"><b>¿Country?</b></label><br>
<span>
<select multiple="multiple" size="5" id="countries">
<option value="1">South Korea</option>
<option value="2">USA</option>
<option value="2">Japan</option>
<option value="3">Italy</option>
<option value="4">Spain</option>
<option value="5">Mexico</option>
<option value="6">England</option>
<option value="7">Phillipins</option>
<option value="8">Portugal</option>
<option value="9">France</option>
<option value="10">Germany</option>
<option value="11">Hong Kong</option>
<option value="12">New Zeland</option>
<option value="13">Ireland</option>
<option value="14">Panama</option>
<option value="15">Norwey</option>
<option value="16">Sweeden</option>
<option value="17">India</option>
<option value="18">Morroco</option>
<option value="19">Russia</option>
<option value="20">China</option>
</select>
</span>
<div class="addremover">
<input class="add" type="button" onclick="addC()" value="Addd »" />
<br/>
</div>
<span>
<select id="addCountry" multiple="multiple" size="5">
</select>
</span>

use each function to loop through the text and append it..
try this
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected"));
newC.each(function(){
$("#addCountry").append("<option>" + $(this).text() + "</option>");
})
}
}
JSbin here

Or just clone the selected <option>'s
function addC() {
if ($('#countries option:selected').size() < 5)
{
$('#addCountry').append($('#countries option:selected').clone());
}
else
{
alert('you can only select 5');
}
}