EC-CUBE3 商品詳細ページで数量を<input>から<select>のプルダウンに変更するjQueryスクリプト

detail_js.twig

{# Product/detail.twig #}
{% block javascript %}
<script>
(function(){
    // <input>を<select>に書き換え
    $('#quantity').replaceWith('<select id="quantity" name="quantity" class="form-control"><option value="0">0</option></select>');

    var quantity_max = 100; // <select>の表示上限
    var stock_data = {};

    {#  規格がある場合 #}
    {% if 0 < Product.classCategories1|length %}
        {% for ProductClass in Product.ProductClasses %}
            {% if ProductClass.ClassCategory1 %}

                {% set class_category_1 = ProductClass.ClassCategory1.id %}
                {% set class_category_2 = '' %}

                {% if ProductClass.ClassCategory2 %}
                    {% set class_category_2 = ProductClass.ClassCategory2.id %}
                {% endif %}

                {# 規格idをkeyにした在庫情報の連想配列の用意 #}
                {% if class_category_2 == '' %}
                    stock_data["{{ class_category_1 }}"] = { 'stock_unlimited': "{{ ProductClass.stock_unlimited }}", 'stock': "{{ ProductClass.stock }}", 'sale_limit': "{{ ProductClass.sale_limit }}" };
                {% else %}
                    stock_data["{{ class_category_1 }}_{{ class_category_2 }}"] = { 'stock_unlimited': "{{ ProductClass.stock_unlimited }}", 'stock': "{{ ProductClass.stock }}", 'sale_limit': "{{ ProductClass.sale_limit }}" };
                {% endif %}
            {% endif %}
        {% endfor %}

    {% else %}
        {% if Product.stock_unlimited_min == 1 %}
            var quantity = quantity_max;
        {% else %}
            var quantity = parseInt("{{ Product.stock_min }}");
            if (!isNumber(quantity)) quantity = 0;
            quantity = quantity_max < quantity ? quantity_max : quantity;
        {% endif %}

        var options = [];
        if (0 < quantity) {
            for (var i = 1; i <= quantity; i++) {
                options.push($('<option>', { value: i, text: i, selected: i === 1 }))
            }
        } else {
            options.push($('<option>', { value: 0, text: 0, selected: true }))
        }

        setQuantitySelectForm(options);
    {% endif %}


    // 規格1選択時
    $('select[name=classcategory_id1]').on('change', function(){
        setQuantitySelectForm();
        
        // 規格1のみの設定の場合
        if ($(this).parents('form').find('select[name=classcategory_id2]').length == 0) {
            setQuantity($(this).val());
        }
    });


    // 規格2選択時
    $('select[name=classcategory_id2]').on('change', function(){
        var classcategory_id1_val = $('select[name=classcategory_id1]').val();
        if (classcategory_id1_val !== void 0) {
            setQuantity(classcategory_id1_val, $(this).val());
        }
    });


    // 在庫の数から数量を設定
    function setQuantity(category_id1, category_id2) {

        if (category_id1 !== void 0) {
            var index = category_id2 !== void 0 ? category_id1 + '_' + category_id2 : category_id1;
            var _stock_data = stock_data[index];
            
            if (_stock_data !== void 0) {
                var options = [];
                var quantity = 0;

                // 在庫数が無制限の場合
                if (_stock_data['stock_unlimited'] == 1) {
                    quantity = _stock_data['sale_limit'] == '' ? quantity_max : parseInt(_stock_data['sale_limit']);
                } else {
                    if (_stock_data['sale_limit'] == '') {
                        quantity = parseInt(_stock_data['stock']);
                    } else {
                        quantity = parseInt(_stock_data['stock']) < parseInt(_stock_data['sale_limit']) ? parseInt(_stock_data['stock']) : parseInt(_stock_data['sale_limit']);
                    }
                }

                quantity = quantity_max < quantity ? quantity_max : quantity;

                if (0 < quantity) {
                    for (var i = 1; i <= quantity; i++) {
                        options.push($('<option>', { value: i, text: i, selected: i === 1 }))
                    }
                } else {
                    options.push($('<option>', { value: 0, text: 0, selected: true }))
                }

                setQuantitySelectForm(options);
            }
        }
    }

    // <select>の設定
    function setQuantitySelectForm(options) {
        if (options === void 0) {
            $('#quantity').empty().append($('<option>', { value: 0, text: 0, selected: true }));
        } else {
            $('#quantity').empty().append(options);
        }
    }

    // 数値チェック
    function isNumber(value) {
        return typeof value === 'number' && isFinite(value);
    };
})();
</script>
{% endblock %}