How to Setup a Dynamic Loop Modal in Bricks

0:00:00 Hello everyone, Kraka here. Welcome to another session in the Inner Circle. I hope you had a pleasant day.

Today’s video is going to be something that is very versatile, something that you can use across multiple projects. We’re going to be taking a look at how to set up a dynamic model and with a lightbox effect. Here I am on a shop page and you can see that I have what is called a quick view button here. When I click that quick view button, you’re going to see that we’re going to have this model here, come on the screen, and you could move from one to the next just like that.

Once you reach the end, it doesn’t move anymore. You have to move backwards. So let’s take a look at a few things. So we have this.

We have the next and the previous buttons. We have the Close buttons. We have this backdrop which is also the Close button extended so that when you click anywhere on the model, sorry, on the backdrop, it closes. We also have the ability to use the left and the right keyboard to move it.

So if I move it, hit the left keyboard or the right it moves. You can see, if I hit the left keyboard, it moves. You can see, so once it reaches the end, it no longer moves. So I’m going to hit the right keyboard now one time.

You can see it moves. I’m going to hit the left keyboard one time. It moves. It’s also tab-able.

You could navigate it with the tab. Once you are out of it, it closes. Whatever you do, whatever happens, the focus will return to the last button that was clicked. Like if I hit Escape now, see the focus returns to that.

So even if I move all the way to the end, the focus always returns to the last button. You may wonder why don’t we just use a plugin to do a quick view. Of course you could use a WooCommerce plugin to do a quick view but the WooCommerce plugin is just going to give you the ability to pull data for a WooCommerce post type, a product post type. But what we’re going to be doing is something that is general.

If I go ahead and change this to another post type, we’re still going to be able to pull in data from that post type. So you could use it on a listing website where you have your listing and then you want to preview more information from the listing. Now I also want to say that you are not limited to this layout. Now this is a matter of CSS.

You’re not limited to this layout. You could make it such that it slides in from the left or slides in from the right, slides in from the bottom. All that has to do with your CSS. Now I want to tell you how this works.

When I click the quick view, it pulls in information from a different page. That means this data already exists on a different page. Now it is possible to skip the step of having a different page and pull in this data directly from using the code. But that is going to make managing it much more difficult, especially for non-technical users.

But using the Page Builder to build a dynamic page and then pulling that information from that dynamic page based on these other buttons that are also inside another dynamic page is much better for Page Builder users. So like I said, this fetches information from another page. These pop-ups or these models are not on this page. So if I go to the DOM and then let me click here, I’m going to have that pop-up there and then I’m going to click that.

So we have this, I want to see where it starts. So we have this what is called a Fetch Container. This is the Fetch Container. Every other thing is inside here.

The Quick View is here. The Quick View buttons are there, all the next and previous. So this is this Quick View, this div with the information. This is it.

And this is the Fetch Container. Now, you can see that if I move it, you can see that it’s just replacing that div with another div. You can take a look at this data ID. This is Huawei.

And if I click on the next one, it just changes to Sony. So that means this information is being pulled in dynamically on the page in real time. And these divs, you don’t have all of them in the page at once. So I want to show you that.

And the reason I’m pointing this out is because there is a way to do it. There’s an easier way to do it but that easier way means that you’re going to have a lot of pop-ups in the page. Now I want to take a look at the bottom here. You see, these are, let me close this.

Now take a look at this. One, one, two, three, four, five, these are default Bricks pop-up that are inside a loop builder. So all these are inside a loop and they do the same thing as what I’m about to teach you. They do the same thing but the difference is that they all are loaded on the page.

So every bit of information that is there is all of them are right there. As many products or as many listings that you have, as many dynamic content that you have, you’re going to have equal number. So I’m going to show you how to do both and I’m going to show you I would not recommend using this unless you want to use it on a page with very few, maybe like three, or maybe you have something on your homepage that three cards and you want to quickly show maybe like a Teams card and you want to quickly show the content. Now let me quickly activate that one.

All right, so I’ve gone ahead to activate the default Brics pop-up and when I click it, you can see it pops up. Nice, okay. Pops up. And you see that works nicely.

It has a different behavior. It feels smooth and quick because it is really on the page that we are in. But we don’t have that ability to move it left or right. Okay that’s to move to the next one.

We don’t have that lightbox effect. So like I said if you take a look at the dome. Let me pop this up now. You can see that this is it here, right here.

This is the one for this and then of course, the one for this phone is this one. If I move to the next one, that is going to be this one. Now, I’m going to show you how to do both of them but I must seriously advise that you should be careful how to use this one. This one I’m showing you currently.

You should be very careful how to use it because it adds a lot to the number of requests. I’ve done my testing and the number of requests in having this one, all these elements live on the page, load on the page when your page is loading is significantly higher. That is, I mean, like 30 more requests. If you had 50 requests, you’re going to go all the way up to 80 requests and the page size is going to increase dramatically, especially if you have a lot.

Right now, we have only 6 cards here. Imagine that you are on a page, maybe you’re on a WooCommerce page that has up to 20 products displaying at once and that means you’re going to have 20 of these showing up in the DOM. Whereas, if you use this method, you’re not going to have anything on page load, nothing is going to be loaded. Let me just quickly show you that.

Now I’m going to click here and so I’m going to come all the way here. So let’s see, let’s look for that fetch container. Now this is the fetch container. As you can see that fetch container, inside it all you have is the previous and next button.

That is all that is there for now. That is all that you have there. So it’s just there. Now, nothing, you can’t access it.

Of course, you can see it in the DOM that is there. But that is all you have. OnPageLoad, that is all that is loaded. Nothing else.

Now, take a look. I’m going to collapse that previous and next. In fact, just to take a look. Now, this is an off-canvas element that is on the page which I’m not using.

Let me delete that. You can see that this is all that I have. I’m going to go ahead and delete that also. This is the container when we have not yet loaded our data.

If I click here, you see that data is loaded and that is when you have it loaded just one at a time. And then if I click here, that one replaces it. You see, data ID LG, it replaces it. When I click here, the data ID changes.

That means it always replace the current one. So it doesn’t load all of them at once. All right, enough talking. Let’s go into action.

So I have a blank install here. I have some product that I want to use. Like I said, you don’t have to use products. You can use listing.

You could use teams. You can use any kind of custom post type, any kind of post. You could do in the blog. You could use pages.

It depends on what you want to do. But I want to use product because I already have product set up and I don’t want to go through the trouble of setting up a different post type. Okay, so everything is the same method. There’s no difference.

All you need to do is just to query. The normal way, you would query your post types. So what I’m going to do is just to go ahead and set up a shop with maybe just all the images I have. So I’m going to go to Brics template.

I’m just going to click there. Sorry, I shouldn’t do that. This is a plugin that has this feature. Normally what I should do is go to Brics here, go to template, all right?

Just for those that don’t have this, so I should stop using that. Anyway, so I’m just going to add a new template and that template is going to be, I just want it to be my WooCommerce product archive. I’m just going to call it shop, okay? Shop archive.

I’m going to publish that and then I’m going to edit with Brics. Okay, so I just want to set up a simple page, nothing fancy. The most important thing here we want to look at is the function. Okay, we’re not going to waste time building a fancy page.

So I have this section here and I want to drop in a block. So I’m going to insert a block and that is going to be my product card wrapper. I guess the product card wrapper should just be this. So I’m just going to call this my product card as a class.

And then inside there, I’m going to drop in another block and I’m going to duplicate that block. This is going to be my image wrap. And this is going to be my contents wrap. So I’m going to give that a class of IC product card, image wrap, and then this is going to be IC product card content wrap.

I’m going to drop in an image and that is going to be my WooCommerce image. Now, we’ll begin to query it. Okay, let’s just drop them. So I have that image.

So that’s going to be my IC product card image. And then I want to drop in just maybe the product name. I’m just going to go just put a product title there. Let me not use product title.

The reason I don’t want to use product title is I want to be able to switch this to another post if I need to. I’m just going to add a heading element and that is going to be an H2. It’s going to be IC products card. Okay.

Title. I guess that’s all I want to put in there. I could throw in maybe a WooCommerce element like star, nothing is there. I like rating.

