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;
- Get the second image for each product
- Use Bricks' image element to output the image (if it exists)
- 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..
