CustomMethods

Custom Methods

TL;DR: This section requires javascript knowledge.

You can extend the global oggeh object by adding a new custom method. For example getNewsTags which returns a list of all news tags extracted from the API response.

<script>
  window.oggeh = window.oggeh || {
    api_key: "YOUR_OGGEH_APP_API_KEY", // Required
    // api_secret: "YOUR_OGGEH_APP_API_SECRET", // Use only in mobile/desktop/nodejs apps
    // sandbox_key: "YOUR_OGGEH_APP_SANDBOX_KEY", // Use only in development environment
    // domain: "YOUR_OGGEH_HOSTNAME", // Use only in mobile/desktop/nodejs apps
    async getNewsTags() {
      const url = new URL(location.href);
      const params = new URLSearchParams(location.search);
      const startDate = params.get('start-date');
      const limit = 2; // default limit – change that to match your "limit" property at <oggeh-content get="news" limit="2">
      const cacheKey = `news${startDate ? `.${startDate}` : ''}.${limit}`; // check sessionStorage "oggeh.data" for the avilable cache keys
      const cache = await this.data.get(cacheKey);
      const {list = []} = cache || {};
      return {
        list: list.map(({tags}) => tags).flat()
      };
    }
  };
</script>

Note: You can place a cache-only tag for pre-populating the required data if the request is not already processed at the current page:

<oggeh-template get="page" key="YOU_PAGE_KEY" cache-only></oggeh-tmeplate> 

Then you can use the custom property with the value news-tags. Note the hyphen separator -. Our web component will transform that value to getNewsTags and look for it in your global oggeh object.

Exmample:

<oggeh-content custom="news-tags">
    <!-- Template for the overall tags container -->
  <template id="oggeh-container">
    <div class="single-sidebar">
      <div class="sidebar-title">
        <h1>Popular Tags</h1>
        <span class="border"></span>    
      </div>
      <ul class="product-tag">
        <slot></slot>
      </ul>
    </div>
  </template>
  <!-- Template for a tag item (a single tag in a list item) -->
  <template id="oggeh-repeat">
    <li>
      <a href="/search?keyword={{ value }}">{{ value }}</a>
    </li>
  </template>
</oggeh-content>

Note: in this case, the placeholder {{ value }} represents the direct value for each news tag, where the API response object will be a list of tags (i.e. ["tag-1", "tag-2", "tag-3"]).