Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – Validate if 2 elements have same attribute value

In my e-commerce environment, I need a jQuery validation between 2 product attributes. Simplified it needs to check if the cart has a product which is present on the same page:

<! –– Cart ––>
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
    <li class="woocommerce-mini-cart-item mini_cart_item">
        <a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6735" data-cart_item_key="..." ></a>
    </li>
</ul>

<! –– Product ––>
<article class="post-6735 product" data-id="6735">
    <div class="product_wrapper">
        <a href="?add-to-cart=6735" data-quantity="1" class="button add_to_cart_button" data-product_id="6735"</a>
    </div>
</article>

I would like to be able to check if the attribute and its value from data-product_id within the cart is the exact same as in article a.button element. My approach:

jQuery('.woocommerce-mini-cart .remove_from_cart_button').attr('data-product_id').each( function() {
    if( jQuery('article a.button')/*check if it is the same*/){
        // do something here
    }
});

As you can see the ID number 6735 is in more attributes. So perhaps a different way is also possible?

Tags:

2

Answers


  1. 0

    If you only need help to clarify your solution it would be

    $('.woocommerce-mini-cart .remove_from_cart_button').each( function() {
    if( $('article a.button').data('product_id') == $(this).data('product_id'){
        // do something here
    }
});

    each iterate through collection of jquery elements.

    This

    jQuery('.woocommerce-mini-cart .remove_from_cart_button').attr('data-product_id')

    is the single value, it would take the first element that finds and then executes attr on it.

    UPDATE

    To update all products button on site based on all products that are inside the card

    var product_id = "";
var article = ".post-"; // class of article

$('.woocommerce-mini-cart .remove_from_cart_button').each( function() {
     product_id = $(this).data('product_id')
     article = article + product_id; // we add strings here, example .post-6225
     $(article + " .product_wrapper a").attr('disabled', 'disabled');
});
    Login or Signup to reply.
  2. 0
    1. To get current_ProductId, You just need to get from $('article').data('id')
    2. To loop through all mini cart items, You just need mini_cart_item
    3. As you can see, we can get data attribute value by using data
    var current_ProductId = $('article').data('id');

$('.mini_cart_item').each(function() {
   var productId_MiniCartItem = $(this).find('a').data('product_id');
   
   if(productId_MiniCartItem == current_ProductId){
        // do something here
        console.log("ProductId: " + productId_MiniCartItem + " has been ordered");
   }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<! –– Cart ––>
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
    <li class="woocommerce-mini-cart-item mini_cart_item">
        <a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6735" data-cart_item_key="..." >6735</a>
    </li>
    <li class="woocommerce-mini-cart-item mini_cart_item">
        <a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6736" data-cart_item_key="..." >6736</a>
    </li>
</ul>

<! –– Product ––>
<article class="post-6735 product" data-id="6735">
    <div class="product_wrapper">
        <a href="?add-to-cart=6735" data-quantity="1" class="button add_to_cart_button" data-product_id="6735"</a>
    </div>
</article>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search