フロントエンジニアのためのShopify

Shopifyは最後の数ヶ月で多くの牽引を得ました-多分、電子商取引が多くの小売店をシャットダウンするパンデミックの中で非常に高い需要にあるので.それはまた、販売店の開発者は今、需要が高い理由です.
私は数年の間Shopifyで働いていました、そして、WordPress、Magento、Prestashopなどのような他のCMSに使用される多くの開発者は、買い物をします.私の経験から、多くの開発者はSaaS CMSと一緒に仕事をすることについての概念を得ることができます.
たとえば、Shopifyは、ローカルのShopifyストアのファイルで動作する本当の、本格的な可能性を提供していません、そして、あなたがちょうど対処しなければならないShopifyサーバーで起こっているブラックボックスマジックの多くもあります.
それに加えて、多くの開発者は、通常の製品カテゴリーの代わりにいわゆるコレクションのアイデアのように、非常に買い物をする特定の電子商取引概念を把握している問題を抱えています.
しかし、これと私の今後のブログ柱で、私は集中します.

開発店とthemekit

を使用して開発環境を設定する
人気のShopifyテーマを修正する

あなたが非常に独自の、100 %のカスタムメイドのShopify Frontend

あなたがShopify

のためにヘッドレスのない正面を造る方法
では、最も重要な概念から始めましょう.彼らはかなり基本的ですが、あなたがそれらについて知っていない場合は、物事の多くは期待するよりも動作する可能性がありますので、壁に対して頭をぶつける時間や日を無駄にします.

ツール1号:パートナーダッシュボード＆開発店
ローカルにShopifyをインストールすることができないので(WordPressとしましょう)、Shopifyのオンライン開発インスタンスで動作する必要があります.うん:アクティブなインターネット接続せずにShopifyで動作することはできません.
開発店訪問https://partners.shopify.com/signupを作成し、Shopifyパートナーアカウントを作成します.それは無料ですし、コードを開発店の無制限の量を作成することができます.開発店も無料です.開発店の作成は、まっすぐにまっすぐであり、おそらくどのようにコードを知っている場合、あなたのための大きなハードルではありません.それが言われている場合、あなたが開発ストアを作成する問題に直面している場合は、Shopifyによって書かれたこの超詳細なハウワーを見て見ている:https://help.shopify.com/en/partners/dashboard/managing-stores/development-stores

Tool Count 2 : themekit -開発用ストアのリモートコントロール
Shopifyは100 % SaaSですので、お客様のマシン上のローカルShopify環境を作成することはできません.代わりに、Shopifyサーバー上のファイル上のファイルを変更することによって、あなたの(ライブのオンライン)開発ストアで動作する必要があります.それを支援するために、Shopifyは“themekit”と呼ばれるコマンドラインツールを作成しました.
Homebrewを使用すると簡単にインストールすることができます

brew tap shopify/shopify
brew install themekit

あなたが開発店でプライベートアプリケーションを作成した後、あなたはthemekitのために必要なAPI資格情報を取得するtheme downloadあなたのテーマをダウンロードしてください.
その後、実行することができますtheme watchあなたのローカルファイルを監視し、変更されたファイルをShopifyサーバーにプッシュするようにします.
ラップアップするには、基本的に何が必要ですか

あなたの開発ストアからローカルマシン

へのテーマファイルのダウンロード

ローカルファイルへの変更を行うたびに、SSHを介してSportifyサーバーに自動的にアップロードされ、開発ストア

に接続されます
つ目のポイントはスーパーで、とても重要で、数週間の間、彼らがShopifyで働いた後でさえ、多くのDEVSがこの概念を把握していないのを見ました.明確にするために:themekit排他的にあなたのShopifyストアのリモコンの種類として動作します.それはあなたのローカルに変更されたファイルをShopifyサーバーにアップロードすることによってそうします、そして、どんなローカルなファイルでShopifyサーバーにでも交換します.
それはあなたが本当にあなたのローカルの変更を追跡するGit(HUB)のようなバージョン管理システムを満たす必要があることを意味します.
https://shopify.github.io/themekit/
ツールChorn - 3 :液体- Shopifyのテンプレート言語
おそらく、少なくともSmarty、ハンドルバー、JSXとそのすべての異なるテンプレート言語を聞いた.Shopifyはちょうど“液体”と呼ばれる独自の、かなり滑らかなテンプレート言語を提供します.液体は実際にオープンソースであり、静的サイトジェネレーターJekyllのような他のプロジェクトでも使用されます.
しかし、あなたがShopifyテーマで働いているとき、あなたは液体でページテンプレートを構築します{{product.title}}多くの製品が同じページテンプレートファイルを共有する間、動的に現在のアクセスされた製品のタイトルを印刷する.
重要:ユーザーがShopifyサーバー上のHTML/CSSにコンパイルされたときにユーザーがストアページにアクセスしたい(よく、彼らは場所でキャッシュしているが、現在のまま).これは、あなたのコードでどんな液体魔法でも、Shopifyサーバーだけがそれについて知っていて、あなたの液体コードを純粋なHTML/CSSファイルにコンパイルすることを意味します.
注意:クライアントのためにJavaScriptを書くなら、フロントエンド(スクリプトを含む)がユーザーに送られる前に、どんな液体変数もコンパイルされることを心にとめておいてください.JavaScript内の任意の液体変数がコンパイル可能な文字列になることを意味しますが、JavaScriptを使用して新しい変数を液体変数に割り当てることはできません.
Shopifyは、あなたが探しているかもしれない変数を見つけるのに役立つ“カンニングペーパー”を提供しています.
https://shopify.github.io/themekit/
HTML 5/CSS/jsと選択のIDE
さて、ここで新しい何もない.液体とthemekitの他に、あなたはおそらく知っていて、あなたのフロントエンドプロジェクトのために好きなツールを使うことができます:マークアップとしてのHTML、スタイルとJSのためのCSSは、ものを空想的でインタラクティブにします.IDEに関して:あなたがShopifyテーマコードを書くのを助ける液体拡大のために視覚コード腕時計を使用するならば.

しかし、どのように、私は反応/Vue/角/を使うことができますか?
残念なことに、Shopifyフロントエンドのためにこれらのフレームワークを使用する非常にまっすぐな前進方法がありません.そうする最も一般的な方法は、Shopifyの店頭API(https://shopify.github.io/liquid/)を使用することによって、カスタムヘッドレスのフロントエンドを構築することです.これはShopifyのネイティブカスタマイザ(商人のためのドラッグ＆ドロップエディタ)を使用することができないようないくつかの制限が付属しているため、おそらくあなたが探しているものではありません.しかし、私もこのチュートリアルを作るので、私はあなたがカバーしている.
楽しい事実:多くのShopifyテーマは、JavaScript部分のためにjQueryを使います.あなたはそれを愛するかもしれないし、嫌いかもしれないが、おそらくそれを憎む.
https://www.shopify.com/partners/shopify-cheat-sheet
コーディングを始めましょう!
さて、この時点で、あなたはthemkit、液体の概念を理解しなければならなくて、あなたが変更するのに熱心である開発店を持っていなければなりません.次のチュートリアルでは、現在インストールされているテーマの変更を開始し、新しい要素を作成し、Shopifyのカスタマイザのコードをどのように学習するかを学びます.