All right, just that. That is WooCommerce specific. But I said I don’t want anything specific to any post type, so I’m going to leave that out. Now, let’s go ahead and loop this.

So I’m going to change this to a query loop and then I’m going to be my featured image. 0:12:51 Sorry. 0:12:52

Featured image. And this is going to be my post title. And normally you want this to be here first. And then you want to select this and change this to negative one.

You want this to be, you know, the first one. You want this to be the second one. But visually you want this to be on top. You want the image to be on top so you want to go for the order.

We have the order here, put a negative one and it comes on top visually. In my product card, I want to, the wrapper, the container, I want it to display grid and I want to use grid three. For our own, let’s do grid four because we’re not going to have a sidebar and I want to give it a grid gap. So for this I just want to centralize everything including the text and I want to give it a padding of maybe small all around and for a card, maybe I want to give it a padding also like that, space S.

I don’t know if Kevin is watching but there is still a problem. You see when I click on this, when I click on that, I want to click on this, you know. I want to click on this but that XL gets in the way and it applies XL, you know. So let’s just fix that.

Okay. All right. So I want to give that card a background of white. Okay.

Okay, and my section as usual, you know me, primary dot dot, something like that. Okay, my product card, I want that background to accentuate this. So I want to go into border radius and just give it that. What did I do?

See, you see the same thing. I want to give it large and this radius circle comes in the way. All right, let me just give that and okay. I guess that’s all except for the size of this typography which I’m just going to make it medium size.

All right, so I’m going to take a look at the front end and see what we got. All right, so we have a nice setup there and what I want to do is to add my button. So I’m going to add a button and that button is going to be inside the content wrap. Let me refresh that.

I want to give it a tag of bottom. By default, the Bricks button comes in as a span, but when you apply a link to it, it changes to a link, but we want it to be a bottom. Now what I want to do is to show you the first method. I’m going to write popup.

So this is popup, okay? This, I want to give it a row, gap, of extra small. So the first method we’re going to use is to use the normal bricks pop-up to build this. What I’m going to do is I’m going to go into templates I’m going to add a new template I’m going to call this dynamic pop-up and template type is going to be pop-up.

That’s one word. I’m going to create a template and then I’m going to edit that template. I’m just going to hold down control and click to edit on another page. Let’s move that behind here.

So I want to create my template. The template I want to create, I want it to have this same look. Okay, just something like this. That template is actually a pop-up.

So what I want to do is to add an element on the page, which is going to be a block. So the first thing I want to add is a block. I want to take time now. Here is where we’re going to take time because we want to design this because this is the same element we’re going to use in the other method, the method I want, the recommended method I’m going to show you.

So we’re going to take time to build this. So this is going to be my quick view. I’m going to right click and insert a block and that block is going to be the inner wrap. I’m going to call that IC quick view, underscore, underscore inner wrap.

And then in there, I want to drop in two, you know, I want to insert two blocks, the first one, and then I’m going to duplicate that. This is going to be my image wrap, and this is going to be my contents wrap. Here, we’re going to have the class ICQuickView, image wrap, I want to set it to display as grid. Now I want to point out this.

Now let’s go back. You see this? This is the popup you know one. Okay.

Now when we’re using this method, the popup, you could style whatever, you could style everything in the builder like this. You could, you know, all these things I’m doing here, you know, like, let’s go back here. Everything that I want to style, I can style it in the builder. And the style will still show up when we use the pop-up, the, you know, the default Bricks method of using the pop-up.

But when we’re using this, that fetches it from a different page. It’s going to fetch just the HTML and the attributes. It’s not going to fetch the styles. Why?

Because Brics loads the style of the element on the page that that element leaves. The style for this will not be loaded on this page and that is why when we are styling this, whatever styles we have here, we will have to move it to an external style sheet or we have to move it here like right here where you have the page settings, custom code and then you drop it all of them on the page that you’re going to pull this thing up or if you don’t want to do that you could use an external code manager like wp code box or script organizer so that code will be available when this thing loads but then you have to either find a way to make it load just on the page that you know you need it to load so the best way to do that is to put it maybe inside that page like here. I’m gonna go ahead and style this. Now there are two ways to do this.

I could write everything in custom CSS or I could style it and then go to the front end, inspect and copy the rule. So what I’m gonna do is to make it easy to copy this code afterwards, I’m gonna style everything in the custom CSS. So before we go ahead and style it, I want to insert the image here. So I’m just going to drop in that image.

It’s going to be my C-chart image. Now you will see that nothing is happening here because this is a template. This is a pop-up template and we have not yet decided where it is going to take the data from. So this presents a challenge because we’re going to be building, we want to build dynamic content.

And normally in a template, you could always go in to template settings and then set the content that you want to show but in the pop-up, you don’t have that type of option. To solve this, what you would do is just to wrap this with a block and then set this quick view as a loop, okay? And so you can use the post type product. And if we do that, we should be able to see data there.

The featured image is going to show up. So we’re going to go ahead and design the rest of the stuff. So the idea of putting in a loop like this is to enable us to query the post type so we can see visually what we’re designing. So over here I’m just going to add a heading.

That heading is going to be the post title. I’m just going to go ahead and add the price. I’m going to go ahead and add the price. I’m going to go ahead and add the rating.

And then now, yeah, these are all comment specific, but if you’re using a different post type, that means you just swap this out for the relevant fields that you want to use. And then I’m going to go ahead and add the add to cart. All right. So I have the content in those two.

Now I’m going to select this quick view and going to go into the custom CSS and we’re going to start styling. I’m going to write roots. First of all, I want to set it to display grid. And then I want to set the grid template columns to be a CSS grid 2.

Okay, so did I do that on the right thing? No. That should have gone to the inner wrap. Okay, inner wrap.

Let’s do that. Okay, that is on the inner wrap. I don’t want it to fill the whole page so I’m going to give it a maximum width. I don’t want it to span the page width.

Okay. So I’m going to give it a maximum width of 1024 pixels. That means I have to give it a width of 100% but as a block it is already 100% width. But remember that we are going to be pulling it in.

So you want to give it, you want to make sure that you just sort that out. We’re going to be pulling it in so that style probably may not come in. It may because it’s a bricks block and that case is already on every page. But let me just put it there since I’ve given it a max width.

I want to give it a background color of white. And now I want to give it a border radius of let’s say radius L. Now because of other things that are going to be on the page, other absolutely position elements on the page or fixed elements on the page like these buttons, I want these to have a Z index. So I’m going to give it a transition of 0.

2 seconds. I’m going to go here to the image wrap and then I’m going to write root. I’m just going to give it a padding. A padding of space M.

That is all for that. And for the content wrap, let me just copy this. For the content wrap, I want to just do the same thing but not just the padding. I just want to give it a row gap of content gap.

Yeah, but I need it to fill in what is going on here. So I want this to fill this so I could either give that a flex grow of one. It’s not working because the parent is not a flex container. So we’re going to go to the parent and then we’re going to say after display grid, template columns and all, I’m going to say align items initial.

That should make it to stretch all the way. And here I want everything to be justified at the center here. So I’m just going to say, justify content center. So I’m going to save this.

Like I said, we’re not using the loop. So this was just to give us an idea of what our stuff look like. Now, if I go to the pop-up, let’s go to the template settings, the pop-up, and I go to the background and I could just give it a dark background okay and you can see what that looks like and here if I give this let’s say a gap. Alright so you could have an idea of what that looks like so that gives us an idea of the styling that we have.

So right now what I’m going to do is I’m going to remove that loop, delete, delete, and then I’m going to move this all the way up here and delete this. I’m going to save that, but of course that reverts back to this empty stuff. We can’t see what is here because it’s dynamic content. So for the pop-up, let me just go in there to the template settings, the pop-up I want to set this padding to zero so let’s make it zero all around.

I don’t want any padding. I want the background color, not the backdrop, the background, I want it to be completely transparent all the way there. Or I could just come in here and write transparent. In the backdrop, I need to have a backdrop color.

Let’s go in there. We want something like a bit, something like that. Okay. For this particular pop-up, I just want to give it a width.

