ktyr report

Liquid(HTML)

国<select name="address[country]" {% if form.country != blank %}data-default-label="{{ form.country }}{% else %}data-default="Japan{% endif %}">{{ country_option_tags }}</select><br>
都道府県<select name="address[province]" data-default-label="{{ form.province }}"></select>

JavaScript

document.querySelectorAll('[name="address[country]"]').forEach((elm,index)=>{
    elm.addEventListener('change',(e)=>{
        onChangeCountry(e);
    });
});
onChangeCountry(e){
    const option = e.target.querySelector('[value="'+e.target.value+'"]');
    const provinceSelect = e.target.form.querySelector('[name="address[province]"]');
    if(option && provinceSelect){
        let options = [];
        const provinces = JSON.parse(option.dataset['provinces']);
        provinces.forEach((province,index)=>{
            options.push('<option value="'+province[0]+'">'+province[1]+'</option>');
        });
        provinceSelect.innerHTML = options.join('');
    }
}

ブログ記事内やページ内で特定の記述をした部分を特定のhtmlへ変換する機能。

https://github.com/culturekings/shopify-shortcodes
のshortcode-render.liquidとshortcode.liquidをassetsフォルダへ配置

　
templates/article.liquid の記事部分を下記へ書き換える

{% include 'shortcode' load:article.content %}

　
記事編集で下記コードを入力する。xxxxの部分は商品ハンドル

[product_in_blog handle="xxxx"]

　
「product_in_blog」という名称のショートコードを作成する時は、「shortcode-product_in_blog.liquid」というファイルを作成する。

　
引数「handle」を設定する場合、「shortcode-product_in_blog.liquid」で値を取得する処理は下記。

{%- capture product_handle -%}{%- include 'shortcode-render' render:'handle' default:'' -%}{%- endcapture -%}

    {%- assign current = 'now' | date: '%s' -%}
    {%- assign published_at = tmp_product.published_at | date:'%s' -%}
    {%- assign gap = current | minus:published_at -%}
    {%- if gap < xxxx -%}
    //NEWアイコン
    {%- endif -%}

<select name="id" class="js_variantsSelect" data-product="{{ product.id }}">
    {%- for variant in product.variants -%}
        <option value="{{ variant.id }}">{{ variant.title | escape }}</option>
    {%- endfor -%}
</select>

{%- for link in linklists.sidemenu.links -%}
    {%- if link.links.size <= 0 -%}
        子項目が無いとき
    {%- else -%}
    	子項目があるとき
	    {%- for childlink in link.links -%}
	        
	    {%- endfor -%}
    {%- endif -%}
{%- endfor -%}

設定 > 一般設定

ストア通貨

Liquidコード

<p class="price">{{ product.price | money }}</p>
<p class="price">{{ product.price | money_without_currency }}</p>
<p class="price">{{ product.price | money_with_currency }}</p>

出力結果

¥7,800 円(税込)2
7,800
¥7,800 円(税込)1

{%- capture 変数名 -%}dummy520x390.jpg{%- endcapture -%}

{%- capture html_params -%} data-product="{{ product.id }}" data-variant="{{ variant.id }}" style="{{ html_style }}"{%- endcapture -%}

設定 > メタフィールド

商品

定義を追加する

全ての項目へ入力する

入力後保存する

保存後

Liquidコード

<a href="{{ product.url | within: collection }}">
    <div class="image"><img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}"></div>
    <h3>{{ product.title | escape }}</h3>
    {%- if product.metafields.my_fields.cf_text -%}
        <p>{{ product.metafields.my_fields.cf_text.value | escape }}</p>
    {%- else -%}
        <p>あいうえお</p>
    {%- endif -%}
</a>

商品管理画面でカスタムフィールドへ入力

出力結果

tax-text.liquid

{%- if shop.taxes_included -%}（税込）{%- else -%}（税抜）{%- endif -%}

管理画面「設定 > 税金」の「すべての価格を税込価格で表示する」チェックならばshop.taxes_includedはtrue

コレクションページネーション

{%- paginate collections[handle].products by collections[handle].all_products_count -%}
{%- for product in collections[handle].products -%}
//処理
{%- endfor -%}
{%- endpaginate -%}