liquid,Code片段,代码实例,代码示例,代码片段库

liquid Shopify的Facebook Open Graph元标记。将此添加为主题中名为“fb-open-graph.liquid”的片段，然后添加{％include'fb-op

Shopify的Facebook Open Graph元标记。在主题中将其添加为名为“fb-open-graph.liquid”的片段，然后将{％include'fb-open-graph'％}添加到theme.liquid文件中。

fb-open-graph.liquid

{% if template contains 'product' %}
  <meta property="og:type" content="product">
  <meta property="og:title" content="{{ product.title | strip_html | escape }}">
  <meta property="og:category" content="{{ product.type }}" />
  {% for image in product.images limit:3 %}
  <meta property="og:image" content="http:{{ image.src | product_img_url: 'master' }}">
  <meta property="og:image:secure_url" content="https:{{ image.src | product_img_url: 'master' }}">
  {% endfor %}
  <meta property="og:price:amount" content="{{ product.price | money_without_currency | stip_html | escape | remove: ',' }}">
  <meta property="og:price:currency" content="{{ shop.currency }}">
  <meta property="og:availability" content="{% if product.available %}instock{% else %}oos{% endif %}" />
  <meta property="og:description" content="{{ product.description | strip_newlines | strip_html | truncate: 300 | escape }}">
{% elsif template contains 'article' %}
  <meta property="og:type" content="article">
  <meta property="og:title" content="{{ article.title | strip_html | escape }}">
  {% assign img_tag = '<' | append: 'img' %}
  {% if article.content contains img_tag %}
    {% assign src = article.content | split: 'src="' %}
    {% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
    {% if src %}
  <meta property="og:image" content="http:{{ src }}">
  <meta property="og:image:secure_url" content="https:{{ src }}">
    {% endif %}
  {% endif %}
{% else %}
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ page_title | escape }}">
  {% if settings.logo_use_image %}
  <meta property="og:image" content="http:{{ 'logo.png' | asset_url }}">
  <meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}">
  {% endif %}
{% endif %}
{% if page_description and template != 'product' %}
  <meta property="og:description" content="{{ page_description | escape }}">
{% endif %}
  <meta property="og:url" content="{{ canonical_url }}">
  <meta property="og:site_name" content="{{ shop.name }}">

liquid 头

wewewewew

liquid 测试

test.lava

{{ Person.FullName }}

liquid Shopify：列出所有产品图片

是否需要用于设计或开发任务的产品图像？只需使用下面的代码创建一个空白页面和自定义模板，隐藏页面，您就可以使用预览URL通过第三方爬虫（如图像机器人）下载所有图像。

page.listproductimages.liquid

{% for product in collections['all'].products %}
  {% for image in product.images %} 
    <img src="{{ image.src | product_img_url: 'master' }}" /><br/>
  {% endfor %}
{% endfor %}

liquid 检测滚动是否位于页面顶部

检测滚动是否位于页面顶部

header.liquid

<script>

  window.addEventListener("scroll", function (event) {
    var scroll = this.scrollY;
    var negativeScroll = 40 - scroll;
    var negativeScrollWithPixels = negativeScroll + "px"
    var siteHeader = document.getElementById("site-header");
    console.log(scroll, negativeScroll)
    if (scroll <= 40) {
     console.log(negativeScrollWithPixels)
     siteHeader.style.top = negativeScrollWithPixels
    }
    else {
    siteHeader.style.top = "0px";
    }
  });

</script>

liquid 带收音机按钮的产品变体

product-variants-with-radiobuttons.liquid

{% form 'product', product %}
	{% unless product.has_only_default_variant %}
		{% for option in product.options_with_values %}
			<div class="selector-wrapper js">
				{% for value in option.values %}
					<input
						data-single-option-selector
						data-index="option{{ option.position }}"
						id="SingleOptionSelector-{{ option.position }}-{{ forloop.index }}"
						type="radio"
						name="SingleOptionSelector-{{ option.position }}"
						value="{{ value | escape }}"
						{% if option.selected_value == value %}checked="checked"{% endif %}
					/>

					<label for="SingleOptionSelector-{{ option.position }}-{{ forloop.index }}">
						{{ value }}
					</label>
				{% endfor %}
			</div>
		{% endfor %}
	{% endunless %}

	<select name="id" class="no-js" data-product-select>
		{% for variant in product.variants %}
			<option
				{% if variant == current_variant %}selected="selected"{% endif %}
				{% unless variant.available %}disabled="disabled"{% endunless %}
				value="{{ variant.id }}">
					{{ variant.title }}
			</option>
		{% endfor %}
	</select>

	<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
	<input type="number" id="Quantity" name="quantity" value="1" min="1">

	<div data-price-wrapper>
		<span data-product-price>
			{{ current_variant.price | money }}
		</span>

		{% if product.compare_at_price_max > product.price %}
			<span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>

			<s data-compare-price>
				{% if current_variant.compare_at_price > current_variant.price %}
					{{ current_variant.compare_at_price | money }}
				{% endif %}
			</s>
		{% endif %}
	</div>

	<button
		type="submit"
		name="add"
		data-add-to-cart
		{% unless current_variant.available %}disabled="disabled"{% endunless %}>
        <span data-add-to-cart-text>
            {% if current_variant.available %}
				{{ 'products.product.add_to_cart' | t }}
			{% else %}
				{{ 'products.product.sold_out' | t }}
			{% endif %}
        </span>
	</button>
{% endform %}

