MagentoストアのヘッダーにjQueryドロップダウンミニカートを配置しています。[カート]リンクにカーソルを合わせると、メニュードロップダウンが表示され、最近追加されたアイテムが表示されます。
これで、Ajaxのカートに追加拡張機能が統合されました。これにより、顧客はページを更新せずにカートに追加できます。私が今抱えている問題は、製品が追加されたときに、「あなたのカート」リンクにカーソルを合わせずにそれを伝える方法がないということです。
商品が追加されたときにミニカートを自動的にドロップダウンできるようにしたいのですが、どうすればよいですか？
誰かアドバイスを頂けますか？
前もって感謝します！
カートに追加するAjaxのコード：
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
// Start of our new ajax code
if (!url) {
url = jQuery('#product_addtocart_form').attr('action');
}
url = url.replace("checkout/cart","ajax/index"); // New Code
var data = jQuery('#product_addtocart_form').serialize();
data += '&isAjax=1';
jQuery('#ajax_loader').show();
try {
jQuery.ajax( {
url : url,
dataType : 'json',
type : 'post',
data : data,
success : function(data) {
jQuery('#ajax_loader').show();
//alert(data.status + ": " + data.message);
if(jQuery('.block-cart')){
jQuery('.block-cart').replaceWith(data.sidebar);
}
if(jQuery('.header .links')){
jQuery('.header .links').replaceWith(data.toplink);
}
}
});
} catch (e) {
}
// End of our new ajax code
this.form.action = oldUrl;
if (e) {
throw e;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
//]]>
</script>
And code for Mini-Cart:
function slideUp()
{
jQuery('#topCartContent:visible').slideUp(1000);
jQuery('.top-link-cart').addClass('mini-cart-layer-up');
jQuery('.top-link-cart').removeClass('mini-cart-layer-down');
}
function slideDown()
{
jQuery('#topCartContent:hidden').slideDown(1000);
/*startTimer()*/ /* optional*/
jQuery('.top-link-cart').addClass('mini-cart-layer-down');
jQuery('.top-link-cart').removeClass('mini-cart-layer-up');
}
function toggleTopCart()
{
if(jQuery('#topCartContent').is(':visible'))
{
slideUp();
} else {
slideDown();
}
}
var timer;
function startTimer()
{
timer = setTimeout(function(){
slideUp();
}, 5000);
}
jQuery(document).ready(function(){
jQuery('.top-link-cart').mouseover(function(){
toggleTopCart();
});
jQuery('.top-link-cart').mouseover(function(){
clearTimeout(timer);
}).mouseout(function(){
startTimer();
});
jQuery("#topCartContent").mouseover(function() {
clearTimeout(timer);
}).mouseout(function(){
startTimer();
});
});