投稿者「chioli」のアーカイブ

Shopifyに独自の入力項目を追加する方法(フォーム項目、ファイルアップロード機能)

記事を読む前に…。
実はこの記事の文章書いたの、一年以上前でした。
ずっとEvernoteに眠っておりました…。
少し情報が古いかもしれないけど、まぁ使えるんじゃないかな。
アップデートすることもあるかも。

Shopifyの商品に、独自で入力欄を追加して欲しいという要望があったので忘備録だよー。
今回は通常のテキストボックスなんかのフォーム項目と、ファイルアップロード機能を追加しています。
ファイルアップロードが曲者だけど、意外となんとかなる。
さあいってみましょう。

まずは商品ページ用にオリジナルのテンプレートを追加。

  1. テーマのtemplates/product.liquidを複製
  2. 複製したファイル名をproduct.hoge.liquidに変更
  3. 作ったファイルを開いて、「{% section ‘product-template’ %}」を検索
  4. 「{% section ‘product-hoge-template’ %}」に変更して保存
  5. テーマのsections/product-template.liquidを複製
  6. 複製したファイル名をproduct-hoge-template.liquidに変更

追加するフォーム項目を作るよ。

  1. Line Item Property – Shopify UI Elements Generator にアクセス。Shopify公式のフォーム項目生成ツールだよ。ここで生成できるのは通常のフォーム項目のみ
  2. Set your form field のところで作成したい部品を生成。右のPreviewで実際の表示が確認できるよ
  3. 出来たら下部のGrab your codeにあるコードをコピー

作ったフォーム項目をテンプレートに入れるよ。

  1. さっき作ったsections/product-hoge-template.liquidを開きます
  2. 「type=”submit”」を検索。これがある箇所が「カートに追加」ボタンの場所
  3. ↑より前に、コピーしたコードを追加
  4. (これはオプション)ペーストされたコードはpタグで囲まれてるので、気になる人はdivタグなどに直しておこう

ファイルアップロード機能を追加したい人はさらに下記をどうぞ。

  1. さっき作ったsections/product-hoge-template.liquidを開きます
  2. 「form ‘product’, product, class: form_class 」を検索、テーマによってはHTMLのformタグになってるかも
  3. コード内に「, enctype: ‘multipart/form-data’」を追加。HTMLのformタグになってる場合は「 enctype=”multipart/form-data”」って入れてね。
  4. もしコード内に「novalidate」がある場合はとっておいたほうが良いみたい…。自分が触ったコードにはnovalidateなかったので未確認。
  5. 「type=”submit”」を検索。これがある箇所が「カートに追加」ボタンの場所
  6. ↑より前に、下記のコードを追加。
<div class="line-item-property__field">
    <label for="custom_photo">ほげ</label>
     <input required class="required" id="custom_photo" type="file" name="properties[ほげ]" class="product-form__input">
</div>

上記は必須入力項目になってるので、必須にしなくていい人はinputタグから「required class=”required”」を抜いてちょ。

ここまで出来たら、商品に独自のテンプレートを適用させてみよう。

  1. 修正したテーマをtheme kitなりなんなりでShopifyにアップロードしとく
  2. Shopify管理画面の商品管理から、独自の入力項目を表示させたい商品をクリック
  3. ページ右下の「テーマテンプレート」のドロップダウンから、「product.hoge」を選択
  4. 実際の商品ページに追加した項目が表示されていればOK!

※ファイルアップロードが出来ない場合は記事の最後の方にヒントを書いてみたよ。確認してみてね。

どうせならカートにもカスタマイズ項目の内容を表示したいよね。
さあやってみよう。既に表示されてる人は下記抜かしてOK!

  1. sections/cart-template.liquid を開くよ。ない場合はtemplates/cart.liquidかも。
  2. 「{{ item.product.title }}」で検索。
  3. 検索したコードの下に、下記をコピペしてね
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
  {% for p in item.properties %}
    {% assign first_character_in_key = p.first | truncate: 1, '' %}
    {% unless p.last == blank or first_character_in_key == '_' %}
      {{ p.first }}:
      {% if p.last contains '/uploads/' %}
        <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
        {{ p.last }}
      {% endif %}
      <br>
    {% endunless %}
  {% endfor %}
{% endif %}

