[Shopify]ストアでReactを使用する方法

 

 

Reactのチュートリアルとかやってみたけど、Shopifyストア上で実際にどうやって使用できるか分からない、、、具体的なイメージが湧かないって人向けに『Shopify ストア上でReactを使用する方法』についてまとめてみました！

 

前提 

・theme kitを使用できる
・JavaScriptわかる
・React多少知ってる
・npm入ってる

 

やること

・ShopifyストアでReact使えるように環境整備
・カートボタンをReact使って出力してみる

 

Shopifyストア上でReact使えるようになるので、色々Reactで作ってみるのも面白いかも知れません！それでは早速スタートです。 

 

Shopify内の環境を整える

テスト用のテーマを作成

ライブテーマではなく、テスト用のテーマを使用した方が良いので、テーマを複製して、config.yml上でテストテーマ情報を追加する。

 

theme watch できる状態にしておく

今回は react という名前で設定したので、ターミナルから該当テーマのルートディレクトリに移動して、

theme watch -e react

で theme watch する。

これで、ローカル上でファイルの変更があれば、勝手にテスト用テーマに反映されるようになった。

 

npmの環境を整える

次に、新しいターミナルタブを開き、同じく該当テーマのルートディレクトリに移動し

npm init -y 

を入力する。すると package.json というファイルが作成される。（npmがインストールされていない場合は、先にインストールする必要があるので注意です。）

 

必要なものをインストールする

次にreactを使用する際に必要なdependenciesをインストールしましょう。

npm install --save react react-dom

そして、reactに関連する必須なものもインストールしてしまいます。

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader core-js webpack webpack-cli webpack-merge

これで大枠の環境がセットアップできました！

※ローカル環境内のセットアップなので、まだテーマには何も反映されていません。

 

Reactがちゃんと動いているか検証

ここでちゃんとReactが動くか検証してみます。

具体的にやることとしては、サイト内のカートアイコンをReact側から出力してみて、ちゃんと出力されていればReactがちゃんと動いていると判断できます。

 

必要なアイコンとsnippetsを作成

まずテーマ側で必要になるものを設定していきます。

具体的には

・react出力用のsnippets
・snippets出力

を設定する必要があります。

 

①react 出力用のsnippetsの作成

/snippets/cart-icon-snippets.liquid

という新しいファイルを作成し、その中に下記のようなReact出力用の空のdiv要素を記載します。

 

{%- comment -%}
React Test Snippets
{%- endcomment -%}

<div id="react-cart-icon"></div>

 

このreact-cart-iconの中にReactから出力されるコードが表示されるイメージですね！

 

②snippets出力

このsnippetsを作成しただけでは、もちろんサイト上に表示されません。

どこかで 

{% render 'cart-icon-snippets' %}

と該当snippetsを呼び出さなければなりません。

今回はカートアイコンを出力したいので、ヘッダーでrenderしてみます。

Debutテーマの場合は、

<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
{% include 'icon-cart' %}
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
<div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
<span data-cart-count>{{ cart.item_count }}</span>
<span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
</div>
</a>

の下に追加するといい感じに表示される予定です。

ちなみに上記既存カートアイコンの下に

<a href="#">hello</a>

みたいに仮で入れたら問題なく表示されました。

なので、この部分に

{% render 'cart-icon-snippets' %}

を記載します。

画像で恐縮ですが、こんな感じ。

 

これで一旦テーマ側の設定は完了です。

あとは、cart-icon-snippets.liquidファイルにreactから出力できれば、ヘッダーにカートアイコンを出力できるはずです。

それでは引き続きReact側の設定を進めていきましょう！ 

 

scriptsフォルダを作成する

テーマディレクトリ内でscriptsフォルダを作成します。 

assets, snippets, sections, templatesに並んでscriptsフォルダが存在する感じです。

 

その中にReactで使用するComponentsフォルダ、および、今回カートアイコンの出力で使用するcartIcon.jsファイル（scripts/Components/cartIcon.js）を作成します。

scripts/Components/cartIcon.jsの中には下記のように記載します。

 

次にscripts/cart-icon.jsも作成しておきましょう。中身は下記のような感じでOKです！（ReactをShopifyストアで使用することが目的なので、各Reactコードの説明は省きます。）

 

 

これでReactとしてのコードは問題ないはずです。

 

BabelとWebpackの設定周り

 

次にBabelとWebpackの設定を進めていきます。

作るファイルは下記です。

・webpack.common.js
・webpack.prod.js
・webpack.dev.js
・.babelrc
・package.json（作成済みなので、要編集）

 それぞれ場所はassetsフォルダと同じ列に作成します。こんな感じです。

中身はそれぞれこのような形です。（babelrcもこの一覧の中にありますが、ファイル名の頭に.ドットがついているため、非表示になっています。）

 

①webpack.common.js

const path = require("path")

module.exports = {
entry: {
'cart-icon': "./scripts/cart-icon.js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
}
]
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "assets")
}
}

 

ここでやっているのは、entryとして、cart-icon.jsを記載して、その後outputとしてassetsフォルダに cart-icon.bundle.jsを出力しますよ！という処理を行っています。 

 

②webpack.dev.js

 

 

③webpack.prod.js

 

④package.json

ここではすでに存在するpackage.jsonファイルのscript部分に下記を追加します。

 

 

⑤.babelrc

最後に.babelrcというファイルを作成して、下記のように記載しましょう。

 

 

 

これで

npm run dev

をscriptaフォルダ内で実行するとassetsフォルダ内にcart-icon.bundle.jsというファイルが作成されます！

 

bundleされたファイルを読み込む

最後にbundleされたjsファイルをShopifyストア上で読み込めば、そのjsファイルを使用することができます。

layout/theme.liquidファイルの各jsファイルを読み込んでいる部分に

 

というように記載します。

すると、cart-icon.bundle.jsが読み込まれているはずです！

実際にページを読み込んでみると、、、

このように（色味でちょっとわかりにくいですが）カートアイコンが追加されていました！！

 

 （右側のうっすらあるやつです笑）

 

 

ShopifyストアでReactを使用する方法　まとめ

以上、ShopifyのストアでReactを適用・使用する方法でした！

初期設定はちょっと複雑ですが、これで色々Reactで遊べるようになりました。Reactはモダンフロントエンドには無くてはならない技術なので、たくさん深堀りして、できることを増やしていきたいものです。

最後に今回の記事を執筆するにあたって参考にした記事も載せておきます。

参考　https://www.cadence-labs.com/2019/12/how-to-add-react-to-a-shopify-theme/

※ちょっと不要なコードとかもあるかも知れませんが、そこらへんはご了承を笑

それでは最後までお読みいただきありがとうございました。本日も良い1日を！