Miva Customfield Groups with Responsive Tabs

prod_tabs_cf_groups.mvt

<mvt:comment>Create structure populated with customfield group codes to pull for product specs and details</mvt:comment>
<mvt:assign name="l.settings:groups_to_load" value="miva_array_deserialize( 'additional_info,prod_docs' )" />

<mvt:comment>loop through each group</mvt:comment>
<mvt:foreach iterator="group_to_load" array="groups_to_load">

  <mvt:comment>load group database info to get its ID</mvt:comment>
  <mvt:do file="g.Module_Root $ '/modules/util/customfld.mvc'" name="l.success" value="Group_Load_Code( l.settings:group_to_load, l.settings:info_group )" />

  <mvt:comment>load group fields based on ID</mvt:comment>
  <mvt:do file="g.Module_Root $ '/modules/util/customfld.mvc'" name="l.success" value="ProductFieldAndValueList_Load_Group( l.settings:product:id, l.settings:info_group:id, l.settings:info_group:fields )" />

  <mvt:comment>loop through fields and filter out empty fields</mvt:comment>
  <mvt:foreach iterator="field" array="info_group:fields">
    
    <mvt:if expr="len_var(l.settings:field:value) GT 0">
      <mvt:assign name="l.success" value="miva_array_insert_var( l.settings:group_to_load:filtered_fields, l.settings:field, -1 )" />
    </mvt:if>
    
  </mvt:foreach>
  
  <mvt:assign name="l.settings:field_count" value="miva_array_elements(l.settings:group_to_load:filtered_fields)" />

  <mvt:assign name="l.settings:info_group:fields" value="l.settings:group_to_load:filtered_fields" />

  <mvt:comment>update info group structure with updated data</mvt:comment>
  <mvt:assign name="l.success" value="miva_array_insert_var( l.settings:info_groups, l.settings:info_group, -1 )" />
  
  <mvt:comment>clear info_group field</mvt:comment>
  <mvt:assign name="l.settings:info_group" value="''" />

</mvt:foreach>



<mvt:comment>CLIENT EXAMPLE</mvt:comment>



  <div class="column whole product-information--details">
    <h2 class="align-center bold roboto-condensed">Product Details</h2>
    <div class="column wrap whole tabs__container">
      <div id="product--details__tabs" class="whole">
        <ul class="details__tabs no-list medium-flex-show medium-flex-flow-no-wrap medium-flex-justify-between ">
            <mvt:if expr="len_var(l.settings:product:descrip) GT 0">
              <li class="width-auto"><h3 class="nm uppercase"><a href="#specs">Product Specifications</a></h3></li>
            </mvt:if>
            <mvt:foreach iterator="info_group" array="info_groups">
              <mvt:if expr="miva_array_elements(l.settings:info_group:fields) GT 0">
                <li class="width-auto"><h3 class="nm"><a href="#&mvt:info_group:code;">&mvt:info_group:name;</a></h3></li>
              </mvt:if>
            </mvt:foreach>
            <mvt:if expr="len_var(l.settings:product:customfield_values:customfields:info_youtube) GT 0">
              <li class="width-auto"><h3 class="nm"><a href="#video">Video</a></h3></li>
            </mvt:if>
              <li class="width-auto"><h3 class="nm"><a href="#questions">Questions &amp; Answers</a></h3></li>
          </ul>
        <mvt:if expr="l.settings:product:descrip">
          <div id="specs">
            <div class="medium-flex-show medium-flex-column medium-flex-justify-between">
              &mvt:product:descrip;
            </div>
          </div>
        </mvt:if>
        <mvt:foreach iterator="info_group" array="info_groups">
          <mvt:if expr="miva_array_elements(l.settings:info_group:fields) GT 0">
            <div id="&mvte:info_group:code;">
              <mvt:foreach iterator="field" array="info_group:fields">
                <div class="info__block">
                  <mvt:if expr="l.settings:info_group:code EQ 'additional_info'">
                    <h5>&mvte:field:name;</h5>
                  </mvt:if>
                  <span>&mvt:field:value;</span>
                </div>
              </mvt:foreach>
            </div>
          </mvt:if>
        </mvt:foreach>
        <mvt:if expr="l.settings:product:customfield_values:customfields:info_youtube">
          <div id="video">
            <div class="info__block align-center">
              &mvt:product:customfield_values:customfields:info_youtube;
            </div>
          </div>
        </mvt:if>
        <div id="questions">
          <div class="info__block">
            <mvt:item name="qna" param="product_questions|l.all_settings:product:code" />
          </div>
        </div>
      </div>
    </div>
  </div>