So i have a 'total' field at the bottom of this column.
Above this field are checkboxes, when ticked, the 'total' should update by adding the price of that checkbox, and when unticked, the price should be removed.
So something similar to http://www.tepilo.com/#packages-anc
the below code updates the price when checkbox is clicked
it does nothing when unclicked
when clicked again, it adds to the new current price
$('.col-2 input[type="checkbox"]').on('click', function() {
var attribute_name = $(this).val();
var attribute_price = settings.wsapo_custom[0][attribute_name].price;
var current_price_total = $(".col-2 #update-price").text();
var new_price = parseInt(current_price_total) + parseInt(attribute_price);
console.log(new_price);
$(".col-2 #update-price").text(new_price);
});
thanks in advance
Using the onchange or change function in jquery will suffice here. Check if the checkbox is checked and then just change the data accordingly.
Demo on JSFIDDLE: http://jsfiddle.net/lrojas94/t9d04oeb/
Code:
$('input[type="checkbox"]').change(function(){
var actual = parseInt($('p').text());
if($(this).is(':checked'))
actual+= 100;
else
actual-=100;
$('p').text(actual);
});
And feel free to read the docs about this function: http://api.jquery.com/change/
Related
I'm having a couple of issues with displaying an updated price for a product on the product page itself using WooCommerce.
Basically we have a custom builder page that allows the user to select different options (or variations in this case) and then when they add it to their cart the correct price is calculated. That all works fine.
The problem I'm having is that we want to display the price on screen as they change their options around.
So, let's say I've picked a Blue Item that is 6 meters long, the price should be £100, but if I choose the Red Item that is 1 meter long, the price is £10.
I'm guessing a bit of jQuery or something could dynamically update the page, but I'm at a loss to know where or how I do this.
It would need to fire a function I'm assuming on change of a form select box.
Currently, I'm displaying the price using this...
$product = new WC_Product(538);
echo esc_attr($product->get_price());
I think that's wrong anyway as that's the base price rather than the variation price, but either way, I still need to find a way to update the price on the screen WITHOUT refreshing.
Here is one of my SELECT form items, though there are quite a few of these on the page.
<select id="frame-depth" class="kad-select" name="attribute_frame-depth" data-attribute_name="attribute_frame-depth"" data-show_option_none="yes">
<option value="Standard depth" selected="selected">Standard depth</option>
<option value="Extra Deep" >Extra Deep</option>
</select>
Any help would be greatly appreciated!
If I need to update the question with any more detail, I can do so. I just thought I'd keep it simple!
Simon
I am doing it roughly like this in JS, making use of the found_variation event:
var currentVariation = null;
function calcTotalPrice(variation = null) {
if (variation) {
currentVariation = variation;
}
if (!currentVariation) {
var $price = $('#product-price');
if ($price && $price.length) {
currentVariation = {
display_price: $price.val()
};
}
}
if (currentVariation) {
var qty = $('#quantity').val();
var total = currentVariation.display_price * qty;
$('#total-price-result').html('€ ' + number_format(total, 2, ',', ' '));
}
}
$('form.variations_form').on('found_variation', function(e, variation) {
calcTotalPrice(variation);
});
$('#quantity').on('input change', function() {
calcTotalPrice();
});
$('form.variations_form').on('hide_variation', function() {
$('#total-price-div').hide();
});
$('form.variations_form').on('show_variation', function() {
$('#total-price-div').show();
});
And on the HTML/template side I override woocommerce/single-product/add-to-cart/variable.php and edit the pricing part to be similar to this:
<div id="total-price-div">
<h4><label>{{ __("Total", "my-text-domain") }}</label></h4>
<div class="value">
<span class="total-price"><span id="total-price-result" class="total-price"></span></span>
</div>
</div>
I hope this can help someone?
Need the ajax code for changing the button when a value is inserted to database and it need to remain as changed until the value is removed from database
$(document).ready(function() {
$('.btn_add_remove_cart').click(function(e){
e.preventDefault();
var self = $(this);
if (self.hasClass('add-cart')){
// if it's add cart button, replace add-cart class by remove-cart and change label
self.removeClass('add-cart').addClass('remove-cart').text('Remove');
} else {
// it's remove cart button, do the inverse
self.removeClass('remove-cart').addClass('add-cart').text('Add to Cart');
}
});
});
I am setting up a shop for a photographer and have his different product options setup as variations. I want to allow the user to successfully add the product to cart without having to select all available variations.
here is an example of attribute/terms I have setup as variations:
so the customer should be allowed to select one option (variation) and add to cart. Currently it fails and says I need to select a variation from each attribute
So my question is simple: How do I make it where all variation selections are not required?
My Approach: there are a few things I think may work. First I think there is probably an action or hook I can plug in to to make this not required. OR I could possibly use jquery to modify the add to cart url so when a user clicks the add to cart button that the product id and variation id get passed to the url which I imagine would add that variation only to cart.
Any thoughts?
UPDATE:
I have attempted to manage this through some jQuery. I have it where it will only allow one input to be selected and a class is added or removed depending on selection. When user hits the add to cart button it will get all .not-active input name attributes into an array. I know the following url will work: http://my-url.com/?add-to-cart=976&variation_id=1186&attribute_pa_downloads=print-300dpi&attribute_pa_high-definition-aluminum=0&attribute_pa_photo-tiles=0&attribute_pa_canvas-gallery-wraps=0&attribute_pa_custom-prints=0 so I needed a way to make this dynamic. Currently Im stuck on how to build my url to include all the POST parameters so it passes validation and will add to cart. With that said, given the code below how can I build out my url so it redirects with all parameters and adds to cart (building out the url is the only thing I dont think I have working.)
var selectedName;
var selectedValue;
//Shop only allow one radio to be checked
$('input.selectOne').on('change', function(){
$('input.selectOne').not(this).prop('checked', false).removeClass('active').addClass('not-active');
$(this).addClass('active').removeClass('not-active');
selectedName = $(this).attr('name');
selectedValue = $(this).val();
});
$('.single_add_to_cart_button').click(function(e){
e.preventDefault();
console.log(selectedName);
console.log(selectedValue);
//Works :http://my-url.com/?add-to-cart=976&variation_id=1186&attribute_pa_downloads=print-300dpi&attribute_pa_high-definition-aluminum=0&attribute_pa_photo-tiles=0&attribute_pa_canvas-gallery-wraps=0&attribute_pa_custom-prints=0
var productID = $('input[name="product_id"]').val();
var variationID = $('input[name="variation_id"]').val();
var location = window.location.href; //Get URL to redirect to cart
var emptyOptions = [];
$('.not-active').map(function() {
return this.name;
}).each(function(i, str) {
if (!~$.inArray(str, emptyOptions) && str != selectedName) emptyOptions.push(str: '0&');
});
console.log(emptyOptions);
alert(location + 'add-to-cart=' + productID + '&variation_id=' + variationID + '&' + $.each(emptyOptions));
});
JSFiddle
For anyone else looking I ended up solving this issue with jQuery and the Woocommerce Radio Buttons Plugin.
In my local JS file I added this and it will handle allow for one selection and then create the add to cart url.
var selectedName;
var selectedValue;
//Shop only allow one radio to be checked
$('input.selectOne').on('change', function(){
$('input.selectOne').not(this).prop('checked', false).removeClass('active').addClass('not-active');
$(this).addClass('active').removeClass('not-active');
selectedName = $(this).attr('name');
selectedValue = $(this).val();
});
$('.single_add_to_cart_button').click(function(e){
e.preventDefault();
//console.log(selectedName);
//console.log(selectedValue);
//Works :http://my-url.com/?add-to-cart=976&variation_id=1186&attribute_pa_downloads=print-300dpi&attribute_pa_high-definition-aluminum=0&attribute_pa_photo-tiles=0&attribute_pa_canvas-gallery-wraps=0&attribute_pa_custom-prints=0
var productID = $('input[name="product_id"]').val();
var variationID = $('input[name="variation_id"]').val();
var location = window.location.href; //Get URL to redirect to cart
var emptyOptions = {};
$('.not-active').map(function() {
return this.name;
}).each(function(i, str) {
if (!~$.inArray(str, emptyOptions) && str != selectedName) emptyOptions[str] = 0;
});
//console.log(emptyOptions);
window.location = location + '?add-to-cart=' + productID + '&variation_id=' + variationID + '&' + selectedName + '=' + selectedValue + '&' + $.param(emptyOptions);
});
Here is what I'm doing.
I have a set of divs. Each set of divs can contain a section header and a list of items. Each item has a price associated with it. So item 1 under section Demolition has a price of 150.00. Item 2 under section Demolition has a price of 200.00. Next to each item is an input field that the user can type in a numeric value. That value is then multiplied by the item price. So next to item 1(150.00) is a field where I enter 2. In the next div I then display the total. So 150.00 x 2 = 300.00.
I can do this for each item under the section. I then sum the entire items into one global price next to the sections.
Here is a sample of what I'm doing:
$(document).ready(function() {
$(".demolition_num").each(function() {
$(this).keyup(function(){
calculateDemSum();
});
});
});
function calculateDemSum() {
var sum = 0;
$(".demolition_num").each(function(){
if(!isNaN(this.value) && this.value.lenth != 0){
var unitCost = $(".unit_cost1").text();
var _parent = $(this).parent();
var total = _parent.prev().html();
sum += parseFloat(this.value * total);
var subtotal = this.value * total;
$(_parent).next().html(this.value * total);
}
else if (this.value.length !=0){
}
});
$(".cost1").text(sum.toFixed(2));
$("#cost1").val(sum.toFixed(2));
}
You can view all the code here: http://jsfiddle.net/pmetzger/Xeu2T/3/
As you can see in the jquery that right now I have to call each section independently
of the others since I do not want to calculate all of the fields, just the one I'm modifying.
So the question is, can I avoid having to add each sections input type id as the key up to trigger the calculations and make sure the totals get placed correctly?
Note: This code could be duplicated, but the data associated is going to be different. So on the next clients list it might not be Demolition, but Demo and so forth.
Any help will be greatly appreciated.
First of all a couple of pointers:
You don't need to bind events within an each() loop, simply
binding it to a standard selector will bind to all elements that fit
that selector.
You also have multiple <tr> elements with the same id.
You don't need a size attribute on hidden tags
New working fiddle here and the code:
$(document).ready(function()
{
// Bind the event
$("#calc").on("keyup", "input[type='text']", function()
{
calculateSum(this);
});
});
function calculateSum(element)
{
var sum = 0;
var $this = $(element);
var targetClass = $this.attr("class");
// Process each element with the same class
$("." + targetClass).each(function()
{
var thisVal = $(this).val();
// Count invalid entries as 0
if(isNaN(thisVal) || thisVal.length === 0)
{
thisVal = 0;
}
else
{
thisVal = parseFloat(thisVal);
}
// Get the unit cost and calculate sub-total
var unitCost = parseFloat($(this).parent().prev("td.unit_cost").text());
var subTotal = thisVal * unitCost;
sum += subTotal;
$(this).parent().next("td").text(subTotal);
});
var $item = $this.closest("tr").prevAll(".item").first();
$item.find("input.section_cost").val(sum.toFixed(2));
$item.find("td.section_cost").text(sum.toFixed(2));
}
Note that I have modified your HTML slightly - I changed the multiple <tr id="item"> to use classes, I moved where these rows were to better target your subsection totals, I added classes to the subsection totals (both hidden inputs and displayed values), I added a class to your unit value fields and I added an id to the table.
I am writing a small invoice application in Yii. I have the database for the model item. The item database is something like this
+++++++++++++++++
| InvoiceItems |
+++++++++++++++++
+ id +
+ name +
+ description +
+ unit_cost +
+ quantity +
+ tax +
+ total +
+++++++++++++++++
Now, in item model I have made a dropdown list where I am fetching all the item name with its unit_cost, quantity, tax etc in Ajax. In order to do the total, I have the business logic as:
unit_cost will be multiplied by quantity
Tax will then be added to the total.
The total should finally pop up in the total field in the _form.php file.
For the calculation, I have written this jQuery script:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#InvoiceItems_unit_cost, #InvoiceItems_quantity, #InvoiceItems_tax").on('keyup',function(event){
var subtotal = jQuery("#InvoiceItems_quantity").val() * jQuery("#InvoiceItems_unit_cost").val();
var total = subtotal + (subtotal * jQuery("#InvoiceItems_tax").val() / 100);
jQuery("#InvoiceItems_total").val(total);
});
});
</script>
This is working fine when I am manually inserting the values but it's not working when the values are coming from the database. I am totally stuck.
UPDATE
When I am trying to see the value after fetching from the database through ajax in console tab of firefox just like console.log("#InvoiceItems_quantity").val(), it is showing an empty string.
Ajax code to fetch data from the database in form of json
<?php echo $form->dropDownList($customers,'customer_name',CMap::mergeArray(CHtml::listData(Customers::model()->findAll(), 'customer_name', 'customer_name'
),
array(
'empty'=>array('Select'=>'- - Choose One - -'),
'id'=>'Customers_name',
'ajax'=> array(
'type'=>'GET',
'id'=>'abc',
'url'=>$this->createUrl('Invoices/customerdetails'),// action that will generate the data
'data'=>'js:"customer_name="+$(this).val()',// this is the data that we are sending to the action in the controller
'dataType'=>'json',// type of data we expect back from the server
'success'=>'js:updateFieldsCustomers',// a javascript function that will execute when the request completes
'beforeSend'=>'js:function(){
if($("#Customers_name").val() == "create_customer_link") {
addCustomers();
$("#dialogCustomers").dialog("open");
return false;
}
}',
),
'options'=>array(
'create_customer_link' => array('class'=>'create-link'),
)
)
);?>
<?php
Yii::app()->clientScript->registerScript('update','
function updateFieldsCustomers(data, textStatus, jqXHR){
// select each input field by id, and update its value
$("#InvoiceItems_unit_cost").val(data.unit_cost);
$("#InvoiceItems_quantity").val(data.quantity);
$("#InvoiceItems_discount").val(data.discount);
// similarly update the fields for the other inputs
}
');
?>
Recent Update
When I tried for console.log("#InvoiceItems_quantity").val() I saw that it is showing the actual value of that field after change. Means when one value is selected it is showing the value of previous entered value in console panel. I think all this is working as I have used on change function but when I am using .select its not working at all.Not any value is showing in console panel.
I got the solution for this question. It should be like this
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#Product_name").ajaxComplete(function(event,request,settings){
var subtotal = jQuery("#InvoiceItems_quantity").val() * jQuery("#InvoiceItems_unit_cost").val();
var total = subtotal + (subtotal * jQuery("#InvoiceItems_tax").val() / 100);
jQuery("#InvoiceItems_total").val(total);
});
});
</script>
Try this
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#Items_unit_cost, #Items_quantity, #Items_discount").on('keyup',calculate_total);
function calculate_total(){
var subtotal = jQuery("#Items_quantity").val() * jQuery("#Items_unit_cost").val();
var total = subtotal + (subtotal * jQuery("#Items_discount").val() / 100);
jQuery("#Items_total").val(total);
}
calculate_total();
});
</script>