質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.52%

【EC CUBE】ドロップダウンを選択できないようにしたいです

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,623

apprio

score 13

EC CUBEの勉強をしています。
現在テスト環境を触っております。

例えば
イメージ説明

こちらのドロップダウン(というのかな)を
上の味が選択されないと大きさが選択できないようにしたいのですが、
どうすればいいのでしょう?

追記
選択できないようにというのは
選択肢がないのにドロップダウンがクリックででるので
そもそも灰色などにして選択できなくしたいです。

調べているとdisabledというのを使うとの情報も出てきました。

                    <div class="classlist">
                        <!--▼規格1-->
                        <ul class="clearfix">
                            <li><!--{$tpl_class_name1|h}--></li>
                            <li>
                                <select name="classcategory_id1" style="<!--{$arrErr.classcategory_id1|sfGetErrorColor}-->">
                                <!--{html_options options=$arrClassCat1 selected=$arrForm.classcategory_id1.value}-->
                                </select>
                                <!--{if $arrErr.classcategory_id1 != ""}-->
                                <br /><span class="attention"><!--{$tpl_class_name1}-->を入力して下さい。</span>
                                <!--{/if}-->
                            </li>
                        </ul>
                        <!--▲規格1-->
                        <!--{if $tpl_classcat_find2}-->
                        <!--▼規格2-->
                        <ul class="clearfix">
                            <li><!--{$tpl_class_name2|h}--></li>
                            <li>
                                <select name="classcategory_id2" style="<!--{$arrErr.classcategory_id2|sfGetErrorColor}-->">
                                </select>
                                <!--{if $arrErr.classcategory_id2 != ""}-->
                                <br /><span class="attention"><!--{$tpl_class_name2}-->を入力して下さい。</span>
                                <!--{/if}-->
                            </li>
                        </ul>
                        <!--▲規格2-->
                        <!--{/if}-->
                    </div>

ここら辺を触ればいいのかなと検討はしております。

EC-CUBEバージョン    2.12.0
PHPバージョン    PHP 5.6.24
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2016/11/30 14:24

    ECCUBEのバージョンはいくつですか? 尚、ECCUBEに関しては「EC-CUBE開発コミュニティ:http://xoops.ec-cube.net/」がお勧めです。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2016/11/30 14:25

    バージョン確認

    キャンセル

  • apprio

    2016/11/30 15:53

    失礼しました!バージョン載せてないですね!

    キャンセル

回答 4

checkベストアンサー

0

3連休がとれたので、「EC-CUBE開発コミュニティー」の力も借りて、もう少し探ってみました。

「大きさ」が「選択してください」の時の「かごに入れる」時の規格2の背景色「桃色」動作の詰が甘いですが、
挙動としてはご希望に添えているのではないかと思います。
参考になれば、幸いです。

</eccube-2.12.0/data/Smarty/templates/default/products/detail.tpl>

//<![CDATA[
    // 規格2に選択肢を割り当てる。
    function fnSetClassCategories(form, classcat_id2_selected) {
        var $form = $(form);
        var product_id = $form.find('input[name=product_id]').val();
        // ここから
        var elem = document.getElementById("select2");
        if ($form.find('select[name=classcategory_id1]').val() == "__unselected") {
             elem.innerHTML = "<select disabled name='classcategory_id2' style='<!--{$arrErr.classcategory_id1|sfGetErrorColor}-->'>";
        } else {
             elem.innerHTML = "<select name='classcategory_id2'style='<!--{$arrErr.classcategory_id1|sfGetErrorColor}-->'>";
        }
        // ここまで
        var $sele1 = $form.find('select[name=classcategory_id1]');
        var $sele2 = $form.find('select[name=classcategory_id2]');
        setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
    }
    $(document).ready(function() {
        $('a.expansion').facebox({
            loadingImage : '<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/loading.gif',
            closeImage   : '<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/closelabel.png'
        });
    });
//]]>


                        <!--▼規格2-->
                        <ul class="clearfix">
                            <li><!--{$tpl_class_name2|h}-->:</li>
                            <li>
                                <!-- ↓ここ -->
                                <p id="select2"></p>
                                </select>
                                <!--{if $arrErr.classcategory_id2 != ""}-->
                                <br /><span class="attention">※ <!--{$tpl_class_name2}-->を入力して下さい。</span>

                                <!--{/if}-->
                            </li>
                        </ul>
                        <!--▲規格2-->


</eccube-2.12.0/html/js/products.js>

      // 規格1選択時
      $('select[name=classcategory_id1]')
          .change(function() {
                      var $form = $(this).parents('form');
                      var product_id = $form.find('input[name=product_id]').val();
                      var $sele1 = $(this);
                      // ここから
                      var elem = document.getElementById("select2");
                      elem.innerHTML = "<select name='classcategory_id2'>";
                      if ($sele1.val() == "__unselected") {
                          elem.innerHTML = "<select disabled name='classcategory_id2' style='<!--{$arrErr.classcategory_id1|sfGetErrorColor}-->'>";
                      }
                      // ここまで
                      var $sele2 = $form.find('select[name=classcategory_id2]');
                      setClassCategories($form, product_id, $sele1, $sele2);
                  });

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

