osCommerの商品画面で、オプションを選択すると価格計算がリアルタイムに再計算される機能を作成した。
まず、osCommerceのオプション機能を拡張して、商品詳細画面にJavaScriptで作成された処理を追加した。これらはPHPで自動生成される。
購入者が、商品のオプションを選択すると、合計が再計算され、同時に現在選択されているオプション名が瞬時に切り替わるようにした。
PHPやDB、JavaScriptの部分も同時に考えて作成しなければと難しく考えすぎて時間がかかった。
DOMの処理によってはブラウザごとに動作が違うことがあったため、さらに混乱したが、JavaScriptで使用するデータの構造を工夫することで、ブラウザ依存の処理も回避でき、後半は意外とすんなりと完成した。
オプションの選択方法をラジオボタンとプルダウンメニューにしたが、オプションの値の取得方法で時間がかかった。
取得した値を表示させる方法もはじめは戸惑った。
obj.appendChild(textNode);
これだとどんどん文字が追加される。
2回目の表示からは元のデータを削除して
2回目の表示からは元のデータを削除して
obj.removeChild(obj.lastChild); // 末尾の子要素を削除
obj.appendChild(textNode);
こんな感じで表示を更新できた。
子要素があるかどうかは、
if(!obj.firstChild){ // 子ノードがない場合に実行
などとするだけ。
価格の円マークは半角ではエラーがでるため、また後々面倒なことになりそうな気がしたので、全角の￥で代用した。