使用带有“ Turbo”主题的替代文本对变形图像进行分组Shopify

Question

试图快速将代码放在Shopify的“沙盒” Turbo主题的每种类型的“产品”液体文件的底部。通常，只需稍作调整，即可使其适用于大多数其他主题。但是此主题中的产品代码似乎非常健壮，因此非常复杂。我知道我在这里用太大的刷子了。尝试减少一点。有人在使用Turbo并成功将Variant Images分组吗？

最初来自Github https://gist.github.com/carolineschnapp/d3c1af82b915e9cae82929e6486f22fe

{% assign option_name = 'Color' %}

{% if product.options contains option_name %}

<script>
// Grabbing product thumbnails
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard and many more.
var thumbnails = jQuery('img[src*="/products/"]') /* All product images */
  .not('#related-products img')                   /* Except related products, thumbnails not clickable */
  .not('a[href^="/collections/"] img')            /* Except related products */
  .not('a[href^="/products/"] img')               /* Except mini-cart products */
  .not('header img')                              /* Except mini-cart products, thumbnails not clickable */
  .not('#drawer img')                             /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
  .not(':first');                                 /* Except first one, i.e the main image */
  
var optionSelect; 
{% assign option_index = 0 %}  
{% for option in product.options %}
  {% if option == option_name %}
    {% assign option_index = forloop.index0 %}  
  {% endif %}
{% endfor %}
  
{% if product.options.size == 1 %}
  optionSelect = '.single-option-selector';
{% else %}
  optionSelect = 'label:contains({{ option_name }}) + .single-option-selector';   
{% endif %}
  
jQuery('form[action="/cart/add"]').on('change', optionSelect, function() {
  var optionValue = $(this).val();
  thumbnails.each(function() {
    var wrapper = $(this);
    while ( wrapper.parent().children().length === 1 ) {
      wrapper = wrapper.parent();
    }
    if ( jQuery(this).attr('alt') === optionValue ) {
      wrapper.show();
    }
    else {
      wrapper.hide();
    }
  });
});    
</script>

{% endif %}

编辑//添加了product-description-bottom-template.liquid

---

