Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialAngelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 PointsWordPress for Php:: WooCommerce :: Checkout Extra Option
Hi guy. I'm trying to create an if statement. If the Pickup label set to yes>. I want to hide the shipping address. If it is nothen I want to keep it visible. I added the code in my function.php. Any idea how to fix it? Here's the link
Name of the custom class is select2-selection__rendered and ID is select2-pickup_-container with two options title. Yes and Not
Check the image1 here for reference Check the image2 here for reference
function (woocommerce_disable_shipment_option_if_pickup_is_true){
$pickup-options = array (
'Yes' => true,
'No' => false
)
if ( $pickup-options == 'Yes') ) {
add_filter( 'woocommerce_cart_needs_shipping_address', '__return_false');
}
if else ($pickup-options == 'No' ) {
add_filter( 'woocommerce_cart_needs_shipping_address', '__return_true');
}
}
5 Answers
Liam Clarke
19,938 PointsAngelic
paste this in, ive tested this on your site and it works
(function($) {
var dropdown = $("#pickup_");
var selected = $("#select2-pickup_-container").attr("title");
var bindEvents = function() {
dropdown.on("change", toggleDifferentAddress);
};
var toggleDifferentAddress = function() {
selected = $(this).val();
console.log(selected);
if ( selected === "Yes" ) {
$(".woocommerce-shipping-fields").hide();
} else {
$(".woocommerce-shipping-fields").show();
}
};
bindEvents();
})(jQuery);
then remove the console.log once your satisfied the correct values are being passed
Good Luck!
Liam Clarke
19,938 PointsHi Angelic
Correct me if im wrong but it sounds like your trying to dynamically show or hide the shipping information?
You cannot do this with php, php is executed on the server, therefore a change in a drop-down box will have no affect on how the page looks.
What you need is something client-side like javascript that will listen for an event, and display or hide the information.
Now there are ways to do it with php, but the information has to go back to the server. e.g. a refresh of the page will run the page again at the server.
Also, probably irrelevant now but you have an invalid elseif statement, if should be this:
if ( something ){
...
}
elseif ( something_else ){ // Note the combination of the words.
...
}
Hope this makes sense
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 PointsHi Liam. Thank you for responding. The issue if use "hide" via javascript. The checkout won't proceed completely because it has a mandatory fields?
I tried jQuery.. Ahhmm.. Actually, my code is not working. Any idea why?
<script>
(function($) {
$(document).ready(function() {
if("#select2-pickup_-container[title|='Yes']") {
$('input#ship-to-different-address-checkbox').hide();
}else{
$('input#ship-to-different-address-checkbox').show();
}
});
})(jQuery)
</script>
Liam Clarke
19,938 PointsOk, i need a bit more information then.
how are you submitting the form data?
and are the required fields on the server side or client?
a potential solution is an ajax call with javascript, depending on your answer to the above two questions
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 PointsYes, it is set required.. You can try to checkout https://berggallery.com/product/bugaboos-giants/ . I think I'm not targetting the title yes correctly.
Looks like my code is not working. Here's the screen recording https://www.useloom.com/share/29a8759b64e7415bb1030e65e40111bc
My script is
<script>
<script>
(function($) {
$(document).ready(function() {
if("span.select2-selection__rendered#select2-pickup_-container[title|='Yes']") {
$('div.woocommerce-shipping-fields').hide();
}else{
$('div.woocommerce-shipping-fields').show();
}
});
})(jQuery)
</script>
</script>
Liam Clarke
19,938 PointsTry something like this:
$(document).ready(function() {
(function($) {
var dropdown = $("#pickup_");
var selected = $("#select2-pickup_-container").attr("title");
var bindEvents = function() {
dropdown.on("change", toggleDifferentAddress);
};
var toggleDifferentAddress = function() {
if ( selected === "Yes" ) {
$(".ship-to-different-address-checkbox").hide();
} else {
$(".ship-to-different-address-checkbox").show();
}
};
bindEvents();
})(jQuery);
});
change the select variable with the dropdown select id, you also need an if statement to determine what the value is on the event of change
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 PointsSorry, noob here but it makes me confused now? There's no more if statement? I tried code below but it still doesn't work
<script>
(function($) {
$(document).ready(function() {
var select = $("#select2-pickup_-container[title|='Yes']");
var bindEvents = function() {
select.on("change", toggleDifferentAddress);
};
var toggleDifferentAddress = function(event) {
$(".ship-to-different-address-checkbox").toggle();
};
bindEvents();
});
})(jQuery);
</script>
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 PointsIt doesn't work. I'm afraid.. Sorry
Liam Clarke
19,938 PointsEDIT: Ok so ive tried this code and it works.
it gets the dropdown select ID and the selected title attriute
on the change event, the selected title attribute is set to the dropdown value (either yes or no)
if the value is yes hide, else show
(function($) {
var dropdown = $("#pickup_");
var selected = $("#select2-pickup_-container").attr("title");
var bindEvents = function() {
dropdown.on("change", toggleDifferentAddress);
};
var toggleDifferentAddress = function() {
selected = $(this).val();
if ( selected === "Yes" ) {
$(".ship-to-different-address-checkbox").hide();
} else {
$(".ship-to-different-address-checkbox").show();
}
};
bindEvents();
})(jQuery);
... thats the javascript sorted but i feel we've gone off track as this isnt what i originally though the problem was
Liam Clarke
19,938 PointsIt does work on a form I have set up locally but your right, it won’t work for you.
You need to take that code and change the variables so they match the ones you are using.
Do you version control your project? If so, it would be much easier to see the full project on git rather than guessing
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 PointsYes. Sorry, I didn't see any problem with you code but I wonder why it's not working?
Here's my screen recording https://www.useloom.com/share/1de950bede754aaa8b9116ba6156a44e
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 PointsIt's a WordPress site from my client, I don't usually put on version control but let me create a local version. I'll get back to you, thank u so much Liam.
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 PointsAngelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 PointsI wonder why it is still not working but your code is actually right. I will take a closer. thank you so much Liam!