I want the width to be like the page width. I’m going to give it a width of 1120. And then this quick view, I want it to align to the center. Actually, I want to the inner wrap that I should select.

So this inner wrap, I just want to give it a margin of auto. Let’s just do that. Let’s go here and just give it a margin of auto. And that should, yeah, that should move it, just centralize it.

Now since we’ve finished setting up this, let’s check that again. We see everything should be in order. The left and right, I think I’ll give it a space M because of that left and right padding when we go to smaller screen sizes. So, when we get to a smaller screen, at this point, I think here we had a grid template columns too.

Okay. I want to revert that to. In fact, let’s not do that. So let’s write a media query because that is exactly what we’re going to do when we take this out to a standard stash, right?

So minimum width or maximum width of say, AdMedia, MaxWidth, 767 pixel. And inside there, we’re going to say, Roots. I’m going to just paste what I copied. Let’s do that properly.

Should have just written it, read one. So if we get there, MaxWidth, it’s not applying. Okay, so we have that. We’re going to be refining the CSS as we go along depending on what, you know, the need.

Now we’re done with that. So we’re going to go to the button, yeah, the pop-up button. Okay, I’m just going to rename it pop-up button. Okay, so we want to add an interaction to that pop-up button.

So I’m going to be on click. This looks like a new bricks feature. Well, we will explore that in some future videos. Interaction ID, that makes sense.

It could be a solution to a couple of things that we’ve been asking for. Anyway, so this is going to be on click. The action we wanted to show element and the element we want to target is going to be a pop-up. And what pop-up are we going to do?

It’s going to be a dynamic pop-up. It’s not showing up because since we created the pop-up, we haven’t refreshed the page. I’m going to save this and I’m going to refresh Brics. Hopefully, we’re going to pick up that pop-up.

Okay, let’s go back to that interaction again and then let’s click and we’re going to see a dynamic pop-up there. Let me just save this and let’s refresh, check the front end and see what happens. I mean, of course, nothing is going to happen, right? And why hasn’t anything happened?

Because we did not want that pop-up to show up anywhere. We didn’t set the pop-up to show up anywhere. So when we are inside this template settings, this says set condition to show template on specific areas of your website. We haven’t set that.

And that is because we don’t want it to show anywhere. We want it to show only on this page and when these buttons are clicked. We’re going to come here just below the image wrap inside the product card. We’re going to drop, let me close this, we’re going to drop a template.

That template is going to be there and we’re going to select that pop-up in that template. I’m going to save it. Then when we go to the front end, refresh. Oh, it’s already refreshed, right?

You see that pop-up shows up. So when you click there, it shows up. Click, it shows up. Of course, the animation could be tweaked.

So when the pop-up is hidden, it has a class hide. The pop-up class is BRX pop-up. So if we click here, we go to inspect it. We go all the way down.

You can see it’s always the last item. So you can see that for each of these cards, we have all of them here. But now if you check the style, you see popup. height because it has a class.

If I click here, you can see that it has a class of height. BRX popup and has height. If I remove the height, you can see it shows. Okay.

So what I want to do is to use these two classes to target the inner wrap here. So I’m going to go back to my pop-up. This inner wrap, I’m going to go there and I’m just going to write. brx-popup.

height. Then I want to write a root. Now when the pop-up is hidden, I want the opacity of that inner wrap to be 0. And I want the scale.

I could use scale, but it’s not highly supported, so I’m just going to use transform scale. The root itself will have an opacity of 1. That is when it is not hidden. And then it’s going to have transform scale of 1.

0:31:47 So right now, when we go to the front end. 0:31:50 Now let’s give it a.

. . Yeah, we already have a transition here. Let’s bump that up to 3 seconds.

So when we go to the front end and check it out, we’re going to have a little bit of transition. Let’s refresh this. We’re going to have a little bit of transition. So let’s also, it’s still coming hard.

So sorry, I added dot root. So that is a mistake. It should be root, not dot root. Let’s save that again and let’s refresh.

See if it is going to work. Alright, so you can see that smooth fading animation there. Okay, so that’s how you get that animation to work. Okay, so that is the face method.

That’s basically all there is for the face method. Let’s check keyboard. You could, you know, move between these two forever and then escape cancels it. That is default.

Okay, the pop-up has accessibility built in. You could escape. Okay. So that’s all for that method.

Now we’re going to look at the second method where now we don’t want to be loading stuff like this. We don’t want to be loading all this. When a page loads, all the images, everything that we put in that pop-up is loaded on the page. We don’t want to be doing that.

Now, like I said, this is okay if you want to use it for team members that are just three on a page and you don’t mind loading extra data on the page. But if you have a product page or a listing page that has hundreds of cards on the page, you don’t want to be loading hundreds of pop-up on that page. So this method is not ideal for a situation like that. So that’s why we’re going to use a different method that fetches the data from an external source or from another source, which is another page, and pulls it in here.

Good thing we have already styled our quick view. So what we’re going to do is that we’re going to create a new page. So I’m just going to copy this. So let’s right-click, copy, not copy style, copy.

So we’ve copied that. Now we want to create a new page. I’m just going to call this Quick View. Once that page is created, I’m going to open that page.

Now the page is open. I’m going to click here to publish that page because I want it to be published. I’m going to save it and then I’m going to refresh so that what we have, page ID, will change to a regular page name. Alright, so we now see Quick View.

So what I want to do now is to paste that Quick View. Now it says if you want to allow you know pasting. When you’re pasting for the first time it’s going to ask you that. So I’m going to say allow.

So it allows me to paste that. So right now what I want to do is to turn this to a loop. So I’m going to turn that to a loop and then I’m going to query the product. Of course, product is queried by default because I had already done that.

So you can see that it’s going to populate all of it. All right, so we have that. Now I want to be able to see the way these things look properly in the builder. The styling I want to apply now, I don’t want it to apply anywhere else.

So I’m going to select the quick view. I’m going to go here and I’m going to say data builder mode. This is the attribute selector, the square bracket then give it a space root. So I’m going to select that quick view.

I’m just going to give it a background of grey. Then I’m going to give it a padding of 10rem. I don’t want the padding to be all around so I want it to be up and down or just up and down. So it’s going to be padding block.

All right, just up and down. This styling, this gray is going to be just in the builder. That is what we have for that. Now, what we’re going to be targeting to pull to the front end will be this inner wrap.

We’re not going to pull this, we’re going to pull just this. That is why we put all our styles there. Okay, so what we have to put here, what is missing here now is, we’re going to put one more element and that’s going to be a close button because now unlike the pop-up, the one you’re building yourself does not automatically have a close button. So we’re going to have a close button there.

My close button is going to be a div. So I’m going to insert a div here. It’s not inserted. Okay, that’s my div and I’m going to button.

Then inside there, of course let me quickly change the tag to a button and then of course the default styling of the button is there I’m going to go in here. I’m just gonna write root I’m just gonna say background the background is going to be transparent for now let’s just make it transparent. Okay. We’re going to change that up later.

Then inside there, I want to drop in an icon. That icon is going to be my close icon. We’re going to choose demyfy close. Yep.

I’m going to put that there. I want to absolutely position this. Now the close button, I should give it a class. So let’s just do IC QuickView close-btn.

Alright. Now that style that I put there on the IDE, I will have to move it to the class. So we have to put all the styles on the class. Now this button, we are going to use this.

It’s not just going to be a regular button. We want this button to expand and fill up everywhere outside the quick view. And that means this button is going to be on the same level as the inner wrap. Okay.

So it’s not going to be, let’s just make sure it’s on the same level as the inner wrap, not inside the inner wrap. Okay. Good. So we have that button here.

Now we want to place it absolutely. To put it absolutely, we have to first of all, position this quick view relative. So I’m going to select that quick view, say root position relative and here the close button is going to be position absolute. So why aren’t we seeing that?

Okay, so it’s showing up here. I’m seeing it here. I’m seeing it all the way here. All right, so it’s not showing up in the first one, so let’s stay here.

Let’s stay here and be looking at it. So I want to set this to display. If you say display say Display Flex, Justify Content, Center. Nothing is really showing up.

