Concept: I have built a custom section on the home page that should only show the first variant of products within a collection. NOTE: Gift with purchase is offered with specific variant sizes only, and size varies from product to product.
Attempted Solution: Use “variant.weight” as a selector and only show items where the variant has inventory available and is the correct weight. NOTE: This store will not ship via Shopify & does not need to use weight for shipping purposes.
Issue/Problem: There are blank spots where items in the collection do not qualify either because the variant does not meet the weight requirement or there is no available inventory.
Ask:
- How can I fix this code so that the blank spaces go away? I assume I need to add {% else %} code, but I have no idea what to add to that line. I tried {% continue %} and that did not accomplish what I was looking to accomplish.
- Can I show out-of-stock items as “Sold Out” rather than have them removed? (I realize I wrote the code to remove items with no inventory, I iterate through my code as I am still learning)
- Is there a more elegant fix/solution that I missed?
Site: https://test-store-colleen.myshopify.com/ Password: thanksforyourhelp
{% 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 -%}
{% 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 %}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ product_card_product.vendor }}
{%- endif -%}
{%- if product_card_product.featured_media -%}
###
{{ product_card_product.title | escape }}
{%- 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
{{ block.settings.description | escape }}
{%- 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
%}
{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}
({{ product_card_product.metafields.reviews.rating_count }})
{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
{%- 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 -%}
FREE SHIPPING
{%- 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
-%}
{%- else -%}
##
{{ product_card_product.title }}
{%- endif -%}
{%- if product_card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}
{% comment %}
Code added by Colleen to create add to cart button
{% endcomment %}
{% endif %}
{% endfor %}