テーマ仕様書
shop
部分テンプレート(shared_partial)
sidebar★

sidebar (shared_partial)

全画面で共通利用する shared_partial です。

テーマ管理のファイルパス

ec_force/shop/shared/_sidebar.html.liquid
ec_force/shop/shared/_sidebar.html+smartphone.liquid

必要なコンポーネント

特に必要な記述はございません。以下、記述例となります。
(ログインフォームや各種サイト内メニュー記載を想定しています)

<div id="sidebar-view">
  <!-- ログインフォーム -->
  {% if base_info.show_login_form_on_side_menu? %}
    {% unless customer_signed_in %}
      {% unless auth_infra and auth_infra.login_only_auth_infra == true %}
        <form action="/shop/customers/sign_in" method="post">
 
          <!-- メールアドレス -->
          <input name="customer[email]" placeholder="メールアドレス" value="{{ line_email }}">
 
          <!-- パスワード -->
          <input name="customer[password]" placeholder="パスワード" type="password">
 
          <!-- ログイン状態を保持する -->
          <input name="customer[remember_me]" type="checkbox" value="1"> ログイン状態を保持する
 
          <!-- ログイン元を取得 -->
          <input type="hidden" name="sign_in_route" value="shop_customers">
 
          <!-- ログインボタン -->
          <input type="submit" value="ログイン">
        </form>
 
        {% if line_settings['display_btn'] == '1' %}
          {% if customer_signed_in == false and encrypted_line_id == nil %}
            <!-- LINE ID 説明ポップアップ -->
            {{ line_settings['information_context'] }}
            <!-- LINE ID 連携ボタン(リンク) -->
            <a class="line-token-set-btn" href="#">LINEでログイン</a>
          {% elsif customer_signed_in == true and current_customer.line_id? == false %}
            <!-- LINE ID 説明ポップアップ -->
            {{ line_settings['information_context'] }}
            <!-- LINE ID 連携ボタン(リンク) -->
            <a class="line-token-set-btn" href="#">LINE ID 連携</a>
          {% endif %}
        {% endif %}
      {% endunless %}
 
      <!-- 認証基盤でのログインボタン -->
      {% if auth_infra and auth_infra_regist == nil %}
        <a class="auth-infra-token-set-btn" href="#">認証基盤でログイン</a>
      {% endif %}
    {% endunless %}
  {% endif %}
 
  {% if base_info.use_cart? %}
    <!-- 合計数量 -->
    <span id="sidebar-order-quantity">{% if current_order %}{{ current_order.quantity }}{% else %}{{ order.quantity }}{% endif %}</span>
 
    <!-- 商品小計 -->
    <span id="sidebar-order-subtotal">{% if current_order %}{{ current_order.subtotal_with_campaign_discount | number_to_currency: format: '%n %u' }}{% else %}{{ order.subtotal_with_campaign_discount | number_to_currency: format: '%n %u' }}{% endif %}</span>
 
    <!-- カートへのリンク -->
    <a href="/shop/cart">カートの中を見る</a>
 
    <!-- 商品検索 -->
    <form id="ec_force/product_search" action="/shop/search" accept-charset="UTF-8" method="get">
      <!-- 商品カテゴリー -->
      <label>カテゴリ</label>
      <select name="q[products_product_categories_product_category_id_eq]" id="q_products_product_categories_product_category_id_eq">
        <option value="">選択してください</option>
        {% for category in product_categories %}
          {% if category.product_category_visibility %}
            <option value="{{ category.id }}">{{ category.name }}</option>
          {% endif %}
        {% endfor %}
      </select>
 
      <!-- メーカー -->
      <label>メーカー</label>
      <select name="q[maker_id_eq]" id="q_maker_id_eq">
        <option value="">選択してください</option>
        {% for maker in makers %}
          <option value="{{ maker.id }}">{{ maker.name }}</option>
        {% endfor %}
      </select>
 
      <!-- 商品名 -->
      <label>商品名</label>
      <input placeholder="商品名" type="search" name="q[name_cont]" id="q_name_cont" value="{{ params["q"]["name_cont"] }}">
      
      <!-- フリーワード検索 -->
      <label>フリーワード検索</label>
      <input placeholder="商品情報" type="search" name="q[freeword]" id="q_freeword" value="{{ params["q"]["freeword"] }}">
 
      <!-- 販売価格 -->
      <label>販売価格</label>
      <input class="form-control input-sm"
             placeholder="金額(下限)"
             type="number"
             name="q[sales_price_start]"
             value={{ params["q"]["sales_price_start"] }}>
      <span>~</span>
      <input class="form-control input-sm"
             placeholder="金額(上限)"
             type="number"
             name="q[sales_price_end]"
             value={{ params["q"]["sales_price_end"] }}>
 
      <!-- 在庫あり -->
      <label>在庫あり</label>
      <input type="checkbox" name="q[variants_stock_items]" {% if params["q"]["variants_stock_items"] == "on" %}checked{% endif %}>
 
      <!-- レビューあり -->
      <label>レビューあり</label>
      <input type="checkbox" name="q[reviews]" {% if params["q"]["reviews"] == "on" %}checked{% endif %}>
 
      <!-- ラベル -->
      <label>ラベル</label>
      {% for label in product_labels %}
        <input type="checkbox" name="q[labels_id_in][]" id="q_labels_id_in_{{ label.id }}" class="product-label" value="{{ label.id }}">
        <label for="q_labels_id_in_{{ label.id }}" class="mt10 mr10 p5"># {{ label.name }}</label>
      {% endfor %}
 
      <!-- 検索ボタン -->
      <button name="button" type="submit">検索する</button>
    </form>
  {% endif %}
 
  {% if customer_signed_in %}
    <!-- マイページへのリンク -->
    <a href="/shop/customer">マイページ</a>
 
    <!-- 購入履歴へのリンク -->
    <a href="/shop/customer/orders">購入履歴</a>
 
    <!-- 定期管理へのリンク -->
    <a href="/shop/customer/subs_orders">定期管理</a>
 
    <!-- ポイント管理へのリンク -->
    {% if base_info.use_point? %}
      <a href="/shop/customer/points">ポイント管理</a>
    {% endif %}
 
    <!-- お気に入り一覧へのリンク -->
    <a href="/shop/customer/favorites">お気に入り一覧</a>
 
    <!-- 会員情報変更へのリンク -->
    <a href="/shop/customer/edit">会員情報変更</a>
 
    <!-- お届け先登録へのリンク -->
    <a href="/shop/customer/shipping_addresses">お届け先登録</a>
 
    <!-- クレジットカード情報変更へのリンク -->
    {% if base_info.credit_card_editable? %}
      <a href="/shop/customer/cards">クレジットカード情報変更</a>
    {% endif %}
 
    <!-- 招待クーポンへのリンク -->
    {% if base_info.use_invite_coupon? %}
      <a href="/shop/customer/invite_coupons">招待クーポン</a>
    {% endif %}
 
    <!-- パスワード変更へのリンク -->
    <a href="/shop/customer/password/edit">パスワード</a>
 
    <!-- スマレジ会員バーコード表示へのリンク -->
    {% if smaregi_enabled %}
      <a href="/shop/customer/smaregi">スマレジ会員バーコード表示</a>
    {% endif %}
 
    <!-- ログアウト -->
    <a href="/shop/customers/sign_out">ログアウト</a>
  {% endif %}
 
  <!-- 当サイトについてへのリンク -->
  <a href="/shop/base_info">当サイトについて</a>
 
  <!-- 特定商取引法に基づく表記へのリンク -->
  <a href="/shop/law_info">特定商取引法に基づく表記</a>
 
  <!-- プライバシーポリシーへのリンク -->
  <a href="/shop/privacy">プライバシーポリシー</a>
 
  <!-- ご利用ガイドへのリンク -->
  <a href="/shop/guide">ご利用ガイド</a>
 
  <!-- 利用規約へのリンク -->
  <a href="/shop/customer_term">利用規約</a>
 
  <!-- よくあるご質問へのリンク -->
  <a href="/shop/faq">よくあるご質問</a>
 
  <!-- お問い合わせへのリンク -->
  <a href="/shop/contact/draft">お問い合わせ</a>
</div>