・商品オプションプラグインの選択部分について自分用にメモ
オプションについては商品ページの1ページのみでオーダーが完了出来るように情報を簡潔に詰め込む。
twigのforとifでオーダーステップごとにオプションの非表示を振り分ける。
・オーダーステップボックス振り分け構造
▷SIZE
・B
・W
・H
▷CONFORT
・着心地
▷CUSTOM
・Sleeves
・Length
—-
▷[CD]Neckline
▷[CD]Sleeves
▷[CD]Skirt
▷[CD]Length
—-
▷Fabric
▷Fabric Color
※2023/7/28現在
・オプションIDの振り分け
▶1~ 採寸値・ゆとり・オーダーアイテムカスタム(袖丈・着丈)
1 B
2 W
3 H
4 comfort
5 sleeves
6 length
▶10~ カスタムデザイン
10 Neckline
11 Sleeves
12 Skirt
13 Length
▶20~, 30~, 40~ でアイテムごとに振り分ける
▶100~ 生地(生地関連は最後に表示されるように100番台)
100 Fabric (変更する・しない)
101 FS Color – (オーダーアイテム)
102 FS Color – (カスタムデザイン)
——
■セレクトボックスで「生地を変更する」に入れた時はJqueryで色のセレクトボックスも「生地を変更する」に自動選択させる
$(function(){
$('#productoption100').change(function() { // ID100(生地を変更する・しない)
var v = $('#productoption100').val();
if (v == '79') { //するのとき
// ID101(色)を「生地変更する」、文字色を濃く
$('#productoption101').val('154').css('color', '#666');
// 色の項目を選択不可・文字色を薄く
$('#productoption101 option').not('#productoption101 option[value="154"]').prop('disabled', true).css('color', '#ccc');
// 「生地変更する」を送信可能なようにdisabled外す
$('#productoption101 option[value="154"]').prop('disabled', false);
} else if (v == '39') { //しないのとき
// 一番上を選択
$('#productoption101').val('57');
// 送信可能なようにdisabledを外す、色濃く
$("#productoption101 option").prop('disabled', false).css('color', '#666');
// 「生地変更する」を選択不可、色薄く
$('#productoption101 option[value="154"]').prop('disabled', true).css('color', '#ccc');
}
});
});
$(function(){
$('#productoption101').change(function() { // ID101(色)側から
var v = $('#productoption101').val();
if (v == '154') { //「生地変更しない」を選択したとき
// 「生地変更しない」を自動選択
$('#productoption100').val('79');
} else {
// それ以外は「生地変更しない」
$('#productoption100').val('39');
}
});
});
