Custom Code Implementation and Walkthrough

Overview

Review our customization policy for the CIMcloud platform before making changes.

With Custom Code, you can add it to any pages besides the following:

• Portal Login
• Worker Portal Login
• Settings / Configuration pages in the Worker Portal
• Checkout Pages
  • Showcart
  • Account
  • Payment

For catalog pages, you can override our Core Knockout JS templates:

• Search Results / Category Pages (pc_combined_results.asp)
• Product Detail Page (pc_product_detail.asp)

Learn more about Knockout.js

Examples with Code

Add a Global Header Banner

Modifying SKU Label on Product Detail

Display additional fields on the Product Detail page

Redesign the Product Detail Page

Finding Knockout Templates on Catalog Pages

Catalog Pages are comprised of core Knockout JS templates, which are essentially sections of markup with variables.  Templates can contain other templates within them as well.

Important Notes:

• Any overrides to Core Templates will no longer receive CIMcloud Core product updates
  • Your override replaces the template used in our core product
  • Our Product Release articles will identify any changes to templates going forward, please review this for any conflicts to your Custom Code when updating site’s version
• It is imperative that you override the most-specific Core Template due to the above.
  • For example, if you wanted to add a message below the Product Name on the Search Results page:
    • There is a template ID for catalog.product_card
    • If you want to add a message below the name, you could do this by overriding catalog.product_card with your new message
    • However, it would be better to override the catalog.name_link here since it has less chance of missing important updates since it is more specific compared to its parent’s template

Overriding Knockout Templates for Catalog Pages

Once you have identified the template you would like to override, here are the steps to override it:

1. Login to the Worker Portal
2. Impersonate a Contact to view the sitefront with the “Customize” badge
3. Head to the catalog page you would like to override a template for (Product Detail or Search Results)
4. Inspect the element you would like to override in Developer Tools
   1. Note: On Search Results, you may want to add additional information to all products in the results.  You only need to copy the template of one product, since it is reused for each product displayed
5. Find the name of the template ID with the format: <!– ko template: ‘template_category.template_section’ –>
   1. For example: <!– ko template: ‘catalog.name_link’ –>
6. Use the finder to get the <script> of that template ID, or “View Page Source” to find it more easily
   1. For example:
      1. <script type=”text/html” id=”catalog.name_link”>

                 <a class=”detail_link” data-bind=”attr: { href: link, title: utils.decodeHTML(name()), ‘data-key’: key }, html: name”></a>

             </script>
7. Copy the entire template, including it’s script tags
8. Click the “Customize” badge in the Lower Left
9. Paste your template into Custom Code (Header or Footer will work), adding “_custom” to the template ID to override the Core Template
   1. Example:
      1. <script type=”text/html” id=”catalog.name_link_custom”>

                 <a class=”detail_link” data-bind=”attr: { href: link, title: utils.decodeHTML(name()), ‘data-key’: key }, html: name”></a>

             </script>

CIMcloud Helpers

There are a variety of helpers that you can use within Custom Code.  Please visit our CIMcloud Helpers article for more information around this implementation.