修正したテーマをアップロードして表示確認してみよう。
これでカートにも入力した項目が表示されているはず。やったね!

さらにさらに、お客さんとスタッフに送られる購入通知メールにもカスタマイズした内容を表示させちゃうよ!

  1. 管理画面から「設定>通知」を開く。
  2. 注文管理の注文の確認(一番上)を開くよ。これがお客さんに送られるメール。
  3. メール本文 (HTML)内を「{{ line.title }}」で検索。表示されない場合はカギカッコをとってみたりしてみてね。 
  4. 検索したコードの下に、下記をコピペしてね。
<span class="order-list__item-variant">
{% for p in line.properties %}
    {% unless p.last == blank %} / {{ p.first }} :
        {% if p.last contains '/uploads/' %}
            <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
        {% else %}
            {{ p.last }}
        {% endif %}          
    {% endunless %}
{% endfor %}
</span><br/>

保存して、もう一つスタッフに送られるメールも直すよ。

  1. 管理画面から「設定>通知」を開く。
  2. スタッフ注文通知の新しい注文を開くよ。
  3. 上記同様メール本文 (HTML)内を「{{ line.title }}」で検索。みつけたらすぐ下に同じコードをコピペしよう。

保存したら、実際にテスト注文をしてみよう。
メール内にカスタムで追加した内容が表示されてればおっけー!

ちなみに、Shopifyにファイルアップロード機能を追加しても、特に追加料金はかからないみたい。
有料アプリで対応するとなると結構な月額費用が取られちゃうので、できればコードで解決してあげれると良いよね。

ファイルアップロードが出来ない場合

ファイルアップロードの項目は表示されているのに、アップロードされていないっぽい場合。商品をカートに入れる動作がajaxで制御されていないかな?
ajaxだとファイルアップロードがうまく動かないみたいなので、ページ遷移の方法に変更しよう。
ページ遷移への変更方法はテーマによってまちまちだと思うけど、管理人の使っていたテーマは管理画面のテーマカスタマイズから変更できた。
theme.js内のajax制御をコメントアウトしたら出来たって報告も見つけたので、参考にしてみてー(この記事最後で紹介している参考サイト一覧の、最後のサイトだよ)。

参考にさせていただいたサイト

日本語で画像つきで詳しく解説してくれているサイト。ほんっとありがとうございます!
Shopifyの商品ページにカスタム内容の入力フォームを追加する | グラフィックデザイナー奮闘記
Shopifyの商品ページにデータアップロード用のボタンを用意する | グラフィックデザイナー奮闘記

Shopify公式が解説しているカスタマイズ方法、懇切丁寧
Product pages – Get customization information for products – Shopify Community

ファイルアップロードでひっかかったときに参考にしたShopify Communityのスレ
Customers to upload image – Shopify Community
Solved: Custom File Upload Not Showing In Cart – Shopify Community

Shopifyのテーマカスタマイズ画面にフォントピッカーを追加する方法

備忘録でっす。

テーマカスタマイズ画面にフォントピッカーを追加する

今回は無料テーマのDebutの「テキストオーバーレイ付き画像」セクションを改造しちゃうぞ~。

  1. フォントピッカーを追加したいセクションのテーマファイルを探すよ。
    sectionsフォルダ内にあるはずだよ。「テキストオーバーレイ付き画像」の場合はhero.liquidって名前です。
  2. ファイルを開いたら下記を探すよ。
{% schema %}

hoge

