Product List

• Jon D

• July 15, 2015 at 8:29 am

Hey Guys,

This is my problem. I have a repeater field called “Product Range” that contains two text sub fields, one called “product quantity” and the other called “product price”.

The goal is to output the values from “product quantity” as select options, and when I click one it display the “product price” for that quantity.

Both sub fields are text fields so the information can change depending on whats needed.

I’ve tried a few of the tutorials on the site but I can’t seem to get any to work.

I’ve have managed to out put the “product quantity” sub field as options in a select drop down list but, can’t seem to output information in “product price” when I clikc on a selected quantity.

Any help would be really appreciated.

Thanks Jon.

• mediawerk

• July 16, 2015 at 4:33 pm

just to understand correct:

you talk about frontend output?

goal is: to have a select-box that contains product quantity, and if you select one, then you wish that at a different place the value of price is displayed?

i assume for that you need javascript.

try something like that

//html build with your repeater values (get quantity and price)
<select id="quantity" name="quantity" required>
    <option name="quantity" value="1" data-price="5 Bucks">1</option>
    <option name="quantity" value="5" data-price="25 Bucks">5</option>
    <option name="quantity" value="10" data-price="50 Bucks">10</option>
    <option name="quantity" value="$quantity" data-price="$price">$quantity</option>
</select>
<span id="price-text"></span>

----

//javascript (jQuery needed)
<script type="text/javascript">
$(document).ready(function () {
$("#quantity").change(function() {
     $('#price-text').text($('option:selected').attr('price-example'));
}).change();
});
</script>

• Jon D

• July 16, 2015 at 8:54 pm

Ok this is now sovled 🙂 and works well for me it does just a little playing around. Mediawerk thanks for help, I had a feeling that I would have to use js in so form. Little change to the code you provided but really help me a lot, thank you!

My code is below on html output I used and the JS.

Outputs the html

<?php 
$rows = get_field('product_range');
if($rows){
	echo '<select id="quantity" name="quantity" required>';
		foreach($rows as $row){
			echo '<option name="' . $row['product_quantity'] . '" value="' . $row['product_quantity'] . '" data-price="' . $row['product_price'] . '">' . $row['product_quantity'] . '</option>';
		}
	echo '</select>';
	echo '<span class="price-text"></span>';
}	
?>

JS used

$(document).ready(function(){
	$("#quantity").change(function() {
		var price = $("#quantity option:selected").data("price");
	jQuery(".price-text").text(price);
	});
});