お世話になっております。
Dawnを使用していますが、下記の記事を参考にラッピング機能を実装しています。
https://help.shopify.com/ja/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-gift-wrap-option
上記の記事ですとラッピング商品は1つしか選べないようですが、複数種類の中からラッピングを選べるようにしたいと考えています。
Shopify.Cart.GiftWrap = {};
の部分のオブジェクトを複数作り、対応する関数も作成すれば複数種類のラッピングから選ぶことはできそうなのですが、コードの書き方でわからない点がいくつかあり、教えていただけると助かります。
1.styleタグの中のコードの意味。どの部分をなぜ非表示にしているのでしょうか?
2.関数の中のheadersは毎回宣言しないといけないのでしょうか?
関数の外で一度定義するだけではだめなのでしょうか?
Shopify.Cart.GiftWrap.set = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });
わかる方がいましたらよろしくお願いいたします。
Qcoltd
2
1.styleタグの中のコードの意味。どの部分をなぜ非表示にしているのでしょうか?
確証はないのですが、Debutテーマのカートでは、数量入力の要素に、「updates_xxxxxxxxx」というidが振られているのかもしれません。
ですので、そちらのコードは、ギフトラッピング商品の数量選択を隠すためのコードと思われます。
しかし、私が確認したバージョンのDebutでは、variant_idだけでなく、他の数値も付与されており「updates_xxxxxxxxxxxxxxx:yyyyyyyyyyyyy」のようになっていたので、参考コードの指定の仕方では、結局、display: noneを適用できなさそうです。
もし、私の推測が合っており、このコードが数量選択を隠すことが目的だった場合、そして、それを質問者様が踏襲したい場合、Dawnのカートの数量選択の要素のidを指定する必要がありそうです。
2.関数の中のheadersは毎回宣言しないといけないのでしょうか?
関数の外で一度定義するだけではだめなのでしょうか?
ダメではないです。
そのようにされても問題なく動作するかと思います。
しかし、注意が必要です。
おそらく、setでもremoveでも、headerを宣言しており、headerに代入する値も同じなので、
関数の外で一度定義するだけでいいのではないか、とお考えになったのかと思いますが、
今、質問者様が設定されているコードだけ見れば、確かに問題はないですが、
もし、後日、他のコードを追加することになり、
そのコード内でもheaderという変数が使われており、
さらに、関数の外(グローバルスコープ)でその変数が宣言されている場合、
予期せぬ変数の上書きが発生するかもしれません。
なるべく、関数の中で、宣言された方が無難かと思いますが、
どうしても、関数の外に移動させたい場合は、変数の名前を少し変えてあげると良いかもしれません。
例えば、updateCartHeaderなど。(誰も使わなそうで、かつコードの目的に則した命名ならなんでも良いかと思います。)
ご参考まで。
(キュー田辺)
1 Like
田辺様
いつもご丁寧にありがとうございます。
1.styleタグの中のコードの意味。
数量選択を非表示にしているということでしたら、納得できました。
カート内で数を変更させたくない場合に、このように指定しているのですね。
数量選択を非表示にするかは検討しようと思います。
2.関数の中のheaders
確かにそうですね。
別のオプションの関数を増やそうと思っていたので、何度も書くのはどうなんだろうと思ったのですが、関数の中の方が無難そうですね。
ありがとうございます。
この質問をした時には、他の部分はわかりそうかと思ったのですが、よく考えてみると
関数をセットするのになぜ「.」つなぎで
Shopify.Cart.GiftWrap.set = function() {
のように記述しているのかがよくわからないのですが、もしよろしければそちらも教えていただけますでしょうか?
なぜ通常の変数ではなく、オブジェクトの指定のような形式なのかがよくわかりません。
最初の質問には丁寧に答えていただいたのに、続けて質問をしてしまって申し訳ありません。
よろしくお願いいたします。
Qcoltd
4
「なぜ、わざわざオブジェクトにするのか」というご質問にたいして、正解があるのか分からないのですが、推測だけしますと、
- Shopifyは、Ruby on Railsで構築されているそうです。そして、Rubyはオブジェクト指向スクリプト言語です。こちらに記載のコードがRubyを扱うShopifyの技術者によって書かれたものなら、JavaScriptにおいても、慣れ親しんだオブジェクト指向で書いたのかもしれません。
- 「JavaScriptの世界ではオブジェクトが王様です」とは名著「開眼!JavaScript」にある言葉ですが、そもそも、JavaScriptの関数の多くは(全ては?)オブジェクトのメソッドとして実装されています。例えば、replaceは、String.replaceですし、getElementByIDは、document.getElementByIDですしね。そういったJavaScriptの言語仕様に則ったのかもしれません。
- なんとなくそうした。コードを書いた方の癖で、なんとなく、そうしたのかもしれません。
など、推測はいくらでも出てくるのですが、一貫して言えることは、「オブジェクトにしなくてはならない」ということはないということです。
なんらかの設計思想、ルール、制約、癖などがあってそうしているに過ぎないとは思います。
しかし、オブジェクト指向的にコードを扱うことで、保守しやすい、ミスが出にくいコードになるはずです。オブジェクト指向に慣れた人々の集まりの中では、特にその傾向が強まり、コード理解のコストも下がるかと思います。
回答になっているか分かりませんが、
ご参考まで。
(キュー田辺)
1 Like
田辺様
詳しくご回答していただき、ありがとうございます。
今まであまりみたことのないコードの書き方でしたので、理解できず困っていたのですが、理解できました。
すごく勉強になりました。
ありがとうございました。