Okay, let’s try a background color. We already have that background. Okay. Let me just make it red.

Okay. So there you are. There you are. It’s showing up for some reason.

It’s showing up. Okay. It’s showing up. But I want that background.

So let’s leave it red for now so we can see. Okay. So all of this was working. Yeah, it was working.

I’m going to align items. Select start. 0:39:27 Okay.

0:39:28 So I want it to be centered and top. Okay. So let’s look at that.

Okay. That is how it is. 0:39:36 Go back.

Now for the background color, I want to give it something. Let’s go into ACSS and 0:39:37 see if we can find something like, let’s say the primary color, something like that.

Primary trans, okay. That’s two. That’s something like that. I’m going to remove it from here.

We go back to the custom CSS and I just want to put that here. I’m going to save this then we’re going to preview on the front end. Okay, so that is that. Of course, it’s not showing the way it’s showing the builder, but you can see that our button is everywhere, you can see, because of that pointer.

Okay, so now we want to style this icon button. So I’m just going to say IC quick view. I’m just going to say close button icon. 0:40:40

Okay. 0:40:41 For that, we’re going to give it a font size and a color. The size of an icon is usually a font size.

I’m going to give it 32 pixels and then the color is going to be white. Make it like that, refresh here so everything will pick it up. Pick up, pick up. It’s not picking up.

So right here we have everything set up for that page, that quick view page. Now that is where, now let’s, this is from where we’re going to pull in each of these into the shop page, into here. So, now, a pop-up, we’re going to take this off now. Let’s go into the shop page.

So, what I’m going to do is, I’m going to remove the template. Now, I’ve shown you the first method. Now, I’m going to remove that. We don’t need it, but we’re going to reuse it.

So I’m going to go to the interaction and then I’m going to delete that interaction because we no longer need interaction there. And this is not going to be a pop-up, this is going to be a preview. Now we are going to give this button a class. And that’s going to be ICQuickViewButton.

View, Bottom. Of course we really don’t need to put any styling on it because it’s just the default button styling except you want to maybe put an icon like change it to an icon button. Let’s say you don’t want anything there. So for form, let’s just make it like that here.

So I’m using Plinify. I don’t know if I can find an eye there. Yeah I can. And we could start that button anyhow we want.

When we pull in that data, there has to be a container that is ready to accept it. So I’m gonna insert a block here and that is gonna be my fetch. Consider we’re gonna use in fetching it. We’re gonna call that IC quick-view underscore fetch container.

And of course that container is, that fetch container is not going to be here. It’s going to be on the same level as the container. Okay. Let’s move this container up so it’s going to be right here.

And then this container is going to have to, we want to make it a fixed position because it’s going to, it has to be fixed on the page. I’m going to do roots. First, you want to be position fixed. Okay, so you see there, inset is going to be zero.

So top left, bottom right. Now you can change this to top left, bottom right. If you’re going to be using browsers that don’t support inset, inset doesn’t have a lot of support, but I just want to move through this. Then I want to give it a background color.

I want it to be transparent white. Okay. So let’s see. Does ACS have a white trans 20.

All right. Cool. But I want to give it a backdrop filter of blur. Beautiful.

So when it comes up, we want the page to blur out. We want to get it to display as grid. We want to align items center. Center.

Then we want to give it a very high Z-index. The Z-index is going to be 9999. I want it to be above everything on the page. Now we want the visibility to be hidden.

The visibility hidden means that it is not going to be shown on the page by default and it’s not going to accept keyboard focus. So we’re basically hiding it from the page from accessibility, keyboard focus and all the rest. We also want to go an extra step to say pointer events will be none. But we want to be able to see it while walking.

So I’m going to use the builder mode. Data builder mode. Attribute selector to target the root. And then we want to say visibility visible.

Alright, so it’s visible here. But of course, the backdrop filter, we don’t want it inside the page while we’re working. So this is only to take care of inside the builder while we’re working. And the background is going to be transparent inside the builder.

Let me just stay on set. So we’re going to give it a margin, a padding left and right because when we get to the smaller screen size, we want to still have that padding the same as the section padding which is space M. So the padding left and right will be padding inline and that’s going to be space M. Okay.

Then the padding top and bottom, which will be the padding block, which is going to be, I want it to be very large, space extra large. Let’s save that. And let’s take a look at the front end to see that, yeah, it’s actually not showing up on the front end, but it’s somewhere here on the page just below, just below this. So this is it.

You can see it has a large padding top and bottom. The left and right it just has the normal padding. Okay so it’s right there. The next thing we want is to put the left and right arrows there because that is where from where we’re going to be controlling you know our lightbox.

Inside this page we’re going to drop in a block. That block is going to be our buttons. So, those are going to be our next and previous buttons. I’m going to give it the class of IC quickview next-prev-btnButtons Not quite sure why it is like this because it’s a block, it’s supposed to fill in, okay, it’s supposed to be a hundred percent.

I want to say roots, but before we write any CSS to it, I want to drop in the buttons, the buttons, okay, and I want to use some divs for that. So I’m going to insert a div. Why doesn’t that work the first time? Okay, so this is going to drop in an icon.

Then I’m going to duplicate this and this is going to be my next button. I’m going to give it a class. I see quick view previous button. And I’m just going to be next button.

Then I want two of them to have a common class because these and these, they have a separate class. I want to give it a common class for the styling. So I’m just going to add another class. So I’m just going to call it next previous.

Like I just sometimes, you know, next previous buttons. OK, next previous button. Previous next button. So they’re going to have this common class, OK?

So I’m just going to put that class there. So this has two classes, this is also going to have that class in addition. What was this? Next previous button.

Previous next. Next previous. No, that’s confusing. That shouldn’t be.

So this should be the wrapper. Okay, so let’s rename this to next-previous-button-wrapper. Okay, okay, so these should be, we should call it the same thing next-previous, not previous-next. Next-previous-button-wrapper.

Okay, getting these class names right is very important. But let’s go ahead and change this icon. The icon for the previous, I’m going to go to pre arrow should work and the previous I want it to be that while it is loading let’s go to the next one and arrow next I’m going to position these let’s make it a hundred percent so I’m going to go there to the styles root by default these things are displayed as flex so I’m just going to say flex direction. Flex direction is going to be row.

So that does it. So justify content. I want it to be spaced between. I want to give it a fixed position.

Position is going to be fixed also. And we’re going to give it a higher Z index, 999, like that. Of course, we want to make sure that it is, after the fixed position, we have to give it a left position of 0. We’re going to give it a right position of 0.

At the top, we want it to the center. Now for this button itself, let’s go to the icon. This icon is the needed class. Let’s just copy something like there.

And then we’re going to put there, and that is going to be next next, previous button icon. I’m just going to copy style and paste here. So copy that class over. For here, I just want to give it a size of 32 pixels.

The color should be white. That means this one is going to have a background. So for this, I’m going to select the next and previous button and then I’m going to give it a root. I’m going to give it a background of, let’s give it red for now, and then the padding of 1rem.

I’ll give it a border radius. Let’s say radius dash m. Okay, so that background, I think I want it to be something like, let’s say, primary trans 60. Okay.

Something a bit lighter, like say 20 or 40. But when I hover on it, let’s take away all this, root hover, when I hover on it I want it to be like 60. And of course we can’t see it because the fetch container which is the parent container had a pointer event of none. And so inside the builder, we’re just going to change that to auto so we can preview what is going on.

So you can see that that is working now. And one thing we didn’t do is the next and previous buttons are supposed to be bottom. So I’m going to change the tag, the button, and this, yeah, of course, that tries to impose a style. I’m going to also change this to bottom.

But I think that shouldn’t disturb anything. It’s just an initial reaction. Let’s save that. And of course, nothing is going to show on the front end because it’s still hidden.

Okay. This is still, the fetch container is still hidden. And so if we go to the front end and right click and inspect this section, we’re going to see a fetch container. If we turn off visibility hidden and pointer event none, you can see that we should be able to show how it should look.

Now, the remaining thing is for us to bring to fetch the quick view and place it here. And for that, we’re going to be using JavaScript. Of course, we’re going to be updating our style sheets, our styling as we go along because I believe that there are a couple of things we still need to tidy up in regards to the styling. Okay, and I’m going to be using Script Organizer.

So I’m just going to call this, let’s just call it Quick View. Quick View Fetch Code. And we’re going to have codes in the header and the footer. My header code is going to be my CSS, my footer code is going to be my JavaScript and we are going to publish this and enable code block.

And what we want to do is to write a code that is going to, now what we want to do is to write a code that is going to go to this page, the quick view page and then pull out one div. Now to do that, there’s one more thing we have to come here for this button. We need to give it a data ID. So this is going to be this button, not the fetch, this button, the button in the card, pop-up button.

I want to give it a data ID. Now because that button is what we’re going to be using to compare with the quick view card with the quick view container to know which one should pull which quick view which one should pull which which of this okay. So is the data ID that we’re going to be using so the data ID we want the So let me save this. If we go to the front end, let it save.

And then, I’m going to check the data ID for this button. And you’re going to see it’s pulling in a data ID of 108. And this button is pulling a data ID of 109 and so on. This one is pulling in a data ID of 133.

I like my data ID to be a little bit more descriptive. So I want to do dash the post name, the post title. So if I save that, it’s going to refresh this and it’s going to give me a data ID 133-OPO1. Let’s look at this.

This is 155-SUNNY-EXPERA-EXIT. Now, I don’t want it to bring in, sometimes you have a post title that is very long. I don’t want it to be. I want it to take just the first word.

So in this post title, I’m going to put a semicolon there and put one. That is going to return just one word. And let’s look at it again. 5 Sunny, 133 Opal, and then this Huawei Nova, yeah, 107-Huawei-Nova because it’s hyphenated, so it takes that as a single word.

So now we have our data ID. We’re going to do the same thing here. On a second thought, let’s swap that because I think the number should come last. I’m going to cut this and then I’m going to put that in front.

So it’s going to be like the number is going to come in front. That makes sense, right? So it’s going to be Huawei Nova-107. You see, like that.

And this is going to be Samsung-108. So that looks better. So I’m going to select the quick view and close this. I’m going to add data ID also.

And because they are the same post type, the data ID is going to match. So if I save this and we refresh this page, you’re going to see that this quick view has a data id of samsung 108 and this has a data id of lg dash dash dash you know the same just the same as the product okay so let’s say lg v60 dash thinq dash 109 so if you go here and check that lg so you want to be check to confirm LG-V60-ThinQ-109. So they have the button and the quick view have they both have the same data ID. So now I want to show you something.

So let’s come here and we want to start writing. I’m going to set it to be this URL. So let’s remove this. 0:59:19

Okay, I’m going to copy that. And that is going to be my URL. 0:59:23 I’m going to press enter.

So I’ve defined the URL. That is the URL we want to copy, we want to fetch something from. So we’re going to create a new variable called XHR. And that is going to be new XML.

Okay, you see XML HTTP request. And we want to so XHR is XML HTTP request. That’s what it means. So we’re actually making an HTTP request requesting data from another URL.

So you want to put that there and we want to get that data. So we’re going to say XHR. open, open and close there. Inside there we will say get, then comma, put the URL in small letters.

So we already declared that URL here. So that’s the URL we’re getting. Now so let’s see if you have gotten a response. Okay, so that response text returns empty.

We want a place that we can put in that response text. I’m going to create a dot create element. 1:00:47 That is going to be a temporal div.

1:00:50 So we’re creating a, yeah it’s supposed to be temp, but that’s a spelling mistake, temp div, but it doesn’t matter, it’s a variable. So I’m going to say temp div dot inner HTML equals response. So we want to take that response text and put it inside the inner HTML.

So if I say, temp div, 1:01:18 it’s showing me here, but there’s nothing inside it. 1:01:21

Now, the reason we don’t have anything inside it is because we have not yet sent this request. So to send this request, I’m going to do xhr. send. So I’m going to send that request.

Now that I’ve sent that request, I’m going to see what the response is. Now of course the response will still show zero because we sent the request before we did this. So what I’m going to do is I’m going to copy this again. I’m going to put here.

I’m going to type response. You’re going to see that it’s going to return everything on that page. So let’s take a look at what we have here. I’m going to move my picture away.

So if we look at this, we’re going to see that this is returning everything on the page, on the quick view page, on this page. Let me close this. So how do we know that? If I save view more, yeah, we see more.

You’re going to see that you can see all the IC quick view image wrap that we had there, see the source, everything is there. So we are creating, we’re going to now we have gotten the response and it’s returning everything there. Now from there, we’re going to create a temporal div, and then we are going to populate that temporal div in our HTML with this response. So that temporal div, now that temporal div is going to allow us to be able to go in.

Now the reason we’re doing this is because we want to get everything from that page temporarily is going to be a text, response text. It’s not loading anything on the page. It’s getting a text value from there and then it’s going to go in and start writing the JavaScript. Now I just want to give you the idea of what is going on right now.

So let’s go into this and we’re going to start writing the JavaScript. Now there are a couple of other variables we’re going to declare. We want to keep track of the button that we clicked last. So we want to set it to null initially.

And then we’re going to store the reference to the currently displayed Notice that when we click this thing here, sorry, where is that? Where is that sample? Okay, here. When we click it, this becomes a currently displayed div.

Now we need a reference to this div, so that by the time we click another one, we can reference it and remove it from the DOM before introducing the next one, before appending the next one. We need to remove, for example, we remove the LG before putting in the iPhone. If we don’t remove the one that was there, it’s going to just keep stacking, you know, on top of each other. So that is why we need to keep track of the one that is currently displayed.

And that is going to be a quick view. I’m going to set it to null also because at the beginning, there is nothing yet. We don’t have a click button and we don’t have a div that is displayed. So the initial value is going to be null.

Then the URL, of course, we already did something like that, and the URL is going to be a URL that I think I’ve already copied that, which is going to be this. Now, one more thing, we need to do something to this page, because this page is not supposed to be a public page and I forgot to do that when I created the page. That’s one of the first thing I should have done. We’re going to go into this page and we want to set a meta tag and that meta tag is going to make sure that we don’t have this page is not discovered by search engine and we don’t have crawlers you know crawling this page.

So we’re going to go to a custom code and in the header script we’re going to put meta and then the name is going to be robots. It’s going to be a small letter. The content is going to be no index and we’re going to do no follow and we’re going to close it. Now this is going to create a function to fetch and replace the div with corresponding data ID.

So this function is going to go through when a button is clicked, it’s going to check, it’s going to go to the next page, this page, and it’s going to look for the div, the quick view div that has the same data ID as the button that is clicked and it’s going to pull it out. We’re going to say function fetch and replace div that is going to take two parameters. It’s going to take data ID and it’s going to take the button that is clicked. Let’s open and close that.

But XHR is crossing new XML request. XHR. open is going to be get and URL. 1:06:59

Okay. 1:07:02 So we’re getting the request from the URL. Now inside there, we’re going to create a function called XHR.

onReadyState is equal to 4 and xlrStatus is equal to 200. It means if that request is ready, I’m going to be calling xhr as that. You know, whatever. You know, it’s a tongue twister for me.

xhr. responseText. Get there. I’m going to create a temporal div.

div. innerHTML is going to be equals to response text. That’s going to be the response. We’re going to start declaring other variables to reference the divs and the element that we created.

And this way you’re going to put the selector for the div in page one. Now page one is the page. I’m going to refer that to the page one. Let’s say in the source URL, or the div in the source URL with the specified data attribute or data ID.

1:08:48 Okay. 1:08:49 Var Fetched Quick View.

The quick view we are fetching, we want to store in a variable, the one we are fetching. Not the one we are displaying, the one we are fetching. The one we are fetching is going to be temp div because we’re going to fetch it from the temp route. Remember that when we get a response, it stores all that response in a temp route.

From there, we’re going to select the one we want to display on the page. Remember, we’re not displaying everything on the page. The response sends us everything, but it’s not yet loaded on the page. It stores the text only, not the image.

It’s not loading any image, not loading any data. It just stores those texts in a temporal div. And when we go in and fetch that text, and then we actually bring that text out so that we can load it on the page. So it’s going to be termdiv.

