Currently, I have implemented an Ajax cart slider that slides from right to left whenever an item is added to the cart. Customers are given the option to add a product with an image to their cart and can view the image directly from the cart by clicking on the "view image" hyperlink, which triggers a magnific popup.
https://i.stack.imgur.com/ggwqR.png
However, a problem arises when users click away from the displayed image as it inadvertently triggers the closing of the Ajax cart along with the picture. I have identified the code responsible for closing the Ajax cart:
`
if(!$(event.target).closest('#cart-notification').length && !$(event.target).closest('[data-href="#cart-notification"]').length){
if($('[data-href="#cart-notification"]').attr("aria-expanded") == "true" && $('[data-href="#cart-notification"]').attr("imgshow") == "false") {
$("#cart-notification").removeClass("active");
$('[data-href="#cart-notification"]').attr("aria-expanded","false");
}
}
`
To address this issue, I have decided to introduce an attribute called "imgshow" to the cart-notification class. When users click on "view image" in the cart, imgshow is set to "true" (when the magnific popup is triggered), otherwise it remains at "false" by default to enable the above-mentioned code functionality. If aria-expanded is "true" and imgshow is "false", the Ajax cart closes upon clicking away. Hence, I created the following code to set imgshow to "true" when viewing the image in the cart:
`
$(document).ready(function() {
$('.imagepopup').magnificPopup({
callbacks: {
open: function(){
$('[data-href="#cart-notification"]').attr("imgshow","true");
},
close: function(){
$('[data-href="#cart-notification"]').attr("imgshow","false");
}
},
type:'image'});
});
`
Although all attributes are updating correctly, the script does not seem to work properly, particularly when the magnific popup window is active. Strangely, the first block of script above disregards my callbacks only when the magnific popup is open. I am struggling to understand why this is happening. One possibility could be related to the creation of a new div class when the magnific popup is active, although it seems unlikely to interfere with my script block's functioning.
If anyone has insights on what might be causing this issue or how to resolve it, I would greatly appreciate your input as I am currently unable to identify the root cause of the problem.