I've written a WordPress plugin that displays a price quote based on what options are chosen in the settings and then what the user chooses with HTML <select>
dropdown menus. Here's the HTML (with a little PHP as well). Note that the function at the top is just so I can use WordPress's get_option
and use those values in my JS:
function dataToJS () {
global $get_option_array;
wp_enqueue_script( 'added_jquery', plugin_dir_url( __FILE__ ) . 'js/added_jquery.js', array( 'jquery' ), '1.0', true );
wp_localize_script( 'added_jquery', 'script_vars', array (
'bedrooms_num' => __($get_option_array['bedroom']),
'family_rooms_num' => __($get_option_array['family_room']),
'living_rooms_num' => __($get_option_array['living_room']),
'offices_num' => __($get_option_array['office'])
) );
}
add_filter( 'wp_enqueue_scripts', 'dataToJS');
<form name="quote" id="price-quote" action="/#" method="post">
if (!empty($get_option_array)) {
if ($get_option_array['bedroom'] != 0) {
?><label class="control-label" for="bedrooms">Bedrooms</label><br>
<select class="form-control-1" id="bedrooms" name ="bedrooms_selection">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<?php
}
if ($get_option_array['family_room'] != 0) {
?><br><label class="control-label" for="family_rooms">Family Rooms</label><br>
<select class="form-control-1" id="family_rooms" name="family_room_selection">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<?php
}
if ($get_option_array['living_room'] != 0) {
?><br><label class="control-label" for="living_rooms">Living Rooms</label><br>
<select class="form-control-1" id="living_rooms" name="living_room_selection">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<?php
}
<div class="total-price">
<h2>Total Price: <span id="output1" name="total_price"></span></h2>
</div>
</form>
It works, and the JavaScript below does display the right price, but I'm realizing I need a better way to display what price is selected. I want to be able to display options based on if the admin has added a value for each service. For example, if the admin wants to show 'bedrooms' and 'family rooms' but not 'living rooms', then only the first two would show. I've set this up, but here's my JavaScript that is quickly becoming a mess as you can see:
var total;
var totalPrice;
var bedrooms;
var familyRooms;
var livingRooms;
//price input from admin screen
var bedroom_price = script_vars.bedrooms_num;
var family_rooms_price = script_vars.family_rooms_num;
var living_rooms_price = script_vars.living_rooms_num;
if (bedroom_price != 0 && family_rooms_price == 0){
$("#bedrooms").change(function() {
bedrooms = $("#bedrooms").val();
total = (bedrooms * bedroom_price);
totalPrice = "$" + total;
$("#output1").text(totalPrice).fadeIn();
});
}
if (bedroom_price != 0 && family_rooms_price != 0){
$("#bedrooms, #family_rooms").change(function() {
bedrooms = $("#bedrooms").val();
familyRooms = $("#family_rooms").val();
total = (bedrooms * bedroom_price);
total += (familyRooms * family_rooms_price);
totalPrice = "$" + total;
$("#output1").text(totalPrice).fadeIn();
});
}
if (bedroom_price == 0 && family_rooms_price != 0){
$("#family_rooms").change(function() {
familyRooms = $("#family_rooms").val();
total = (familyRooms * family_rooms_price);
totalPrice = "$" + total;
$("#output1").text(totalPrice).fadeIn();
});
}
I have about 20 options total that the user will be able to select, so these if
statements are going to be ridiculous once there are more than 3 select lists.
I'm a designer transitioning to development so this is my first real project. So if you see some other major issues, I'd really appreciate the feedback.