<div class="container main content">
  <a name="pagecontent" id="pagecontent"></a>

  <div class="sixteen columns">
    {% if collection.previous_product or collection.next_product or section.settings.product_breadcrumb %}
      <div class="clearfix breadcrumb-collection">
        {% if collection.previous_product or collection.next_product %}
          <div class="nav_arrows breadcrumb_text">
            {% if collection.previous_product %}
              <a href="{{ collection.previous_product }}" title="{{ 'products.general.previous_product_html' | t }}" class="breadcrumb_link"><span class="icon-left-arrow"> {{ 'products.general.previous_product_html' | t }}</span></a>
            {% endif %}
            {% if collection.previous_product and collection.next_product %}<span class="breadcrumb-divider"> | </span>{% endif %}

            {% if collection.next_product %}
              <a href="{{collection.next_product}}" title="{{ 'products.general.next_product_html' | t }}" class="breadcrumb_link">{{ 'products.general.next_product_html' | t }} <span class="icon-right-arrow"></span></a>
            {% endif %}
          </div>
        {% endif %}

        {% if section.settings.product_breadcrumb %}
          <div class="breadcrumb_text" itemscope itemtype="http://schema.org/BreadcrumbList">
            <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="item" class="breadcrumb_link"><span itemprop="name">{{ 'general.breadcrumbs.home' | t }}</span></a></span>
            <span class="breadcrumb-divider">/</span>
            <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              {% if collection %}
                <a href="{{ collection.url }}" title="{{ collection.title | escape }}" itemprop="item" class="breadcrumb_link"><span itemprop="name">{{ collection.title }}</span></a>
              {% else %}
                <a href="/collections/all" title="{{ collections.all.title }}" class="breadcrumb_link"><span>{{ collections.all.title }}</span></a>
              {% endif %}
            </span>
            <span class="breadcrumb-divider">/</span>
            {{ product.title }}
          </div>
        {% endif %}
      </div>
    {% endif %}
  </div>

  {% comment %}Check to see if sidebar should be enabled{% endcomment %}
  {% if section.blocks.size > 0 %}
    {% assign sidebar = true %}
  {% else %}
    {% assign sidebar = false %}
  {% endif %}

  {% if sidebar %}
  <div class="product">
    {% include 'sidebar' %}
   </div>
    <div class="twelve columns">
      <div class="product-{{ product.id }}">
  {% else %}
    <div class="sixteen columns">
      <div class="product-{{ product.id }}">
  {% endif %}

    <div class="section product_section clearfix js-product_section" itemscope itemtype="http://schema.org/Product">

      <div class="{% if sidebar %}seven{% else %}nine{% endif %} columns {% if product-images == blank %}{% if section.settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}{% endif %} {% if section.settings.product_images_position == 'right' %}mobile_only{% endif %}">
        {% include 'product-images' %}
      </div>

      <div class="{% if sidebar %}five{% else %}seven{% endif %} columns {% if section.settings.product_images_position == 'left' %}omega{% else %}alpha{% endif %}">

        {% assign collection_handles = product.collections | map: 'handle' %}
        {% assign variant = product.selected_or_first_available_variant %}

        {% if settings.sale_banner_enabled and product.compare_at_price_max > product.price %}
          <div class="sale_banner_product">{{ 'collections.general.sale' | t }}</div>
        {% endif %}
        {% if collection_handles contains 'new' %}
          <div class="new_banner_product">{{ 'collections.general.new' | t }}</div>
        {% endif %}
        {% if collection_handles contains 'pre-order' %}
          <div class="new_banner_product">{{ 'collections.general.pre_order' | t }}</div>
        {% endif %}

         {% if section.settings.display_vendor %}
          <p class="vendor">
            <span itemprop="brand" class="vendor">{{ product.vendor | link_to_vendor }}</span>
          </p>
        {% endif %}

        {% if variant.sku != blank and section.settings.display_sku %}
          <p class="sku">
            <span itemprop="sku">{{ variant.sku }}</span>
          </p>
        {% endif %}
        <h1 class="product_name" itemprop="name">{{ product.title }}</h1>
        {% if settings.enable_shopify_product_badges and settings.enable_shopify_review_comments %}
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
        {% endif %}
        <div class="feature_divider"></div>

        {% assign product_tags = product.tags | join: ' ' %}
        {% if product_tags contains 'meta-size-chart-' %}
          {% for tag in product.tags %}
            {% if tag contains 'meta-size-chart-' %}
              <a href="#size-chart{{product.id}}" class="size_chart" data-remodal-target="size-chart{{product.id}}" data-no-instant>{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
              {% include 'popup-size-chart', product_id: product.id %}
            {% endif %}
          {% endfor %}
        {% elsif settings.size_chart != blank %}
          <a href="#size-chart" class="size_chart" data-remodal-target="size-chart" data-no-instant>{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
        {% endif %}

        {% if collection_handles contains 'coming-soon' %}
          <p class="modal_price">{{ 'collections.general.coming_soon' | t }}</p>
        {% else %}
          <p class="modal_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
            <meta itemprop="seller" content="{{ shop.name | escape }}" />
            <link itemprop="availability" href="http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}">
            <meta itemprop="itemCondition" content="New" />

            <span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
            <span itemprop="price" content="{{ variant.price | money_without_currency }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
              <span class="current_price {% if product.available == false %}hidden{% endif %}">
                {% if variant.price > 0 %}
                  <span class="money">{{ variant.price | money }}</span>
                {% else %}
                  {{ settings.free_price_text }}
                {% endif %}
              </span>
            </span>
            <span class="was_price">
            {% if variant.price < variant.compare_at_price and variant.available %}
              <span class="money">{{ variant.compare_at_price | money }}</span>
            {% endif %}
            </span>
          </p>

          {% include 'product-notify-me' %}
        {% endif %}

        {% unless collection_handles contains 'coming-soon' %}
          {% include 'product-form' with 'product' %}
        {% endunless %}

        {% if settings.enable_shopify_review_comments and settings.review_position == "next_to_gallery" %}
          <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
        {% endif %}

        {% if section.settings.display_collections or section.settings.display_tags or section.settings.display_type %}
          <div class="product_links">
            {% if 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_type %}
              <p>
                <span class="label">{{ 'products.product.product_types' | t }}:</span>
                <span>{{ product.type | link_to_type }}</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 %}
          </div>
        {% endif %}

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

      {% if section.settings.product_images_position == 'right' %}
        <div class="{% if sidebar %}seven{% else %}nine{% endif %} columns {% if product-images == blank %}{% if section.settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}{% endif %} mobile_hidden">
          {% include 'product-images' %}
        </div>
      {% endif %}
    </div>

    <br class="clear" />
    <div class="section clearfix">
      <div class="description">
        {{ product.description }}
      </div>
    </div>

    </div>
    {% if settings.enable_shopify_review_comments and settings.review_position == "below_gallery" %}
      <div class="shopify-reviews">
        <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
      </div>
    {% endif %}

{% if section.settings.display_related_products and sidebar == false %}
    </div>
  </div>
  {% include 'related-products' %}
{% elsif section.settings.display_related_products and sidebar == true %}
      {% include 'related-products' %}
    </div>
  </div>
{% else %}
    </div>
  </div>
{% endif %}

{% schema %}

{
  "name": "Product bottom",
  "class": "product-template product-description-bottom-template",
  "settings": [
    {
      "type": "header",
      "content": "Product gallery"
    },
    {
      "type": "checkbox",
      "id": "gallery_arrows",
      "label": "Show arrows on product gallery"
    },
    {
      "type": "checkbox",
      "id": "activate_zoom",
      "label": "Magnify product images on hover"
    },
    {
      "type": "checkbox",
      "id": "enable_product_lightbox",
      "label": "Enable product gallery popup",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "activate_autoplay",
      "label": "Enable product gallery slideshow"
    },
    {
      "type": "select",
      "id": "slideshow_animation",
      "label": "Gallery transition",
      "options": [
        {
          "value": "slide",
          "label": "Slide"
        },
        {
          "value": "fade",
          "label": "Fade"
        }
      ],
      "default": "slide"
    },
    {
      "type": "radio",
      "id": "product_images_position",
      "label": "Gallery position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "product_thumbs",
      "label": "Show product gallery thumbnails"
    },
    {
      "type": "select",
      "id": "thumbnail_position",
      "label": "Thumbnail position",
      "default": "bottom-thumbnails",
      "options": [
        {
          "value": "left-thumbnails",
          "label": "Left"
        },
        {
          "value": "bottom-thumbnails",
          "label": "Bottom"
        },
        {
          "value": "right-thumbnails",
          "label": "Right"
        }
      ]
    },
    {
      "type": "header",
      "content": "Product info"
    },
    {
      "type": "checkbox",
      "id": "product_breadcrumb",
      "label": "Show breadcrumb links"
    },
    {
      "type": "checkbox",
      "id": "display_vendor",
      "label": "Show vendor"
    },
    {
      "type": "checkbox",
      "id": "display_sku",
      "label": "Show SKU"
    },
    {
      "type": "checkbox",
      "id": "display_collections",
      "label": "Show collections"
    },
    {
      "type": "checkbox",
      "id": "display_type",
      "label": "Show type"
    },
    {
      "type": "checkbox",
      "id": "display_tags",
      "label": "Show tags"
    },
    {
      "type": "checkbox",
      "id": "display_social_buttons",
      "label": "Show social media share icons",
      "default": true
    },
    {
      "type": "header",
      "content": "Related products"
    },
    {
      "type": "checkbox",
      "id": "display_related_products",
      "label": "Show related products ([?](http:\/\/support.outofthesandbox.com\/customer\/portal\/articles\/942378-related-products))",
      "default": true
    },
    {
      "type": "radio",
      "id": "related_products_style",
      "label": "Layout",
      "default": "grid",
      "options": [
        {
          "value": "slider",
          "label": "Slider"
        },
        {
          "value": "grid",
          "label": "Grid"
        }
      ]
    },
    {
      "type": "select",
      "id": "related_products_limit",
      "label": "Product limit",
      "default": "12",
    "options": [
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        },        
        {
          "value": "6",
          "label": "6"
        },                
        {
          "value": "8",
          "label": "8"
        },
        {
          "value": "10",
          "label": "10"
        },        
        {
          "value": "12",
          "label": "12"
        },
        {
          "value": "15",
          "label": "15"
        },        
        {
          "value": "20",
          "label": "20"
        },                
        {
          "value": "24",
          "label": "24"
        },
        {
          "value": "48",
          "label": "48"
        }
      ]
    },
    {
      "type": "select",
      "id": "products_per",
      "label": "Products per row",
      "default": "3",
      "options": [
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        }
      ]
    },
    {
      "type": "header",
      "content": "Sidebar"
    },
    {
      "type": "paragraph",
      "content": "Create a sidebar by adding content blocks."
    },
    {
      "type": "checkbox",
      "id": "toggle",
      "label": "Toggle sidebar content"
    }
  ],
  "blocks": [
    {
      "type": "filter_by_tag",
      "name": "Tag list",
      "settings": [
        {
          "type": "paragraph",
          "content": "Will not display if there are no tags associated with product."
        }
      ],
      "limit": 1
    },
    {
      "type": "filter_by_collection",
      "name": "Collection list",
      "limit": 1
    },
    {
      "type": "filter_by_type",
      "name": "Type list",
      "limit": 1
    },
    {
      "type": "filter_by_vendor",
      "name": "Vendor list",
      "limit": 1
    },
    {
      "type": "menu",
      "name": "Menu",
      "settings": [
        {
          "type": "link_list",
          "id": "custom_menu_linklist",
          "label": "Menu"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Heading"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>Text area can be used for special announcements or general information.</p>"
        }
      ]
    },
    {
      "type": "page",
      "name": "Page",
      "settings": [
        {
          "type": "page",
          "id": "content_page",
          "label": "Page"
        }
      ]
    }
  ],
  "default": {
    "settings": {

    }
  }
}

