Shopify Dawn 主题 - Liquid Question - 空格出现在我的 collections 部分，其中条件尚未满足
Shopify Dawn Theme - Liquid Question - Blank Spaces are showing up in my collections section where conditions have not been met
概念： 我在主页上建立了一个自定义部分，它应该只显示 collection 中的第一个产品变体。注意：购买赠品仅提供特定变体尺寸，尺寸因产品而异。
尝试的解决方案： 使用“variant.weight”作为选择器，仅显示变体有可用库存且重量正确的项目。注意：这家商店不会通过 Shopify 运送，并且不需要使用重量来运送。
Issue/Problem: 有空白点 collection 中的商品不符合条件，要么是因为款式不符合重量要求，要么是没有可用的库存。
询问:
- 如何修改此代码以消除空格？我假设我需要添加 {% else %} 代码，但我不知道该行添加什么。我试过 {% continue %} 但没有完成我想要完成的事情。
- 我可以将 out-of-stock 项显示为“售罄”而不是保留它们吗
删除？ （我意识到我写了代码来删除没有的项目
库存，我在学习过程中遍历我的代码）
- 有没有我错过的更优雅的fix/solution？
站点：https://test-store-colleen.myshopify.com/
密码：thanksforyourhelp
Snap of collection on the home page with the issue
这是代码片段：
{% comment %}
Renders a product card
Accepts:
- product_card_product: {Object} Product Liquid object (optional)
- media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- add_image_padding: {Boolean} Enables padding on the image to space out the grid
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_image_outline: {Boolean} Show card outline. Default: true (optional)
- show_rating: {Boolean} Show the product rating. Default: false
Usage:
{% render 'product-card-gwp', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{%- for variant in product_card_product.variants -%}
{% assign theweight = variant.weight | weight_with_unit: variant.weight_unit %}
{%- if theweight == '9 g' and variant.inventory_quantity != 0 -%}
<div class="card-wrapper">
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% endunless %}
<div class="card-information">
<div class="card-information__wrapper">
{%- if show_vendor -%}
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
{%- endif -%}
{%- if product_card_product.featured_media -%}
<h3 class="card-information__text h5">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title | escape }}
</a>
</h3>
{%- endif -%}
{% capture the_snippet_review_avg %}{% render 'ssw-widget-avg-rate-listing', product: product %}{% endcapture %}
{% unless the_snippet_review_avg contains 'Liquid error' %}
{{ the_snippet_review_avg }}
{% endunless %}
{% comment %} TODO: metafield
<span class="caption-large light">{{ block.settings.description | escape }}</span>
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
<div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
<span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
</div>
<p class="rating-text caption">
<span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
</p>
<p class="rating-count caption">
<span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
<span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
</p>
{%- endif -%}
{% endcomment %}
{% comment %}
Original code NOTE: Also added line for "Free Shipping" below
{% render 'price', product: product_card_product, price_class: '' %}
Colleen modified code below to show the first variant price under the product on the collection gwp page
{% endcomment %}
{% render 'price', product: product_card_product, use_variant: product_card_product.first_available_variant.id, price_class: price--large -%}
<div class="caption-with-letter-spacing light"> FREE SHIPPING </div>
<div class="caption-with-letter-spacing light"> </div>
</div>
</div>
<div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
<div class="card__inner">
{%- if product_card_product.featured_media -%}
{%- liquid
assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio
if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}
<div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
<div class="media media--transparent media--{{ media_size }} media--hover-effect"
{% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
>
<img
srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
src="{{ product_card_product.featured_media | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.featured_media.alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.featured_media.width }}"
height="{{ product_card_product.featured_media.height }}"
>
{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset="{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.media[1] | img_url: 'master' }} {{ product_card_product.media[1].width }}w"
src="{{ product_card_product.media[1] | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.media[1].alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.media[1].width }}"
height="{{ product_card_product.media[1].height }}"
>
{%- endif -%}
</div>
</div>
{%- else -%}
<div class="card__content">
<h2 class="card__text h3">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title }}
</a>
</h2>
</div>
{%- endif -%}
<div class="card__badge">
{%- if product_card_product.available == false -%}
<span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
{%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
{%- endif -%}
</div>
</div>
</div>
</div>
{% comment %}
Code added by Colleen to create add to cart button
{% endcomment %}
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product_card_product.first_available_variant.id }}" />
<input type="hidden" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Buy Now" class="button" />
</form>
{% endif %}
{% endfor %}
这是部分代码：
{% comment %}
also edited en.default.schema.json to add settings for
featured-collection-gwp
{% endcomment %}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>
{%- liquid
assign products_to_display = section.settings.collection.all_products_count
if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
assign more_in_collection = true
endif
-%}
<div class="collection page-width{% if section.settings.swipe_on_mobile == true and section.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
<div class="title-wrapper-with-link{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}>
<h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
{%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
<a href="{{ section.settings.collection.url }}" class="link underlined-link large-up-hide">{{ 'sections.featured_collection.view_all' | t }}</a>
{%- endif -%}
</div>
<slider-component class="slider-mobile-gutter">
<ul id="gwp-section"
class="grid grid--2-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
<li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}" style="text-align:center;">
{% render 'product-card-gwp',
product_card_product: product,
media_size: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
add_image_padding: section.settings.add_image_padding,
show_vendor: section.settings.show_vendor,
show_image_outline: section.settings.show_image_outline,
show_rating: section.settings.show_rating
%}
</li>
{%- else -%}
{%- for i in (1..4) -%}
<li class="grid__item">
{% render 'product-card-placeholder' %}
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
{%- if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}
<div class="slider-buttons no-js-hidden{% if section.settings.collection.all_products_count < 4 %} medium-hide{% endif %}{% if section.settings.collection.all_products_count < 3 %} small-hide{% endif %}">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
<span class="slider-counter--total">{{ products_to_display }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
{%- if section.settings.show_view_all and more_in_collection -%}
<div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
<a href="{{ section.settings.collection.url }}"
class="button"
aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
>
{{ 'sections.featured_collection.view_all' | t }}
</a>
</div>
{%- endif -%}
</div>
{% schema %}
{
"name": "t:sections.featured-collection-gwp.name",
"tag": "section",
"class": "spaced-section",
"settings": [
{
"type": "text",
"id": "title",
"default": "GWP Collection",
"label": "t:sections.featured-collection-gwp.settings.title.label"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection-gwp.settings.collection.label"
},
{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 12,
"step": 2,
"default": 8,
"label": "t:sections.featured-collection-gwp.settings.products_to_show.label"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "t:sections.featured-collection-gwp.settings.show_view_all.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.featured-collection-gwp.settings.header.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection-gwp.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection-gwp.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection-gwp.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection-gwp.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "add_image_padding",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.add_image_padding.label"
},
{
"type": "checkbox",
"id": "show_image_outline",
"default": true,
"label": "t:sections.featured-collection-gwp.settings.show_image_outline.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.show_rating.label",
"info": "t:sections.featured-collection-gwp.settings.show_rating.info"
}
],
"presets": [
{
"name": "t:sections.featured-collection-gwp.presets.name"
}
]
}
{% endschema %}
这里是下面的代码；
在 {% render 'product-card-gwp %} 之前，做一个 if 条件；
{% if condition is met %}
<li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}" style="text-align:center;">
{% render 'product-card-gwp',
product_card_product: product,
media_size: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
add_image_padding: section.settings.add_image_padding,
show_vendor: section.settings.show_vendor,
show_image_outline: section.settings.show_image_outline,
show_rating: section.settings.show_rating
%}
</li>
{% endif %}
另外，使用 variant.weight 和 variant.weight_unit 代替，这会给你更多的灵活性，因为重量是一个数字而不是一个字符串。
{% assign theweight = variant.weight%}
{%- if theweight == 9 and variant.inventory_quantity != 0 -%}
我收到了另一个论坛的建议，建议我在 </body> 标签上方的 theme.liquid 中添加一些代码。
该解决方案有效，但正如发布者所警告的那样，这不是最优雅的解决方案，并且可能会导致其他问题。但是，在这里发帖以防它可以帮助遇到类似问题的其他人。
<style>
</style>
<script>
function removeEmptySpaces(){
var $items = document.querySelectorAll(`#gwp-section .grid__item`);
for (var each of $items){
var $child = each.querySelector(`form`);
if (!$child){
each.remove();
}
}
}
removeEmptySpaces()
</script>
概念： 我在主页上建立了一个自定义部分，它应该只显示 collection 中的第一个产品变体。注意：购买赠品仅提供特定变体尺寸，尺寸因产品而异。
尝试的解决方案： 使用“variant.weight”作为选择器，仅显示变体有可用库存且重量正确的项目。注意：这家商店不会通过 Shopify 运送，并且不需要使用重量来运送。
Issue/Problem: 有空白点 collection 中的商品不符合条件，要么是因为款式不符合重量要求，要么是没有可用的库存。
询问:
- 如何修改此代码以消除空格？我假设我需要添加 {% else %} 代码，但我不知道该行添加什么。我试过 {% continue %} 但没有完成我想要完成的事情。
- 我可以将 out-of-stock 项显示为“售罄”而不是保留它们吗 删除？ （我意识到我写了代码来删除没有的项目 库存，我在学习过程中遍历我的代码）
- 有没有我错过的更优雅的fix/solution？
站点：https://test-store-colleen.myshopify.com/ 密码：thanksforyourhelp
Snap of collection on the home page with the issue
这是代码片段：
{% comment %}
Renders a product card
Accepts:
- product_card_product: {Object} Product Liquid object (optional)
- media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- add_image_padding: {Boolean} Enables padding on the image to space out the grid
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_image_outline: {Boolean} Show card outline. Default: true (optional)
- show_rating: {Boolean} Show the product rating. Default: false
Usage:
{% render 'product-card-gwp', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{%- for variant in product_card_product.variants -%}
{% assign theweight = variant.weight | weight_with_unit: variant.weight_unit %}
{%- if theweight == '9 g' and variant.inventory_quantity != 0 -%}
<div class="card-wrapper">
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% endunless %}
<div class="card-information">
<div class="card-information__wrapper">
{%- if show_vendor -%}
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
{%- endif -%}
{%- if product_card_product.featured_media -%}
<h3 class="card-information__text h5">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title | escape }}
</a>
</h3>
{%- endif -%}
{% capture the_snippet_review_avg %}{% render 'ssw-widget-avg-rate-listing', product: product %}{% endcapture %}
{% unless the_snippet_review_avg contains 'Liquid error' %}
{{ the_snippet_review_avg }}
{% endunless %}
{% comment %} TODO: metafield
<span class="caption-large light">{{ block.settings.description | escape }}</span>
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
<div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
<span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
</div>
<p class="rating-text caption">
<span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
</p>
<p class="rating-count caption">
<span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
<span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
</p>
{%- endif -%}
{% endcomment %}
{% comment %}
Original code NOTE: Also added line for "Free Shipping" below
{% render 'price', product: product_card_product, price_class: '' %}
Colleen modified code below to show the first variant price under the product on the collection gwp page
{% endcomment %}
{% render 'price', product: product_card_product, use_variant: product_card_product.first_available_variant.id, price_class: price--large -%}
<div class="caption-with-letter-spacing light"> FREE SHIPPING </div>
<div class="caption-with-letter-spacing light"> </div>
</div>
</div>
<div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
<div class="card__inner">
{%- if product_card_product.featured_media -%}
{%- liquid
assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio
if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}
<div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
<div class="media media--transparent media--{{ media_size }} media--hover-effect"
{% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
>
<img
srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
src="{{ product_card_product.featured_media | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.featured_media.alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.featured_media.width }}"
height="{{ product_card_product.featured_media.height }}"
>
{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset="{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.media[1] | img_url: 'master' }} {{ product_card_product.media[1].width }}w"
src="{{ product_card_product.media[1] | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.media[1].alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.media[1].width }}"
height="{{ product_card_product.media[1].height }}"
>
{%- endif -%}
</div>
</div>
{%- else -%}
<div class="card__content">
<h2 class="card__text h3">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title }}
</a>
</h2>
</div>
{%- endif -%}
<div class="card__badge">
{%- if product_card_product.available == false -%}
<span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
{%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
{%- endif -%}
</div>
</div>
</div>
</div>
{% comment %}
Code added by Colleen to create add to cart button
{% endcomment %}
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product_card_product.first_available_variant.id }}" />
<input type="hidden" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Buy Now" class="button" />
</form>
{% endif %}
{% endfor %}
这是部分代码：
{% comment %}
also edited en.default.schema.json to add settings for
featured-collection-gwp
{% endcomment %}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>
{%- liquid
assign products_to_display = section.settings.collection.all_products_count
if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
assign more_in_collection = true
endif
-%}
<div class="collection page-width{% if section.settings.swipe_on_mobile == true and section.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
<div class="title-wrapper-with-link{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}>
<h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
{%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
<a href="{{ section.settings.collection.url }}" class="link underlined-link large-up-hide">{{ 'sections.featured_collection.view_all' | t }}</a>
{%- endif -%}
</div>
<slider-component class="slider-mobile-gutter">
<ul id="gwp-section"
class="grid grid--2-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
<li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}" style="text-align:center;">
{% render 'product-card-gwp',
product_card_product: product,
media_size: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
add_image_padding: section.settings.add_image_padding,
show_vendor: section.settings.show_vendor,
show_image_outline: section.settings.show_image_outline,
show_rating: section.settings.show_rating
%}
</li>
{%- else -%}
{%- for i in (1..4) -%}
<li class="grid__item">
{% render 'product-card-placeholder' %}
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
{%- if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}
<div class="slider-buttons no-js-hidden{% if section.settings.collection.all_products_count < 4 %} medium-hide{% endif %}{% if section.settings.collection.all_products_count < 3 %} small-hide{% endif %}">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
<span class="slider-counter--total">{{ products_to_display }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
{%- if section.settings.show_view_all and more_in_collection -%}
<div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
<a href="{{ section.settings.collection.url }}"
class="button"
aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
>
{{ 'sections.featured_collection.view_all' | t }}
</a>
</div>
{%- endif -%}
</div>
{% schema %}
{
"name": "t:sections.featured-collection-gwp.name",
"tag": "section",
"class": "spaced-section",
"settings": [
{
"type": "text",
"id": "title",
"default": "GWP Collection",
"label": "t:sections.featured-collection-gwp.settings.title.label"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection-gwp.settings.collection.label"
},
{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 12,
"step": 2,
"default": 8,
"label": "t:sections.featured-collection-gwp.settings.products_to_show.label"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "t:sections.featured-collection-gwp.settings.show_view_all.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.featured-collection-gwp.settings.header.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection-gwp.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection-gwp.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection-gwp.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection-gwp.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "add_image_padding",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.add_image_padding.label"
},
{
"type": "checkbox",
"id": "show_image_outline",
"default": true,
"label": "t:sections.featured-collection-gwp.settings.show_image_outline.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.show_rating.label",
"info": "t:sections.featured-collection-gwp.settings.show_rating.info"
}
],
"presets": [
{
"name": "t:sections.featured-collection-gwp.presets.name"
}
]
}
{% endschema %}
这里是下面的代码；
在 {% render 'product-card-gwp %} 之前，做一个 if 条件；
{% if condition is met %}
<li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}" style="text-align:center;">
{% render 'product-card-gwp',
product_card_product: product,
media_size: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
add_image_padding: section.settings.add_image_padding,
show_vendor: section.settings.show_vendor,
show_image_outline: section.settings.show_image_outline,
show_rating: section.settings.show_rating
%}
</li>
{% endif %}
另外，使用 variant.weight 和 variant.weight_unit 代替，这会给你更多的灵活性，因为重量是一个数字而不是一个字符串。
{% assign theweight = variant.weight%}
{%- if theweight == 9 and variant.inventory_quantity != 0 -%}
我收到了另一个论坛的建议，建议我在 </body> 标签上方的 theme.liquid 中添加一些代码。
该解决方案有效，但正如发布者所警告的那样，这不是最优雅的解决方案，并且可能会导致其他问题。但是，在这里发帖以防它可以帮助遇到类似问题的其他人。
<style>
</style>
<script>
function removeEmptySpaces(){
var $items = document.querySelectorAll(`#gwp-section .grid__item`);
for (var each of $items){
var $child = each.querySelector(`form`);
if (!$child){
each.remove();
}
}
}
removeEmptySpaces()
</script>