multi-view.html

{{~inject 'template' template}}
{{inject 'token' settings.storefront_api.token}}
<!-- Declare an empty Array as arr
    Then iterate over the custom fields for the intended name ('foo' here)
    Inject into the current context -->
<script>
    let jsContext = JSON.parse({{jsContext}});
    let arr = [];
    {{#forEach product.custom_fields}}
      {{#if name '===' 'foo'}}
        {{inject 'productIds' value }}
        // Now within the iteration, we want to push to the previously created Array
        arr.push({{value}})
      {{/if}}
    {{/forEach}}
</script>
<!-- Close out the forEach, but we're not done with this data yet, note the injected 'token' and 'arr'-->


  [...]

{{#if theme_settings.show_custom_fields_tabs '!==' true}}
                      {{#each product.custom_fields}}
                        {{#if name '!=' 'foo'}} <!-- Hide the "foo" and "is_bundle" custom fields -->
                           {{#if name '!=' 'is_bundle'}}
                          <dt class="productView-info-name">{{name}}:</dt>
                          <dd class="productView-info-value">{{{value}}}</dd>
                            {{/if}}
                        {{/if}}
                      {{/each}}
</dl>
              <div class="container" > <!-- This is different than the default product-view template, helps with spacing -->
                <div class="tabs-contents" > <div role="tabpanel" aria-hidden="false" class="tab-content has-jsContent is-active">{{> components/custom/multi-button}}  <!-- Pull in our custom button component -->
                  <!-- Set up a div with a unique id to insert our product data + template into -->
                  
                </div>
              </div>
          </div>
          <div id="multi-desc"></div>
        </section>