XSLTスタイルシートに、XMLファイルを処理してWebページ(ASP.NET)でユーザーに製品を表示するルーチンがいくつかあります。XSLTスタイルシートはhtmlを出力して、製品と、サイズ、色、パッケージの数量、スタイルなどの製品のバリエーションを表示します。
バリエーションは任意として扱われます。私のコードはどれも実際にはバリエーションを具体的に参照していません。XMLには、製品が持つことができるバリエーションのノードツリーが常に含まれています。次に、各製品にはこれらのバリエーションが含まれています。たとえば、XMLでは次のようになります。
<Variations>
<Variation>
<Name>Color</Name>
</Variation>
<Variation>
<Name>Size</Name>
</Variation>
</Variations>
この情報から、2つのコントロールを作成することがわかります。1つは色の選択を提供し、もう1つはサイズの選択を提供します。
製品の各バリエーションは、独自のノードのXMLにリストされています。他のすべての製品バリエーションとは異なり、一意の製品IDがあります。例えば:
<Product>
<ID>000001</ID
<VariationAttribute>
<Name>Color</Name>
<Value>Green</Value
</VariationAttribute>
<VariationAttribute>
<Name>Size</Name>
<Value>6</Value>
</VariationAttribute>
</Product>
<Product>
<ID>000002</ID
<VariationAttribute>
<Name>Color</Name>
<Value>Multiple(orange)</Value
</VariationAttribute>
<VariationAttribute>
<Name>Size</Name>
<Value>6</Value>
</VariationAttribute>
</Product>
XSLTで、属性のすべての可能な値の一意のリストを作成します。たとえば、製品の多くは緑色ですが、サイズが異なります。製品の多くはサイズが6ですが、色が異なります。そのため、各属性に対して一意の並べ替えを行い、XSLTでDropDownListsを作成します。
ここで、ユーザーがショッピングカートにアイテムを追加できるようにする方法が必要でした。これには製品IDを知っている必要があるため、XSLTはいくつかのJSONオブジェクトも作成します。オブジェクトの1つには、次のように、可能なバリエーション属性と、属性オプションの選択を提供するコントロールの名前(ID)が含まれています。
var propCtlMap = [{"Color": "ddColor","Size": "ddSize"}]
別のJSONオブジェクトには、次のようなすべての可能な製品構成のリストが含まれています。
var datalist = [
{"pID": "000001","Color": "Green","Size": "6"},
{"pID": "000002","Color": "Multiple(orange)","Size": "6"},
{"pID": "000003","Color": "Multiple(purple)","Size": "6"},
{"pID": "000004","Color": "Multiple(red)","Size": "6"},
{"pID": "000005","Color": "Purple","Size": "6"},
{"pID": "000006","Color": "Green","Size": "8"},
{"pID": "000007","Color": "Multiple(orange)","Size": "8"},
{"pID": "000008","Color": "Multiple(purple)","Size": "8"},
{"pID": "000009","Color": "Multiple(red)","Size": "8"},
{"pID": "000010","Color": "Purple","Size": "10"},
etc, etc
]
これまでのところ、私はこれらすべてを機能させています。DropDownListを処理するJQueryイベントがあり.change
ます。次に、選択したすべてのバリエーションオプションを製品IDにマップします。これにより、非表示フィールドに商品IDを含めることができるため、ユーザーが[カートに追加]ボタンをクリックしたときに、選択内容が処理されます。繰り返しますが、これはすべて正常に機能します。
さて、私の具体的な質問です...利用できない/在庫がないバリエーションオプションを無効にできるようにしたいと思います。DropDownListで選択を無効にすることが可能であることを私は知っています。ASPで書かれたコードがあります。私はそれをJQueryに変換できると思いますが、どうすればよいかわからないのは、(datalist
上から、JQueryで)どのオプションが利用できないかを判断することです。上記ではdatalist
、6、8、10の3つの可能なサイズがあります。緑はサイズ6と8で利用できますが、10では利用できません。同様に、紫はサイズ10で利用できますが、6または8では利用できません。
無効なオプションを無効にできるように、すべてのオプションのマトリックスを作成するのに役立つJQuery/Javascriptを使用したメソッド/関数が必要だと思います。上記の例では、ユーザーが紫を選択した場合、その色で利用可能なすべてのサイズのリストが必要になります。同様に、ユーザーがサイズ8を選択した場合、そのサイズで使用可能なすべての色のリストが必要です。
これらのリストを取得する方法を知っていれば、残りのコーディングのほとんどを処理できると思います。
ところで、私はJQuery/Javascriptを2週間しか学んでいません。私はほとんど知りませんが、追いついています。
ありがとう。