【Shopify学習】開発Tips メモ【随時更新】
この記事を書いている僕は、2020年からShopifyエキスパートで働いている現役フロントエンドエンジニアです。
技術ブログをしっかり書こうと思うと、まとまった時間が必要で、書きたいことが書けないので、Shopifyの開発時に習得したテクニックを書けるタイミングでメモしていきます。
ぜひ開発時の参考にしてみてください。
開発したコードをメモできるツール
Notion
今まで、自分用のコードメモとしてboostnoteを使っていましたが、Notionのcodeメモ機能がとても良いので乗り換えました！
使い方も難しくないのでおすすめです。
使い方は、
/code を入力すれば、Codeと出てくるので選択
そして、貼り付け
言語もセレクターで選べるのですごく便利♪
新しくリリースされたテーマ「Expanse」
2年以上ぶりにShopifyの公式テーマストアで新しいテーマがArchetype Themesからリリースされました。Archetype Themesは人気テーマImpulseの開発元で、他Streamline、Motionと３つテーマをすでに開発しているので、安定性抜群です。
そして、これがかなりいいです♪
特徴は、在庫数の多いショップにとって欲しい機能が充実しているところです。
- コレクションページからワンクリックで商品をカートに入れることができる
- 各商品ページにベンダー別のセクションを設置
- メガサーチフィールドでのカスタムフィーチャー製品
- カスタム製品のアップセルをカートに直接表示
- 商品やコンテンツをより見やすくするための予測検索
- 商品/ページにホームページのようなカスタムセクションを追加可能
- セクションやプロモーションにインパクトを与える様々なカラースキームを用意
- 月々のアプリ使用料なしで、簡単にカスタムオーダーできるグループ化されたコレクションフィルター
いやー、充実しすぎ笑
それも納得の元ShopifierでDebutやBrooklynなど、Shopifyのオリジナルクリエーターが作成したとのこと。
使うしかないので、さっそくクライアントに提案しています。
カウントする方法
{% assign loops = 0 %}
まず、変数を作成して、0を代入する。
{% for product in collection.products limit: number_of_related_products %}
{% assign loops = loops | plus: 1 %}
{% endfor %}
for文で回し、１をプラスさせる。
条件文で、その数でなかったらなどにして使用する。
{% if loops != 0 %}
{% endif %}
表示されているページのテンプレート確認方法
Shopifyは、テンプレート言語なので、これめちゃ使える。
納品時にThemeの名前変更と同時に消し忘れ注意です笑
<script>
console.log("template: {{ template }}.liquid");
</script>
該当するテンプレートだけに実装する方法
Shopifyは、テンプレート言語なので、これもめちゃ使える。
例えば、プロダクトページだけにCSSなど反映させたい場合はこれで挟むだけ♪
{% if template == 'product' %}
{% endif %}
theme kit でライブテーマに直接デプロイ・同期する方法
ライブテーマにローカル環境で編集したテーマを直接デプロイ or 同期する場合
theme deploy の場合
% theme deploy --allow-live
theme watch の場合
% theme watch --allow-live
よく忘れるのでメモメモ。
＄の人は、％を変えてもらえれば。
macでもデベロッパツールをF12キーで開きたい
「command」+「option」+「I(i)」の３つのキーを同時押し。
よく忘れるのでメモがわり笑
プログラミングとは？でJSで簡単に説明する方法
スクリプトタグの中に
for(var i=0; i<100; i++)
{
var s;
if(i%10==1)s="おやすみ";
else s="おはよう";
document.write((i+1)+s+"<br>");
}わかりやすかったので、メモ。