DIY related products section ???

Highlighted
New Member
32 0 0

I need to show a small grid of related products in a tab of this product page (In tab More Options) https://theworldreflected.com/collections/acrylic-prints/products/river-etive-falls-acrylic

 

These related products will only show when the matched criteria are met.

 

get all products with matching product title filtered by collection

 

 

Exclude current collection from results

 

Last cherry on top Display Collection title under thumbnail of product

 

 

:)

 

Like this

 

IMG_0100.jpeg

 

I have set up a new snipet called.prints and have styled this as follows in css

 

.prints {
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	float: left;
	min-width: 100px;
	height: 100px;
	margin: 0;
	border: #ccc 1px solid;
	background-color: #ddd;
	line-height: 35px;
}

I need to call on the snipet only if the current collection Prints for example matches the snipet prints

That way I will only ever show the correct related image and subset of related products without showing the the current product in results So the Bold is the left tab and the regular shows in more options 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 Anyone any ideas ?
0 Likes
New Member
32 0 0

The message editor sucks!!!!!!! I keep losing the rich text

 

Last part

 

I need to call on the snipet only if the current collection == Prints
That way I will only ever show the correct related image and subset of related products without showing the the current product in results

 

So the Bold is the left tab and the regular shows in more options

 

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

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

 

Anyone any ideas ?

 

 

Code in Product template tab section is

 

     <!--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>CODE GOES HERE<br><br>
               {% if product.title contains "prints" %}
				{% include “prints” %}
				{% endif %}
            </p>
            </div>
          </li>
          <li id="tab3" class="" style="display: none;">
            <div>
            <p><br>
            </p>
            </div>
          </li>
        </ul>
0 Likes
New Member
32 0 0

Bumping 

 

Any Ideas anyone???

0 Likes