本ページの内容は上級者向けのコンテンツとなっております。 サポート窓口へご連絡いただくことで当社の方で代理で実装をさせていただくこともできますので、ご相談くださいませ。
テーマを追加課金可能なプランへ対応させるためにはいくつかの修正作業が必要となります。当アプリでは選択肢の項目などの有償化を行うために、別商品を自動で作成しその商品を同時にカートに入れる形で実現をしています。そのため、その商品を表示しない対応をして頂く必要がございます。
実装上の注意点
- 本番用のテーマではなく、本番用のテーマをコピーしたものに反映するようにしてください。
- 本修正によりサイトの購買機能に影響がある場合があります。必ずカスタムオプション対応の商品と通常商品それぞれについての購入テストを行うようにしてください。
- お問い合わせいただく際には、編集元のテーマと、編集後のテーマについてご教授いただくと対応がスムーズとなっております。
1. カート一覧を修正する
Dawnの場合 sections/main-cart-items.liquid に該当し、通常 templates/cart.json や templates/cart.liquid などのテンプレートから定義されるテンプレートの修正となります。
※Ajaxカートの場合は、実装方式が異なる場合があります。その場合はliquid対応のjsテンプレを使うか、実装を調整する必要があるため、お問い合わせください。
（１）カートのアイテム一覧ループの後に価格計算・商品スキップロジックを入れる
{%- for item in cart.items -%} などのカート内部のアイテムをループするコードの直後に以下のコードを埋め込みます。商品のタグに__CUSTOMER_HIDDENが入っている場合、スキップし、そうでない場合はその商品と関連する商品の価格を計算し直します。
{% comment %} fix start {% endcomment %}
{% liquid
if item.product.tags contains '__CUSTOMORDER_HIDDEN'
continue
endif
assign original_price = item.original_price
assign final_price = item.final_price
assign original_line_price = item.original_line_price
assign final_line_price = item.final_line_price
for item2 in cart.items
unless item2.product.tags contains '__CUSTOMORDER_HIDDEN'
continue
endunless
if item2.properties._CUSTOMORDER_PARENT == item.properties._CUSTOMORDER_KEY
assign original_price = item.original_price | plus: item2.original_price
assign final_price = item.final_price | plus: item2.final_price
assign original_line_price = item.original_line_price | plus: item2.original_line_price
assign final_line_price = item.final_line_price | plus: item2.final_line_price
endif
endfor
%}
{% comment %} fix end {% endcomment %}（２）カート一覧の価格表現をすべて変更する
（１）と同じファイルにて、以下のようにカートのそれぞれの価格表現を変更します。
before
{{- item.original_price | money -}}after
{{- original_price | money -}}before
{{- item.final_price | money -}}after
{{- final_price | money -}}before
{{ item.original_line_price | money }after
{{ original_line_price | money }}before
{{ item.final_line_price | money }}after
{{{ final_line_price | money }}同様に、 item.original_price => original_price / item.final_price => final_price / item.original_line_price => original_line_price / item.final_line_price => final_line_price のように差し替えをする必要があります。
2. カートの更新・削除の際にカート情報の差し替えを行う
カートの数量変更時にJavaScriptで実行されるコードに対して修正を加えます。このコードは assets内にあるJavaScriptに記載がある場合が非常に多く、Dawnの場合は assets/cart.js に記載されています。 routes.cart_change_url や /cart/ などの検索文言でファイルを探すことが可能です。
以下のbefore-afterはあくまで、サンプルですが、「// 再描画処理など、カート数量増減の処理後に実行するコード」のところにはroutes.cart_change_urlなどのAPIをコールした後のコードが入ります。大事なことは、window.customorderCartDoctor をコールして、その後再描画をすることで、不明であれば location.reload() などを CartDoctorの後に実行するという手もあります。
before
// 再描画処理など、カート数量増減の処理後に実行するコートafter
if (window.customorderCartDoctor) {
window.customorderCartDoctor(function() {
// 再描画処理など、カート数量増減の処理後に実行するコート
});
} else {
// 再描画処理など、カート数量増減の処理後に実行するコート
}
3. 商品をカートに入れる処理の際にカート情報の差し替えを行う
商品をカートに入れる際にも、同様にカート情報の差し替えが必要です。これもJavaScriptで行われるケースが多く、Dawnの場合は assets/product-form.js に記載があります。 routes.cart_add_url などの文言で検索することで該当箇所を見つけることができます。
※ここでも、customorderCartDoctorを使うことも可能です。その場合カートに入れるー＞cartDoctorを実行するという２段階になるため、「カートに入れました！」のようなPOPUPが変に動作する可能性があります。
before
fetch(`${routes.cart_add_url}`, config)after
// start custom order fix
if (window.customorderCartRepair) {
config.headers['Content-Type'] = 'application/json'
const newFormData = window.customorderCartRepair(formData);
config.body = JSON.stringify(newFormData);
}
// end custom order fix
fetch(`${routes.cart_add_url}`, config)before
this.cartNotification.renderContents(response);after
// start custom order fix
this.cartNotification.renderContents(Object.assign(Object.assign({}, response), response.items[0]));
// end custom order fix※この修正はcartに入れたという追加の通知を行う場合に関連するコードを修正するものです。テーマによって異なりますが、response.items[0]のみを対象とするコードを入れることで複数アイテムの追加されました表現をスキップすることができます。
4. カートの数量を表示するコードの差し替えを行う
カートの中にあるアイテムの数量についても、価格変更用の商品の数がたされないよう修正をする必要があります。Dawnの場合は sections/cart-icon-bubble.liquid などに配置がありますが、実際のカートの数量を表示するクラス名や cart.item_count などの表現をを検索して探すのが良いでしょう。以下は、Dawnによる修正例です。
before
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">{{ cart.item_count }}</span>
{%- endif -%}after
{% comment %} fix start {% endcomment %}
{% assign cart_item_count = 0 %}
{% for item in cart.items %}
{% if item.product.tags contains '__CUSTOMORDER_HIDDEN' %}{% continue %}{% endif %}
{% assign cart_item_count = cart_item_count | plus: item.quantity %}
{% endfor %}
{%- if cart_item_count < 100 -%}
<span aria-hidden="true">{{ cart_item_count }}</span>
{%- endif -%}
{% comment %} fix end {% endcomment %}
5. カートに追加されたという通知POPUPの差し替えを行う（ある場合）
３の時点でもカートに追加したというアラートの修正は実装されていますが、その際のカート内の商品点数を修正するためには以下のようなコードを修正します。不要な場合もございます。
before
{{ 'general.cart.view' | t: count: cart.item_count }}after
{% comment %} fix start {% endcomment %}
{% assign cart_item_count = 0 %}
{% for item in cart.items %}
{% if item.product.tags contains '__CUSTOMORDER_HIDDEN' %}{% continue %}{% endif %}
{% assign cart_item_count = cart_item_count | plus: item.quantity %}
{% endfor %}
{{ 'general.cart.view' | t: count: cart_item_count }}
{% comment %} fix end {% endcomment %}6. 商品ページの金額表記を更新する
最後に商品ページの料金表記をオプションの金額を含めた料金が表記されるように修正します。
Dawnの場合は snippets/price.liquid などに配置があります。以下は、Dawnによる修正例です。
before
<span class="price-item price-item--regular">
{{ money_price }}
</span><s class="price-item price-item--regular">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
after
<span class="price-item price-item--regular groovyco-price--regular">
{{ money_price }}
</span><s class="price-item price-item--regular groovyco-price--sale">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
7. テーマの内容の検証を行う
ここまで行ったテーマにて、実際に通常商品＋カスタム商品でテストを必ず行った後、テーマの公開を行ってください。不明点がございましたらお問い合わせくださいませ。