data
class
pages
products内
LC_Page_Products_Detail.php

の、この当りだと思うのですが。

// 在庫が無い場合は、OnLoadしない。(javascriptエラー防止)
if ($this->tpl_stock_find) {
// 規格選択セレクトボックスの作成
//$this->js_lnOnload .= $this->lfMakeSelect();   ←ここをコメントアウトして見たりとか。
}

ただ、これだけだけだと、一度目は規格2が機能しない(様に見えるだけ?)けれど、
規格1を「選択してください」に戻すと、規格2が「選択してください」になってしまうので、
もう一手間加えないといけない様です。

p.s.
ECCUBEは5年ぶりに覗いているので、思い出すのに時間が掛かってます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/30 15:56

    なるほど...
    調べているうちにJavaScrptは使うみたいですね

    キャンセル

  • 2016/11/30 18:59

    規格1、規格2の連携はJavaScriptと、小生も理解してます。が、Velocity内templeteでJavaScriptのロジックを組むのでは無く、追加の回答の様に、Velocity内Templeteはdisabledを変数にして、LCから「設定・未設定」で実現出来るのではないかと、調査中です。

    キャンセル

  • 2016/12/01 09:16

    ECCUBEはVelocityではなく、Smartyでしたね。訂正します。

    キャンセル

0

                                <!--▼規格2-->
                                <ul class="clearfix">
                                    <li><!--{$tpl_class_name2|h}--></li>
                                    <li>
                                        <select disabled name="classcategory_id2" style="<!--{$arrErr.classcategory_id2|sfGetErrorColor}-->">
                                        </select>
                                        <!--{if $arrErr.classcategory_id2 != ""}-->
                                        <br /><span class="attention"><!--{$tpl_class_name2}-->を入力して下さい。</span>
                                        <!--{/if}-->
                                    </li>
                                </ul>
規格2の部分の<select **disabled** ...>
disabledをVelocity変数にして、先のLCから規格1の選択有無で「設定・未設定」とすれば希望に添えそうですかね?

規格1の操作をどこで拾うのを探索中。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

javascriptは、敢えて避けてきたので、『そんな訳はないよなぁ』と思いつつも、
味を「選択してください」にすると、大きさが「選択してください」に戻ることから、
味の変更でfnSetClassCategories()が動くもの、、、と勝手に思い込んでいたのが、大きな間違い。>自分
やはり、初回表示時とsubmit「かごに入れる」でないと、fnSetClassCategories()は動かないですよね。

味の変更で、大きさが「選択してください」に戻るのは、
規格1の
「<!--{html_options options=$arrClassCat1 selected=$arrForm.classcategory_id1.value}-->」
のおかげ?

多分、以下のjavascriptの動作が、味の変更で動作すれば、ご希望に添えると思うのですが、それは、無理。
(「かごに入れる」を押せば、それなりな動きはするけれど。)
<detail.tpl>
<script type="text/javascript">
//<![CDATA[
    // 規格2に選択肢を割り当てる。
    function fnSetClassCategories(form, classcat_id2_selected) {
        var $form = $(form);
        var product_id = $form.find('input[name=product_id]').val();
        var elem = document.getElementById("select2");                                    // ★ここから
        if ($form.find('select[name=classcategory_id1]').val() == "__unselected") {
             elem.innerHTML = "<select disabled name='classcategory_id2'>";
        } else {
             elem.innerHTML = "<select name='classcategory_id2'>";
        }                                                                                 // ★ここまで
        var $sele1 = $form.find('select[name=classcategory_id1]');
        var $sele2 = $form.find('select[name=classcategory_id2]');
        setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
    }
    $(document).ready(function() {
        $('a.expansion').facebox({
            loadingImage : '<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/loading.gif',
            closeImage   : '<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/closelabel.png'
        });
    });
//]]>

</script>
                        <!--▼規格2-->
                        <ul class="clearfix">
                            <li><!--{$tpl_class_name2|h}--></li>
                            <li>
                                <p id="select2">select2</p>                               // ★ここ
                                </select>
                                <!--{if $arrErr.classcategory_id2 != ""}-->
                                <br /><span class="attention"><!--{$tpl_class_name2}-->を入力して下さい。</span>
                                <!--{/if}-->
                            </li>
                        </ul>
                        <!--▲規格2-->


javascriptを熟知していれば、fnSetClassCategories()の変更と
↓の「lfMakeSelect()」が呼ばれるまでのお膳立てとの連携で、実現できるものなのか?
<LC_Page_Products_Detail.php>
    /* 規格選択セレクトボックスの作成 */
    function lfMakeSelect() {
        return 'fnSetClassCategories('
            . 'document.form1, '
            . SC_Utils_Ex::jsonEncode($this->objFormParam->getValue('classcategory_id2'))
            . '); ';
    }

残念ながら、今回は、小生の知識では、ご希望に添えませんでした。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる