A general question about "Dynamic page"

Ask the community
, ,
1

Dear all:
I am working on a portfolio to display my projects. I just learned how to create dataset, dynamic pages, and learned how to connect dataset with dynamic pages + repeater.

I have a general question that have thought about for the whole day…:
I have many projects need to show, most of them can use the same templete (the dynamic page), but some of them need to use a different layout.
For example, now I have these projects:

  1. A VR project
  2. A AR project
  3. A JS game
  4. some graphic designs
    For the first three projects, I can use the dynamic pages, but for the No.4(graphic design works), I have to use a different layout to show them (like, more images, no descriptions, etc)

My question is : is it possible to design like this?
If yes, can I change certain dynamic page? (I tried, but failed…)(maybe I used a wrong way)
Or, do I need to some modification in my dataset?
Or, is there any way to achieve my goal?

Thank you so much for your help in advance!!
All the best

2

The goal of a dynamic page is to use the same layout throughout different items and only change content depending on a page.

However, you can try showing or hiding certain elements on a dynamic page depending on which collection item you are currently on.

In order to achieve this you’ll need to add all of the elements (hidden or visible on all of the pages or only certain pages), make them hidden or visible on load depending on your needs and then create a function that will check which collection item you are currently using and show/hide elements depending on it.

In order to get a current dynamic dataset item you’ll need to use getCurrentItem(): https://www.wix.com/corvid/reference/wix-dataset.DynamicDataset.html#getCurrentItem

For example: you use getCurrentItem, then you check if the item that you are on meets the requirements (e.g. if getCurrentItem.title === “graphic design”, then show an element).

To show an element hidden on load you can use a show() function: https://www.wix.com/corvid/reference/$w.HiddenMixin.html#show
To hide an element use hide(): https://www.wix.com/corvid/reference/$w.HiddenMixin.html#hide

3

Another way that you can do it is by using a state box.

First, add another column to your collection (let’s call it “Type”, with Velo ID “type”). On our page, we have a statebox (#statebox1) and two states. In one, the State ID is “Normal”, and in the other, it is “Other 1”. Then design each state and connect the elements to the collection accordingly. Then for each item in your collection, identify which state you would like to use in the “Type” column.

Then add this code:

$w.onReady(function () {
    $w("#yourDataset").onReady(()=> {
        let type = $w("yourDataset").getCurrentItem().type
        $w('#statebox1').changeState(`${type}`)
    }
});

Hope I was some help!