How to create a specific page for each category?

Hi !

I would like to ask about a few things I couldn’t find out about:

  1. I would like to add a functionality that would allow users to select which category and sub category they would like to display on a certain dynamic page (for instance : video games / apparel) just like WixStore does, or any other website.

  2. I’d like all items from all of the main categories to be displayed on a single dynamic page (which would be the ‘all’ page) ( there would be 3 main categories, “reduction”, “code promo” and “gratuit” (yes that’s in French)) That’s already possible, but the thing is I can only connect one category at a time to the items displayed (“reduction” page OR “code promo” page OR “gratuit” page, which all have a different template)

You can see in screenshot #1 that the link calls the " /reduction/{title} " path, whereas this item belongs to the “code promo” category and should have a “/code-promo/{title]” path so the template can be the correct one.
The same issue applies when I place a “suggestions” column on each template page.

Screenshot #2 shows that the item is on the correct template page ( /code-promo/{title} ).
Screenshot number #3 shows that it is displayed on the wrong template page ( /reduction/{title} ), some elements that you can see there shouldn’t be displayed and some that should are not displayed.

I thought about creating a single template for every item regardless of their category, but some elements displayed vary according to which category the item belongs to.

Thanks a lot for your help !


screenshot #1


screenshot #2


screenshot #3

Hey,
You can call the query function in the onReady function of your dynamic page to get all the records of the relevant category and sub-category and assign the values to the relevant elements (depends if you use Repeaters or regular elements such as text boxes , images , etc ).

Best,
Tal.

Hi,
Thanks for the reply.

I’m a geginner at this I don’t know much about coding, could you elaborate please ?

I use repeaters for the tiems.

I understood that your reply was in regard of the 1st question right ?

Bump !

As I said I’ve pretty not well acquainted with coding, so if anyone could give me a detailed/easy way to do :slight_smile:

Hey Tristan,

You can try assigning the appropriate URL to whichever element needs a link in the onItemReady() method. As an example, I set the link in the imageElement. Try something like this:

$w.onReady(function () {
       $w('#resultsRepeater').onItemReady(($w, itemData, index) => {
              $w("#titleElement").text = itemData.title;
              $w("#imgElement").src = itemData.img;
              if (itemData.type === "reduction") {
                     $w("#imageElement").link = urlReduction;
              }
              else if (itemData.type === "code promo") {
                     $w("#imageElement").link = urlPromo;
              }
              else if (itemData.type === "gratuit") {
                     $w("#imageElement").link = urlGratuit;
              }
              else {
                     // we shouldn't get here, use default
                     $w("#imageElement").link = urlDefault; 
              }
       });
});

For each repeat item, the type is checked, and then the appropriate URL is assigned to the link property of imageElement.

This is not a fully functioning sample, but with the appropriate adjustments for your site it should get you started in the right direction.

Good luck,

Yisrael

Thanks a lot.

I pasted the code in the the page’s code, but many errors are detected.


The “type” would be written in a field named “Type” in the item’s name (via database)

The URL of each category would be www.wehaveadeal.net/deal/{type}/{title}

Each item (as the sample in the image shows) would contain an invisible button on top of them, redirecting to the item’s page.

The example code I provided is just that, “example” code. You will need to change the element names (e.g. #resultsRepeater) to the names you are using. Also, you need to change the itemData fields (e.g. itemData.img) to the field names in your collection. Without adapting the code to your sites and pages, it won’t work.

Okay thanks I did that for “texts” and “images”. But as for the “urlPromo” and such, how do I set them ?

Okay so from what I understand, the “type” of each item needs to be written somewhere on the item.
So i put a button “button19” which automatically fetches the category name on the item.
But then ?


the current code is (and it makes the items not to display anymore) :

$w.onReady(function () {
$w(‘#repeater2’).onItemReady(($w, itemData, index) => {
$w(“#text54”).text = itemData.title;
$w(“#image6”).text = itemData.img;
if (itemData.type === “Réduction”) {
$w(“#image6”).link = urlReduction;
}
else if (itemData.type === “Code Promo”) {
$w(“#image6”).link = urlPromo;
}
else if (itemData.type === “Gratuit”) {
$w(“#image6”).link = urlGratuit;
}
else {
// we shouldn’t get here, use default
$w(“#image6”).link = urlDefault;
}
});
});

Hi Tristan,

First off, I discovered an error in my code. Here is the corrected line from your latest code:

$w("#image6").src = itemData.img;

The src property sets the image location for the #image6 element.

As you can see in your code panel, the URLs have errors. This is because you haven’t set the values for each of the URL variables (urlReduction, urlPromo, urlGratuit, urlDefault). The URLs will then be assigned to the link property of the image elements, so that when the user clicks on the image the appropriate template page will be used.