{% endschema %}
  1. すでにカスタマイズ画面に出ている機能がずらりと並んでいるはず。
  2. 括弧の位置に注意しながら、フォントピッカーを追加したいところにコードを書いていくよ。
{
    "name": "Typography",
    "settings": [

        /* ↓↓ ここに入れるよ~ ↓↓ */

        {
            "type":    "font_picker",
            "label":   "Heading font",
            "id":      "heading_font",
            "default": "helvetica_n4"
        }

        /* ↑↑ ここに入れたよ~ ↑↑ */
    ]
}
  1. ファイルを保存してshopifyにテーマをアップロード。Shopifyのテーマキット使ってると簡単だよ。
  2. もしかしたらスキーマがどうこうってエラーが出るかも。いちどShopifyの管理画面に行きます。
  3. 管理画面からテーマのカスタマイズを選ぶよ。
  4. フォントピッカーを追加したセクションを開くよ。ちゃんとフォントピッカーが表示されてればおk。
  5. 適当なフォントを選択して保存するよ。
  6. Shopifyのテーマキットを使ってる人は、いちどtheme downloadしときましょう。
  7. テーマファイルのconfig/settings_data.jsonを開くよ。
  8. さっき追加したフォントピッカーの値がちゃんとあればばっちり!どこにあるかはセクションによって違うよ。「テキストオーバーレイ付き画像」に追加した人はこのへんにあるはず↓
