How to hide a container box on dynamic item page.

Ask the community
,
1

hey everyone, i have create dynamic item page which is containing 4 container box item, i want each dynamic page of my database collection to filter my database and show only required number of container box(example-page 1 will carry only 2 box, page 2 will carry 4, page 3 will carry 1,etc). But my dynamic pages are showing all the 4 box at a time. can anyone explain me how to hide those unwanted boxes from my dynamic item page on preview.

2

Hello Wasim,

To do that you would have to query the dataset specific to the dynamic page, get the relevant information regarding what you want to filter, and create a condition statement based off of the information you got from the dataset that hides and shows each container.

Get current item that the dynamic page is on -

 let itemObj = $w("#myDataset").getCurrentItem();  // get the current item

if(itemObj.gender === 'male') {  //condition
    $w('#maleContainer').show();  //show/hide containers based off of condition 
} else {
     $w('#femaleContainer').show();
}
3

Hey Majid,
What is this maleContainer and femaleContainer ?

4

Hi Wasim:

I think Majid was giving you a generic example on how to show or hide an element in code based on a condition.

Let me try a different proposal.

I think if you look at the repeater (https://www.wix.com/code/reference/$w.Repeater.html) you will see that you can modify the repeater contents by setting the data set that the repeater uses.

So if you choose the repeater you want to use from “Lists and Grids”

485×608 156 KB

Then what you can do is load the data for the page from your data collection using the filter you refer to and assign the array of results to this field of the repeater.

Another way to do this is to connect the repeater to a dataset…

Check out these docs for more information and other ways to use the repeater:

Hope this helps
Steve

5

Thanks for the clarifications Steve :)!

6

hey Majid, can please explain me about the maleContainer and femaleContainer. if(itemObj.gender === ‘male’) this too

7

Hi Wasim:
Not wanting to speak for Majd but let me see if I can solve your dilemma.
I think Majd was creating a hypothetical example where you have two boxes. One called $w(‘#maleContainer’) and one called $w(‘#femaleContainer’); You show the $w(‘#maleContainer’) if the value of the itemObj property gender has the value ‘male’.

if (itemObj.gender === 'male') { 
    //condition 
    $w('#maleContainer').show();

Since the other gender possibility in this example is ‘female’. If the property gender does not have the value ‘male’ then the else condition is triggered and the $w(‘#femaleContainer’) is shown instead.

} else {
    $w('#femaleContainer').show();
}

Because you didn’t give any information about the names of the boxes on your dynamic pages Majd made something up.

His example could have used more generic names like
$w(‘#box1’) and $w(‘#box2’) so the code for your example could also be written like this

 let itemObj = $w("#myDataset").getCurrentItem(); // get the current item
 // Hide all boxes
 $w('#box1').hide();
 $w('#box2').hide();
 $w('#box3').hide();
 $w('#box4').hide();
 // Only show the boxes we have data for
 if(itemObj.box1Value !== null) {
      $w('#box1').show();
 } 
 if(itemObj.box2Value !== null) {
      $w('#box2').show();
 }
 if(itemObj.box3Value !== null) {
      $w('#box3').show(); 
 }
 if(itemObj.box4Value !== null) {
      $w('#box4').show(); 
 }

Hope this makes sense to you now.

8

Yeah completely…thank you so very much stcroppe.

9

Hello stcroppe, i have tried your given code but it did not work.

10

Hi Wasim:

In what context?

if you just cut and paste what I wrote then i’m not sure how it would.

You need to share what you have done or a page link for forum members to look at. At the moment all we are doing is proposing ideas. its up to you to read the documentation and design your application.

Does that make sense?

11

I have changed the dataset name according to my page. And my boxes name are same as your example code box1, box2,box3…etc.

12

Wasim:

Is your page published? The code I provided above is a snippet for you to think about and make appropriate changes to your page.

If you paste the complete code for your page here, it will be easier to help you. Otherwise we are all guessing.

Also check out this documentation:

Thanks

13

Hello stcroppe;
I have attached the screenshot of my page, I am not sure where i am making the mistake.

1366×768 79.7 KB

1366×768 81.5 KB

1366×768 104 KB

14

Hi Wasim:

OK you need to get familiar with how to access page elements and write code in Wix.

If you take a look at these pages this will get you started.

In the document pointed to by the second link you will see how you need to wait for the important elements of your page to be ready for you to work with them using the onReady Function for the page - $w.onReady() and the TypeOfService data set that you are depending on for displaying content $w(‘#’).onReady(). It also shows how to import Wix helper apis that are documented here: Velo API Reference - Wix.com

Then you need to possibly use a few console.log() Statements to display key data that you are dependent upon that you can use for debugging purposes. When you select preview the console at the bottom of the page will display the output from these console.log calls so you can see the data your code is seeing.

While looking at the links I have provided above, you will likely see other documents that might also expand your understanding and example code.

Hope this helps

15

This was very useful, thank you so muchhhh