Show category by setting value

Hey Serhii, 

It looks like the syntax is a bit off. When you're using a settings object in an is helper you're comparing the "identifier" on the left, to the "value" on the right. 

Try something like this: 

{{#is settings.category_first "4409347111442"}}
{{your code to render when true}}
{{/is}}

I'm not entirely sure if you need to escape the settings object in this case - you'll want to play around with that. 

Also note the category ID is listed within quotations - this is because the type is listed as text, so it's evaluated as a string instead of an integer. This is important because the is helper uses a strict comparison. 

You might also try just placing the settings.category_first object within your each helper, just to see if it prints out ok. You'd expect a text value for each of your categories. If that works, then add in the is helper. That's just what I like to do to troubleshoot. 

Hopefully this helps you get something working. Good luck! 

Thanks, but I would like to use the dynamic id that is take from the category and compare with the settings value.
Like this: 

{{#if categories}}
  {{#each categories}}
    {{#is ../settings.category_first "dynamic category.id" }}
     {{some code to render when true}}
    {{/is}}
  {{/each}}
{{/if}}

Gotcha - I was a bit misunderstood. 

Just to clarify - are you hoping to only show the category you enter into the template settings? Or are you trying to display that category in one way, while displaying the all of the others in another? What's your ultimate goal here? 

Yes, I want to show only the category that I kept in the template settings.

This should be pretty simple then. You have a couple options. 

Option 1 - simplest.

{{#if settings.category_first}}
{{code to render if a value is present}} 
{{/if}}

In this case, the block will render whenever you have some value in the theme setting. You can put anything there and it would render. If it's empty, it won't render. 

Option 2

{{#if (compare category.id "==" settings.category_first)}}
{{code to render if true}} 
{{/if}}

In this case, the block will only render when the category ID matches what you have in the theme setting. If you input a different value, or leave it blank, it won't render. A note here - you may want to play around with the "==" operator. If it doesn't work, try "=" instead. 

If you later want to exclude that category from an each iteration you can use the unless helper to do that. 

Also, Handlebars has a way to reference steps in an iteration. So you could target the first item, for example. More info here. 

Hope that helps. 

Thanks for the help! Option 2 suits me and I tried to do it earlier. But I tried these options and they don't work. It is work:

{{#if categories}}
  {{#each categories}}
    {{#if (compare "4409347111442" "==" ../settings.category_first)}}
      <a href="#" class="card">
      ok
      </a>
    {{/if}}
  {{/each}}
{{/if}}

But i need dynamic id and try this(your option 2): 

{{#if categories}}
  {{#each categories}}
    {{#if (compare "id" "==" ../settings.category_first)}}
      <a href="#" class="card">
      ok
      </a>
    {{/if}}
  {{/each}}
{{/if}}

and this

{{#if categories}}
  {{#each categories}}
    {{#if (compare "id" "=" ../settings.category_first)}}
      <a href="#" class="card">
      ok
      </a>
    {{/if}}
  {{/each}}
{{/if}}

and this

{{#if categories}}
  {{#each categories}}
    {{#if (compare id "==" ../settings.category_first)}}
      <a href="#" class="card">
      ok
      </a>
    {{/if}}
  {{/each}}
{{/if}}

and this

{{#if categories}}
  {{#each categories}}
    {{#if (compare id "=" ../settings.category_first)}}
      <a href="#" class="card">
      ok
      </a>
    {{/if}}
  {{/each}}
{{/if}}

and this

    {{#if (compare category.id "==" ../settings.category_first)}}
      <a href="#" class="card">
      ok
      </a>
    {{/if}}

it is not work for me, maybe I'm doing something wrong?
i read documentation and i not find answer for my question:( 

Ok - I tested this and got it figured out!

The issue was ultimately related to the data type of each value. The category ID is an integer, while the setting value is a string.

I found a way around this by looking at the URL with the filter helper.

Here's the code I used

In the manifest.json file:

{
 "label": "Category ID Setting Group",
 "variables": [
  {
   "identifier": "category_first",
   "type": "text",
   "description": "Category ID Value Description",
   "label": "Category ID Value Label",
   "value": "1234"
  }
 ]
}

You'll put the numeric category ID in the settings panel (listed as "1234" above). This will allow you to use the ID and it will work for any translated languages you may have. 

In the home_page.hbs file: 

{{#each (filter categories on="url" contains=settings.category_first)}}
 <a href="{{url}}">{{name}}</a>
{{/each}}

The filter helper looks for the value you entered in the setting panel, which should be the category ID. It's technically possible that you may have two categories that contain the same string of numbers, but it's highly unlikely (for example category 1234 and category 12345). If that happens, you can add a the leading or following hyphen after the number, but I doubt that should be necessary. 

Important note: This must be utilized on the home page template. The categories object is only available on that page. 

I think this will get you there! I hope this helps 😁

Daniel Dobrzensky Thank you very much it worked!)

Hello.

On my homepage, after a "#each" on categories, I need to chain conditions on category IDs to achieve the following: "#if" Category A then Action A "else" If Category B then Action B.

It's all very simple, but I can't do it. And I can't find the right way of writing it in the documentation.

For information, I can't achieve what I want with "#is" because I have to write "#is" Category A then Action A + "#is" Category B then Action B = on my homepage, when I have the 2 categories displayed then I have Actions A and B. Whereas if the first category mentioned is present then I don't want Action B to be executed.
I'm posting here because the codes that didn't work {{#if (compare category.id "=" 1234)}} might have interested me, as long as the code to reach the category ID of the Help Centre was correct. Which is not the case... And I can't find the right one.
Thank you in advance for your help!

Hey Anne-Flore,

Have you tried nesting #if statements? I'm not totally sure if it will be suitable for your use-case but it's worth a shot. For example:

{{#if Category A}}
      <!-- Action A -->
{{else}}
     {{#if Category B}}
          <!-- Action B -->
     {{/if}}
{{/if}}

Hello @tipene

It's just that I can't make a simple if on a category ID 
If you have a script to pass on, I'd love to hear from you.
An {{#is id xxx}} is ok after an {{#each categories}} but an {{#if id xxx}} doesn't work. But maybe that's just because I don't have the right names. So I tried to find another way to condition a category id

KO :
{{#each categories}}
  {{#if id 1643199969077}}
      TEST
  {{/if}}
  {{/each}}

Hello. The packaging works great. Thanks a lot!

However, with the "#each categories" my condition is repeated (since category B is still present, the category A action is taken but the system switches back to the 2nd category and the category B action is taken. And if I add "#is" it doesn't work because inside, I can only compare the category I'm in). 

Is it possible to use a "#with" on the categories instead of the "#each"? Because "#with categories" doesn't work, so I'm not sure.  
Or do you have another idea for putting conditions on categories but not after a "#each"?  
Thanks for your help! 

Hey Anne-Flore,

That's a good point and I'm not sure if your workflow will be possible within the constraints of the available curlybars helpers and expressions. That said, I've written an example Javascript function that should get you moving in the right direction:

const categoryActions = () => {
  // gets categories from DOM
  const categoryBlocks = document.querySelectorAll(".categories > .blocks-list > .blocks-item");

  // array to store category IDs
  const categoryIdArr = [];

  // pulls category IDs from category href and saves to the array
  categoryBlocks.forEach((category) => {
    let link = category.firstElementChild.href;
    categoryIdArr.push(link.substring(link.lastIndexOf("/") + 1).split("-")[0]);
  });

  // conditional actions based on category array item
  if (categoryIdArr[0] === "123456789") {
    console.log("Category 1");
  } else if (categoryIdArr[1] === "987654321") {
    console.log("Category 2");
  }
};

categoryActions();

This function will get all categories present on the home page. It then parses the links on the DOM elements to pull the category IDs, which are saved to an array. You can then use an if/else statement to perform actions based on the category IDs. Just bear in mind this is a basic example and you may need to make changes depending on your specific help center set up.

If you have any questions, feel free to let me know!

Tipene

Hello @tipene

And thank you for this track. I'm just having trouble with the code for "pulls Category IDs from Category href and saves to the array" because the ID that is saved in the array is that of the 9 sections of my 1st category but not the ID of each category...