Home » Jquery » javascript – Validate if 2 elements have same attribute value-Exceptionshub

javascript – Validate if 2 elements have same attribute value-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

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?

How to&Answer:
  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>

Answer:

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');
});