[Closed] Trying to use any image from related products as the archive img of products.

[Author]

Posts

[Diego Walter Ricciardi]

Tell us what you are trying to do?

I have a complex product archive, which shows all products as one based on a taxonomy (product_tag specifically) and what I'm trying to do is something similar to that, which I've achieved using Views&Templates, but for images.

Currently I have a Views called All-image (name is not important) that:

Shows products
Includes current result
No limit/offset
Filter is = product_tag equal to the loop entry

Then if found it uses a template that's basically a div+productgallery
if it doesn, it uses another template that's just a placeholder img

It kinda works, meaning, for some products it works and sometimes it doesn't work.

What I'm thinking logically is to limit the results to 1, so if it finds the img it should show 1 of the found, but if I limit to 1 it mostly shows nothing, with the current setup it works but sometimes shows 2 product galleries or even three, since it doens't limit the results.

I've tested also to add a conditional to the template but that doesn't work either.

So maybe you can help see the flaw in my logic.

[Christopher Amirian]

Hi,
I did not understand what you wan to achieve to be able to help.

Can you explain what do you mean by show all product as one? Maybe I can help if I understand the goal.

Thanks.

[Diego Walter Ricciardi]

I have an archive display that groups products by product_tag, I'll upload a pic so you can view it.

To use that pic as an example, that one product card is displaying information about 7 products, price, sku, etc.
Of those 7 products, let's say 3 have product images / gallery and 4 don't.

What I'm trying to achieve is a view that will take the currently displayed image/gallery and loop through the grouped products to grab whichever product has an image/gallery and display that, instead of displaying a placeholder image.

To that effect I created a View that will return results based on product_tag and a template that has simply the image gallery.

This currently works, but the issue lies whenever there are multiple results (ie, several of the grouped products have image/galleries), then it displays the results but all results, resulting in multiple galleries.

I've tried limiting the result of the view to only 1 result but if I do that whever the diplay is of multiple products if the first result doesn't have an image then the result is empty obviously.

To circumvent this 'issue', I have some JS that cleansup the duplicate galleries:

function cleanupProductImageGalleries() {
// Find all elements with the ID BlockMainSingle
const blockMainSingles = document.querySelectorAll('#BlockMainSingle');

blockMainSingles.forEach(block => {
// Find all product image divs within this block
const productImageDivs = block.querySelectorAll('.wp-block-woocommerce-views-product-image.wooviews-product-image');

// If there's more than one, remove all but the first
if (productImageDivs.length > 1) {
for (let i = 1; i < productImageDivs.length; i++) {
productImageDivs[i].remove();
}
}
});
}

// Run the function when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', cleanupProductImageGalleries);

It also works, but I'm wondering if there is some logic to be used within the View to achieve the same without the extra JS.

[Christopher Amirian]

Hi,

I do not think that it will be a good solution with Toolset UI.

You can use the JS method. If in any scenario you decide to enable Ajax loading for pagination, please share the URL and I will come up with a JS code for that scenario as "DOMContentLoaded" will not work on that circumstance.

But from the look of the page I think you do not use any sort of pagination.

Thanks.