{% endschema %}

{% assign option_name = 'Color' %}

{% if product.options contains option_name %}

<script>
// Grabbing product thumbnails
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard and many more.
var thumbnails = jQuery('img[src*="/products/"]') /* All product images */
  .not('#related-products img')                   /* Except related products, thumbnails not clickable */
  .not('a[href^="/collections/"] img')            /* Except related products */
  .not('a[href^="/products/"] img')               /* Except mini-cart products */
  .not('header img')                              /* Except mini-cart products, thumbnails not clickable */
  .not('#drawer img')                             /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
  .not(':first');                                 /* Except first one, i.e the main image */
  
var optionSelect; 
{% assign option_index = 0 %}  
{% for option in product.options %}
  {% if option == option_name %}
    {% assign option_index = forloop.index0 %}  
  {% endif %}
{% endfor %}
  
{% if product.options.size == 1 %}
  optionSelect = '.single-option-selector';
{% else %}
  optionSelect = 'label:contains({{ option_name }}) + .single-option-selector';   
{% endif %}
  
jQuery('form[action="/cart/add"]').on('change', optionSelect, function() {
  var optionValue = $(this).val();
  thumbnails.each(function() {
    var wrapper = $(this);
    while ( wrapper.parent().children().length === 1 ) {
      wrapper = wrapper.parent();
    }
    if ( jQuery(this).attr('alt') === optionValue ) {
      wrapper.show();
    }
    else {
      wrapper.hide();
    }
  });
});    
</script>

{% endif %}