Validate if 2 elements have same attribute value

Question

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?

sonic · Answer 1 · 2020-02-19T11:43:13.170

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

edited Feb 19 '20 at 11:43

answered Feb 14 '20 at 18:06

sonic

1,282
1
9
22

Thank you! Just to be sure, shouldn't it be `.data('data-product_id')` based on the HTML I have shared? – Demian Feb 14 '20 at 22:24
Yes, sorry my mistake – sonic Feb 14 '20 at 22:37
Okay, and 1 closing `)` is missing in the if statement. But I was wondering if you could help me further, because in the `// do something here` I'd like to refer to the specific `article a.button`, in this situation #6735. How do I do this? Because if I use `$(this)` it refers incorrectly. – Demian Feb 14 '20 at 23:05
Yes, second mistake.. Im on the Phone, thats why. $(this) refers to the .each, thats how you can get the element in the loop. I can see that your article has class with the number of product, So you could get element like 'var elem='. post-'+$(this).data('product_id')' that would be producing name of the class of the article. Then to get button $(element +' a.button)... – sonic Feb 14 '20 at 23:19
$(elem + ' a.button' ).html() or smth. Sorry its hard on Phone to write it readable – sonic Feb 14 '20 at 23:21
1

Could you give me the example if you are more comfortable with typing? The action that needs is the `a.button` needs to be disabled, so `.attr('disabled', 'disabled')` Thanks! – Demian Feb 15 '20 at 14:11
If I Will be in front of computer I Will update answer for you but I have already provide the answer in comment. Those 2 lines represent button. You just need to place attr... In place of html() – sonic Feb 15 '20 at 14:15
@Demian I suspect that your main task is just to disable abilitiy to click "buy" for those products that are already in the cart. Is that right ? – sonic Feb 17 '20 at 12:17
Sorry for my delay, yes that's what the purpose is. Somehow, when you enable **Sold individually** in the product backend, you're still able to add it a 2nd time in the cart. So I came with this solution. – Demian Feb 17 '20 at 20:24
@Demian I updated the answer for you. Do you understand it ? – sonic Feb 19 '20 at 11:44
@Demian Of course you should convert as disabled doesnt work on linka I guess – sonic Feb 19 '20 at 22:41

Nguyễn Văn Phong · Answer 2 · 2020-02-15T01:01:05.313

To get current_ProductId, You just need to get from $('article').data('id')
To loop through all mini cart items, You just need mini_cart_item
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>

Hi! Thanks for sharing. 2 sidenotes; the `.data('id)` and `.data('product_id')` are both non existing in my HTML sample. The attributes are different. — Demian, Feb 15 '20 at 03:05
From your HTML, It equals to `data-id="6735"`. So it works fine. Please check my code & result. — Nguyễn Văn Phong, Feb 15 '20 at 03:07
Sorry, but data-id is the attribute. So it should be `.data('data-id')` and `.data('data-product_id')`. The attribute `id` is a an id-attribute, which is not the case here. — Demian, Feb 15 '20 at 14:09
No, You can get data value via 2 ways. https://stackoverflow.com/a/5309947/9071943 — Nguyễn Văn Phong, Feb 15 '20 at 14:12

Validate if 2 elements have same attribute value

2 Answers2