Catalogue Type WooCommerce Site

Showcase
1

WooCommerce website just launched recently.
It’s just a catalogue type without cart and checkout.

So far customer happy with it and please excuse my bad design :smile: (I am more on a backend side)

Owner decided to close the business. Link removed

  • Bricks v 1.5
  • Fluent Form + Pro
  • LiteSpeed Cache
  • MetaBox
  • RankMath
  • WooCommerce
  • Conditional Display Add-On For Bricks Theme (My own plugin)

Some of the features did wrote in tutorials on
https://itchycode.com/ and https://brickslabs.com/

Love Bricks

3 Likes
2

How is your product gallery implemented?

3

The basic simple one you could check this out.

Mine is just 2 different carousels.
The top one set 1 items to show and link to lightbox.
The bottom one set 3 items to show and activate arrows.

But to connect both carousels, still need to add some custom JavaScript.
Since Bricks carousel is using SwiperJS, you could check the documentation in SwiperJS.

Just need to connect carousel A’s controller.control to carousel B

You can check this as reference too. (https://codepen.io/mrWilson123/pen/XWdbxpj)

If it’s too difficult for you to follow, I might come out a tutorial.

2 Likes
4

Thank you very much for your reply.
I don’t use woocommerce and upload multiple images via acf.
Is it possible to achieve a similar display effect?
Displaying large images and lightboxes on top.
The bottom display thumbnails can be switched with a click.

5

Yes, you can achieve the same using ACF fields.

Suggest you use Gallery Type for ACF field so you can easily choose that field on carousel element without customization on PHP part.

After created 2 carousels successfully, you need to link their controls.

Let me share this simple JavaScript to you.

<script>
        	(()=>{
            document.addEventListener( 'DOMContentLoaded', ()=>{
              const mainCarouselId = 'tcgibt';
              const thumbnailCarouselId = 'akjbrb';

              const syncCarousels = () => {
                setTimeout(() => {

                  if( bricksData.swiperInstances[mainCarouselId] && bricksData.swiperInstances[thumbnailCarouselId]) {
                    bricksData.swiperInstances[mainCarouselId].controller.control = bricksData.swiperInstances[thumbnailCarouselId]
                    bricksData.swiperInstances[thumbnailCarouselId].controller.control = bricksData.swiperInstances[mainCarouselId]

                    bricksData.swiperInstances[mainCarouselId].on('init', ()=>{
                      'init'
                    })
                  } 
                }, 800);
              }
              syncCarousels()

              var _takingTooLongTimeout;
              window.addEventListener("resize", function() {
                clearTimeout(_takingTooLongTimeout);
                _takingTooLongTimeout = setTimeout(syncCarousels, 400);
              });


            //end domcontentloaded
            })

          })()
      </script>

If unable to follow, then I will create a tutorial for it.

2 Likes
6

Thank you very much for sharing.

7

Hi there, if you still stuck at the carousel thing, hope this can give you a clue. I purposely use ACF Field for the tutorial.

Good luck.

3 Likes
8

pretty awesome store dude
i really like it.

1 Like
9

How do I add this one feature in your site to the code above? I have tried for a long time without success.

// I want slide to active slider when click on thumbnail carousel item
bricksData.swiperInstances[thumbnailCarouselId].params.slideToClickedSlide = true

10
11

Hey @itchycode, can you please guide me to design slideout filters on category pages, for mobile devices.

12

Hi, I am not very sure and confuse whether you are using Carousel element or Slider(Nestable)

If I am not wrong, Carousel element using Swiper, and Slider(Nestable) using Splide.

If you are using Carousel, should just follow the tutorial way to change the setting will do. If you are using Slider(Nestable), why don’t just use the Options GUI to set the options?

13

Hi, it’s using some custom CSS + JavaScript to achieve. You could inspect the site via dev tool since it’s viewable from frontend.

The basic concept:

  • The filter div got an unique Id, style it as position:fixed, bottom:-100% in mobile. Set media query to restore position:relative, bottom:unset after min-width:xxx (so it will restore like normal desktop view)
  • Create a float button use position fixed as well, display:none on after min-width:xxx
  • Use JavaScript to listen float button click event. Change the filter div bottom to 0 via JavaScript. I usually create custom active CSS class and use JavaScript to add or remove from the filter div.
  • Other tiny cleanup on CSS like z-index, transition to make your Filter looks good in mobile.

I will prepare a simple tutorial on it but not that soon. Sorry about that.

2 Likes
14

Thanks for your help.

15

This work with things like Jetengine (instead ACF) because im looking for something like this to show CPT. i was thinking use slider (nestable) for that bot i really dont know if it is worth.

BTW i like so much your blog.

1 Like