Shopify Product Page隱藏變形圖片

Question

我是Shopify的新手，我一直在玩這個星期左右，但在嘗試解決我的問題時沒有取得太大的成功。

我目前使用的是布魯克林模板，它們代表產品頁面的方式並不能提供最佳的用戶體驗。默認情況下代表圖像的方式是將所有產品變體圖像始終顯示給客戶，即使他沒有實際糾正該變體（即產品的特定顏色）也是如此。它還以垂直方式顯示所有產品圖像，這使得用戶的導航非常令人沮喪，因爲如果每種產品型號都有不止兩張照片的話。

我在網上發現了一個教程（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

由於管理界面並沒有真正給你直接修改metafields的能力，你有兩個選擇：

1. 支出將自己的管理工具連接到API並自行修改它的時間和精力（或金錢）。
2. 從Shopify應用商店購買一個已經爲您做到這一點的應用。下面是其中一些應用程序應該引導你在正確的方向的一個鏈接：https://apps.shopify.com/search/query?utf8=%E2%9C%93&q=variant

無論哪種方式，你需要拿出某種屬性命名約定的，所以你知道你處理圖像，因爲metafields接受任何你想放入它們的感覺。

一旦您能夠爲產品變體定義圖像，那麼您需要更新liquid/javascript中的邏輯來完成所需的功能。你可以這樣做幾種不同的方式，不同的人會根據搜索引擎有不同的意見，但我的阻力最小的路徑的建議是做這樣的事情：

{% 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。請注意0​​

此方法的原因而不是使用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付費應用程序。這會隱藏產品頁面中不必要的圖像。