querySelector. Now we want to query the ID, but we want to dynamically pull in the ID depending on which button was clicked. So that ID is going to be the attribute selector, which is the open and close data ID. It calls to, we’re going to put that double quotation mark and we’re going to put another single one.

And that’s going to be, we’re going to put plus data ID. Now we’re going to reference this data ID here, plus. So we’re doing, fetching that. So we’re fetching these, the data ID is going to, we’re going to pass in the data ID that is going to be passed in here by the button that is being clicked.

Okay. That’s what we’re doing. So whenever we click a button, it’s going to select the corresponding div. We have not yet written a function for clicking a button, but this is the preparation for that.

Now we’re going to make the. . . Once we select that, we’re going to make the fetch div.

We’re going to say Fetch Quick View. Set attributes. I’m going to set the tab index to 0. Setting a tab index to 0 would enable it to receive keyboard focus.

And we need to also reference the selector for a fetch div. That is the container, the fetch container in the second page. This is the source page. This is the target page.

So, a selector for the div in the target page where you want to place the fetched div. And that is going to be, we’re going to call it QuickViewContainer. And that is going to be document. querySelector.

And what was the class of that? So let’s go back. So this is, yeah it was on this page. Yeah, Fetch.

This is it. So I’m going to copy that class. And we’re going to put that class here. Now, remember that we had a restore reference for the currently displayed.

Now, because we want to paste, we want to now append the newly fetched div on the page, but we have to first of all check if a div is currently displayed, if a quick view is already displayed. So I’m going to say if quick view, and we’re going to say quick view container. removeChild, and we want to remove quick view. Now if it’s already there, remember, if it is already there, that’s the first thing we want to check.

If it is there, but the first time you click, it’s not going to be there. So, after clicking, we want to update this reference to the one that is now there. But before that, we want to append the one that we fetched. With the specified data ID.

So I’m going to say quick view container again, dot append child. We are appending the fetched quick view, the one that we just fetched. Fetched quick view. All right.

And when we append that, we want to add a class to the body. This class is going to enable us to now style all the elements that we want, how it’s going to be displayed when we fetch this quick view. Add the class, quick view. This is the name I’m going to call this class, quick view active.

That’s what I want to add to the body if it’s not there already. So if that class is not already there, because anytime we run this function, it should check if it is there. If it is not there, there’s no need for it to add again. I mean, it doesn’t make any sense, right?

So we’re going to create a variable for the body. And I think the variable for the body should be created outside here. So I’m just going to say body equal to document. body.

Okay? So we’re going to say if body. classlist. contains Now that exclamation mark says if it does not contain this class quickviewactive then we’re going to add that class to the body.

Body. classlist. add Quickview Active And once that happens we want to set the area expanded 1:15:06

open 1:15:08 to the clicked button clicked button Click button, dot set attributes, I re-expanded, I want to set it to true. Now that we’ve done all that, we want to update the reference to this quick view, okay?

We want to update the reference to the currently displayed div, which is the quick view itself. I’m going to say update reference to the currently displayed div. So we’re going to say quick view is now the one that we phased. And because of phased, let’s just write phased quick view.

So now initially when you load a page, the quick view, there’s nothing there. So we are saying that if the quick view exists inside that fetch container, that that container should remove the quick view that already exists. Of course, the first time it’s not going to see anything before appending the fetch container, the fetch quick view. Now, when it fetches it, now it’s currently on the page.

By the time we want to run this function again, it should reference the one that was just appended as quick view. So that by the time it comes back here, it will recognize it and remove it before appending the second one. And then we want to move the focus. So the newly added div.

And that’s going to be quick view dot focus. Then we want to store a reference to the last click button, the button that was just clicked. Store a reference to the last button. So we already declared it here.

We have not used it yet. We want to update that value. Last click button is equals to click button now. It’s going to be the button that is clicked, which we’re going to pass in when we set the click event for our button.

So it’s going to reference any button that is clicked. And that’s going to be the clicked button. We still have a little bit more to write. So now what I want to do now is to start referencing the buttons.

What we want to do is to select our close buttons. We have a close button there, so we want to reference the close button. So select the close button inside the Fage container. Not the Fage container, the div that is being Faged because the button was inside the quick view.

So inside the phage div. And what was the class of that close button again? That close button was this. Okay so I’m just gonna copy that.

I’m just going to paste that ID there. I want to add event listener. Add a click event listener to the close button. So we’re going to say closeButton.

AddEventListener. AddEventListener is going to be click event. And we want to do something. When we add that event, when we click the button, I’m going to say remove quick view active class.

So we’re going to remove that now. We will write this function. This function is not yet active. It’s not available yet.

We’re going to write it. Okay but when we click the close button, we don’t want the active class to be there on the body anymore. Now to be able to get out of our card or our pop-up when we tap outside, we have placed the close button. I want you to see that we’ve placed the close button as the last item.

So that means when you are tabbing through this, the last item you’re going to reach is the close button. So when we tap and reach the close button, we want to automatically close the page. So we’re going to add a focus event listener to the close button. Okay.

So we’re going to say close button. addEventListener. focus. So when we focus on it, what do we want to happen?

We want to create a function and we want to remove, still remove the active class from the body when we focus on the button. But before we do that, we want to set a timeout. We don’t want it to be instant. We just want to give it a little time to allow the keyboard to focus before it activates.

I’m going to set setTimeout. Then I’m going to call that function, remove the active class. We have not created that. The same function here is what we’re going to use.

But we want to delay for 200 milliseconds. Now I want you to know that all this was an if statement. All this from here, everything is inside this if statement. This is where the if statement ends.

But if the ready state, else if, the response is not ready, then we want to log an error, console. log error, loading div with data ID. Then we’re going to send that request. Right now nothing is still going to happen because our button here we have not written any CSS for this button okay.

Let me refresh this page. We have not written anything for this button so nothing is going to change right. Sorry, did I say CSS? We have not written any JavaScript or those buttons.

I want to go ahead and create a function to remove. Here, we’re going to create this function. Remove our active class. That’s going to be a function.

So function, now here, just say function to remove active class from the body. So what we want to check is if the body has a class list. 1:22:08 Quick view active.

So if it has, what do we do? We remove it, right? 1:22:16 Body.

classList. remove When we remove that, we want to set the area expanded to the click button. We want to update area expanded. So if the last click button, the set attribute, area expanded, I want to set it to false.

And we also want to return the focus, okay? Last click button, focus. 1:23:08 All right.

1:23:09 So this is what is going to happen when we remove the class. You know we want to set the area expanded of the last click button to false. All right now it’s time to to deal with these buttons.

Yep these buttons. When we click it it’s time to deal with it. What happens because that’s what is really going to do the work okay of bringing up fetching the whole stuff. So I see quick view underscore underscore button.

So let’s go there. We want to declare a variable there. A quick view button. Buttons, okay, because there are a lot of them.

Equals to document dot query selector all because there are a lot of them. The class is that. We’re just going to copy that. And then I’m going to come here and put that.

So that is with reference those buttons. I’m going to come down here. So events listener for each quick view button. 1:24:22

So what was the name? QuickViewButtons. 1:24:23 QuickViewBTNs.

All right. We’re going to say QuickViewButtons. forEach function. And we’re going to call it bottom BTN.

1:24:36 And we’re just going to do that. 1:24:38 Now initially, areaExpanded will be set to false for all of them, you know, because we didn’t add that in the builder.

So on page load, we want it to have aria-expanded or false. I’m just going to say button. setAttribute, aria-expanded, false. Then we’re going to be a function.

So now when we click the button, we want to do is to call this function to fetch and replace the div. So I’m going to call that function right here and then we’re going to pass in two parameters. So the first parameter here was the data ID of the button that is currently clicked and which is still the same. We just call it the same thing data ID comma and then the click button is just going to be the button.

So we are passing the click button as a parameter to that function. So let’s go to the front end and then we’re going to refresh this. First of all, let’s check the console to be sure that there are no errors on load. No.

I’m Okay, so there’s an error here. Probably there’s a mistake with this. So it appears closing that might work. Let’s see.

