Shopify 产品页面以隐藏变体图像

Question

我对 Shopify 有点陌生，过去一周左右我一直在玩它，但在尝试解决我的问题时没有取得多大成功。

我目前正在使用 Brooklyn 模板，它们表示产品页面的方式并不能准确地提供最佳用户体验。默认情况下，它表示图像的方式是始终向客户显示所有产品变体图像，即使他实际上并没有纠察该变体（即产品的特定颜色）。它还以垂直方式显示所有产品图像，如果每个产品变体有超过几张图片，这会使用户导航非常沮丧。

我在网上找到了一个教程 (http://littlesnippets.ca/blogs/tutorials/15665261-grouping-images-with-variants)，该教程解决了我的部分问题，即隐藏客户未选择的变体图片，并在用户点击后显示。（您可以在这里查看我想要的示例http://group-variant-images.myshopify.com/collections/frontpage/products/anson-chair）。这或多或少是我网站现在的样子 (https://themes.shopify.com/themes/brooklyn/styles/brooklyn/preview)。

问题在于，该教程被应用于一个没有使用 Ii 所做的确切主题/功能的网站，尽管它是相似的。 我未能将这些更改应用于我的主题，有人可以帮我吗？

这是我现在的 product.liquid 代码：

<!-- /templates/product.liquid -->

<div itemscope itemtype="http://schema.org/Product">

<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

{% assign current_variant = product.selected_or_first_available_variant %}

<div class="grid product-single">
<div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
  <div class="product-single__photos">
    {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

    {% comment %}
      Display current variant image, or default first
    {% endcomment %}
    <div class="product-single__photo-wrapper">
      <img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
    </div>

    {% comment %}
      Display rest of product images, not repeating the featured one
    {% endcomment %}
    {% for image in product.images %}
      {% unless image contains featured_image %}
        <div class="product-single__photo-wrapper">
          <img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
        </div>
      {% endunless %}
    {% endfor %}
  </div>
</div>

<div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
  <div class="product-single__meta">
    {% if settings.product_vendor_enable %}
      <h2 class="product-single__vendor" itemprop="brand">{{ product.vendor }}</h2>
    {% endif %}

    <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      {% comment %}
        Optionally show the 'compare at' or original price of the product.
      {% endcomment %}

      {% if product.compare_at_price_max > product.price %}
        <span class="product-single__price--wrapper">
          <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
          <span id="ComparePrice" class="product-single__price--compare-at">
            {% if current_variant.compare_at_price > current_variant.price %}
              {{ current_variant.compare_at_price | money }}
            {% endif %}
          </span>
          <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        </span>
      {% endif %}

      <span id="ProductPrice" class="product-single__price{% if product.compare_at_price > product.price %} on-sale{% endif %}" itemprop="price">
        {{ current_variant.price | money }}
      </span>

      <hr class="hr--small">

      <meta itemprop="priceCurrency" content="{{ shop.currency }}">
      <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

      <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-single__form" id="AddToCartForm">
        <select name="id" id="ProductSelect" class="product-single__variants">
          {% for variant in product.variants %}
            {% if variant.available %}
              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
            {% else %}
              <option disabled="disabled">
                {{ variant.title }} - {{ 'products.product.sold_out' | t }}
              </option>
            {% endif %}
          {% endfor %}
        </select>

        {% comment %}
        <div class="product-single__quantity">
          <label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
          <input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
        </div>
        {% endcomment %}

        <div class="product-single__add-to-cart">
          <button type="submit" name="add" id="AddToCart" class="btn">
            <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
          </button>
        </div>
      </form>

    </div>

    <div class="product-single__description rte" itemprop="description">
      {{ product.description }}
    </div>

    {% if settings.social_sharing_products %}
      {% include 'social-sharing' %}
    {% endif %}
  </div>
</div>
</div>
{% if collection %}
<hr class="hr--clear">
<div class="text-center">
  <a href="{{ collection.url }}" class="return-link">&larr; {{ 'products.general.collection_return' | t: collection: collection.title }}</a>
</div>
{% endif %}

</div>

{% comment %}

*IMPORTANT:*
This theme uses a customized version of `option_selection.js` to support    using radio inputs for color and size variants. The custom version is in `variant_selection.js`.

If you wish to enable the default dropdowns for size and color
you can change the liquid asset tag below from:

{{ 'variant_selection.js' | asset_url | script_tag }}

to

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

 If you use the default `option_selection.js` the labels for the dropdowns will  appear outside the dropdown.

You will also need to change `.radio-wrapper` to `.selector-wrapper` below.

{% endcomment %}
{{ 'variant_selection.js' | asset_url | script_tag }}
<script>
var selectCallback = function(variant, selector) {
timber.productPage({
  money_format: "{{ shop.money_format }}",
  variant: variant,
  selector: selector,
  translations: {
    addToCart : {{ 'products.product.add_to_cart' | t | json }},
    soldOut : {{ 'products.product.sold_out' | t | json }},
    unavailable : {{ 'products.product.unavailable' | t | json }}
  }
});
};

jQuery(function($) {
new Shopify.OptionSelectors('ProductSelect', {
  product: {{ product | json }},
  onVariantSelected: selectCallback,
  enableHistoryState: true
});

// Add label if only one product option and it isn't 'Title'. Could be 'Size'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
  $('.radio-wrapper:eq(0)').prepend('<label for="ProductSelect-option-0"    class="single-option-radio__label">{{ product.options.first | escape }} </label>');
{% endif %}

// Hide drop-down selectors if we only have 1 variant and its title contains 'Default'.
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
  $('.selector-wrapper').hide();
{% endif %}
 });
</script>

Answer 1

Shopify 的管理界面仅允许每个变体使用一张产品图片。出于这个原因，做你想做的事情并不像你希望的那么容易。通过 Shopify API，您可以将 metafields 添加到 products 和 product variants，在这些 metafields 中，您可以存储您想要的任何信息——包括指向其他​​图像的链接。以下是关于变体的metafields 文档的链接：https://docs.shopify.com/api/reference/product_variant

由于管理界面实际上并不能让您直接修改元字段，因此您有两种选择：

1. 花费时间和精力（或金钱）将您自己的管理工具连接到 API 并自行修改。
2. 从 Shopify 应用商店购买已经为您提供此功能的应用。以下是其中一些应用程序的链接，可以引导您朝着正确的方向前进：https://apps.shopify.com/search/query?utf8=%E2%9C%93&q=variant

无论哪种方式，您都需要提出某种属性名称约定，以便知道您正在处理图像，因为metafields 接受您想要放入其中的任何内容。

一旦您能够为您的产品变体定义图像，您就需要更新您的 Liquid/javascript 中的逻辑以实现所需的功能。您可以通过几种不同的方式做到这一点，不同的人会根据 SEO 有不同的意见，但我对阻力最小的路径的建议是这样做：

{% for v in product.variants %}
  <div id="variant_{{ v.id }}">
    {% for m in v.metafields %}
      {% if m.key contains "WHATEVER_CONVENTION_YOU_USED_TO_DENOTE_IMAGES" %}
        {% comment %}
          OUTPUT THE IMAGE TAG - PROBABLY WRAPPED IN AN ANCHOR
        {% endcomment %}
      {% endif %}
    {% endfor %}
  </div>
{% endfor %}

您需要结合一些逻辑来根据变体显示和隐藏 div。注意<div id="variant_{{ v.id }}">

使用这种方法而不是使用 api 来填充 js 对象的原因是您的链接已经在 DOM 中，并且您可以在页面加载时创建 javascript 处理程序。如果您等到用户选择变体后再填充图像和链接，那么您将不得不处理动态创建的节点的事件处理。

希望所有这些都能引导您朝着正确的方向前进。如果您有任何问题或需要帮助，请随时通过我的个人资料与我联系。

附加说明：优秀的软件开发人员会注意到上面代码中的 O(n^2) 时间复杂度。 Shopify 在页面加载时不会执行您的后端代码，而是在您的主题上传或修改时执行和缓存。因此，糟糕的 O(n^2) 时间复杂度不会影响您的页面加载性能。

作为一个有趣的事实，这就是 Shopify 无法为 current_time 或 random 等内容创建 Liquid 标签的原因。他们的缓存机制即使在 Shark Tank 上呈现时也能防止网站崩溃，这也依赖于他们的液体标签、过滤器和块不返回可变结果的事实。因此，他们可以缓存生成的 HTML 并直接从他们的缓存服务器中提供它……因此，像 random 或 current_time 这样的标签只会有机会运行一次。

Answer 2

您可以尝试variant-image-automator 付费应用。这会从产品页面中隐藏不必要的图像。