Generate thumbnails of specific products in collections on product page

New Member
33 0 0

I have gotten so much further than I ever thought I would!

 

IMG_0100.jpeg

 

 

Can anyone help me to complete the final task?

 

I have gotten this far https://theworldreflected.com/products/river-etive-falls-two

 

Now all that is needed is some conditional logic to bring in thumbnails of the other collections - 

 

Product type - Print - Collection ID - 142462386248  

Product type - Framed Print - Collection ID - 142451212360

Product type - Acrylic Print - Collection ID - 142448197704

Product type - Metal Print- Collection ID - 142463467592

Product type - Wood Print - Collection ID - 142463565896

Product type - Limited Edition - Collection ID - 142991130696

 

A quick visual just to be crystal clear.

 

Prints - Acrylic Prints - Framed Prints - Metal - Wood - Ltd. Ed

Prints - Acrylic Prints - Framed Prints - Metal - Wood - Ltd. Ed

Prints - Acrylic Prints - Framed Prints - Metal - Wood - Ltd. Ed

Prints - Acrylic Prints - Framed Prints - Metal - Wood - Ltd. Ed

Prints - Acrylic Prints - Framed Prints - Metal - Wood - Ltd. Ed

 

The bold is the active tab and therefore the thumbnails will be all of the others collections the image is in. 

 

Whatever collection the product belongs to the alternate ones appear as thumbnails as shown in the mock up. See Screenshot

 

I can insert Meta where needed and I have already set up templates for all of the product pages. I could also give each set of the products the same titles or work with any defining data set anyone suggests?

 

Any ideas - I will pp 100 bucks for the solution and would really appreciate it beyond this, who knows maybe if I even sell a few prints one might arrive at your door one day too!

 

A little more relevant information. I was really busting my nuts for a very long time regarding a solution to 2 issues like having so many options for 1 image that Merging or as Abelsense puts it Nesting the collections would be the way to go along with Jasons Product with more than 100 Variants . Then as the Protagonist in Apocalypto stood there running away from his enemies and realised sh!t this is my forest, I can do this, I am from the forest so did I. Or at least I think so.

 

To get around having an image that can be had in 5 / 6 different types each with many different variants I realised the following of what I am sure there are cons. 

 

I can control what people see so if I don’t want the navigation to lead to the non primary products then make them undiscoverable. Prints are the primary collection. Thats where you will land and even then it won’t be called prints just maybe Land sea or air or Our World who knows.  Bearing that in mind that a product can be in more than one collection in the future I may choose to have other collections and group them in different ways than I have now type so maybe tags for example or some other custom field. But I always need the option outlined above to be hard set.

 

Where I have used   

 

"#tab1">

{% for collection in product.collections %}

{{ collection.title }}

 {% endfor %}

 

I should probably just use -  {{ collections.acrylic-prints.title }} as each product type will be using its own template. This way in the future If I have a collection Titled seascapes that won’t display just Acrylic Prints.

 

The other solution is on a wing and prayer and I will be using Line Item properties to solve the 100 + variant issue. I came to this realisation as merging products as most solutions suggest require the variant options to be the same and mine aren’t. SWhen it comes to things like frame color, gloss or matte paper types, White border and even frame type I will just average prices out to make it so they don’t influence the price. 

 

If you go to Catalogue you will only see prints in order to see the 6 product types go to /collections/all

 

I will not be launching with limited edition prints but that is something I will need to allow for after some time, when more established.

 

Any questions please let me know and thankyou for reading this far. I have tried to be as clear as possible. 

 

Thanks

 

Abbas

The World Reflected

Twr.photo

 

The Nutshell

On this page here on tab 2 (More Options) I require a grid of thumbnails of the alternate products. When you select the thumbnail you want it takes you there to the selected page.

I have abbreviated the titles with numbers as that is the order I would like them to appear in. River Etive Falls one - Prints      |    Two - Acrylic Prints     |     Three. -  Framed Prints.   |   Four  - Metal.    |.   Five  - Wood.    |.   Six will be Limited Edition

0 Likes
New Member
33 0 0
        <!--Start tab labels-->
        <ul class="tabs">
          <li>
            <a class="active" href="#tab1">
  				{% for collection in product.collections %}
   				{{ collection.title }}
 				 {% endfor %}
            </a>
          </li>
          <li>
            <a href="#tab2" class="">
              
                More Options
            </a>
          </li>
          <li>
            <a href="#tab3" class="">
              
            </a>
          </li>
        </ul>
        <!--Start tab content-->
        <ul class="tabs-content">
          <li class="active" id="tab1" style="display: block;">
            <div>
            <p>{{ product.description | split: '<!-- split -->' | first }}</p><p><span style="font-style: normal;">{% unless collection_handles contains 'coming-soon' %}</span></p><p>          {% include 'product-form' with 'product' %}</p><p>        {% endunless %}</p>
                    {% if section.settings.display_collections or section.settings.display_tags or section.settings.display_type %}
        {% endif %}

        <div class="meta">
          {% if section.settings.display_social_buttons %}
            {% include "social-buttons" with "product" %}
          {% endif %}

          {% if section.settings.display_collections %}
            <p>
              <span class="label">{{ 'products.product.collections' | t }}:</span>
              <span>
               {% for col in product.collections %}
                 <a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}
               {% endfor %}
             </span>
           </p>
          {% endif %}

          {% if section.settings.display_tags %}
             <p>
               {% for tag in product.tags %}
                 {% if forloop.first %}
                   <span class="label">{{ 'products.product.tags' | t }}:</span>
                 {% endif %}

                 {% unless tag contains 'meta-' %}
                   <span>
                     <a href="/collections/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>{% unless forloop.last %},{% endunless %}
                   </span>
                 {% endunless %}
               {% endfor %}
             </p>
          {% endif %}

         {% if section.settings.display_type %}
            <p>
              <span class="label">{{ 'products.product.product_types' | t }}:</span>
              <span>{{ product.type | link_to_type }}</span>
            </p>
         {% endif %}
        </div>
      </div>
            </div>
          </li>
          <li id="tab2" class="" style="display: none;">
            <div>
            <p> This is where the other collections other collections code will go <br><br>
            </p>
            </div>
          </li>
          <li id="tab3" class="" style="display: none;">
            <div>
            <p><br>
            </p>
            </div>
          </li>
        </ul>
    
        

I have added the code from product-acrylic-template.liquid the red text is where the code will go that will get other product thumbnails from the collections where this image is as alternate product options.

 

I don't know what data to use to target specifically the products ? and displaying its collection it is from below the thumbnail 

so River Etive Falls One / Three / Four / Five

all appear like this when selecting the more options tab.

IMG_0100.jpeg

 

Please can anyone come up with a solution? 

1oo bucks is on offer!

0 Likes
Highlighted
New Member
33 0 0

Correction this text is where the code would go 

 

This is where the other collections other collections code will go  
0 Likes