Okay, so I think this works now. 1:26:58 So you see Quick View is active, right? 1:27:01

I click and it adds, see, Quick View is active to the body. Good. So that works. So you can see that the body did not have a class Quick View is active.

See? So closing up that space, you know, helped. 1:27:33 Click.

1:27:34 Quick View is active. Added. Quick View is active good so now we have to style our quick view so what I’m going to do now is I’m going to go into this first of all I want to go into the here where here where our fetch is okay a fetch container is I’m going to write the CSS here okay when the quick view is active we have set this to be a visibility hidden, pointer event none.

Okay. So let’s look at it. Even though the visibility is hidden, we should be able to see if it has fetched. That’s the most important thing.

Yep. Good. It has fetched. You can see that it’s fetched.

All right. So let’s refresh the page again. Did we refresh the page? So you can see that we have the fetch container.

Inside the fetch container, we just have the bottom. Just the bottom. But right now, we’re going to click here. You see it has added.

So it fetched, but it’s not visible. So the class that we add is QuickView active. So on the body, we’re going to say quick view, view, active, roots. So when the quick view, when the class, the quick view active is added to the button, we want to undo these two things.

Visibility will be visible. We just, let’s just take it from here. Visibility will be visible. We don’t need to change the backdrop filter.

We don’t need to change the background color. Then pointer events will be auto. Let’s save this and then we’re going to go to the front end and check. 1:29:33

Okay. 1:29:34 All right, let’s close this. I’m going to click this.

Good. It shows. Great. This is not working yet but it shows.

If I click this, it closes. Samsung Galaxy A4. This is Samsung Galaxy A4. So you can see that none of the styles are working.

Like I said, the styles are not brought in. So what I’m going to do is I’m going to go to that quick view page. I’m going to go to this. Now let’s go to the front end.

We want to copy the styles okay from the front end. I’m going to right click here. I’m going to select this. Of course we can copy that style directly from here.

But I don’t want to go and change the world roots. You know I don’t want to manually do that. This already has the style. Okay.

And this is the. . . So I see quick view.

I’m going to copy rule. Copy rule. We’re going to come here. Now, like I said, you can put it here on the page that has.

. . that you’re going to be working on, like this page. So if I come here to the page settings, so let me just put it in the paste it in the custom CSS.

1:30:50 I’m going to put that there. 1:30:51 Let’s go back and let’s select the inner wrap.

I’m going to right click, copy rule. What? Not there. You should be careful you put it in the right place.

Okay, I have there. So we have the inner wrap. Here you have to copy for everything that had a style. 1:31:12

For here, quick view image wrap, copy rule. 1:31:18 That is why I said you should give it a class. Quick view image.

We had a class on it but we did not set any style on the class so we don’t worry about that. In this one, content wrap, copy rule. Inside the content wrap, we have a heading. We did not set any style to that heading.

If there was a style, we should do, you know, so we didn’t set any style to any of these. Everything that has a style has to be, now the close button we had a style on it. I’m going to save this then we’re going to fetch again and see how it looks. I’ve saved this, let’s refresh that.

Then I’m going to fetch. Oh yeah, and our styles are applied. So if there’s anything that now we have not seen, the close button, it’s nowhere to be found. so it seems that our close button where was it?

Yeah it was still here so let’s go in. We have not copied the style for the close button. Yeah we did right? The close icon.

Copy that. Copy rule and the close button. We have here we have a background yes we have all that it’s really nothing else so we’re going to look for it okay uh the close icon close button icon save that let’s refresh 1:33:25

now click here 1:33:26 here. Okay.

But now I’m not seeing that close button. So I’m going to right-click and we’re going to check what the issue is. So we have the fetch container which has fetched the quick view and the quick view should have a close button. Yeah.

Okay. So the problem is that the close button was set to be absolute. Okay, so if we change that to fixed, that gives us the result that we want. Okay, so I think I’m going to change that to fixed.

Because now that it’s absolute, it is only bound within its own parent container which is just around here it can go all the way up. The close button position fixed 1:34:38 so that works.

I’m going to close this and then we can do that 1:34:41 we have that closed. We have this let’s tap.

Tap, tap, tap out, it closes. So that works. Everything works. Now, we need to write CSS to just make the animation just a little bit more interesting.

Okay, so the first thing I want to do is to change this, the inner wrap. We want it to zoom in a little bit, just a little bit, just like what we have here. Actually, it’s not going to zoom in because of visibility in none of the parameters, but it can zoom out. That’s the whole idea.

So the initial scale here, that is the initial opacity, sorry, and the initial scale will be 0. 7. Okay, let’s get When we have the Quick View active on the body Okay, so we want the scale and the opacity to be, this is going to be one and this is going to be 1:36:08

one. 1:36:09 Okay, let’s save that and see if we’re making any progress. We have that, shows up.

All right, that’s cool. The backdrop filter is also animating out which is not supposed to be. The backdrop was supposed to be on the face right? Yeah, but we’re not supposed to be animating out the scaling of this one.

That is where we had the backdrop filter. It seems to be scaling out. That’s not what we want but then. Let’s just continue styling.

For this I’m just going to give it a transition. Now because it has visibility on it, visibility doesn’t actually transition gradually. So I’m going to give it an opacity also because we want to find a way to transition that blur effect. The opacity is going to be zero.

Of course in the builder we want to still see it. Okay. Then the transition now I want to give it. Alright so I have this visibility 0 linear but I want to delay visibility by 0.

3% and then the opacity is 0. 2%. But when it is active, I want the opacity to return to 1. And then I want the transition to the opacity.

Opacity 0. 2 seconds linear and then delay 0. 2 seconds. So when it is active, we are transitioning the opacity.

But when we want to exit it, we want the visibility to delay a little bit because we want to give it a little bit chance for the opacity to transition out. Okay? So let’s save that and see what it looks like. Let’s go here.

You can see a smoother. Now, how long it takes to load is the internet speed. That’s just it. My internet is bad, you know, the speed is low.

So, how long it takes for it to fetch. Okay, so the next thing we want to do is that we’re going to basically create a new function that mirrors this function, but we’ll have some changes. Okay? I’m going to come here and just say next and previous button.

Next and previous buttons. So this is going to be a function and it’s going to be called fetch and replace next. Now the other one was fetch and replace, okay? Was kind of different.

This was fetch and replace div. So this is going to be just fetch and replace next. It’s actually next and previous, but I don’t want to give it say next and previous. And that function is also going to take data ID just like the first one but the second parameter is going to be the direction of the button.

So is it next, is it previous? And inside here we’re going to have the same thing you know that we had. We’re going to have that XHR request. We’re also going to get the URL just like we had before.

We’re going to have that on ready state function just like we had before. So everything is basically the same as this. Okay? Then we’re gonna have these just like we had before.

Inside there. We’re gonna have all this just like it was before. These, response, inner def, you know, the same thing right in here. Now we want to start declaring some variables.

Now we want to declare, say let hasNext. Now we want to check if the diff we are going to fetch has a next sibling. The next sibling is the immediate diff after it, you know, in the DOM. So, if you have a div like this.

Let’s go to that page. Where is that page? We close it here. Like a div like this.

This is a div. This is the next sibling. This one is the next sibling to this. This one, this is the previous sibling to this.

Okay? So, this div doesn’t have a previous sibling and the last div here doesn’t have a next sibling. So for the next and previous to work, we want to check if the div has next sibling. So we’re going to say next sibling is going to attempt div.

querySelector and what we want to do is to select the data ID just like we did before. So I’m going to go and copy that because of the mistake I had earlier. I would just like to copy it. I copy it.

So we’ve selected the div, okay? But we want to check for the next element sibling. So I’m going to say next element sibling. So we are checking if it has a next element sibling and we’re also checking if the direction, the direction we’re going to pass in here is the next button because when you click next you want to, you’re saying next element, you want it to go to the next element sibling.

When you click previous, you want it to go to the previous element sibling. So the direction, if the direction of the button we’re clicking is also next. And then we’re going to do the same thing here. So we’re going to say let has previous.

So I’m just going to copy this. Paste this. Let’s has previous. It’s going to be previous element sibling.

