Shopify

[Liquid]在庫判定

{% if variant.inventory_management == blank or variant.inventory_policy == "continue" or 0 < variant.inventory_quantity %}
//在庫を追跡しないor在庫切れでも販売を続けるor在庫あり
{% else %}
//在庫なし
{% endif %}

[JavaScript]ShopifyCartAPIを叩く(update.js)

let sendData = {
    updates : {}
};
this.deleteItems.forEach((item,index)=>{
    sendData.updates[item.key] = 0;
});
let options = {
    method  : 'POST',
    credentials: 'same-origin',
    headers : {
        'Content-Type': 'application/json'
    },
    body    : JSON.stringify(sendData)
};
fetch(window.Shopify.routes.root+'cart/update.js',options)
.then((response)=>{
    if (!response.ok) {
        throw new Error();
    }
    return response.json;
})
.then((json)=>{
    this.finishFetch(2);
})
.catch((error)=>{
    console.log(error);
});

[JavaScript]ShopifyCartAPIを叩く(change.js)

let sendData = {
    id         : item.key,
    quantity   : item.quantity,
    properties : {}
};
item.properties.forEach((property,index)=>{
    sendData.properties['プロパティ'+(index+1)] = property.value;
});
let options = {
    method       : 'POST',
    credentials  : 'same-origin',
    headers : {
        'Content-Type' : 'application/json'
    },
    body         : JSON.stringify(sendData)
};
fetch(window.Shopify.routes.root+'cart/change.js',options)
.then((response)=>{
    if (!response.ok) {
        throw new Error();
    }
    return response.json;
})
.then((json)=>{
    this.finishFetch();
})
.catch((error)=>{
    console.log(error);
});

[Shopify][JavaScript]住所編集の国で都道府県更新

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('');
    }
}

[Liquid]ショートコード

ブログ記事内やページ内で特定の記述をした部分を特定の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 -%}

 

[Liquid]バリエーション選択select

<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>

[Liquid]メニュー

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

[Shopify]ストア通貨フォーマット

設定 > 一般設定



 

ストア通貨



 

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