■ オンラインストア2.0未対応テーマのインストール方法です。→2.0対応テーマのインストール方法はこちら
■ ストアにインストールされているテーマが「インストール」のプルダウンに表示されます。
目次
■コード設置について
Mikawayaアプリ内の「インストール」をクリックし、インストール先のテーマを選択。選択したテーマにコードを2箇所設置していきます。
•
商品詳細ページに定期購入プランを表示
•
アカウントページにマイページリンクを表示
■商品詳細ページに定期購入プランを表示
①「インストール」ボタンをクリック
②コピーをクリック
③Shopify管理画面＞オンラインストア「・・・」をクリックする。その後「コードを編集」を選択。
④テーマエディター内の[product.liquidファイル]のformタグ内に、②でコピーしたコードを貼り付け、保存を押す
※テーマによって設置先のファイル名が異なる場合があります。
設置ファイル例:product-template.liquid やmain.product.liquid など
▼参考動画
{％-form内に下記のコードを設置してください。
{% if content_for_header contains 'mikawaya' %}
<!-- Mikawaya 商品ページウィジェット ver:3 -->
{% if product.selling_plan_groups.size > 0 %}
<style>
.mikawaya-hidden {
display: none
}
.product__price {
display: none
}
.product-single__price {
display: none
}
.mikawaya-radio-button {
min-height:auto!important;
}
.mikawaya-selling-plan-group-container {
margin-bottom: 20px;
}
.mikawaya-selling-plan-description {
margin-left: 5px;
margin-top: 5px;
}
.mikawaya-selling-plan-select{
margin-top: 10px;
}
.mikawaya-product-page-widget-container {
width: 100%
}
</style>
<!-- Just for initial use -->
{%- liquid
if product.requires_selling_plan or product.selected_selling_plan_allocation
assign current_selling_plan_allocation = product.selected_or_first_available_selling_plan_allocation
else
assign current_selling_plan_allocation = nil
endif
if product.selling_plan_groups.size > 1 or product.requires_selling_plan == false
assign show_fieldset = true
else
assign show_fieldset = false
endif
-%}
<div id="mikawaya-product-page-widget-container-v3">
</div>
<div id="mikawaya-product-page-widget-container" class="mikawaya-hidden mikawaya-product-page-widget-container">
{% if show_fieldset %}
<fieldset id="mikawaya-fieldset">
<legend>
購入オプション
</legend>
{% endif %}
{% unless product.requires_selling_plan == true %}
<div
class="mikawaya-selling-plan-group-container"
>
<input
type="radio"
name="purchase_option"
{% if current_selling_plan_allocation == nil %} checked {% endif %}
value="one-time"
onchange="window.MIKAWAYA.handleSellingPlanGroupChange(event)"
class="mikawaya-radio-button"
id="one-time-purchase-option"
>
通常の購入
{% for variant in product.variants %}
<span
name="one-time-variant-price"
data-variant-id="{{ variant.id }}"
{% unless product.selected_or_first_available_variant.id == variant.id %}
class="mikawaya-hidden"
{% endunless %}
>{{ variant.price | money }}</span>
{% endfor %}
</div>
{% endunless %}
{% for variant in product.variants %}
{% for selling_plan_allocation in variant.selling_plan_allocations %}
<div
name="variant-group-allocation"
data-variant-id="{{ variant.id }}"
data-group-id="{{ selling_plan_allocation.selling_plan_group_id }}"
data-selling-plan-id="{{ selling_plan_allocation.selling_plan.id }}"
data-selling-plan-allocation-price="{{ selling_plan_allocation.price | money }}"
style="display:hidden"
></div>
{% endfor %}
{% endfor %}
<!-- Selling plan groups -->
{% for group in product.selling_plan_groups %}
<div
name="selling-plan-group-container"
data-group-id="{{ group.id }}"
class="mikawaya-selling-plan-group-container mikawaya-hidden"
>
<div>
<input
type="radio"
value="{{ group.id }}"
name="purchase_option"
onchange="window.MIKAWAYA.handleSellingPlanGroupChange(event)"
class="mikawaya-radio-button"
{% if group.id == current_selling_plan_allocation.selling_plan.group_id %} checked {% endif %}
{% if product.requires_selling_plan and current_selling_plan_allocation == nil and forloop.first %} checked {% endif %}
>
<span>{{ group.name }} <span name="group-inline-price" data-group-id="{{ group.id }}"></span></span>
</div>
<select
name="select-selling-plan"
data-group-id="{{ group.id }}"
onchange="window.MIKAWAYA.handleSellingPlanChange(event)"
class="mikawaya-selling-plan-select"
>
<!-- Individual selling plans -->
{% for selling_plan in group.selling_plans %}
<option value="{{ selling_plan.id }}">{{ selling_plan.name }}</option>
{% endfor %}
</select>
{% for selling_plan in group.selling_plans %}
<p
name="selling-plan-description"
data-group-id="{{ group.id }}"
data-selling-plan-id="{{ selling_plan.id }}"
{% if forloop.first %}
class="mikawaya-selling-plan-description"
{% else %}
class="mikawaya-selling-plan-description mikawaya-hidden"
{% endif %}
>{{ selling_plan.description }}</p>
{% endfor %}
</div>
{% endfor %}
{% if show_fieldset %}
</fieldset>
{% endif %}
<input
type="hidden"
name="selling_plan"
value="{{ current_selling_plan_allocation.selling_plan.id }}"
id="mikawaya-hidden-selling-plan-id"
>
<div
type="hidden"
id="current-variant-id"
data-variant-id="{{ product.selected_or_first_available_variant.id }}"
class="mikawaya-hidden"
>
</div>
</div>
{% endif %}
{% endif %}
JavaScript
「購入オプション」や「通常の購入」のテキストは自由にご変更が可能です。
変更した場合、商品ページのテキストが変更されます。
■アカウントページにマイページリンクを表示
①Mikawayaアプリ＞インストールにて、コードをコピーする
②青色の「customers/account.liquid」をクリック
③customers/account.liquidの任意の場所に以下のコードを追加
※<h1>タグの直下などに配置することを推奨しています。
<div style="margin-bottom: 20px">
<a class="ui-button btn btn--subdued btn--size-small" href="/apps/floor-s">
サブスクリプションを管理
</a>
</div>
JavaScript
以上でコードインストールの設定は完了です。
ファイル内が見当たらない等、コードインストール方法が不明な場合は下記よりご連絡ください。
・Mikawaya運営サポート メール対応窓口
cs@floor-s.co.jp
・チャットでのお問い合わせ
右下のアイコンをクリックするとチャットが立ち上がります。
【お問い合わせ時には下記の情報も合わせてご記載ください】
・ご利用のテーマ名
・ストア名
・ストアURL
