Get metafield group to change with variant selection

Hello, I've been trying to get this to work the whole day. Basically, my products have a few metafields such as Dimension all stored in Namespace: productdetails 

now I created a snippet which is called in product template. here is the snippet (please ignore the classes as I haven't had the time to change them yet):

 <div class="custom-attributes-wrapper" data-metafields>
 {% assign product_details = product.metafields.productdetails %}
 {% assign variant_details = variant.metafields.productdetails %}
   
   {%if product_details.size > 0 %}  
   <h3>Additional information:</h3>
     <ul>
       {% for field in product_details %}
        {% assign attribute_code = field | first %}
        {% assign attribute_value = field | last %}
         <li class="custom-attribute-item"><span class="custom-attribute-name">{{ attribute_code }}</span>: <span class="custom-attribute-value">{{attribute_value}}</span> </li>
       {% endfor %}
     </ul>
  {%endif%}

  {%if variant_details.size > 0 %}  
       <table style="width:50%">
       {% for field in variant_details %}
        {% assign attribute_code = field | first %}
        {% assign attribute_value = field | last %}
		<tr>
          <td class="custom-attribute-item"><span class="custom-attribute-name">{{ attribute_code }}</span>:</td><td class="custom-attribute-item"><span class="custom-attribute-value">{{attribute_value}}</span> </td>
         </tr>

         {% endfor %}
       </table>
  {%endif%}

<script>
var metadata = {};
  {% for var in product.variants %}
  metadata[{{- var.id -}}] = {{ variant.metafields.productdetails | json }};
  {% endfor %}
</script>

 I've added

 $(this.selectors.metafields).html(metadata[ variant.id ]);

inside _updateSKU and added the selector too.

The problem that I have is if I wanted to alter the code slightly to just change

variant.metafields.productdetails.SomeKey

 it'll work just fine, but since I have a lot of metafields that I want to update every time, it does not get all of them with Namespace= productdetails 

Is there a way to make this work or to put all metafields in one big metafield and change that?

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes

Update on this. I've changed a lot of the above code, Still have a problem.

I have successfully sent all data to JS, and using this

 

 

$(this.selectors.varMetafields).html(metadata[ variant.id ]);

 

 

to store it in varMetafields and having this 

 

 

varMetafields: '[data-meta]',

 

 

where it's supposed to go, but now when I call something as simple as this

 

 

<div data-meta>
{{ something }}
</div>

 

also, this is the script now

<script>
  
  var metadata = {};
   {% for variant in product.variants %}
  metadata[{{- variant.id -}}] = {{ variant.metafields.productdetails | json }};
  {% endfor %}
  
  console.log( metadata[{{- variant.id -}}] );

</script>

 The information just disappears.

Any help is much appreciated

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes