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

Question

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

Comments

[退会済みユーザー]

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

[退会済みユーザー]

バージョン確認

[apprio]

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

Answer 1

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);
                  });

Answer 2

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'))
            . '); ';
    }

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

Answer 3

                                <!--▼規格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の操作をどこで拾うのを探索中。

Answer 4

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年ぶりに覗いているので、思い出すのに時間が掛かってます。

Comments

[apprio]

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

[退会済みユーザー]

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

[退会済みユーザー]

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