︙
    "sections": {

︙

      "hero": {
        "type": "hero",
        "settings": {
          "heading_font": "itc_stone_informal_n4"
        }
      },
︙
  1. これでフォントピッカーを使えるようになったよ。

選んだフォントをデザインに反映するよ~

選んだフォントをデザインに適用してみよう~。

残念なことに、スタイルシート用のtheme.scss.liquidファイルからはセクション内でカスタマイズした値を読めないっぽいんだ 😥
しゃーないので、セクションのテーマファイルの中に直接CSSを書いちゃうよ!

  1. さっきフォントピッカーを追加したliquidファイルを開いてね。
  2. 下記を適当な位置に入れてあげます。
<style>
{% assign sample_heading_font = section.settings.heading_font %}
{{ sample_heading_font | font_face }}
</style>
  1. これでさっき選んだフォントが@font-faceで読み込まれて、指定できるようになるよ。
  2. フォントを使いたいタグに下記を入れてあげましょう。classやidでの指定がいい人はそうしてね。
<h2 style="font-family:' {{ sample_heading_font.family }};'">
  1. 保存したらテーマをアップロードするよー。
  2. さて実際のサイトで表示してみましょう。うまく適用されてるかな??

めっちゃ参考になるサイト様

Configuring theme settings ・ Shopify Help Center
The font object ・ Shopify Help Center
Fonts ・ Shopify Help Center
Shopify’s font library ・ Shopify Help Center
Liquid Font filters in Shopify ? Avada Commerce
Unable to access section setting in sections.scss file ・ Issue #714 ・ Shopify/slate ・ GitHub

Shopifyのフォントライブラリー、すごい色々選べるから、使いこなせれば管理画面から簡単にデザインの変更できてお客さんハッピーになれるだろうな。
まだまだ奥が深いぜShopify。

Shopifyのテーマをローカルで開発するのに超絶便利なTheme Kitの使い方

Theme Kitとは?

Shopifyが提供している、開発者用のコマンドラインツールです。

https://shopify.github.io/themekit/

Theme Kitをダウンロード

「Installation」のセクションから、お使いの環境に合ったTheme Kitをダウンロードします。
コマンドラインに慣れている素敵な貴方はコマンドラインから。
お願いだからexeファイルください…とヨボヨボな貴方と私は「Manual Installation」しましょうね。

Theme Kitのインスコ

管理人はWindowsユーザーなので、Windowsの解説しますよー。

  1. program filesフォルダの中に「Theme Kit」フォルダ作ります。名前はなんでも大丈夫だよ。
  2. さっきダウンロードしたtheme.exeを作ったフォルダにぶち込みます。
  3. パスを通します。環境変数ってやつだね。英語だけどここがスクショ付きで説明しているのでわかりやすいです。
    pathのところに「C:\Program Files\Theme Kit」が追加されれば大丈夫!
  4. Powershell(かコマンドプロンプト)を立ち上げて、下記コマンドを打ってみましょう。
    theme
    theme kitの説明がずら~と表示されればインスコ成功です!

macやlinuxの方は下記を参照にがんばって。

Linux & macOS

Download the themekit binary that works for your system.
Compare checksums of the binary by running md5 theme
Put the binary on your path. We recommend somewhere like /usr/local/bin
Ensure that it works as expected by running theme version

APIアクセス権をもらうよ

Shopifyの管理画面から、APIでアクセスするための設定をします。
Theme Kitのページに、すんごいわかりやすいgifがあるので参考にしてね。

  1. 管理画面から「Apps > Manage private apps」
  2. 「Create a new private app」をクリック、下の方に小さくあるよ。
  3. Private App Name(なんでもいいです。Theme Kit Accessとかでいんじゃない。)と自分のメアドを入力。
  4. 「Theme templates and theme assets」の権限を「Read and write」に設定
  5. 「Save」を押下。

Shopifyとローカルをつなげちゃうよ

  1. Shopifyのテーマを保存したい場所にフォルダを作ります。
  2. そのフォルダでPowershellを立ち上げます。フォルダ上で「shift+右クリック>この場所でpowershellを開く」で開けるよ。
  3. つなげてみましょう。下記コマンドを打つよ!
    theme configure --password=[APIのパスワード] --store=[shopifyストアのURL(hoge.myshopify.com)] --themeid=[テーマのID(※)]
    ※ テーマのIDは管理画面でテーマのカスタマイズ開いたときのURLでわかります。数字が並んでいる箇所がテーマIDだよ。
  4. config.ymlファイルができているはずです。

Shopifyからテーマをダウンロードしてみよう

  1. 下記コマンドを打つよ。
    theme download
  2. テーマのダウンロードが始まります。
  3. パーセンテージが100%になったらフォルダを確認してみよう。Shopifyからテーマファイルがダウンロードされているはず。

Shopifyと同期してみよう

この機能がマジ神です。
ローカルでファイルを変更すると、Shopifyにダイレクトに反映されます。

  1. 下記コマンドを打つよ。
    theme watch
  2. ローカルでなにかファイルを変更してみましょう。
  3. ファイルを保存すると、自動でファイルがアップロードされます。Powershellにもログが出ているよ。
  4. Shopify上で表示を確認してみましょう。変更されたかな?
  5. 同期の終了は「ctrl+c」です。

神動画

イケメンがShopify Theme Kitの使い方を手取り足取り教えてくれます。
この人若いっぽいのに有能…すごい…!!

セルフジェル 10-3

image

久しぶりの投稿ですが何食わぬ顔ではじめます。

セルフネイル、一年半ぶりに再開してます。
これは3回目のリペア。
ラメ乗っけるだけなので両手で1時間くらいで終わります。かんたん。

捨てた

本2冊。自炊でデジタル化したので本体はポイ。

タッパーの蓋。何個か本体だけ割れて捨てていたけど、蓋はまだ捨ててなかった。

ショーパン

ニーソ3つ。日本でストッキング代わりに(お見せするの申し訳ないので絶対領域は見えないように)履いてたけど、こっちじゃ使わぬ。

キャミ1つ

ボロボロになったTシャツ。ウェスに。

腕時計。お気に入りだったけど文字盤が壊れて、かつ電池もなくなった。

ずっと昔のシェアメイトが置いていった扇風機。使わないしでかいのに数年我が家に鎮座。邪魔なのでさようなら。

ぶっこわれた製氷器

ぶっこわれた電気ケトル

テンション高いニット。もう着ないので寄付

タートルネック3枚。真冬の日本に帰ったときに買ったけど、こっちじゃぜんぜん着ないので寄付。

ユニクロフリース。もともと貰い物で気に入ってなかった上、十分部屋着として着たので寄付。

豪のパスポート申請テラ細かす その2

豪のパスポート申請テラ細かす で、いかに面倒かをお伝えいたしましたが、その後更に3回郵便局に足を運ぶ羽目になりました…。

一度目:
写真の裏のサインとテキストの位置が反対と言われる。詳しくは前回参照。

二度目:
写真の裏のサインには保証人の名前は書いちゃダメで、サインのみにしてほしいとのこと。また、両親のサインに必要な証人のサインは青のペンではなく黒のペンじゃなくちゃダメ。

…そんなん一回目で言われてないし…!

これだけ直せば絶対もう大丈夫なのね?!と念を押して、また保証人と証人にサインを貰いにいくはめに…

三度目:
万全の体制で三度目に挑むも、まさかの写真のサイズがダメと言われる。
今まで何度も確認して貰ってオッケーって言われてたのに!!!
もう面倒なので、追加料金払ってその場で撮ってもらうことに。
子を連れてくるため一度撤退。

四度目:
写真はすんなり撮れて、ようやく申請できることに。
しかし、新しく撮った写真の裏には保証人のサインがない。
また貰ってこなきゃなの?と聞くと今までの写真があるから要らないよとのこと…
なんなんそれ…何のためのサインだか全くわからん…

いやしかし、この申請でいちばんムカついたのが、担当者によって言うこと全然違うこと!
マジ困ったわ…
んもう、久しぶりにオーストラリア人にやられたぜ…

これでパスポート申請に不備がありましたとか言われたら、郵便局殴り込みにいってやるんだからー!

豪のパスポート申請テラ細かす

子の豪パスポート申請に行ってきました。
(子は二重国籍です。なんてオシャンティ。)

人から話を聞くに、物凄い審査細かいし時間かかるよ!と言われていたので、体制ばっちり、時間にも余裕をもって参戦しました。
ちなみにその友人は細かい書類や写真の不備で2~3度出直す羽目になったそう。
オーストラリア人、仕事出来ないくせに人の仕事には細か…いやなんでもないです。

書類は何度も確認したし、保証人のサインも情報もおっけい、写真も複数枚用意したし一発オッケーだといいな!

…うん、だめだったよね。

何が引っ掛かったかと言うと、予想以上に細かいところでした。
提出する写真の裏に「この写真は(名前)本人です」と一筆書いて、保証人のサインが必要なんですが、文章書いてからサイン書かないと駄目らしい。
管理人が用意したのはサインが先で、文章が後だったので駄目だそう…

えええー、良いじゃんよ!
どっちがどっちだって変わらないじゃん!

仕方ないのでまた保証人の人にサインを貰いにいかねばなりません…とほほほ…。

ちなみに前述の友人は、豪の永住権持っているにも関わらず、パスポートにビザラベルが貼られていないのでダメと言われたそう。
今、豪の移民局、電子化に伴いビザラベル貼ってくんないんですよね…。
ラベル貼るのにはわざわざブリスベンまで行って、お金払って(しかもそれなりに高い)ラベル貼ってもらわなきゃいけません。
そのせいで友人は生後間もない子を抱えてブリスベンまでいく羽目に…。
うちは夫がビザラベル持っていたので事なきを得ましたが、同じ目に合っている人ごまんといそうだ。

明日再度提出にいくのですが、今度こそサクッと通過することを祈ります!

中の人は外の人になりました

報告がおくれましたが、一月半くらいまえに、無事子を産みました。

いやぁ、子が居るとなかなかPC開けません。
ここにきてスマホのすごいポテンシャルを感じてます。
この投稿もスマホからの更新です。

またぼちぼち更新再開していきたい所存です。

スチームモップ買った。

スチームモップが欲しいってエントリ前に書きましたね。

買いましたー。
これ買いましたー。

KARCHER 家庭用スチームクリーナー SC1040(豪だと型番がSC1020)。

最初はシャークやH2Oのスタンド型スチームクリーナーを買おうと思っていたのですが、いろいろ調べているうちに、ケルヒャーのこのタイプを発掘。
形状は掃除機型で、床掃除にも床掃除以外にも万能に使えるタイプです。
しかもメーカーは高圧洗浄機で有名なケルヒャー、ドイツ製。
口コミも上々で、値段も高くありません。

いやー、このこ、予想以上の働きしてくれます!
買ってきてまず試したのが床掃除。
掃除機のように立ったまますいすいできるので、雑巾がけより数倍楽ー!

家中床掃除してもまだスチームが残っていたので、洗面台まわりとシャワールームまわりを掃除。
高圧スチームで汚れ吹っ飛ばすの超楽しいwww
連続使用時間があまり持たないかなーと思っていたのですが、いい意味で期待を裏切られました。
一度起動するとかなり持ちます。

ほかにもソファのお手入れや、臭いが気になるベビーベッドの洗浄などがっつり使っています。
こりゃーいい買い物したぞー。

そういや、我が家にある掃除機、これで3台目です。

1台目:ダイソン
2台目:ルンバ
3台目:ケルヒャー ← new!

そ、それぞれ用途違うし、いいよね!!