Product type defining tab content

Highlighted
New Member
2 0 0

G'day all, 

Following on from this thread, I'm trying to figure out the code required to get a product a product type to specify the content displayed in tabs. - I've had a go.

 

Since it's getting more fiddly to use metafields, I want to just code the product tabs into the product type.

https://donttellcharles.myshopify.com/collections/online-courses/products/chocolate-sail-decorations... - pw crikey

 

I've started having a go, but I'm stuck when it comes to getting the bloody thing to work..

I've got this far:

- Two product types: (Physical) product.Workshops and product.OnlineCourse. (Each need their own FAQ's tab).

- These are each using their own section for content: product-online-template & product-workshop-template

- In settings_data.json  I've got "product_tab_title_1":"FAQ","product_tab_content_1":"workshops-frequently-asked-questions" this is set in the theme, which I can clear but ..
- In my page template I have
 
{%- if settings.product_tab_content_1 != blank -%}
<li class=""><a href="#prod-tab-1" data-toggle="tab">{{ settings.product_tab_title_1 }}</a></li>
{%- endif -%}
So believe I should be able to say something like
{%- if settings.product_tab_content_1 != blank -%}
    <div class="panel" id="prod-tab-1" style="display:none">
        {%- if product.type == OnlineCourse -%}
                {{pages[settings.online-course-frequently-asked-questions].content}}
        {%- endif -%}

        {%- if product.type == Workshop -%}
                {{pages[settings.workshop-frequently-asked-questions].content}}
        {%- endif -%}
    </div>
{%- endif -%}
But no cigar.
The code in the template I've been using to try figure this out is as follows:
<div class="panel" id="tab-description" style="display:block">    {{product.description}}</div>{%- if settings.product_tab_content_1 != blank -%}
    <div class="panel" id="prod-tab-1" style="display:none">        {{pages[settings.product_tab_content_1].content}}
    </div>{%- endif -%}

{%- if settings.product_tab_content_2 != blank -%}
    <div class="panel" id="prod-tab-2" style="display:none">        {{pages[settings.product_tab_content_2].content}}
    </div>{%- endif -%}

{% for i in(1..10) %}
    {% assign s_tab_title = "tab_title_" | append: i %}
    {% assign tab_title = instructions[s_tab_title] %}
    {% assign s_tab_content = "tab_content_" | append: i %}
    {% assign tab_content = instructions[s_tab_content] %}
    {% if tab_title != blank and tab_content != blank %}
        <div class="panel" id="tab-custom-{{i}}" style="display:none">            {{ pages[tab_content].content }}
        </div>    {% endif %}
{% endfor %}
Any advice on how to just get the product type to define the FAQ's for product tab 1 would be bloody useful.
I've stroked a hole in my beard with this one.
Ben.
0 Likes
Shopify Partner
18 0 2

Perhaps you can consider trying our newly launched app? https://apps.shopify.com/custom-product-accordion-tabs

You can create different tabs and target different collections, and you can organise your tab content in one place.

In your case, you can create different collections with different product types and create different FAQs targeting the specific collections.

Thanks!

0 Likes