現在、jQuery Form プラグインを使用して、Magento 製品リストで複数の AJAX フォームを .xml 経由で処理してい.ajaxForm({});ます。現在、私が使用しているソリューションは機能しますが、非常に扱いにくく、この問題にアプローチするより良い方法があるかどうかを知りたいです.
簡潔にするために、コードを少し短くします。
<?php foreach ($_productCollection as $_product): ?>
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" class="derp" id="derp-<?php echo $_iterator; ?>">
<div class="quanitybox">
<label for="qty"><?php echo $this->__('Quantity:') ?></label>
<input type="button" class="quantity_box_button_down" />
<input type="text" name="qty" maxlength="12" value="1" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
<input type="button" class="quantity_box_button_up" />
</div>
<button type="submit" title="Add to Cart" class="button btn-cart" ><span><span>Add to Cart</span></span></button>
</form>
<script type="text/javascript">
var productAddToCartForm = new VarienForm('derp-<?php echo $_iterator ?>');
jQuery('#derp-<?php echo $_iterator ?>').ajaxForm({
url: jQuery('#derp-<?php echo $_iterator ?>').attr('action').replace("checkout/cart","ajax/index"),
data: {'isAjax':1},
dataType: 'json',
beforeSubmit: function(){
if(productAddToCartForm.validator.validate()){
windowOver.show();
windowBox.show().css({
backgroundImage: "url('<?php echo $this->getSkinUrl('images/loading.gif')?>')"
});
}else{
return false;
}
},
error: function(data){
windowBox.css({
backgroundImage: 'none'
}).html('<?php echo $this->__('Error') ?>');
windowOver.one('click',function(){
hidewindow(windowBox,windowOver);
});
jQuery('#hidewindow').click(function(){
hidewindow(windowBox,windowOver);
});
},
success : function(data,statusText,xhr ){
if(data.status == 'SUCCESS'){
if(jQuery('.block-cart')){
jQuery('.block-cart').replaceWith(data.sidebar);
}
if(jQuery('.header .block-cart-header')){
jQuery('.header .block-cart-header').replaceWith(data.topcart);
}
msgHtml = '<div class="added-content"><div style="float:left;">' + productImg + '</div><em>' + titleForBox<?php echo $_iterator ?> + '</em> <?php echo $this->__('was successfully added to your shopping cart.') ?><div style="clear:both;"></div><a id="hidewindow" href="javascript:void(0);"><?php echo $this->__('Continue shopping') ?></a> <a href="<?php echo $this->getUrl('checkout/cart')?>"><?php echo $this->__('View cart & checkout') ?></a></div>';
}else{
msgHtml = '<div class="added-content"><p class="error-msg" style="margin-bottom:15px;">' + data.message + '</p><a id="hidewindow" href="javascript:void(0);"><?php echo $this->__('Continue shopping') ?></a> <a href="<?php echo $this->getUrl('checkout/cart')?>"><?php echo $this->__('View cart & checkout') ?></a></div>';
}
windowBox.css({
backgroundImage: 'none'
}).html(msgHtml);
windowOver.one('click',function(){
hidewindow(windowBox,windowOver);
});
jQuery('#hidewindow').click(function(){
hidewindow(windowBox,windowOver);
});
}
});
</script>
<?php endforeach; ?>
このコードの残念な部分は、各製品の下部に多数の重複した JavaScript を生成していることです。
検証のために各製品を生成する必要があるため、これを回避する方法は実際にはわかりません。これnew VarienForm()はフォームIDのみを受け取ります（間違っていない限り）。
$_iteratorループごとにインクリメントする組み込みの を使用してこれを行っておりforeach()(つまり、derp-1、derp-2、derp-3)、フォームごとにインクリメントする id を追加しています。
などのクラスセレクターを使用して各フォームをターゲットにできることはわかっていjQuery('.derp').ajaxForm({});ますが、これをVarienForm.
ajaxForm({});送信ボタンに基づいてその場で生成しようとしまし.each( function({ jQuery(this).on('click', function({ //AJAX STUFF HERE }) ); }) );たが、うまくいきませんでした。
各フォームを個別にターゲットにし、 を生成しVarienForm、必要なフォーム データを取得し、ajaxForm({})メソッドを利用して、すべてをまとめて保持する、より堅牢なソリューションはありますか?