How to display metaobject fields dependent on current product being viewed?

cesarcor
Shopify Partner
2 0 0

Hello everyone, hopefully, I could get some help on this one.

 

I have developed a custom table section in liquid to be used on product templates. To manage data in the table I'm using a metaobject called comparison_table_features, the idea is that each metaobject entry represents a row in the table. I have created a metafield so that the metaobject in question is present when editing product content in backend.

 

The problem with my code implementation below is that all of the entries show no matter what. Let's say I have Product A and Product B, no matter if I'm looking at Product A or Product B, both of the metaobject entries filled in these two products are showing on the product template.

 

How can I only display metaobject entries from Product A if I'm looking at Product A in the product template? and vice versa, how can I only display metaobject entries from Product B if I'm looking at Product B etc. in the product template? and not have all of the entries displayed on all of the products.

 

Hopefully this makes sense, any help would be highly appreciated.

 

Liquid code:

    {% assign comparison_table_features = shop.metaobjects.comparison_table_features.values %}

    {% for key in comparison_table_features %}
      {% assign feature = key.feature.value %}
      {% assign current_product_feature = key.current_product_feature.value %}
      {% assign product_1_feature = key.product_1_feature.value %}
      {% assign product_2_feature = key.product_2_feature.value %}

        <tr>
          <td>{{ feature.children[0].children[0].value }}</td>
          <td>{{ current_product_feature.children[0].children[0].value }}</td>
          <td>{{ product_1_feature.children[0].children[0].value }}</td>
          <td>{{ product_2_feature.children[0].children[0].value }}</td>
        </tr>

    {% endfor %}
Replies 5 (5)

websensepro
Shopify Partner
1011 139 147

Hi, @cesarcor 

Please send ScreenShot of metafield that you add

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
websensepro
Shopify Partner
1011 139 147

this type of image

websensepro_0-1700207630409.png

 

websensepro_1-1700207633328.png

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
cesarcor
Shopify Partner
2 0 0

Screenshot 2023-11-17 at 06.12.05.pngScreenshot 2023-11-17 at 06.12.29.pngScreenshot 2023-11-17 at 06.12.50.pngScreenshot 2023-11-17 at 06.13.15.png

websensepro
Shopify Partner
1011 139 147

websensepro_0-1700229074790.png

 

websensepro_1-1700229078021.png

 

websensepro_2-1700229083371.png

 

I have created a solution for you using code.

 

     var variantRadios = document.querySelector('#variant-radios-template--20630248751138__main'); // Select by tag name
var fieldsetElements = variantRadios.querySelectorAll('fieldset'); // Select all fieldset elements
var firstFieldset = fieldsetElements[1]; // Accessing the first fieldset

firstFieldset.style.display="none";
document.addEventListener('DOMContentLoaded', function() {
  var elements = document.querySelectorAll('label[for="template--20630248751138__main-1-0"]');
  elements.forEach(function(element) {
    element.addEventListener('click', function() {
      console.log('working');
console.log(firstFieldset.style.display="none");
    });
  });
});
  document.addEventListener('DOMContentLoaded', function() {
  var elements1 = document.querySelectorAll('label[for="template--20630248751138__main-1-1"]');
  elements1.forEach(function(element) {
    element.addEventListener('click', function() {
      console.log('working');

console.log(firstFieldset.style.display="none");
    });
  });
});
   document.addEventListener('DOMContentLoaded', function() {
  var elements2 = document.querySelectorAll('label[for="template--20630248751138__main-1-2"]');
  elements2.forEach(function(element) {
    element.addEventListener('click', function() {
      console.log('working');

console.log(firstFieldset.style.display="block");
    });
  });
});
   

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
websensepro
Shopify Partner
1011 139 147

i take Variants in product not from metafield 

websensepro_4-1700229344549.png

 

websensepro_5-1700229352070.png

 

Please select any product of your choice.

 

websensepro_6-1700229363375.png

scroll down there is a option of Variants add then the code work

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here