After Ajax call

Hello. I have a jQuery function I made to adjust product images when they load on the page. Works fine. I also set the ajaxComplete event to recall the function to resize images, because after the new products load they do not have the adjustments. This event works, BUT the images populate AFTER the event, so the adjustments happen (to nonexisting images) then the page populates. Is there an event that is fired AFTER the products have been placed on the page, so I can latch onto the event and adjust there?

Hi david-0529,

Thanks for reaching to us.

Unfortunately, additional customization is outside the scope of our basic support.

Thanks for your understanding.

Regards,

I am not asking for “additional customization”. I am asking if there is an event fired off after the ajax has dropped the items on the page. I rather not have to go into the source and add it for myself. Would you just tell me if there is a JS even fired then please?

Never mind I solved it by generating a style sheet on the fly after page load and resize event.

What was I doing? I have product images that are not a uniform height. Since the area the product images show are a uniform width in the site, I get the width of the first product image on the page and then remove the stylesheet *by Id I make) and then shove a style sheet (that id) on the page that sets the images to the same height as the width and ser them object-fit to contain. This makes all the product images uniform (square) and shows the fill product in the square. It makes the page look a lot nicer and I do not have to find square images for everything. Using a stylesheet added to the head worked well.

Hi david-0529,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

[Author]

Posts