Custom product tabs

Alex_Obr
New Member
1 0 0

Dear community,

I am quite new here and I hope you could assist me with the following. I would like to have a product-specific description shown in different tabs on the product page. I understand that this topic has been discussed several times, I could not find anything suitable for my case, though. Since I use the "Showcase" theme, the tabs feature is already given. However, those have to be linked to a specific page. My idea is to establish a link to a section, which pulls the information from product meta data. So far, my achievements based on the Bonify app are:

Section template:

{% render "blocks.custom_fields" with resource_type: "products", blocks: section.blocks %}
{% schema %}
  {
    "name": {
        "en": "Custom Fields"
    },
    "settings": [
        {
            "type": "paragraph",
            "content": "[View Documentation](https:\/\/custom-fields.docs.bonify.io\/)"
        },
        {
            "type": "paragraph",
            "content": "[Edit Custom Fields](https:\/\/customfields.bonify.io\/dashboard\/obrucci.myshopify.com\/products\/configure)"
        }
    ],
    "blocks": [
        {
            "type": "cf_f_fcj",
            "name": {
                "en": "Field Collection"
            },
            "settings": [
                {
                    "type": "select",
                    "id": "key",
                    "label": "Select a Repeater Field",
                    "options": [
                        {
                            "value": "material",
                            "label": "Material"
                        }
                    ]
                }
            ]
        }
    ]
}
{% endschema %}

 

Rendering:

<div class="custom-fields-section">
  
    {% if resource_type == "products" %}
    <div class="custom-fields-section__products">
      {% for block in blocks %}
      {% if block.type contains "cf_" %}
      <div class="custom-fields-section__item custom-fields-section__item--{{ block.type }} custom-fields-section__item--{{ block.type }}--{{ block.settings.key }}" {{ block.shopify_attributes }}>
        {% case block.settings.key %}
        
          {% when "material" %}
            {% render "custom_fields.products.material" %}
        
        {% endcase %}
      </div>
      {% endif %}
      {% endfor %}
    </div>
    {% endif %}
  
</div>

 

Pulling the meta data:

{% if product.metafields.custom_fields["material"] != blank %}
  <div class="custom-field custom-field__material custom-field__type--text-repeater">

    <div class="custom-field--value">
      {% for item in product.metafields.custom_fields["material"] %}
        <div class="fc-repeater-field-item fc-repeater-field-item--{{ forloop.index0 }} field__material field-type--text">

           <div class="custom-field--value">
             {{ item["material"] }}
           </div>
        </div>
       {% endfor %}
    </div>
  </div>
{% endif %}

 

Now, I wonder how can I assign the section above instead of a page to the variable "tab3_content". The code below is the implementation of the Showcase scheme.

            assign tab3_title = pages[section.settings.tab_3_page].title
            assign tab3_content = pages[section.settings.tab_3_page].content

 

I am not sure, whether I am doing it completely incorrectly. Please let me know.

Thank you in advance,

Alex

0 Likes