posts.liquid

{% assign previous_article = nil %}
{% assign previous_handle = blog.next_article.handle %}
{% if previous_handle %}
	{% assign previous_article = articles[previous_handle] %}
{% endif %}

{% assign next_article = nil %}
{% assign next_handle = blog.previous_article.handle %}
{% if next_handle %}
	{% assign next_article = articles[next_handle] %}
{% endif %}

{% unless previous_article %}
	{% assign last_index = blog.articles_count | minus: 1 %}
	{% assign previous_article = blog.articles[last_index] %}
{% endunless %}

{% unless next_article %}
	{% assign next_article = blog.articles[0] %}
{% endunless %}

{% if previous_article.handle == article.handle %}
	{% assign previous_article = nil %}
{% endif %}

{% if next_article.handle == article.handle %}
	{% assign next_article = nil %}
{% endif %}

liquid Shopify替换未列出的符号

replace-symbols.liquid

{% comment %}
  Replace all symbols that not listed in `except_symbols`
{% endcomment %}

{%- assign separator = '%%%' -%}
{%- assign except_symbols = '1234567890.' -%}
{%- assign international_shipping = settings.international_shipping -%}
{%- assign international_shipping_except = except_symbolds | split: '' | uniq | join: separator -%}
{%- assign international_shipping_except = international_shipping_except | split: separator -%}
{%- assign international_shipping_array = settings.international_shipping | split: "" | uniq -%}

{%- for international_shipping_element in international_shipping_array -%}
    {%- unless international_shipping_except contains international_shipping_element -%}
        {%- assign international_shipping = international_shipping | replace: international_shipping_element, '' -%}
    {%- endunless -%}
{%- endfor -%}

{{- international_shipping -}}

liquid 供应商页面

sh-vendor-page

\!h Vendor page example

https://lalondesoakville-demo.myshopify.com/collections/vendors?q=vendor02

\!h template page.vendorlist

{% assign counter = 0 %}
{% for vendor in shop.vendors %}
  {% assign counter = counter | plus: 1 %}
{% endfor %}

{% assign counter_divided_by_3 = counter | divided_by: 3 | floor %}

<ul class="vendor-list block-grid three-up mobile one-up">
{% for product_vendor in shop.vendors %}
{% assign its_a_match = false %}
{% capture my_collection_handle %} {{ product_vendor | handleize | strip | escape  }} {% endcapture %}
{% assign my_collection_handle_stripped = my_collection_handle | strip | escape %}

{% for collection in collections %}
{% if my_collection_handle_stripped == collection.handle %}
{% assign its_a_match = true %}
{% endif %}
{% endfor %}

{% if its_a_match %}
<li class="vendor-list-item"><a href="/collections/{{ product_vendor | handleize }}">{{ product_vendor }}</a></li>
{% else %}
<li class="vendor-list-item">{{ product_vendor | link_to_vendor }}</li>
{% endif %}
{% endfor %}
</ul>

liquid * Shogun * - 数据收集部分

bc-shogun-section-data-collection

<section class="shopping-for blocks-grid">
    <h2 class="heading text-center">
      <span>{{ Subtitle }}</span>
      {{ Title }}
    </h2>
    <div class="row">
        {% for block in Blocks %}
        <div class="small-6 medium-4 columns">
            {% if block.link %}<a href="{{ block.link }}">{% endif %}
            {{ block.image }}
            {% if block.link %}</a>{% endif %}
        </div>
        {% endfor %}
    </div>
</section>

liquid Shopify的Facebook Open Graph元标记。将此添加为主题中名为“fb-open-graph.liquid”的片段，然后添加{％include'fb-op

liquid 头

liquid 测试

liquid Shopify：列出所有产品图片

liquid 检测滚动是否位于页面顶部

liquid 带收音机按钮的产品变体

liquid 获取文章上一篇和下一篇文章

liquid Shopify替换未列出的符号

liquid 供应商页面

liquid * Shogun * - 数据收集部分