And the direction is going to be prev. I’m going to say if it has a next element sibling. Fetch quick view, I mean. Now fetch quick view here all the way up here was this.

Okay. dot next element sibling. So if it has next, we want to select that div, but we are going to select the next element sibling of that div. Else, if it has previous if it has a previous sibling, and the direction is previous previous, then we’re just going to copy this again.

But this time around we’re going to say previous element sibling. 1:43:38 So now the fetch quick view, the one we’re going to fetch will be the 1:43:42

next element sibling if we are using the next button and if it has a next element sibling. And if the previous button is clicked, what we’re going to fetch is the previous element sibling. And we’re going to repeat the. .

. 1:44:03 Yep. 1:44:04

We’re going to repeat some of the things that we did. We want to make the newly added div, the newly added div focusable because we need to repeat it when we are using the buttons, the next and previous buttons. The same thing we did here. Here.

The newly added div. But in this case, we want to check if it actually exists. exist. We also need to get the fetch container.

So I’m going to copy this and take it back here. Now we want to do the same thing. Okay. This remove and append chart.

But we have to do it in a different way when we’re using this button. So now what we want to do is, I’m going to say if hasNext and hasPrevious. So we’re going to remove previous div if it exists. And that’s going to console lock, you know, to be sure that to test if our code is working.

We’re going to console lock removed. We’re going to append the new div 1:45:33 with the specified data ID.

1:45:35 That’s going to be quickviewcontainer. append child and we’re going to append the fetched quickview. This one.

1:45:49 This one. So any of these that is fetched, that’s what 1:45:57

you know, depending if it has next, else if it has previous. So depending on the button that is clicked, any of these is going to be appended. I’m just going to console log append it and then I’m going to update the reference to the quick view. So quick view will now be equal to the fetch view just like we did before.

Fetch quick view. Then we’re going to, we still have to do the same thing to the close button because we are calling a new function. So we need to do the same thing. So I’m just going to copy the close button from what we did to the close button.

Yep. Here, all the way here, here, and here. And I’m going to paste that. So we’re calling the close button.

We are referencing the close button again, but in this case, the close button, we’re not going to use document or query selector. We’re going to use quick view or query selector. We want to reference it from what we just added. We’re going to go to the if, to the end of that if, and then I’m going to paste that else.

Okay. At the end of this, we are going to send just the same way we did here. Yeah, the same way we did here. That was the last thing we did.

That was the last thing we did before closing that function. Now we’re finished creating that function, but we haven’t yet referenced our next and previous buttons. So that’s the last thing we’re going to do. So this is going to take care of event listeners for our next and previous button.

Post a document. That query selector. And what was the class? We’re going to go there.

So this was quick view, next, quick view, next, quick view, previous. Okay. So this is next, so let’s paste that and just change this to next. So next button, dot add event listener, click, function.

We want to get the current div. So if our current div, and because right by this time the div, for you to use the next and previous button, by this time the div is already, there’s already a div open. So the current div is going to be documents. querySelector.

And we’re going to get that div from the fetch container that is already, you know, whatever div is already present in that fetch container. What was the class again of that fetch container? The ICQuickViewFetchContainer. ICQuickView, which is the div.

So that is a current div. Now if current div exists, so we want to get the data ID of the current div or current data ID. So what is the current data ID? What is the current data ID right at that moment?

The current data ID will be the current div’s data ID. So current div dot get attribute data ID. So it’s going to get the attribute of the data ID of that current div, the data ID of the current div. And then we’re going to take the data ID and the direction.

So the data ID is going to be the current data ID. That is the data ID of the current div. And the direction here is going to be next. So we’re passing the direction as next because this is the next button.

So we’re passing the direction as next. So let’s try. Let’s test the next button and see if it’s going to work. Let’s refresh this.

1:51:26 I’m going to click here. 1:51:27 Then we’re going to click the next button.

And it changes. All right, that’s good. We haven’t done the previous button yet. So what we will do is simply going to copy that code, the whole of this, and we’re going to just replace it preview and that that that is the same.

The only thing we are changing here is the direction will be preview. Save that and that should be all for that. I’m going to refresh this. I want to keep this console open because I want to be sure that I’m not getting any errors.

If I click this, click here, see, removed appended. Removed appended. If I go back, removed appended and the Samsung is the last one so nothing is happening. So I’m going to click till we reach the end which is the SID Huawei.

Okay, something is wrong here. This is supposed to be previous button. I noticed something was off there. So let’s save this and then let’s check it out again.

I’m going to save that. Yep, I’m going to do that and then we’re going to go here. So this works. So we want to move to the very last one.

So Huawei is the last. It’s not moving anymore. Okay so finally let’s take a look at the responsive. So if we go down here like this, all we need to do is just to make sure that we, you So I’m going to go into here.

This is where we’re going to. Page settings where we put our code. Okay. I think we had a code here.

Yeah. Well, we had this media query. I’m gonna copy this and let’s go down there so the inner wrap was I see could be inner wrap replace that root with that now for the responsiveness what we want is I want it to scroll. Okay, we’re going to set the height to be 85 viewport height and then we’re going to set the overflow y-y to scroll and I want to give it a maximum width.

I don’t want it to be too wide. Let’s say 380 pixels. I’m just going to add important there. I want to enforce that.

I’m going to save that. Then let’s look at the front end. It’s going to refresh. Yep, we haven’t sorted this out yet.

So it’s alright. So you can see it looks good. Now if you want to disable the body, what you’re going to do is you’re going to add that quickviewactive. body.

I’m going to say overflow hidden. So now you can see that now it is scrolling. When it refreshes and we click again, the body is not going to scroll. You see, no scroll.

No scroll until it releases it. And then once we do that, no scroll. Okay? Okay, but now if you don’t want that shift, for example, if you go here, you can see that things are shifting to the right because the scroll bar is hidden.

If you don’t want that shift, when it is hidden, you’re just going to give it a padding, padding right of let’s say 18 pixels. That’s to offset the scroll bar, you know, the width of the scroll bar going out. You just want to give it that padding right to offset that shift. So when you do that, it’s not going to shift.

It all depends on the width of your scroll bar. On Windows, the scroll bar width is about 20 pixels, 18 pixels. So scroll bar width could vary between 12 to 20 pixels. I’m not quite sure why this is not saving.

Okay, so if we go there and it refreshes, now if I click here again, you see that shift is not there. So if you have, this applies to any website, anything you’re doing. If you have that problem where your scroll bar disappears and your content shifts, you just want to dial it in to check exactly the width of that scroll bar so that once it comes up and things are not moving around the page. Okay, of course, we could just change this to grade 2, maybe 3.

1:57:48 Now here, grade 1. Okay. 1:57:55

So, when we’re looking at it on the smaller breakpoint, it’s supposed to update right? Did we save that? Oh so what’s the matter? Bricks what is it?

What is this? What is the meaning of that? I don’t understand. Anyway, I’m not gonna, I just don’t have time for bricks today.

So look at what it’s doing. Instead of just giving me what I asked for. See, see this is everything is okay here and then right here from, see from there it just starts messing up. So I’m not going to bother with that because it’s a Brics thing.

That is a responsive thing, you may not have those issues. And by the way, this is the latest version of Brics 1. 8. 4.

Okay, so what I’m going to do is I’m just going to have the same issue. All right. I mean, not what we would want, just to check if we’re still having problems. Obviously, we should be able to scroll this if they have a lot of content.

So, what I’m going to do, I’m just going to duplicate this content. Maybe they, yep, I’m going to duplicate this. All right, all right, so we can, you see, we can scroll it. All right, guys, that brings an end to this tutorial.

I hope I covered everything. I hope I didn’t forget anything. So let me know what you think. I know it was a long one, but like I said, this is the kind of thing you’re going to use in any other post type.

Whether you want it to fade in or out or scroll in, that is a matter of CSS. There’s no way I can cover all possible combinations in one video. You could change up your CSS for it to slide out when it is not active and slide in when it is active. So if you have any question, please drop it in the comment section.

I’ll do my best to answer them. Until next time, please drop it in the comment section. I’ll do my best to answer them. Until next time, have a great day.

Bye.