Hover & Switch Images for SureCart Products in Bricks

A common design for e-commerce shop pages is to have a secondary image for each product display when the user hovers over the product in the loop. This can be useful for giving the user a quick glance at a different view of the product before heading to the product page.

This Pro Tutorial will go through how to create this in a SureCart product query loop in Bricks..

We’ll also include :focus-within to ensure that the same effect is seen if users are tabbing through the product listing, focusing inside the product loop (on links or an add-to-cart button, for example).

Steps

Assuming we already have a query loop in place for our ‘SureCart Products’ (using a product card element inside of the query loop like this) we will need to do the following;

1. Get the second image for each product
2. Use Bricks’ image element to output the image (if it exists)
3. Reveal second image on both :hover and :focus-within.

1. Get the second image for each product

Unlike the product’s featured image, there’s no built-in function or dynamic tag for getting the second image for SureCart products, so we’ll need to add this ourselves..

Let’s create a custom function for getting the second image for the product to add to our child theme..

/* get second image from surecart product */
function lit_sure_cart_second_image() {

	return isset(sc_get_product()->gallery[1]) && sc_get_product()->gallery[1] instanceof SureCartModelsGalleryItemAttachment 
		? wp_get_attachment_url(sc_get_product()->gallery[1]->ID) 
		: '';
	
}

We’ll be using this function with Bricks’ echo dynamic tag, and so will also need to register the function name.

/* register function name */
add_filter( 'bricks/code/echo_function_names', function() {
  return [
	  'lit_sure_cart_second_image'
  ];
} );

2. Output the Image

In Bricks, inside of our query loop we can then duplicate the image element that is being used for the product’s featured image and just change the dynamic tag from ‘featured_image’ to ‘echo:lit_sure_cart_second_image’.

Note that this second image element automatically won’t be output for products that don’t have a second image due to our function returning empty.

We’ll also wrap both image elements inside of a new block named ‘product image wrapper’ with the class ‘product-image-wrapper’, which will help create the hover/focus reveal.

The rest of the layout can be custom, as long as we keep both images inside of that product image wrapper. The above structure is the default structure that is added when we first add a product card element to the page.

3. Reveal second image on :hover & :focus-within

Now we can add the following CSS to the block with the query loop enabled.

%root% .product-image-wrapper {
  position: relative;
}

%root% .product-image-wrapper img:nth-child(2) {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

%root%:hover .product-image-wrapper img:nth-child(2),
%root%:focus-within .product-image-wrapper img:nth-child(2){
  opacity: 1;
}

That’s it

Now whenever the user hovers anywhere within each product in the loop, or if the focus moves inside (the user is tabbing across to a link or button within the loop), the second image will appear over the top of the featured image.