Archive Shop Grid Layout to List and vice versa

From the Bricks Builder forum, a user asked if it was possible to change the shop archive cards layout. Yes, it is.

We’ll be using a keyboard e-commerce website (Keychron) as an example.

Do you know the Keychron website has the same alternating layout changer with a click of a button? You can change the product viewing experience from a grid layout to a list one. Fascinating, right?

Let’s implement that using Bricks Builder. Of course, you could use any other builder or a custom theme, as the concepts here apply to all of them.

Create basic layout

First, let’s create the basic layout to replicate the design of the Keychron website. I used WooCommerce’s sample products for this tutorial. For now, it looks like this.

The frontend:

Add interactions (or JavaScript)

The design is not the fanciest, but it’ll do for now. Next, let’s add some JavaScript code. Bricks has this functionality built-in called interactions, we’ll use that.

Click on the list icon and add an interaction with these settings attached to it.

List icon (interaction settings):

• Trigger: Click
• Action: Set attribute
• Key: data-layout
• Value: list
• Target: CSS Selector
• CSS Selector: .section-products-wrapper (change according to your class)

Grid icon (interaction settings):

• Trigger: Click
• Action: Set attribute
• Key: data-layout
• Value: grid
• Target: CSS Selector
• CSS Selector: .section-products-wrapper (change according to your class)

Now, when we click either one of the buttons in the frontend, you can see the data-attribute of the product-wrapper class change from list to grid.

To change the layout of the product grid when the button is clicked, we’ll use CSS for that. Add the CSS code to the section element that holds your product grid.

/* Default layout */
%root%__product-grid {
  gap: var(--space-m);
  row-gap: var(--space-m);
  column-gap: var(--space-m);
}

/* Grid layout */
%root%__product-grid[data-layout="grid"] {
  display: grid;
  grid-template-columns: var(--grid-3);
}

/* List layout */
%root%__product-grid[data-layout="list"] {
  display: flex;
  flex-direction: column;
}

%root%__product-grid[data-layout="list"] %root%__product {
  flex-direction: row;
  align-items: center;
  column-gap: var(--space-l);
}

%root%__product-grid[data-layout="list"] %root%__product-image {
  height: 350px;
  width: 100%;
}
Code language: CSS (css)

And that’s it, now your shop archive page has a custom grid to list layout customizer. Comment down below if you face any problems implementing this.

References

• https://academy.bricksbuilder.io/article/interactions/