Product Notice Code

product-details.liquid

<!--
ADD THIS BELOW "{% include 'variant-qty-controls', qtyMin:1 %}"
-->


<div class="product--notes"> 
      {{ product.metafields.product_notice.content}}
    </div>

product-template.liquid

<!-- 
ADD THIS TO TOP OF FILE
-->


{% assign metaCount = 0 %}
{% assign metaFound = 0 %}
{% for variant in product.variants%}
{%- if variant.metafields.product_notice.content != blank -%}
   {% assign metaCount = metaCount | plus:1%}
{%endif%}
{%endfor%}
{%- capture 'meta_data' -%}
  "product": {{ product.metafields.product_notice.content  | json}},
  "variants": {
    {%- for variant in product.variants -%}       
        {%- if variant.metafields.product_notice.content -%}
        {% assign metaFound = metaFound | plus:1%}
          "{{ variant.id | json }}": {{ variant.metafields.product_notice.content | json }}{% unless forloop.last or metaFound == metaCount %},{% endunless %}   
        {%- endif -%}
    {%- endfor -%}
  }
{%- endcapture -%}



<!---- 
ADD THIS RIGHT AFTER '</FORM>' TAG 
---->
 <script type="application/json" id="productNotes-{{section.id}}" >
    { {{ meta_data }} }
  </script>

theme.js.liquid

<!--- 
FIND THIS FUNCTION '_changeImage: function($container, variant) {' near line 3904 INSIDE THE 'theme.Product' FUNCTION
ADD THE FOLLOWING CODE RIGHT AFTER THAT FUNCTION'S '},' 
--->

 _changeMetafield: function ($container, variant) {          
          var productNotesContainer = $('.product--notes', $container);         
          var metadata = $('#productNotes-'+$container.data('sectionId')) ? $('#productNotes-'+$container.data('sectionId'))[0].innerHTML : {};
          if(metadata != {}){
            var parsedData = JSON.parse($('#productNotes-'+$container.data('sectionId'))[0].innerHTML)      
            if(parsedData.variants[variant.id] != undefined){
              productNotesContainer.html(parsedData.variants[variant.id])
            }else if(parsedData.product != undefined){
              productNotesContainer.html(parsedData.product)
            }else{
              productNotesContainer.empty();
            }
          }
        },
        
<!-- 
LOOK FOR THIS LINE OF CODE: '$container.on(theme.Variants.eventStrs.onVariantChanged, function (e, variant) {'
INSIDE THIS FUNCTION, AFTER THE LINE '$('.shopify-payment-button').show();', ADD THIS CODE:
--->

self._changeMetafield($container, variant);