Mixing
Read TextContent of Text changed via other JS script
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am currently trying to calculate and show an automatic price when quantity & variations of a product are changed. It is all working pretty well, I am though having trouble reading the price that changes ( depending on variation) . I need to use that value to calculate some other stuff.
The price updates automatically through a third party script, so my idea was to read out the value and then reuse it for my purposes. Unfortunately, the value I read is never the update one, but the previous price. I hope I was clear enough. Here an example:
Everytime I change the color I have a different price displaying ( via ajax) how can I directly access the changed price value and use it?
Here some of the code:
var amount = document.querySelector('.single_variation_wrap .woocommerce-
variation-price .woocommerce-Price-amount')
var price = amount.textContent.split("€")
var changeComma = price[0].replace(/,/g, ".");
var convertedPrice = parseFloat(changeComma)
var totalPrice = convertedPrice;
var el = document.querySelector('[name="quantity"]');
var flavor = document.getElementById('flavors');
var basePackSize = 6;
function changeVariation (){
if(multiple && multiple.checked === true){
price = totalPrice * 0.9
CalculateQuantity(basePackSize,price)
}else{
CalculateQuantity(basePackSize,totalPrice)
}}
function CalculateQuantity(basePackSize, price) {
var total = price * el.value
};
el.addEventListener("change", function(){
changeVariation()
})
flavor.addEventListener('change', function(e) {
changeVariation()
})
javascript
asked Jan 3 at 13:28
MichaelMichael
537
add a comment |
I am currently trying to calculate and show an automatic price when quantity & variations of a product are changed. It is all working pretty well, I am though having trouble reading the price that changes ( depending on variation) . I need to use that value to calculate some other stuff.
The price updates automatically through a third party script, so my idea was to read out the value and then reuse it for my purposes. Unfortunately, the value I read is never the update one, but the previous price. I hope I was clear enough. Here an example:
Everytime I change the color I have a different price displaying ( via ajax) how can I directly access the changed price value and use it?
Here some of the code:
var amount = document.querySelector('.single_variation_wrap .woocommerce-
variation-price .woocommerce-Price-amount')
var price = amount.textContent.split("€")
var changeComma = price[0].replace(/,/g, ".");
var convertedPrice = parseFloat(changeComma)
var totalPrice = convertedPrice;
var el = document.querySelector('[name="quantity"]');
var flavor = document.getElementById('flavors');
var basePackSize = 6;
function changeVariation (){
if(multiple && multiple.checked === true){
price = totalPrice * 0.9
CalculateQuantity(basePackSize,price)
}else{
CalculateQuantity(basePackSize,totalPrice)
}}
function CalculateQuantity(basePackSize, price) {
var total = price * el.value
};
el.addEventListener("change", function(){
changeVariation()
})
flavor.addEventListener('change', function(e) {
changeVariation()
})
javascript
asked Jan 3 at 13:28
MichaelMichael
537
2
Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a Minimal, Complete, and Verifiable example of your attempt, noting input and expected output.
– mplungjan
Jan 3 at 13:32
1
You likely need a timeout or add the reading of the price in the success of the Ajax or on add to cart
– mplungjan
Jan 3 at 13:33
You can look into a Mutation Observer. You can observe and run a function when an elements text changes. This might be a good example
– saucel
Jan 3 at 13:46
Thanks! I did research but I dont seem to find a nice solution for this issue. I will post my code example
– Michael
Jan 3 at 14:25
In your ajax code when you retrieve the new data you need to call some callback function to do your calculations, changeVariation() in your case for example. If you bind it to a change event like you did now, it will run before the ajax call is finished. Assuming your ajax call is asynchronous which they are by default.
– Jonas B
Jan 3 at 14:44
add a comment |
I am currently trying to calculate and show an automatic price when quantity & variations of a product are changed. It is all working pretty well, I am though having trouble reading the price that changes ( depending on variation) . I need to use that value to calculate some other stuff.
The price updates automatically through a third party script, so my idea was to read out the value and then reuse it for my purposes. Unfortunately, the value I read is never the update one, but the previous price. I hope I was clear enough. Here an example:
Everytime I change the color I have a different price displaying ( via ajax) how can I directly access the changed price value and use it?
Here some of the code:
var amount = document.querySelector('.single_variation_wrap .woocommerce-
variation-price .woocommerce-Price-amount')
var price = amount.textContent.split("€")
var changeComma = price[0].replace(/,/g, ".");
var convertedPrice = parseFloat(changeComma)
var totalPrice = convertedPrice;
var el = document.querySelector('[name="quantity"]');
var flavor = document.getElementById('flavors');
var basePackSize = 6;
function changeVariation (){
if(multiple && multiple.checked === true){
price = totalPrice * 0.9
CalculateQuantity(basePackSize,price)
}else{
CalculateQuantity(basePackSize,totalPrice)
}}
function CalculateQuantity(basePackSize, price) {
var total = price * el.value
};
el.addEventListener("change", function(){
changeVariation()
})
flavor.addEventListener('change', function(e) {
changeVariation()
})
javascript
asked Jan 3 at 13:28
MichaelMichael
537
I am currently trying to calculate and show an automatic price when quantity & variations of a product are changed. It is all working pretty well, I am though having trouble reading the price that changes ( depending on variation) . I need to use that value to calculate some other stuff.
The price updates automatically through a third party script, so my idea was to read out the value and then reuse it for my purposes. Unfortunately, the value I read is never the update one, but the previous price. I hope I was clear enough. Here an example:
Everytime I change the color I have a different price displaying ( via ajax) how can I directly access the changed price value and use it?
Here some of the code:
var amount = document.querySelector('.single_variation_wrap .woocommerce-
variation-price .woocommerce-Price-amount')
var price = amount.textContent.split("€")
var changeComma = price[0].replace(/,/g, ".");
var convertedPrice = parseFloat(changeComma)
var totalPrice = convertedPrice;
var el = document.querySelector('[name="quantity"]');
var flavor = document.getElementById('flavors');
var basePackSize = 6;
function changeVariation (){
if(multiple && multiple.checked === true){
price = totalPrice * 0.9
CalculateQuantity(basePackSize,price)
}else{
CalculateQuantity(basePackSize,totalPrice)
}}
function CalculateQuantity(basePackSize, price) {
var total = price * el.value
};
el.addEventListener("change", function(){
changeVariation()
})
flavor.addEventListener('change', function(e) {
changeVariation()
})
javascript
javascript
asked Jan 3 at 13:28
MichaelMichael
537
asked Jan 3 at 13:28
MichaelMichael
537
edited Jan 3 at 14:37
Michael
asked Jan 3 at 13:28
MichaelMichael
537
asked Jan 3 at 13:28
MichaelMichael
537
asked Jan 3 at 13:28
MichaelMichael
537
537
2
Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a Minimal, Complete, and Verifiable example of your attempt, noting input and expected output.
– mplungjan
Jan 3 at 13:32
1
You likely need a timeout or add the reading of the price in the success of the Ajax or on add to cart
– mplungjan
Jan 3 at 13:33
You can look into a Mutation Observer. You can observe and run a function when an elements text changes. This might be a good example
– saucel
Jan 3 at 13:46
Thanks! I did research but I dont seem to find a nice solution for this issue. I will post my code example
– Michael
Jan 3 at 14:25
In your ajax code when you retrieve the new data you need to call some callback function to do your calculations, changeVariation() in your case for example. If you bind it to a change event like you did now, it will run before the ajax call is finished. Assuming your ajax call is asynchronous which they are by default.
– Jonas B
Jan 3 at 14:44
add a comment |
2
Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a Minimal, Complete, and Verifiable example of your attempt, noting input and expected output.
– mplungjan
Jan 3 at 13:32
1
You likely need a timeout or add the reading of the price in the success of the Ajax or on add to cart
– mplungjan
Jan 3 at 13:33
You can look into a Mutation Observer. You can observe and run a function when an elements text changes. This might be a good example
– saucel
Jan 3 at 13:46
Thanks! I did research but I dont seem to find a nice solution for this issue. I will post my code example
– Michael
Jan 3 at 14:25
In your ajax code when you retrieve the new data you need to call some callback function to do your calculations, changeVariation() in your case for example. If you bind it to a change event like you did now, it will run before the ajax call is finished. Assuming your ajax call is asynchronous which they are by default.
– Jonas B
Jan 3 at 14:44
2
2
Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a Minimal, Complete, and Verifiable example of your attempt, noting input and expected output.
– mplungjan
Jan 3 at 13:32
Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a Minimal, Complete, and Verifiable example of your attempt, noting input and expected output.
– mplungjan
Jan 3 at 13:32
1
1
You likely need a timeout or add the reading of the price in the success of the Ajax or on add to cart
– mplungjan
Jan 3 at 13:33
You likely need a timeout or add the reading of the price in the success of the Ajax or on add to cart
– mplungjan
Jan 3 at 13:33
You can look into a Mutation Observer. You can observe and run a function when an elements text changes. This might be a good example
– saucel
Jan 3 at 13:46
You can look into a Mutation Observer. You can observe and run a function when an elements text changes. This might be a good example
– saucel
Jan 3 at 13:46
Thanks! I did research but I dont seem to find a nice solution for this issue. I will post my code example
– Michael
Jan 3 at 14:25
Thanks! I did research but I dont seem to find a nice solution for this issue. I will post my code example
– Michael
Jan 3 at 14:25
In your ajax code when you retrieve the new data you need to call some callback function to do your calculations, changeVariation() in your case for example. If you bind it to a change event like you did now, it will run before the ajax call is finished. Assuming your ajax call is asynchronous which they are by default.
– Jonas B
Jan 3 at 14:44
In your ajax code when you retrieve the new data you need to call some callback function to do your calculations, changeVariation() in your case for example. If you bind it to a change event like you did now, it will run before the ajax call is finished. Assuming your ajax call is asynchronous which they are by default.
– Jonas B
Jan 3 at 14:44
add a comment |
1 Answer
1
active
oldest
votes
I have similar works in the past. I guess you using Wordpress with Woocommerce plugin and another 3rd party plugin. The easier solution is by using significant delay by using setTimeout(). Just like suggested by some people in the comment. It is because your 3rd party plugin has some tasks in the process while your script gets the value before the 3rd party tasks are done. Even it felt like a lucky guess. And in some case, the 3rd party tasks process may longer than your timeout when your web is live.
However, in my previous project, I was using another approach. Another thing I can suggest to you is by finding their script which doing the process, copy it to your theme and modify it to match with what you need. In the same time, you should take it out from Wordpress hooks, then "re-hooks" with your modified script. I was using plugin named "Variation Master" for Woocommerce. So, my "re-hooks" script looks like this:
remove_action("wp_ajax_ced_vm_get_variation_gallery_for_single", 'ced_vm_get_variation_gallery_for_single');
remove_action("wp_ajax_nopriv_ced_vm_get_variation_gallery_for_single", 'ced_vm_get_variation_gallery_for_single');
add_action("wp_ajax_ced_vm_get_variation_gallery_for_single", 'dx_vm_get_variation_gallery_for_single');
add_action("wp_ajax_nopriv_ced_vm_get_variation_gallery_for_single", 'dx_vm_get_variation_gallery_for_single');
My Javascript modifications were more to gallery task instead price calculation like yours. So, the hooks you need to manage should be different.
answered Jan 4 at 2:51
BayuBayu
538514
thanks! I solved it with a timeout
– Michael
Jan 8 at 12:27
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54023245%2fread-textcontent-of-text-changed-via-other-js-script%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I have similar works in the past. I guess you using Wordpress with Woocommerce plugin and another 3rd party plugin. The easier solution is by using significant delay by using setTimeout(). Just like suggested by some people in the comment. It is because your 3rd party plugin has some tasks in the process while your script gets the value before the 3rd party tasks are done. Even it felt like a lucky guess. And in some case, the 3rd party tasks process may longer than your timeout when your web is live.
However, in my previous project, I was using another approach. Another thing I can suggest to you is by finding their script which doing the process, copy it to your theme and modify it to match with what you need. In the same time, you should take it out from Wordpress hooks, then "re-hooks" with your modified script. I was using plugin named "Variation Master" for Woocommerce. So, my "re-hooks" script looks like this:
remove_action("wp_ajax_ced_vm_get_variation_gallery_for_single", 'ced_vm_get_variation_gallery_for_single');
remove_action("wp_ajax_nopriv_ced_vm_get_variation_gallery_for_single", 'ced_vm_get_variation_gallery_for_single');
add_action("wp_ajax_ced_vm_get_variation_gallery_for_single", 'dx_vm_get_variation_gallery_for_single');
add_action("wp_ajax_nopriv_ced_vm_get_variation_gallery_for_single", 'dx_vm_get_variation_gallery_for_single');
My Javascript modifications were more to gallery task instead price calculation like yours. So, the hooks you need to manage should be different.
answered Jan 4 at 2:51
BayuBayu
538514
thanks! I solved it with a timeout
– Michael
Jan 8 at 12:27
add a comment |
I have similar works in the past. I guess you using Wordpress with Woocommerce plugin and another 3rd party plugin. The easier solution is by using significant delay by using setTimeout(). Just like suggested by some people in the comment. It is because your 3rd party plugin has some tasks in the process while your script gets the value before the 3rd party tasks are done. Even it felt like a lucky guess. And in some case, the 3rd party tasks process may longer than your timeout when your web is live.
However, in my previous project, I was using another approach. Another thing I can suggest to you is by finding their script which doing the process, copy it to your theme and modify it to match with what you need. In the same time, you should take it out from Wordpress hooks, then "re-hooks" with your modified script. I was using plugin named "Variation Master" for Woocommerce. So, my "re-hooks" script looks like this:
remove_action("wp_ajax_ced_vm_get_variation_gallery_for_single", 'ced_vm_get_variation_gallery_for_single');
remove_action("wp_ajax_nopriv_ced_vm_get_variation_gallery_for_single", 'ced_vm_get_variation_gallery_for_single');
add_action("wp_ajax_ced_vm_get_variation_gallery_for_single", 'dx_vm_get_variation_gallery_for_single');
add_action("wp_ajax_nopriv_ced_vm_get_variation_gallery_for_single", 'dx_vm_get_variation_gallery_for_single');
My Javascript modifications were more to gallery task instead price calculation like yours. So, the hooks you need to manage should be different.
answered Jan 4 at 2:51
BayuBayu
538514
thanks! I solved it with a timeout
– Michael
Jan 8 at 12:27
add a comment |
I have similar works in the past. I guess you using Wordpress with Woocommerce plugin and another 3rd party plugin. The easier solution is by using significant delay by using setTimeout(). Just like suggested by some people in the comment. It is because your 3rd party plugin has some tasks in the process while your script gets the value before the 3rd party tasks are done. Even it felt like a lucky guess. And in some case, the 3rd party tasks process may longer than your timeout when your web is live.
However, in my previous project, I was using another approach. Another thing I can suggest to you is by finding their script which doing the process, copy it to your theme and modify it to match with what you need. In the same time, you should take it out from Wordpress hooks, then "re-hooks" with your modified script. I was using plugin named "Variation Master" for Woocommerce. So, my "re-hooks" script looks like this:
remove_action("wp_ajax_ced_vm_get_variation_gallery_for_single", 'ced_vm_get_variation_gallery_for_single');
remove_action("wp_ajax_nopriv_ced_vm_get_variation_gallery_for_single", 'ced_vm_get_variation_gallery_for_single');
add_action("wp_ajax_ced_vm_get_variation_gallery_for_single", 'dx_vm_get_variation_gallery_for_single');
add_action("wp_ajax_nopriv_ced_vm_get_variation_gallery_for_single", 'dx_vm_get_variation_gallery_for_single');
My Javascript modifications were more to gallery task instead price calculation like yours. So, the hooks you need to manage should be different.
answered Jan 4 at 2:51
BayuBayu
538514
I have similar works in the past. I guess you using Wordpress with Woocommerce plugin and another 3rd party plugin. The easier solution is by using significant delay by using setTimeout(). Just like suggested by some people in the comment. It is because your 3rd party plugin has some tasks in the process while your script gets the value before the 3rd party tasks are done. Even it felt like a lucky guess. And in some case, the 3rd party tasks process may longer than your timeout when your web is live.
However, in my previous project, I was using another approach. Another thing I can suggest to you is by finding their script which doing the process, copy it to your theme and modify it to match with what you need. In the same time, you should take it out from Wordpress hooks, then "re-hooks" with your modified script. I was using plugin named "Variation Master" for Woocommerce. So, my "re-hooks" script looks like this:
remove_action("wp_ajax_ced_vm_get_variation_gallery_for_single", 'ced_vm_get_variation_gallery_for_single');
remove_action("wp_ajax_nopriv_ced_vm_get_variation_gallery_for_single", 'ced_vm_get_variation_gallery_for_single');
add_action("wp_ajax_ced_vm_get_variation_gallery_for_single", 'dx_vm_get_variation_gallery_for_single');
add_action("wp_ajax_nopriv_ced_vm_get_variation_gallery_for_single", 'dx_vm_get_variation_gallery_for_single');
My Javascript modifications were more to gallery task instead price calculation like yours. So, the hooks you need to manage should be different.
answered Jan 4 at 2:51
BayuBayu
538514
answered Jan 4 at 2:51
BayuBayu
538514
answered Jan 4 at 2:51
BayuBayu
538514
answered Jan 4 at 2:51
BayuBayu
538514
538514
thanks! I solved it with a timeout
– Michael
Jan 8 at 12:27
add a comment |
thanks! I solved it with a timeout
– Michael
Jan 8 at 12:27
thanks! I solved it with a timeout
– Michael
Jan 8 at 12:27
thanks! I solved it with a timeout
– Michael
Jan 8 at 12:27
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54023245%2fread-textcontent-of-text-changed-via-other-js-script%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a Minimal, Complete, and Verifiable example of your attempt, noting input and expected output.
– mplungjan
Jan 3 at 13:32
1
You likely need a timeout or add the reading of the price in the success of the Ajax or on add to cart
– mplungjan
Jan 3 at 13:33
You can look into a Mutation Observer. You can observe and run a function when an elements text changes. This might be a good example
– saucel
Jan 3 at 13:46
Thanks! I did research but I dont seem to find a nice solution for this issue. I will post my code example
– Michael
Jan 3 at 14:25
In your ajax code when you retrieve the new data you need to call some callback function to do your calculations, changeVariation() in your case for example. If you bind it to a change event like you did now, it will run before the ajax call is finished. Assuming your ajax call is asynchronous which they are by default.
– Jonas B
Jan 3 at 14:44