How to get Query Loop Id Post ID in PHP Function

How To
1

Hi,
This might be a basic question but not sure how to do the following:

I have a button inside of woocommerce up-sell product query loop (which works just fine). The following php is not returning the product_id of the associated product, so I can add to cart.

Console echo says post_id is not defined.

<?php 
add_action( 'wp_footer', 'update_add_to_cart_button_text' );

function update_add_to_cart_button_text() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        $('.prod-up-sell__btn').click(function(e) {
            e.preventDefault();

            var button = $(this);
            var productID = {post_id};

             console.log('Product ID:', productID);

Instead of the dynamic data format above, I also tried

var productID = button.closest('.bricks-loop-item').data('product-id');

but that too did not work. Console says that the productID is undefined.

Any thoughts?

2

You can’t access PHP vars in a js/jq script without localising the script… or…

(PHP)
$myProdID = get_queried_object_id();
(JQ)
var productID = <?php echo json_encode($myProdID); ?>;
3

Ok - Do you know of a better way to add to cart on button click from a query loop (and also display a notice that it’s been added)? I can’t be the first person to try to do this. :slight_smile:

I could of course just make the button link //your-site/add-to-cart={post_id)? but then I won’t get the visual success notice I’d like

4

According to the article

?add-to-cart={post_id}

Will suffice. So just have a button, with whatever text, and this as the link?

1 Like
5

Thank you @digismith - I really appreciate you sending that link.

I got the JS working, all good. Adds to cart, shows the “view cart” link.

Strangely the CSS isn’t working though…
In WPCodeBox, I replaced the “.root” class with a different custom class I assigned the button in bricks. Nothing displays / animates on load or added.

6

I can’t see your markup/structure, but normally ROOT is a pseudo selector for ‘main ID of element’ - not a class.
So if I have a button, and in Bricks the element has id #brxe-abcde
Root = #brxe-abcde

Which suggests you should change root to the ID of the element you wish to target (as it shows in bricks), not a class.

7

Sure, makes sense. So just to be parallel with the website example, I put the code back into the css style area on the button. I tried changing root to the element ID as suggested but bricks is smarter than that and just turns it back to root. No change in behavior. (i.e., no icon spin). I also tried it in WPCodebox with the #brxe-abcdef.loading … (I did replace abcdef with the correct id) and that didn’t have effect either.

CSS Style

image
image1071×1513 64.6 KB

Structure

image
image504×708 21.6 KB

Button Content

image
image417×1350 33.6 KB

Before and after click (ignore the price difference. I just clicked the button on the 2nd product):

image
image1604×284 13.2 KB

8

And your icon has the class ‘.loading’ applied to it? And somewhere else you actually define the ‘spin’ animation?
Frankly this looks a bit fiddly for me to understand the structure, and thus target class. I would view the page, right-click, inspect and find the button / icon, double check what class is applied to it.