ecommerce - custom categories menu item in header

[MikeButler]

I am customising the main decorator for ecommerce and  have a Header.ftl which includes dropdown menus and I am working on a dropdown menu for categories.

What I have tried so far:
For the categories menu  I have included  ProductCategories.groovy as an action in the main-decorator (as used in the categories in the left panel of the main div) which I believe should provide a hash: “productCategoryID” which I can use in the Header.ftl.

Can you please confirm that is correct.

From reading the ftl documentation I think I have to  use an ftl object-wrapper  but without an example I do not understand how to code that.


I have used <#list productCategoryId?keys as root> which is just a guess but it does produce a very nice menu with dropdown containing fifteen “productCategory” entries that’s “productCategory”  15 times  so at least I know something is happening.

I would also like to understand what and how I can display from the hash. Current test coding is below:

Any pointers/help with this menu would be a very much appreciated learning experience for me.

Regards
Mike Butler
Freelance Consultant

<#--Some sort of object wrapping please help -->

<ul class="dropdown-menu">
  <#if (productCategoryId?has_content)>
    <#list productCategoryId?keys as root>   ------- What would be the correct syntax?
      <li class="nav-item">
        <a class="nav-link" href="<@ofbizUrl>productCategoryId</@ofbizUrl>">$ {uiLabelMap.productCategory}</a>
       </li>
    </#list>
  <#else>
    <li class="nav-item">
      <a class="nav-link" href="#">${uiLabelMap.Category}</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">${uiLabelMap.Product}</a>
    </li>
  </#if>
</ul>

[Jason RJ]

Hi Mike,

Take a look at ecommerce/template/catalog/SideDeepCategory.ftl there's a
macro there that has everything you need.

We adapted that to build our menus for us, the wrappers are attached to
the context in the related groovy files.

Hope that helps.

Jason

On 16/11/2020 11:34, mike Butler wrote:

> I am customising the main decorator for ecommerce and  have a Header.ftl which includes dropdown menus and I am working on a dropdown menu for categories.
>
> What I have tried so far:
> For the categories menu  I have included  ProductCategories.groovy as an action in the main-decorator (as used in the categories in the left panel of the main div) which I believe should provide a hash: “productCategoryID” which I can use in the Header.ftl.
>
> Can you please confirm that is correct.
>
>  From reading the ftl documentation I think I have to  use an ftl object-wrapper  but without an example I do not understand how to code that.
>
>
> I have used <#list productCategoryId?keys as root> which is just a guess but it does produce a very nice menu with dropdown containing fifteen “productCategory” entries that’s “productCategory”  15 times  so at least I know something is happening.
>
> I would also like to understand what and how I can display from the hash. Current test coding is below:
>
> Any pointers/help with this menu would be a very much appreciated learning experience for me.
>
> Regards
> Mike Butler
> Freelance Consultant
>
> <#--Some sort of object wrapping please help -->
>
> <ul class="dropdown-menu">
>    <#if (productCategoryId?has_content)>
>      <#list productCategoryId?keys as root>   ------- What would be the correct syntax?
>        <li class="nav-item">
>          <a class="nav-link" href="<@ofbizUrl>productCategoryId</@ofbizUrl>">$ {uiLabelMap.productCategory}</a>
>         </li>
>      </#list>
>    <#else>
>      <li class="nav-item">
>        <a class="nav-link" href="#">${uiLabelMap.Category}</a>
>      </li>
>      <li class="nav-item">
>        <a class="nav-link" href="#">${uiLabelMap.Product}</a>
>      </li>
>    </#if>
> </ul>
>
>
>
>
>
>
>
>
>

[MikeButler]

Thanks Jason

That is what I needed

Mike

Sent from Mail<https://go.microsoft.com/fwlink/?LinkId=550986> for Windows 10

From: Jason RJ<mailto:[hidden email]>
Sent: Montag, 16. November 2020 13:03
To: [hidden email]<mailto:[hidden email]>
Subject: Re: ecommerce - custom categories menu item in header

Hi Mike,

Take a look at ecommerce/template/catalog/SideDeepCategory.ftl there's a
macro there that has everything you need.

We adapted that to build our menus for us, the wrappers are attached to
the context in the related groovy files.

Hope that helps.

Jason

On 16/11/2020 11:34, mike Butler wrote:

> I am customising the main decorator for ecommerce and  have a Header.ftl which includes dropdown menus and I am working on a dropdown menu for categories.
>
> What I have tried so far:
> For the categories menu  I have included  ProductCategories.groovy as an action in the main-decorator (as used in the categories in the left panel of the main div) which I believe should provide a hash: “productCategoryID” which I can use in the Header.ftl.
>
> Can you please confirm that is correct.
>
>  From reading the ftl documentation I think I have to  use an ftl object-wrapper  but without an example I do not understand how to code that.
>
>
> I have used <#list productCategoryId?keys as root> which is just a guess but it does produce a very nice menu with dropdown containing fifteen “productCategory” entries that’s “productCategory”  15 times  so at least I know something is happening.
>
> I would also like to understand what and how I can display from the hash. Current test coding is below:
>
> Any pointers/help with this menu would be a very much appreciated learning experience for me.
>
> Regards
> Mike Butler
> Freelance Consultant
>
> <#--Some sort of object wrapping please help -->
>
> <ul class="dropdown-menu">
>    <#if (productCategoryId?has_content)>
>      <#list productCategoryId?keys as root>   ------- What would be the correct syntax?
>        <li class="nav-item">
>          <a class="nav-link" href="<@ofbizUrl>productCategoryId</@ofbizUrl>">$ {uiLabelMap.productCategory}</a>
>         </li>
>      </#list>
>    <#else>
>      <li class="nav-item">
>        <a class="nav-link" href="#">${uiLabelMap.Category}</a>
>      </li>
>      <li class="nav-item">
>        <a class="nav-link" href="#">${uiLabelMap.Product}</a>
>      </li>
>    </#if>
> </ul>
>
>
>
>
>
>
>
>
>