Epicor® Eagle® iNet™ eommerce

EP

ICO

R E

AG

LE

– I

NE

T E

-CO

MM

ER

CE

Epicor® Eagle®

iNet™ eCommerce Web Designers Guide – Version 5.0

Epicor Eagle iNet e-Commerce: Web Designers Guide – Version 5.0

The contents of this document are for informational purposes only and are

subject to change without notice. Epicor Software Corporation makes no

guarantee, representations or warranties with regard to the enclosed

information and specifically disclaims, to the full extent of the law, any

applicable implied warranties, such as fitness for a particular purpose,

merchantability, satisfactory quality or reasonable skill and care. This

document and its contents, including the viewpoints, dates and functional

content expressed herein are believed to be accurate as of its date of

publication, [April 2020]. The usage of any Epicor software shall be pursuant

to the applicable end user license agreement and the performance of any

consulting services by Epicor personnel shall be pursuant to applicable

standard services terms and conditions. Usage of the solution(s) described in

this document with other Epicor software or third party products may require

the purchase of licenses for such other products. Epicor, the Epicor logo, and

[insert any other applicable Epicor tradename(s)] are trademarks of Epicor

Software Corporation, registered in the United States and other countries.

[Insert any third party products here] are either registered trademarks or

trademarks of [insert company owner 1 here] in the United States and/or or

other countries. [Insert any third party products here] are either registered

trademarks or trademarks of [insert company owner 2 here] in the United

States and/or or other countries. All other marks are owned by their respective

owners. Copyright © 2020 Epicor Software Corporation. All rights reserved..


Table of Contents

iNet Templates ...................................................................................................................... 6

Audience & Disclaimer ................................................................................................................. 6

Overview ...................................................................................................................................... 6

iNet Upgrades and customized templates ................................................................................... 7

Creating and Editing Templates ................................................................................................... 7

Responsive or Legacy Templates ................................................................................................. 8

Header Template ................................................................................................................... 9

Header Template Sample............................................................................................................. 9

Template Variables ...................................................................................................................... 9

Style Sheet .......................................................................................................................... 17

Overview .................................................................................................................................... 17

Style Sheets – Legacy Templates ............................................................................................... 17

Style Sheets – Responsive Templates ........................................................................................ 17

Navigation .................................................................................................................................. 18

Additional Classes & ID’s ............................................................................................................ 18

eCommerce Product Templates ............................................................................................ 18

Overview .................................................................................................................................... 18

Category Templates ................................................................................................................... 19

Featured Category Templates .................................................................................................... 19

Shopping Cart Templates ........................................................................................................... 19

Shopping List Templates ............................................................................................................ 19

Product Templates ..................................................................................................................... 19

Group Templates (Style Color Size)............................................................................................ 19

Category Templates – Variable List............................................................................................ 20

Product Templates – Variable Lists ............................................................................................ 21

Category Template Headers - Variable Lists .............................................................................. 22

Featured Category Template - Variable Lists ............................................................................. 22

Shopping Cart Template - Variable Lists .................................................................................... 22


Shopping List Template - Variable Lists ..................................................................................... 23

Group Templates (Style Color Size)............................................................................................ 24

Generic Attributes in Product Templates .................................................................................. 24

User Defined Fields in Product Templates ................................................................................. 25

Uploading Changes .............................................................................................................. 25

Standard Customization (Web Interface) .................................................................................. 25

Advanced Customization (FTP) .................................................................................................. 27

Linking to iNet pages ............................................................................................................ 29

Linking from External Web Sites ................................................................................................ 29

Static URL’s ................................................................................................................................. 30

Linking From iNet ....................................................................................................................... 30

Meta Tags ............................................................................................................................ 30

Advanced Customization ...................................................................................................... 31

Overview .................................................................................................................................... 31

Category Groups (Tabs) ............................................................................................................. 31

Customizing Contact Forms ....................................................................................................... 32

Directory Level Configuration File (.htaccess) ........................................................................... 32

Adding an iNet login form to an External Site ........................................................................... 33

iNet Search Form ....................................................................................................................... 33

Additional Templates ................................................................................................................. 36

Customizing Outgoing E-Mail ..................................................................................................... 37

jQuery and iNet .......................................................................................................................... 38

Icons ........................................................................................................................................... 38

Google Analytics Customization ................................................................................................ 38

Mobile Specific Templates (Legacy Templates Only) ................................................................. 38

iNet Upgrades ...................................................................................................................... 39

Troubleshooting .................................................................................................................. 40

Common Issues .......................................................................................................................... 40

Upgrade Notes ..................................................................................................................... 40


Changes between version 4.0 and version 4.3 .......................................................................... 40



Revisions ............................................................................................................................. 45


Copyright © Epicor Software Corporation 2020. page 6

iNet Templates

Audience & Disclaimer

This document is intended for web designers wishing to create their own templates for use by iNet. It assumes an understanding of both HTML and CSS at the source code level. Familiarity with SASS is also required if you wish to work with our SASS sources. The template and style sheet customization that is outlined in this document is not supported by the Eagle Advice Line.

This manual is intended to be a companion document to the standard iNet user manual, please refer to the user manual for further details on iNet features and configuration.

If you have questions, or would like additional information, please visit the Eagle Customer Portal at https://epicorcs.service-now.com/epiccare

Overview

The appearance of iNet is controlled by a series of HTML templates and a style sheet. iNet ships with a number of template choices and includes a web-based utility to modify the colors and images used in the template. In order to control the appearance of iNet beyond what is available through the utility, it is possible to create your own template and style sheet. Creating your own template will allow you full control of the appearance of the site.

Template Structure

There is a header template that controls the overall site, and a page template that is used to display each page. There are also smaller templates that are used within both the main template and page templates to display smaller components.

https://epicorcs.service-now.com/epiccare



Most customization can be accomplished by creating your own header template and using CSS to customize the appearance for the remainder of the site. If necessary, it is possible to modify the page templates and nested templates as well.

iNet Upgrades and customized templates

There are two levels of customization possible with iNet. Standard Customization and Advanced Customization.

Standard Customization

With standard customization, you can create a template package as a zip file and upload it through the iNet web interface. This zip file must contain the header template file along with any supporting resources (CSS, javascript, image files, etc). Standard customization also allows you to upload additional inner template files within the iNet web interface that are used to display categories, products, shopping carts and lists.

Epicor will release upgrades to the iNet product from time to time. Any templates that are uploaded to iNet via standard customization using the web interface will not be affected by an iNet upgrade.

Advanced Customization

With advanced customization, iNet allows you to modify any template on the system using FTP. It’s important to note that these templates may be overwritten by an iNet upgrade in order to add additional functionality. We recommend that you keep a list of all templates you have changed, and a backup of both the original iNet template and your modified template so you can review them after an upgrade and redo any required changes.

Note that any template files that are available as a standard template should be modified by our web interface, and ONLY those that cannot be modified as a standard template should be modified by FTP.

Please see the Additional Templates section for more information.

Creating and Editing Templates

Each template is an HTML file. Templates can be created or edited using any application capable of creating an HTML document, from a simple text editor to a web publishing suite.

A template may contain one or more variables (placeholders) where information from iNet will be populated.

Information written into a variable can either be a value generated by iNet, or content from another template. Braces {} are used to identify a placeholder.

Example:

Hello {NAME}

The {NAME} variable would be replaced with an actual Name from iNet. This document will list available variables for common templates.



When creating a template, you can either download one of our default templates and modify it to suit your needs or create a HTML page from scratch with your desired look and then insert any template variables required.

Responsive or Legacy Templates

Starting in iNet 5.0, you have the option of using a responsive design, or enabling our legacy templates which use device detection to provide separate mobile and desktop sites.

You can choose between the two by logging in iNet Administration under Site->Templates

See “Changes between version 4.5 and version 5.0” for more detail on the upgrade process and it’s impact to web design.

See “Mobile specific templates” for more detail on working with the legacy mobile templates”

Responsive Templates (Bootstrap)

- Uses the bootstrap CSS framework for a responsive design

- Default for new sites

Legacy Templates

- Uses device detection for separate desktop and mobile sites

- Default for existing sites after upgrading to version 5.0

- Some functionality will change between the mobile or desktop. For example, the “Refine mode” feature is not available on mobile, and there are also some settings that will hide columns on mobile tables that would normally appear on desktop.

- Some features added in iNet version 5.0 and may not be available with our legacy templates.



Header Template The header template contains the basic HTML code that will be used on each page. There are template variables (placeholders) that can be included in the main template. iNet will replace the variables with iNet generated content. See below for a simple template that contains the common variables.

Header Template Sample

<html>

<head>

<title>{TITLE}</title>`

{META_TAGS}

<link rel="stylesheet" type="text/css" href="{PAGE_CSS}" />

{JAVASCRIPT}

</head>

<body {BODY_OPTIONS}>

<div id="menuboxes">

{CUSTOM_LINKS}

{MENUBOXES}

{STORE_MENUBOX}

{FEATURED_MENUBOX}

{CATEGORY_MENUBOX}

{LIST_MENUBOX}

</div>

{BREADCRUMBS}

<div id=”content”>{PAGEDATA}</div>

{MOBILE_SITE_LINK}

</body>

Template Variables

Unless otherwise indicated all variables listed below are mandatory. Variables have been divided into several groups:

Page Structure

{JAVASCRIPT}



JavaScript code required by iNet will be populated here. This placeholder must be included within the <head> tags. You may add additional JavaScript in the template as needed. iNet may also automatically add some JavaScript functions towards the end of the page.

The iNet web interface also provides a method to add custom JavaScript to the header template that will be included in this variable.

{PAGE_CSS}

This is a link to the iNet style sheet used by this template. iNet can set a different style sheet based on the type of user who has logged in. Please see the section on modifying style sheets in this document for more information. You can add additional style sheets if needed.

- This variable is not used in our responsive templates.

{BODY_OPTIONS}

This must go inside the <body> tag and is used to set onLoad events on some pages.

{PAGEDATA}

The main page content from iNet will be placed here. This is where the bulk of iNet content will be placed, so the layout should allow enough real estate on the page to accommodate this. This section must support variable height content.

{OFFCANVAS_FLYOUT_CONTENT}

This variable is used in responsive mode only and is used to facilitate the session flyout in our default responsive template. This content and layout of this flyout will vary based on session status, system settings and user) It can contain components such as:

- Store Name & Change Store Component

- Job Detail & Change Job Component

- User Details

- User Profile Link

- Login Form or Logout Button

- Register Button

The content in this flyout will be generated using one of two templates:

- If the user is not logged in, this content will use the template: offcanvas_session_flyout.ihtml

- If the user is logged in, this content will use the template: offcanvas_session_flyout_logged.ihtml



Navigation

{BREADCRUMBS}

Breadcrumbs generated by iNet used for site navigation. Note that this variable is primarily used in responsive mode, or legacy mode with mobile devices. It is not used in legacy mode with desktop devices.

{MENUBOXES}

iNet generated accounting navigation will be placed here. Navigation will be created as an unordered list by default, allowing you to control the appearance of each navigation area via a style sheet. You can also override this behavior by supplying your own template for navigation.

In legacy mode, the main menu will contain links to login / create accounts for users who have not logged in, and links to customer portal functions for users who have logged in.

In both legacy and responsive mode, you can add additional links to this section from the iNet custom pages menu.

In some situations, additional page-specific navigation may be included here. This navigation would appear as a separate unordered list, immediately following the first.

{CATEGORY_MENUBOX}

The list of categories or departments in your online catalog will be populated here. This will only happen on pages within the online catalog and will be left empty on customer portal pages. The content and behavior of this menu can also be controlled from iNet store settings. This placeholder is optional as there are alternatives for catalog navigation.

{REFINE_MENUBOX}

If the iNet site is setup to use “refine mode” then the list of categories to refine by can appear in this menu. Please see the iNet user manual for more details on the “Browse Mode” setting. Refine mode is currently only available when browsing the Eagle department tree. It is not available for iNet custom categories. This placeholder is optional as it is not used when refine mode is not active.

{LIST_MENUBOX}

This section will contain a links to access any shopping lists that a user has setup, links to the “quick order entry” and shopping list management pages. The section will only be populated on pages in the online store.

{STORE_MENUBOX}



This section will contain navigation for the online store. The links that appear hear are customizable from the iNet custom pages utility. It is optional and will be populated on every page if present.

{FEATURED_MENUBOX}

Featured products from the online store will appear here if enabled. Please see iNet documentation for information on setting up featured products. Featured products will only appear on online store pages. This is an optional placeholder.

{CUSTOM_LINKS}

The links that appear in this section are configured in the iNet custom pages utility They will appear on every page and are optional.

{FOOTER_LINKS}

The links that appear in this section are configured in the iNet custom pages utility They will appear on every page and are optional.

{MOBILE_SITE_LINK}

If customer has chosen to view the desktop site while viewing the site from a mobile device, this link will be populated with a link to return them to the mobile site. This is an optional variable and only available when running with legacy templates.

{PRICE_MODE_LINK}

If the iNet feature to allow customer accounts to hide their price while browsing the catalog, this link will be populated and will show the current price view status, and a link to change the pricing mode. (iNet can either hide all prices, or show retail price only)

{LANGUAGE_SELECTION}

For sites that support multiple languages, this will be a set of links to change the active language for the site. This variable will be blank on single language sites. Multiple languages are available for sites using the accounts online module only. Please contact us for additional information or to have additional languages enabled for your site.

{SOCIAL_LINKS}

Icons with links to your social media pages. These can be configured under Content->Pages->Social Media Links

{SITE_POLICY_LINK}



A link to the site policy contact form page. This link is only populated when the site_policy_link setting is enabled. This link is optional, and present for backwards compatibility with our legacy templates only.

Additional Information and Features

{ACCOUNT_MESSAGE}

Customizable message that displays the user’s name when logged in. This placeholder is optional. The content of the message can be configured from Site -> Advanced -> Customize Text -> Common

ACCOUNT MESSAGE: Used when user is logged in

NO ACCOUNT MESSAGE: Used when user is not logged in (defaults to blank)

{JOB_STATUS}

A customizable welcome message including company name is placed here. This placeholder is optional.

{ACTIVE_LANGUAGE}

The name of the language currently active for the user’s session. (E.g. English). This placeholder is optional for single language sites.

{ACTIVE_LANGUAGE_CODE}

The 2-character language code for the language currently active for the user’s session. This placeholder is optional for single language sites.

{LANGUAGE_OPTIONS}

A HTML options list with the available languages for the site. This placeholder is optional for single language sites.

{SWITCH_STATUS}

A status area including the active store and job is shown. Links to change the active store or job may be included depending on system settings. This is recommended for sites with multiple stores or jobs active, and optional for others.

{PAGE_BUTTON}



A page navigation link (usually, “back”) will be placed here. This variable is recommended in legacy templates and optional in responsive templates as it’s been replaced by breadcrumbs.

{TITLE}

The page title set by iNet. This can be used in 2 places, both as the html page title, and elsewhere on the page as a visible title.

{CART_MESSAGE}

A status message indicating number of items in the customers shopping cart, this works best when used as a link to view the shopping cart. This is an optional variable. When the continue shopping dialog feature is active, iNet will use JavaScript to dynamically change the contents of this variable as items are added to the cart.

{CART_TOTAL_MESSAGE}

A status message indicating the total value of the customers shopping cart, this works best when used as a link to view the shopping cart. This is an optional variable. When the continue shopping dialog feature is active, iNet will use JavaScript to dynamically change the contents of this variable as items are added to the cart.

{SITE_NAME}

The site name as defined in Site -> Advanced -> Customize Text -> Common -> SITE NAME. This placeholder is optional.

{SEARCH_FORM}

A simple HTML form that includes a input field to search the site. This placeholder is optional and was designed for responsive mode only.

{REFINE_STATUS}

Used when displaying products in the catalog or search results when the list has been refined by one or more filters. Will indicate each filter in use.

Store Information

The following variables are available on all pages. These will contain information for the active store.

All store information variables are optional



{STORE_NAME} - The name of the active store

{STORE_PHONE} - The formatted phone number for the active store

{STORE_ADDRESS} - The full address for the active store

{STORE_EMAIL} - The email address for the active store

{STORE_ADDRESS_1} - Address line 1 for the active store

{STORE_ADDRESS_2} - Address line 2 for the active store

{STORE_CITY} - The city for the active store

{STORE_STATE} - The state or province for the active store

{STORE_POSTALCODE} - The postal code or zip code for the active store

User Information

The following variables are available on all pages. These will contain information for the active user.

Please note that when viewing pages while not logged in most of these variables will be blank, however some will be set to default values as noted below. All user variables are optional.

{USER_NAME} - Username (e.g. login – will be set to a default of “SAGRO-GUEST” when not logged in)

{USER_FULLN} - Combined first and last name

{USER_FIRST_NAME} - First name

{USER_LAST_NAME} - Last name

{USER_EMAIL} – Email Address

{USER_PHONE} – Phone Number

{USER_COMPANY} – Company Name

{USER_CODE} – Customer Number (Will be set to the default cash account when not logged in)

Utility

{META_TAGS}

Meta tags generated by iNet such as meta-description tags for search engines will be populated here. The iNet web interface will allow some control of meta tags on various pages throughout the site.

{PROGRAM_NAME}



The iNet program name used to generate the page. This is optional and can be used to generate CSS class names to help target a specific page or set of pages.

Example: class=”{PROGRAM_NAME}”

{PROGRAM_MODE}

The iNet program mode used to generate the page. This is optional and can be used to generate CSS class names to help target a specific page or set of pages.

Example: class=”{PROGRAM_NAME}-{PROGRAM_MODE}” (uses both this variable and PROGRAM_NAME listed above.

{INET_SESSION_ID}

The iNet session id. This is an optional variable and can be used if needed in third party scripts. It’s not recommended to display this to the end-user.

{SAGRO_BASE}

The site’s base directory. Will be “/inet” for iNet systems. This is used to construct the full URL to iNet pages referenced by templates.

{PHP_SELF}

The path to the current page. Note that this is not actually the value of “PHP_SELF” variable. This is optional and should be included as needed to construct links to pages within your iNet site.

Utility (Hide)

The following variables are used to hide components in certain situations. These will add HTML code to hide a specific component (e.g. style=”display:none;”)

Each of these template variables is generally paired with a specific component which may include one or more of the variables listed above. These are required to show/hide components based on the site and user configuration. If the related component is not included in the template, then it’s HIDE variable may not be necessary.

{HIDE_STORE_CHANGE} - Hides change store feature when not enabled for user/site

{HIDE_JOB_CHANGE} - Hides change job feature when not enabled for user/site

{HIDE_CHECKOUT} - Hides checkout links when checkout is not allowed for user

{HIDE_CART} - Hides cart features when not available for user

{HIDE_EMPTY_JOB_STATUS} - Hides job status when empty



{HIDE_LANGUAGE} - Hides language display / selection for single language sites

{HIDE_ECOMMERCE} - Hides ecommerce features on non-ecommerce sites

{HIDE_LOGIN_SIGNUP_LINKS} - Hides login and sign-up links when user is logged in

{HIDE_SOCIAL} - Hides social media section when no social media links are configured

{HIDE_REFINE_STATUS} - Hides refine status section when not refining on anything

{HIDE_REFINE_FILTER} - Hides refine filter section when there is no refine filter

Style Sheet

Overview

Using a cascading style sheet is the best way to control the appearance of the iNet generated content. Working with style sheets in iNet will vary somewhat depending on if you are working with our responsive or legacy templates.

Style Sheets – Legacy Templates

The best approach is to start with the style sheet for one of our default templates and modify it as required. Our default style sheet will be divided into sections:

1. HTML – Styling for standard HTML elements.

2. TEMPLATE - Template specific styling. (You’ll want to replace this section with any styles required for your template)

3. iNET MENUS – Styling for iNet generated menus.

4. iNET STYLES – Styling for iNet generated content.

Key Styles

Look for the /* USER CUSTOMIZABLE */ comments in our default style sheets to identify the styles that will have the most impact on the appearance of your site.

Button Styles

HTML buttons in iNet are set to use the generic “button” class, and a unique class specific to each button. This allows you to use css to style button appearance globally or use css image replacement to replace specific buttons with your custom images. See the file /inet/css/buttons.css for an example and list of available buttons. This file is included automatically from our default style sheet. Image locations in this file should be relative to the location of the buttons.css file.

Style Sheets – Responsive Templates



By default, iNet uses two style sheets when running with responsive templates. The first is for application styles that contains the bootstrap css framework and some additional iNet specific styles. These styles are required and used by all iNet templates (header, page, inner)

The second is for theme styles, these are styles specific to a given theme. If you are building a header template based on our default responsive theme, you will want to use our theme style sheet and modify it. If you are building your own header template from scratch, you’ll likely want to build your own theme style sheet to replace ours.

To download our default style sheets. login to the iNet web interface, go to Site->Templates, and choose to download our default responsive template “Blueberry”.

For both stylesheets, we’ve included the SASS sources, and both a minified and non-minified version of the compiled stylesheet. iNet will use the minified version, while the non-minified version and SASS source are supplied for your reference and use for customization.

The download will include a scss.zip file which contains the SASS source for our application stylesheet including bootstrap. We recommend creating your own stylesheet that imports our source so you can extend it as necessary. To do that, you will need to include the scss/inet.scss within your stylesheet.

The download will also contain a default.scss file which is the SASS source for our theme stylesheet used by the blueberry template. If you are creating a new theme based on our default, you will likely want to modify this file. If you are creating a new theme from scratch, you’ll likely want to replace this file with your own.

For additional detail, please see the theming documentation on getbootstrap.com and the Uploading Changes – Web Interface section in this guide.

Navigation

By default, iNet will generate navigation as HTML unordered lists, our default style sheet shows an example of how to style these generated menus. There are several navigation areas that iNet will create depending on the site setup and the active page. See the “header template” section for a list of these navigation areas. You can change where navigation appears on the page by moving the related variable in the template. Creating a div with an id around each of the navigation areas will allow you to control their styling separately. Please note that our default responsive template includes a combination of styles and scripts that will generate an offcanvas flyout menu for both the header and side navigation when on smaller screens.

Additional Classes & ID’s

In order to provide as much flexibility as possible, we have included class names and id’s in key positions of the iNet site. For further control of any iNet page, you can review the HTML source to locate any applicable CSS ID’s and then use them in your style sheet as necessary. There are more ID’s available than are utilized by our default style sheets. In iNet 5.0 and up, our responsive templates will also include a wrapper div with a unique class for each template.

eCommerce Product Templates

Overview



iNet store administration allows you to set the template that will be used to display products throughout your site. This includes listing products in a category, product detail pages, search results, shopping carts, and a variety of other places. The template in use for each situation can be set in iNet administration. A utility is also included to allow you to build simple “list templates” that display products in a table. The utility includes the ability to pick and choose what columns you wish to show.

For each template type, we provide several defaults for both responsive and legacy templates. For more flexibility, you can also upload custom html templates to use instead. These templates can be loaded in the iNet administration utility. You will assign a name for each template. These templates will not be modified in an iNet upgrade.

Please see the iNet documentation for more information about the store administration utility, and below for details on the various template types, and a complete list of template variables available foreach type.

Category Templates

Category templates are used to display a category and the list of products inside that category when browsing the catalog. A category template consists of two files, the template, and template header. The template header is used to display the category name, and optionally a picture and additional text describing the category. The template is used to display any products within the category. Category templates are also used to display search results, cross-sell, up-sell and in any other components where a list of several products is shown.

Featured Category Templates

Featured category templates are used to a category that that is marked as featured. If there are multiple templates marked as featured this template will be used multiple times on the page once for each featured category.

Shopping Cart Templates

This template is used to display items in the users shopping cart. iNet also supports displaying items in the cart using a table, which can be configured under Site->Advanced->Tables. If you are using one of our default responsive templates or create your own to display items in the cart, it’s important that you still configure the list of columns to show in the table. The table view will be used for emailed order confirmation, and some export / print functionality.

Shopping List Templates

This template is used to display items in the users shopping list. iNet also supports displaying items in the list using a table, which can be configured under Site->Advanced->Tables. If you are using one of our default responsive templates or create your own to display items in the list, it’s important that you still configure the list of columns to show in the table. The table view will be used for some export / print functionality.’

The shopping list template is used for regular shopping lists only. It is not currently used for Gift and List Registries.

Product Templates

These are used when displaying the product detail page. (One product on a single page)

Group Templates (Style Color Size)



Group Templates are used in place of Product Templates to display a product group. In addition to the template file, a group template has several settings that impact how the product group is shown. Please see the iNet user guide for additional detail on these settings.

Category Templates – Variable List

{STORE_PRODUCT_SKU_LINK} - Visible SKU / Part Number ( as link to product detail)

{STORE_PRODUCT_NAME_LINK} - Name (as link to product detail)

{STORE_PRODUCT_URL} – Product URL

{STORE_PRODUCT_ID} - iNet catalog ID.

{STORE_PRODUCT_PARTNO} - Eagle Item Number

{STORE_PRODUCT_SKU} - Visible SKU / Part Number (not a link)

{STORE_PRODUCT_NAME} - Name (not a link)

{STORE_PRODUCT_DESCRIPTION} - Product Description

{STORE_PRODUCT_EXTRA} - Additional Description

{STORE_PRODUCT_IMAGE} – Image

{HIDE_STORE_PRODUCT_IMAGE} – Hides image tag when no image is present

{STORE_PRODUCT_THUMBNAIL} - Thumbnail Image (as link to product detail)

{STORE_PRODUCT_ICONS} - Icons (See product icon system)

{STORE_PRODUCT_LINK} - Link to external website

{STORE_PRODUCT_PDF} - PDF file

{STORE_PRODUCT_IMAGES} - Link to additional product images

{STORE_PRODUCT_QUANTITYAVAIL} - Quantity Available

{STORE_HIDE_QUANTITY} – Code to hide element when quantity is not shown

{STORE_PRODUCT_QTY_ONHAND} – Quantity on Hand

{STORE_PRODUCT_QTY_ONORDER} – Quantity on Order

{STORE_PRODUCT_SELLING_UM} – Selling UM (Note, prices and quantities are displayed using the selling UM)

{STORE_PRODUCT_PRICING_UM} – Pricing UM (Note, prices and quantities are displayed using the selling UM)

{STORE_PRODUCT_STOCKING_UM} – Pricing UM (Note, prices and quantities are displayed using the selling UM)

{STORE_PRODUCT_STATUS} - Product Status

{STORE_PRODUCT_FORM} - Purchase Button

{STORE_PRODUCT_MFG_PARTNO} – Manufacturer Part Number

{STORE_PRODUCT_MFG_CODE} – Manufacturer Code



{STORE_PRODUCT_MFG_NAME} – Manufacturer Name

{STORE_PRODUCT_CONSUMER_BRAND} – Consumer Brand Name

{STORE_HIDE_PRODUCT_CONSUMER_BRAND} – Consumer Brand Name

{STORE_HIDE_PRODUCT_MFG_NAME} – Code to hide element if consumer brand name is blank

{STORE_PRODUCT_UM} – Pricing Unit of measure

{STORE_PRODUCT_PRICE} - Selling Price

{STORE_PRODUCT_RETAILPRICE} - Retail Price

{STORE_PRODUCT_PRICE_BREAK} - Price Breaks

{STORE_PRODUCT_PRICE_CORE} – Core Price

{STORE_PRODUCT_PRICE_BASE} – Base Item Price (without core charge)

{STORE_PRODUCT_WEIGHT} - Item Weight

{STORE_PRODUCT_HEIGHT} – Item Height

{STORE_PRODUCT_DEPTH} – Item Depth

{STORE_PRODUCT_WIDTH} - Item Width

{STORE_PRODUCT_SIZE} – Combined Product Dimensions

{STORE_PRODUCT_ORD_MUL} – Order Multiple

{STORE_PRODUCT_ORD_MUL_DISP} – Hides element when there is no order multiple

{STORE_PRODUCT_STD_PACK} – Standard Pack

{STORE_PRODUCT_MAP_MESSAGE} – MAP Pricing message if one applies for the product.

Product Templates – Variable Lists

Product templates can contain any of the variables available in category templates as well as what is listed below.

{STORE_SIMILAR_PRODUCTS} - Similar Products / Up Sell

{STORE_ACCESSORIES} - Accessories / Cross Sell

{STORE_REVIEW_SUMMARY} – Area where a short summary of product ratings and reviews are shown, this will contain a link to write a review.

{STORE_REVIEWS} – Area where product ratings and reviews are shown.

{STORE_PRODUCT_OPTION_DATA} – User defined fields or generic attributes can appear here. Further information is available in their respective sections below.

{STORE_PRODUCT_LARGE_IMAGE} – Product Large Image

The {STORE_PRODUCT_PRICE} field will be expanded to show price break information when in detail mode.



Category Template Headers - Variable Lists

{STORE_CATEGORY_IMAGE} - Picture

{STORE_CATEGORY_ID} - iNet category ID

{STORE_CATEGORY_NAME} - Category name

{STORE_CATEGORY_DESCRIPTION} - Text description

{STORE_FEATURED} - Featured categories and products

{CATEGORYS} - Sub categories

{STORE_VENDOR_FORM} - Search by vendor / options form

{PRODUCTS} - Product list

{PURCHASE_BUTTON} - Purchase button

{LIST_BUTTON} - Add to list button

{RESULTS_NAVIGATION} - Links to navigate between pages

{CATEGORY_URL} – URL to the category

{HIDE_STORE_CATEGORY_IMAGE} – Can be used to hide an element when the category image is not set

Featured Category Template - Variable Lists


{STORE_CATEGORY_ID} - iNet category ID

{STORE_CATEGORY_NAME} - Category name


{CATEGORY_URL} – URL to the category

{HIDE_STORE_CATEGORY_IMAGE} – Can be used to hide an element when the category image is not set

Shopping Cart Template - Variable Lists

{STORE_ITEM_DELETE} – Checkbox to delete item from cart

{STORE_ITEM_COMMENT} – Icon to edit line item comment

{STORE_ITEM_COMMENTS} – Text of line item comment

{STORE_ITEM_THUMB} - Thumbnail

{STORE_ITEM_THUMB_LINK} – Thumbnail as link to view the product

{STORE_ITEM_SKU} – SKU

{STORE_ITEM_SKU_LINK} – SKU as link to view product

{STORE_ITEM_LINK} – Description as a link to view product



{STORE_ITEM_SIZE} – Item Dimensions (Width, Depth, Height) as a single field.

{STORE_ITEM_WIDTH} - Width

{STORE_ITEM_HEIGHT} - Height

{STORE_ITEM_DEPTH} - Depth

{STORE_ITEM_WEIGHT} - Weight

{STORE_ITEM_DESCRIPTION} - Description

{STORE_ITEM_PRICE} – Selling Price

{STORE_ITEM_QB_PRICE} – Quantity Break Price Detail

{STORE_ITEM_STATUS} – Availability Status

{STORE_ITEM_STATUS_CLASS} – Bootstrap contextual class for item status field such as text-success for available or text-danger for out of stock.

{STORE_ITEM_QTY_BACKORDERED} – Quantity backordered for the line

{HIDE_QTY_BACKORDERED} – Hides quantity backordered when none are backordered

{STORE_ITEM_RETAIL_PRICE} – Retail Price

{STORE_ITEM_UM} – Unit of measure

{STORE_ITEM_QTY_ORDERED} – Input Field for Quantity Ordered

{STORE_ITEM_EXTPRICE} – Extended price for the line

{STORE_ITEM_CART_ICONS} – Line item icons

Shopping List Template - Variable Lists

{STORE_ITEM_SKU} – SKU

{STORE_ITEM_DESCRIPTION} – Description

{STORE_ITEM_EXT_DESCRIPTION} – Extended Description

{STORE_ITEM_THUMBNAIL} – Thumbnail

{STORE_ITEM_UM} – Unit of Measure

{STORE_ITEM_STATUS} – Availability Status

{STORE_ITEM_MIN_QTY} – Customer Reference Field: Minimum Quantity

{STORE_ITEM_MAX_QTY} – Customer Reference Field: Maximum Quantity

{STORE_ITEM_CUSTOMER_LOCATION} – Customer Reference Field: Location

{STORE_ITEM_PRICE} – Selling Price

{STORE_ITEM_QB_PRICE} – Quantity Break Price

{STORE_ITEM_BASE_PRICE} – Price Before Core Charge



{STORE_ITEM_CORE_PRICE} – Core Price Charge

{STORE_ITEM_SIZE} – Item Dimensions (Width, Depth, Height) as a single field.

{STORE_ITEM_WIDTH} - Width

{STORE_ITEM_HEIGHT} - Height

{STORE_ITEM_DEPTH} - Depth

{STORE_ITEM_WEIGHT} - Weight

{STORE_ITEM_RETAILPRICE} – Retail Price

{STORE_ITEM_SELECT_ACTION} – Checkbox to select item

{STORE_ITEM_QUANTITY_ENTRY} – Quantity Entry

{LIST_CARD_CLASS} – Bootstrap contextual border class used to indicate special status of item in the list

Group Templates (Style Color Size)

Group templates use any of the variables available in Product Templates, and additionally can support the following variables to display the items within the group.

{STORE_PRODUCT_MEMBERS} – Display member items in the group. The structure of this content will depend on the settings on the group template.

{STORE_PRODUCT_REP_IMAGES} – Thumbnail images to allow selection of member item. This requires specific settings on the group template to function.

{STORE_PRODUCT_REP_IMAGE} – Image to represent the entire group of products

Generic Attributes in Product Templates

Generic attributes can be made available in the product list template, product detail template, shopping cart template and shopping list template. If they are made available, there will be one template variable created for each attribute.

The variable will be {STORE_PRODUCT_ATTRIBUTE_XX} where XX is the attribute code from Eagle.

In product lists, the show_generic_attributes_in_list setting determines if the variables will be available. You can also use the “list template” feature in iNet to build a template that includes generic attributes in a table listing products with no HTML changes needed.

On product detail pages, the show_generic_attributes_in_detail setting determines if the variables will be available. This setting also includes an option to have iNet automatically generate a list of generic attributes, if that is enabled, iNet will create a table listing all generic attributes for the product and write it to the {STORE_PRODUCT_OPTION_DATA} variable. The table will have a class of inetga_attribute_list. This table will include both the generic attribute description and the attribute value description for the product from Eagle.

Please note: the {STORE_PRODUCT_OPTION_DATA} table is available on product detail pages only.



User Defined Fields in Product Templates

User defined fields can be made available in the product list template, product detail template, shopping cart template and shopping list template. If they are made available, there will be one template variable created for each attribute that is defined in iNet.

The variable will be {STORE_PRODUCT_UDF_XX} where XX is the numeric user defined index from Eagle.

In product lists, all user defined fields setup in iNet will be available. You can also use the “list template” feature in iNet to build a template that includes user defined fields in a table listing products with no HTML changes needed.

For product detail pages, all user defined fields setup in iNet will be available. You can also setup iNet to have some user defined fields automatically appear in an iNet generated table. If that is enabled, iNet will create a table listing all user defined fields that are setup to appear in the list and write it to the {STORE_PRODUCT_OPTION_DATA} variable. The table will have a class of inet_udf_list. This table will include the user defined field description from iNet, and the data from the Eagle product.

Please note: The {STORE_PRODUCT_OPTION_DATA} table is available on product detail pages only.

Uploading Changes

Standard Customization (Web Interface)

Overview

Templates can be loaded in the iNet web interface by accessing Site -> Templates.

You will need to create a zip file that contains the template files, images, CSS and any JavaScript or other assets. You can download any of our templates and can either create a modified version of one of our default or just use it as an example.

SASS Source for responsive templates.

If you download our default responsive template, it will include a scss.zip file. This contains the SASS source for our application stylesheet including bootstrap. We recommend creating your own stylesheet that imports our source so you can extend it as necessary. To do that, you will need to include the scss/inet.scss within your stylesheet. Please see the documentation on theming bootstrap on getbootstrap.com for additional detail.

The download will also contain a default.scss file which is the SASS source for our theme stylesheet used by the blueberry template.

Referencing Images and other media for templates uploaded via the web.

If you are referencing images from a style sheet, you will need to use the relative path from the style sheet for the images. Images loaded through the web interface will be saved in the “images” directory in the same location as the style sheet.

Example:



.background {

background: url(images/background.png) repeat-x;

}

If you are referencing images from the html templates, you will need to use the absolute path to the image file, including your template ID.

Example:

<img src="{SITE_STYLE_DIRECTORY}/images/logo.jpg">

iNet will automatically replace the {SITE_STYLE_DIRECTORY} variable with the appropriate base directory for your site.

Creating a template package

To upload a template via the web interface, you must create a template package containing the necessary files. To create a template package, follow the steps below:

1) Choose an alphanumeric id for this template. It should contain letters and numbers only, (no spaces)

2) Create a directory on your PC using the template name

3) Copy the style sheet into this directory and give it the same filename as the template, with a .css extension

4) Copy the main template file into the directory as header.ihtml

5) Copy the menubox.ihtml and menubox_link.ihtml files from one of our default templates into the directory

6) Create an images directory and copy any images required for the template here.

7) Create/Modify an XML document to define the template. See settings.xml below for more detail)

8) Once the template is complete, create a zip file containing the directory, and upload it into the iNet web interface under the Configuration->Site Templates section.

9) Preview the template from the web interface to ensure it looks correct, and then select “use template” to activate it.

Tip: Download one of our default templates to review the zip file contents.

Creating settings.xml

The settings.xml is used to set some properties that let iNet know how the template should be used. A simple settings.xml will look like the example below:

<?xml version="1.0" encoding="UTF-8"?>

<template>

<id>abc</id>

<name>ABC Template</name>



<style>ABC</style>

<bootstrap>true</bootstrap>

<description>This is a responsive template built using the bootstrap framework. </description>

</template>

The “id” must be a unique alphanumeric ID that matches the template directory name and file names in your template package.

Name, Style and Description can be whatever you want. These will appear in template administration for you to select the template.

Finally, you will need to use one of the three methods below to indicate what type of template this is. It’s important you only use one of these three methods:

1. Include: <bootstrap>true</bootstrap> to indicate that the template is a responsive template

2. Include: <mobile>true</mobile> to indicate that the template is a mobile template for legacy mode

3. If neither <bootstrap> and <mobile> tags are included, the template will be available as a desktop template for legacy mode

Advanced Customization (FTP)

Directory Structure

When you connect to your iNet FTP site, you’ll see the following directory structure:

/html - Root Directory for your non-SSL (http) site.

/html-ssl – Root Directory for your SSL enabled site.

/include – iNet library files.

/inet – iNet configuration & template files.

/tmp – temporary directory.

The directories you will work in are the /html and /html-ssl directories as well as the /inet/templates directory

If you have an SSL enabled site, your iNet site will run out of the /html-ssl directory and a short script to re-direct traffic to the SSL site will have been placed in the /html directory. If your site is not SSL enabled, iNet will run out of the /html directory

You can add additional html files to augment your iNet site into either the /html or /html-ssl directories as necessary. Additionally, any media (images, etc) that you wish to use from your iNet templates must be loaded into one of those directories.

We recommend loading images into the /html-ssl/images or /html/images directory.



Inside the /inet/templates directory, you will see several directories. The directories that contain the customizable templates are:

/bootstrap_en – Responsive templates for customer facing site (English)

/legacy_en – Legacy templates for customer facing site (English)

/email – Templates used for outgoing email. The “Customizing Outgoing Email” section in this document contains more detail on working with these templates.

*If you are working with a site that has multiple languages enabled, you will have a bootstrap and legacy template directory for each language.

There are also several additional directories that contain files you should not modify via FTP.

/eui_en – Templates used by the administrative interface

/formsengine - Templates used by the administrative interface

/products – Product templates managed by the administrative interface

/styles – Standard templates managed by the administrative interface

Template Files

iNet templates will be found in the /inet/templates/bootstrap_en or /inet/templates/legacy_en directories.

Listing that directory will reveal a large number of templates. The majority of these templates should be left alone. (See the advanced section of this document for more details on other editable templates)

When uploading templates via FTP, there are more than one “Main Template” and style sheet that you will need to replace. iNet is setup to use a different template file for each account type. This allows you the flexibility of having a different look between AR and Retail customers.

If you wish to use the same template for each, you’ll need to replace each of the main template files with your new template.

Templates:

header.ihtml – Template used for users who are not yet logged in

header_guest.ihtml – Template used for guest (Retail) customers*

header_customer.ihtml – Template used for customer (AR) customers.

Style Sheet



default.css – Style sheet for users not yet logged in (combines with header.ihtml)

guest.css – Style sheet for guest accounts (combines with header_guest.ihtml)

customer.css – Style sheet for customer accounts (combines with customer.ihtml)

*There is also a setting in iNet configuration that allows you to use the guest template for all catalog pages. This allows you to use a different template for the online catalog than for the rest of your site.

Advanced Customization: Mobile Template Files

If your site is setup to use FTP to update the mobile template, the mobile templates will be loaded in the /inet/templates/en/styles/_madvanced directory.

Note – these files are safe to update by FTP as they are not updated by the web interface. Other files in the /inet/templates/en/styles directory should not be modified by FTP as mentioned above.

Referencing Images and other media for templates uploaded via FTP.

When referencing images from templates or style sheets that you upload with FTP, you should always use the absolute path to the image directory; this ensures the image is found for all iNet pages.

Example:

<img src=”/images/logo.png”>

The leading / is important!

This example assumes you have created an “images” directory in the html directory where your iNet is running from.

Enabling FTP Templates

By default, iNet will use the templates that are available in our web interface. To tell iNet to use the templates uploaded by FTP, you must login to the web interface, and select the Advanced Templates(FTP) option for either responsive or legacy templates.

Linking to iNet pages

Linking from External Web Sites

You can link to almost any iNet page you wish from an external web site or e-mail. The easiest method to determine the URL to use is to navigate to desired page up in your web browser, and then copy the URL from your location bar to use as the link.

If you link to pages that require the user to login before viewing the page, and a user follows those links before they have logged in, iNet will display the login page first, and then redirect them to the appropriate destination page after they successfully login.



Static URL’s

By default, iNet will create static URL’s for custom pages and pages in the catalog. When using static URL’s, the equivalent dynamic URL for any page will continue to work and respond with an HTTP 301 redirect to the new static URL.

iNet will also include the Static URL in the HTML header as the canonical URL for a page.

Static URL’s is a feature added in version 2.3

For sites converting to version 2.3 from an older release, static URL’s must be enabled by the administrative

interface. Enabling static URL’s will cause iNet to create a .htaccess file in the website root directory. This will

replace any prior .htaccess file if one had been manually loaded. Please see the section on .htaccess files under

Advanced Configuration for more details on customizing this file.

Linking From iNet

You can also link to iNet pages from other iNet pages. You can place links in your templates, in the HTML descriptions for products and categories, etc. The easiest method to do this is to navigate to the desired page, and past the URL into the link. When you do this, it is recommended that you remove the https://yoursite.com portion of the URL from those links so they will work if you change your hostname in the future.

e.g. instead of:

https://store.example.com/inet/storefront.php?mode=viewcart

use:

/inet/storefront.php?mode=viewcart

Meta Tags Meta Description.

When browsing the iNet e-Commerce catalog, iNet will automatically populate the meta description tag on product pages with the

products description. Category pages will also have their meta description tag set to the category description (if present). If you

wish further control of the meta description tag, it can be set per product/category and on custom pages from the iNet web

interface.

Other Meta Tags

Any other meta tags can be added to the iNet header template. These tags will then appear on all iNet pages using that template.

https://yoursite.com/

https://store.example.com/inet/storefront.php?mode=viewcart



Advanced Customization

Overview

Several advanced customization options are available for further control of your site. All the advanced options require use of FTP to load templates on your site.

Category Groups (Tabs)

The “Category Groups” feature is a powerful feature that allows you to create separate templates for different sections of the online store. A common use for this is to give the appearance of multiple tabs on your site.

The category groups feature will only impact pages generated by the online store. Pages outside of the store will use the standard templates.

To setup category groups, you must enable the “category_groups” setting from Store Administration->Settings

You must also create a new main template called header_group.ihtml. When groups are enabled, this file will be used as the main template for any pages in the store. We will refer to this as the “Group Header Template” in the remainder of this document.

You can then create a template for each unique group. A group can either be a top-level custom category, or a user-defined collection of departments. For any categories you do not create a group for, the file store.ihtml will be used as the group template.

Departments can be assigned to groups under the Store Administration->Departments->Customize Settings screen. Use a single alphabetic character as the group ID and assign each department to the group by entering that character in the Customize Settings screen. The group itself can then be further customized by clicking the “Groups” link on the Store Administration->Departments page.

The iNet generated numeric ID for a top-level custom category will be used as the group ID for that custom category and any categories inside it.

Group templates should be saved in the following directory:

/inet/templates/products

The file name should be store_group_GROUPID.ihtml where GROUPID is replaced with the iNet group ID.

Example full file name:

/inet/templates/products/store_group_5.ihtml

The {PAGEDATA} template variable from the main template MUST be included in the Group Header Template and cannot be included in the individual group templates. The content of the appropriate group template, or store.ihtml



will be included in here based on the users position in the store. Any other main template variables can be used interchangeably between the Group Header and individual group templates depending on the requirements of your design. When working on group templates, it is important to treat store.ihtml as another of the individual group templates, and to thoroughly test all pages to ensure the site looks and behaves as you expect.

In addition to the standard template variables, there are several template variables that must be included in the individual group templates:

Sample group template:



{STORE_POSITION}

<p class="message">{MESSAGE}</p>

{STORE_PAGE}

{STORE_RECENTLY_VIEWED}



{STORE_POSITION} – Breadcrumbs that show the users current position in the store

{MESSAGE} – Messages generated by the iNet catalog

{STORE_PAGE} – Main catalog content will be included here.

{STORE_RECENTLY_VIEWED} – A list of recently viewed products will go here.

Tips:

If you wish to have a separate color scheme for each group, you can create a HTML DIV around the {STORE_PAGE} placeholder and assign it a different id for each group. You will be able to use this id to have css styles apply to just that one group.

Customizing Contact Forms

Additional fields can be added to iNet’s contact forms. There are two methods that can be used to add these fields.

1) The html template for the form can be edited directly. Please note that this template is not considered a standard template to edit and may be modified or replaced by a future iNet upgrade.

2) Creating a custom page that calls our contact page. See the existing iNet generated contact page for sample html to use when creating the contact form.

Using either of those two methods you can then add additional html fields to the contact form. The fields must include a prefix of x_ to indicate to iNet that they should be included in the outgoing e-mail.

Example: <input type=”text” name=”x_extra_data”>

Directory Level Configuration File (.htaccess)



The .htaccess file on an iNet site is maintained by iNet. Some operations in the iNet web interface will cause this file to be regenerated. If you wish to add your own custom rules to this file, you can do so by creating a separate file that iNet will include when regenerating the .htaccess file.

To add your own rules – create a file containing the desired rules named htaccess_append . Load this file into the /inet/config directory. To force iNet to regenerate the .htaccess file and include your content, login to the web interface, and click the “Regenerate .htaccess” link under Site->Advanced in the Configuration area.

You will need to click this button each time you update your file.

Please note that any errors in the .htaccess file have the potential to disable your iNet site. If this occurs, the

recommended solution would be to delete both your customized file and the iNet generated .htaccess file. You

should then be able to login to iNet, and regenerate the file restoring your site. The Advice line cannot provide

you with any assistance in this situation.

Adding an iNet login form to an External Site

You can create an HTML form similar to the sample below that sends a POST request to any iNet page in order to log a user in to iNet.

After the user logs in, they will be redirected to the page that was requested. To get the default start page for a user, send the request to /inet/start.php

<form method="POST" action="/inet/start.php" name="login">

<input class="textbox" type="text" name="name">

<input class="password" type="password" name="pass">

<input type="hidden" value="Login" name="auth_login">

<input class="button login_button" type="Submit" value="Login">

</form>

For example, sending the above POST request to /inet/start.php will redirect the user back to their default home page, typically a “welcome” page once they login.

Sending the request to /inet/ar/account_info.php will redirect the user to the account info / balances page after logging in.

iNet Search Form

INet generated search form



For sites using our default templates, iNet can automatically generate a HTML form to search the site, it can appear in the side menu, or as part of the custom links menu.

The iNet generated form is also available in customized templates.

The search_menubox setting under eCommerce Configuration -> Advanced->Settings will control how this box appears.

-If it’s set to Yes, iNet will create the search form in the main {MENUBOXES} variable. It will be created as div with an id=”search_menubox” and typically appears as a box on the side of the page. This box will include a search form, a link to the advanced search page.

If it’s set to Yes – Custom Links Menu, iNet will create the search form as the last entry in the custom links menu. In the template, this will be written to the {CUSTOM_LINKS} variable. This search form will consist of a text input field and submit button/icon to initiate the search.

Custom Search Form

If you wish to create your own search form in an iNet template, or on an external site you can do so as well.

The following is an example of a simple search form:

<form method="GET" action="{SAGRO_BASE}/storefront/store.php">

<input type="hidden" name="mode" value="searchstore">

<input name="search[searchfor]" size="15" type="text"/>

<button type="submit">Search</button>

</form>

Form Action: This must be set to the /storefront/store.php URL within your iNet site. If you are including this code in an iNet template, use {SAGRO_BASE}/storefront/store.php as the form action. {SAGRO_BASE} will be set to the correct location for your iNet install.

If you want to include the form on an external site, you will need to use the full URL to store.php including your iNet hostname. Please note that if you have your iNet hostname changed, the search form will need to be updated to the new hostname.

You can also add additional fields to the search form to further refine the results shown. The fields you can use will vary depending on if your iNet site is setup to search the Eagle department tree, or the custom catalog.

These additional fields can be set as hidden fields, or used as text/other input methods allowing users additional control of the search.

Eagle Tree Search Fields



Field Name Description Example Notes

search[searchfor] Search String <input name="search[searchfor]" type="text"/> Text to search for

search[department] Department <input name="search[department]" type="hidden" value=”102”/>

Searches the specified Eagle Department

search[class] Class <input name="search[class]" type="hidden" value=”10”/>

Searches the specified Eagle Class

search[fineline] Fineline <input name="search[fineline]" type="hidden" value=”10231”/>

Searches the specified Eagle Fineline

search[manufacturer] Manufacturer <input name="search[manufacturer]" type="hidden" value=”DEWALT”/>

Searches by manufacturer (Manufacturing Vendor Code from Eagle)

search[brand] Brand <input name="search[brand]" type="hidden" value=”3M”/>

Searches by brand (Consumer Brand Name in Eagle)

search[item] Item Number <input name="search[item]" type="text"/> Searches for the item number specified

search[code_match_method] Item Match Mode

<input name="search[code_match_method]" type="hidden" value=”E”/>

Method used for finding matches by Item Number, Manufacturer Part Number or UPC

E – Require an exact match

S – Find all matches starting with the supplied code

P – Partial match

search[mfg_part] Manufacturer Part Number

<input name="search[mfg_part]" type="text"/> Searches for the specified manufacturers part number

search[upc] UPC <input name="search[upc]" type="text"/> Searches for the specified UPC

udf[UDF_INDEX] User Defined Field

<input name="udf[3]" type="hidden" value=”Gold”/>

Search for items using a user defined field.

UDF_INDEX will be the numeric user defined field id (1->50) only user defined fields setup in iNet admin will be searchable.

Searches by user defined fields are exact match only.

*Please see iNet documentation for more details on user defined fields

attr[ATRIBUTE_ID] Generic Attribute

<input name="attr[A1]" type="hidden" value=”USA”/>

Search for items using a generic attribute

ATTRIBUTE_ID will be the generic attribute code.

Searches by generic attribute are exact match only, and the search text must contain the attribute value code. (Not attribute value description)

*Please see iNet documentation for more details on generic attributes



Custom Catalog Search Fields

Field Name Description Example Notes

search[searchfor] Search String <input name="search[searchfor]" type="text"/> Text to search for

search[mode] Search Mode <input name="search[mode]" type="hidden" value=”andloose”/>

Further control on how text searches behave:

andloose – Requires all words in the search string are present in the results, will do a partial match. This is our recommended method

andexact – Requires all words in the search string are present in the results, Requires an exact match only

orloose – Will return results containing any of the search terms, and will do a partial match.

orexact – Will return results containing any of the search terms. Requires an exact match only

search[partno] Item Number <input name="search[partno]" type="text"/> Searches for the item number specified

search[category] Search Category <input name="search[category]" type="hidden" value=”4”/>

Searches for products in the specified “search category” The search category may be at a higher level in the tree than the products actual category. Categories are specified as search categories by the “list category in advanced search” setting in the category settings.

search[real_category] Product Category

<input name="search[real_category]" type="hidden" value=”4”/>

Searches for products in the specified category

Additional Templates

Beyond the main templates, there are main additional templates that make up the iNet site. The remaining templates are included inside the main templates as needed to generate each page. Epicor recommends that you use the style sheets to control the appearance of the inner templates; however, you do have the ability to further customize these templates.

If you wish to edit any of the below templates or other templates not listed in this document we recommend that you keep a list of all templates you have changed, and a backup of both of the original iNet template and your modified template so you can review them after an upgrade and redo any required changes.

The header*, menubox* and store_group* templates listed in previous sections of this document, along with all templates that are uploaded using the iNet web interface without using FTP are protected templates and will not be overwritten by an upgrade.

Store Home Page



The template store_home.ihtml is used when displaying the main page of the online store. (Your Department List) If you wish to include custom content on this page, you can do so by modifying the store_home.ihtml template.

The following variables are available in this template:




{CATEGORYS} - Sub categories

{INET_CAROUSEL} – Carousel

The template store_featured.ihtml is used when displaying the featured page of the online store. If you wish to include custom content on this page, you can do so by modifying the store_featured.ihtml template.

The following variables are available in this template:


{INET_CAROUSEL} – Carousel

Customizing Outgoing E-Mail

When iNet sends outgoing e-mail, it will send a multipart e-mail containing both text and HTML components. The HTML component will include the style sheet used on the main web site. This will use the standard iNet style sheet file names. If you use a different name for your style sheet and manually include it in your template, iNet will not use it for outgoing e-mail.

Each email sent by iNet will use a combination of two templates. The header template (header_email.ihtml) and then a template specific to each email that is sent. Modifying this template is a good way to customize the appearance of outgoing email.

Most emails sent by iNet are a simple email with some text. The content for these emails can be edited in the iNet user interface (Site->E-Mail->Templates) without the need to modify the template files using FTP. These templates will not be modified by iNet upgrades.

Some email sent from iNet such as order confirmations have a more complex layout and use a html template for their layout. These templates can be modified by FTP if necessary, however they may be replaced during an iNet upgrade if we add features that impact the email.

If you wish to use images or other external files in your e-mail templates, you will need to store those files on a web server and include the full URL when referencing them in the template. iNet does not provide a method to include additional files in the outgoing e-mail.

E-Mail templates are stored in the /inet/templates/email/en directory

If your site supports multiple languages, there will be one email template directory per language.



jQuery and iNet

iNet 5.0 ships with jQuery version 1.11.3 iNet will automatically include jQuery on all customer facing pages. INet also uses several jQuery plugins that will be included as needed.

iNet will automatically include the jQuery-migrate plugin to provide a transition path for any plugins or customizations that require the older version. We will remove the jQuery migrate plugin in a future release. For more information please see https://jquery.com/upgrade-guide/1.9/

You are welcome to make use of the jQuery library that is loaded by iNet in any template customization you do. You will be responsible for troubleshooting any JavaScript/jQuery related issues that arise due to your customizations.

We do not recommend replacing the version of jQuery that iNet uses as all iNet testing will have been done with the version we distribute. If you require a specific version of jQuery we recommend you include it separately using the noConflict() method. See http://api.jquery.com/jQuery.noConflict/ for more details.

Future iNet releases may include a different version of jQuery.

Icons

iNet uses the fontawesome icon set for all customer facing icons. You can use CSS to modify the appearance of those icons.

Google Analytics Customization

iNet can generate Google Analytics tracking code, including transaction tracking code for e-commerce conversion tracking. This is setup in iNet administration and involves entering the Google Analytics account number and enabling generation of the tracking code.

The base for the tracking code iNet generates is stored in a template. The template will be found in the /inet/templates/bootstrap_en or /inet/templates/legacy_en directory. Use analytics_universal.ihtml for Universal Analytics, or analytics_classic.ihtml for the older tracking code.

You can edit this tracking code, and add additional code to customize the behavior; however, it is critical that you leave all existing template variables in place so the iNet generated code will continue to work.

Mobile Specific Templates (Legacy Templates Only)

When running with legacy templates, iNet will detect users visiting the site from a mobile device and will use a mobile specific template for the mobile device. Please see the iNet 3.0 user manual for more details on mobile device support and related settings.

Mobile Site Template

iNet ships with a mobile optimized template by default. You can customize the images and colors used by this template from iNet site administration.

https://jquery.com/upgrade-guide/1.9/



If you wish to create your own mobile template, you can do so as well. There are two options for creating your own mobile template.

1. Use the same method as you would to create a desktop template and upload this template as a zip file within iNet administration. Note that to indicate the template is a mobile template, you will need to supply a settings.xml file that contains the element <mobile>true</mobile> inside the main <template> element. Please download one of our existing mobile templates to use as a sample.

2. You can also set the iNet mobile template to Advanced/FTP Mode. When you do this, you can use FTP to update the files. The files for the mobile template will be in the directory /inet/templates/en/styles/_madvanced Please note that this mode requires separate template files for each account type as listed below.

a. header.ihtml – Template used for users who are not yet logged in

b. header_guest.ihtml – Template used for guest (Retail) customers*

c. header_customer.ihtml – Template used for customer (AR) customers.

If you wish to build your site with a responsive design, upload the same set of template files for both the desktop and mobile site. Please note, iNet will still detect mobile devices and behavior will vary slightly from a desktop browser – please see Mobile Device Enhancements section under What’s new in iNet 3.0 in iNet online help for more detail.

Product Templates

Mobile specific templates are used to display product lists and detail. These templates can be uploaded under eCommerce Configuration -> Templates just as any other catalog template. The settings “mobile_product_list_template” and “mobile_product_detail_template” found in eCommerce Configuration -> Advanced will determine what templates are used for displaying products on the mobile site.

If you wish to build your site with a responsive design configure these settings to match the product templates used elsewhere on the site.

iNet Upgrades iNet upgrades will replace some of the templates used by iNet to create the inner content of the page. Upgrades will not modify header templates and others noted in this document as safe. If your iNet site customization is limited to the templates noted here as safe, and style sheets, then it should not need any further changes after an iNet upgrade.

If an iNet has had other templates modified, then it may require some work after an upgrade to ensure the site looks and behaves properly. In addition, each upgrade may make new templates available, or add additional css selectors to existing templates in order to provide more control.



A list of key web-design related changes made in each version is included in the revisions table of this document. When upgrading iNet, we recommend you obtain the latest version of this document as it will include any relevant web design information for the new version.

Troubleshooting

Common Issues

Security Warning – Page contains both secure and insecure items.

If a web page contains a mix of secure (SSL) (https) and non secure (http) items, many web browsers will display a warning message to the end user. As iNet sites are typically SSL sites, this message may appear if non SSL content is included by your templates. This could be links to images / style sheets, embedded video’s or other content on non-SSL sites. To avoid this problem all content that makes up an iNet site should be hosted on a SSL site.

It is possible to have iNet link to an external and non-SSL site, as the warning will only appear when including the non-SSL content on an iNet page.

The exact warning message that appears will vary based on the web browser used.

Upgrade Notes The notes below highlight changes in iNet that may impact a customized site. Please note, this is not a complete list, and just highlights key changes between versions.

Changes between version 4.0 and version 4.3

jQuery update

We have updated iNet to use jQuery 1.11.3. iNet will automatically include the jQuery-migrate plugin to provide a transition path for any plugins or customizations that require the older version. We will remove the jQuery migrate plugin in a future release. For more information please see https://jquery.com/upgrade-guide/1.9/

The featured product template: store_product_featured.ihtml was removed. In its place there is a new setting eCommerce Configuration -> Advanced -> Settings -> featured_template that allows you to select from any of the product templates loaded on the system.

This change should not require any attention during an upgrade. If this file was previously customized on a site, the upgrade will add your customized file as a product template and adjust the new setting to use it.

Checkout Process

https://jquery.com/upgrade-guide/1.9/



The templates used for the payment selection and confirmation pages have been updated to include support for loyalty rewards and eGift card redemption.

Added or Changed Files:

store_cart_confirm.ihtml

store_cart_confirmed.ihtml

store_receipt.ihtml

email/store_cart_confirmed.ihtml

email/store_receipt.ihtml

Deleted Files:

store_setcc.ihtml

store_setcc_guest.ihtml

store_setcc_hosted.ihtml

User Registration Process

There were a number of changes to the user registration process. Your site may be impacted depending on how it was configured. Please review the login and sign-up pages and make adjustments as needed. More detail on the user registration changes is available in the iNet Online Help.


login.ihtml

signup_mode_prompt.ihtml

login_or_signup.ihtml

store_checkout_signup_prompt.ihtml

Deleted Files:

store_requires_account.ihtml


Address Selection & Shipping Pages

iNet 4.5 includes a new feature to support the ability to select a store for in store pickup within the checkout process. The following templates were impacted by this work and will be replaced during an upgrade. Your site may be impacted depending on how it was configured. Please review the checkout process make adjustments as needed. More detail on store pickup selection enhancement is available in the iNet Online Help.




store_address.ihtml

store_address_registry_pickup.ihtml

store_address_registry_delivery.ihtml

store_address_organization.ihtml

store_address_select.ihtml

store_address_pickup.ihtml

store_pickup_selection.ihtml

store_address_pickup_date_time.ihtml

store_no_shipping.ihtml

Other changed files

store_quick_add.ihtml

- Ability add 10 new lines to the quick order form by clicking a link

request_account_sent.ihtml

- made text customizable


- Hide payment summary on estimate pages

- Change button label to read “Apply Gift Card”

store_cart.ihtml

- Ability to hide PO number prompt based on setting

feedback_ar.ihtml

- Update cancel button URL

store_gc_check_balance.ihtml

- Change button label



Eagle/cx_contact_edit.ihtml

- Display job number

Eagle/sls600_customer.ihtml

- Add order # field to form

Eagle/store_create_linked_account.ihtml

- Add customizable note to this page

Eagle/statement.ihtml

- Support custom remittance message from Eagle

store_gc_embedded.ihtml

- Fix: Remove “placeholder” lines


New Responsive Templates

In version 5.0 we added support for responsive templates using the bootstrap framework. This included a new version of each template, along with changes to the directory structure. In order to support the work done for the new responsive templates and additional features we added, many of the legacy templates were modified as well.

Upgrading from 4.5 to 5.0

Version 5.0 supports both the new responsive templates and legacy templates. When upgrading a site, it will be initially be set to use the legacy templates. Some of the templates will have been modified to support new features and your customizations may need to be re-integrated, however this will be a similar process to past iNet upgrades.

If you wish to use the responsive templates, you can make that change at any time you wish. Likely you will need to make additional changes to your templates or create an entirely new template to work with are new responsive design.

In addition to the template changes there are new features and settings that were introduced along with the responsive templates. These include new options for the “# of columns” settings to use responsive breakpoints instead of a pre-defined table. Please see the upgrading to 5.0 section in iNet Online Help for settings that we recommend changing when moving to responsive templates.

Legacy templates changed during the 4.5 to 5.0 upgrade

cadmin_edit.ihtml



cadmin_set_passwd.ihtml

change_password.ihtml

custom_store_cart_detected.ihtml

error404.ihtml

feedback_ar.ihtml

feedback_contact.ihtml

forgot_password.ihtml

item_detail.ihtml

live_search_customer.ihtml

request_access.ihtml

request_account.ihtml

request_erp_account.ihtml

signup_accounts_found.ihtml

store_address.ihtml

store_address_pickup_date_time.ihtml

store_cart_confirmed.ihtml


store_cart.ihtml

store_gc_check_balance.ihtml

store_gc_checkout.ihtml

store_gc_embedded.ihtml

store_gc_purchase.ihtml

store_gc_purchase_price_button.ihtml

store_gc_purchase_price_manual.ihtml

store_gc_purchase_to_from.ihtml

store_gc_terms.ihtml

store_list.ihtml

store_markup.ihtml

store_no_shipping.ihtml

store_pending_orders.ihtml

store_receipt.ihtml



store_request_estimate.ihtml

store_review_edit.ihtml

store_review_list.ihtml

store_review_publish.ihtml

store_switch.ihtml

store_product_form.ihtml

store_product_buttons_M.ihtml

store_product_buttons_S.ihtml

store_product_buttons_L.ihtml

store_product_buttons_I.ihtml

table.ihtml

table_cell.ihtml

table_row.ihtml

update_user.ihtml

All templates in any sub directories, including:

All templates in the Eagle subdirectory

All templates in the help subdirectory

All templates in the registry subdirectory

Revisions

Date iNet Version Description

2/1/2011 2.3 Adding custom fields to the contact form

Static URL’s

7/5/2011 2.4 Add new placeholders for product ratings and reviews

{STORE_REVIEW_SUMMARY}

{STORE_REVIEWS}

7/5/2011 2.4 Custom directory level configuration (.htaccess) files

7/5/2011 2.4 The following files to control the appearance of Similar Products / Accessories are



no longer available. Instead there is now a setting in the web interface to pick the template used from the category/product templates.

store_product_acc.ihtml

store_product_acc_item.ihtml

store_product_sim.ihtml

store_product_sim_item.ihtml

See online help for details on the new setting.

7/5/2011 2.4 New CSS selectors for cross sell and up sell content. Up Sell products are now enclosed in a div with the class “up_sell_products” Cross Sell products are now enclosed in a div with the class ““cross_sell_products” A class of “related_table” is also set on the iNet generated table containing the products.

7/5/2011 2.4 Add new placeholders for product dimensions. (See Category Templates – Variable List)

7/5/2011 2.4 Add ability to use Eagle Departments with the category groups feature.

7/5/2011 2.4 iNet now includes jquery on every page to allow jquery to be used in custom templates without the need to include it separately.

7/5/2011 2.4 Any hazardous items added to a shopping cart will be tagged with the class “hazardous_line_item” to allow them to be styled differently than other items.

7/5/2011 2.4 Add new placeholders for core charge details.

{STORE_PRODUCT_PRICE_CORE} – Core Price

{STORE_PRODUCT_PRICE_BASE} – Base Item Price (without core charge)

7/6/2011 N/A Added section on Meta Tags

10/6/2011 2.5 iNet will modify the buttons.css file to include 2 styles used to control the appearance of the payment selection buttons in the shopping cart.

The styles will be appended to the end of the existing file. If your site has excluded this file, then you will need to include this code in your style sheet or review the payment/selection & confirmation pages and make any necessary changes.

#checkout_payment_options .button {

height: 50px;

padding-left: 10px;

padding-right: 10px;

align: center;

}

.checkout_payment_option {

display: inline;



float: left;

margin-right: 10px;

}

10/6/2011 2.5 Added CSS selectors for category images:

class=”category_image” has been added to the image for a category when viewing it.

class=”sub_category_image” has been added to images on sub-categories when viewing their parent category.

10/6/2011 2.5 Added the ability to eliminate the HTML table used to display sub-categories. Categories can be contained in an HTML <div> tag instead.

10/6/2011 2.5 Added a new feature called “browse_mode” to determine the method used to navigate the catalog. Please see the iNet user manual and the “REFINE_MODE” variable under the Main Template -> Variables -> Navigation section in this document for more details.

10/6/2011 2.5

Added the ability to display the department list (category_menubox) on all iNet pages including those outside of the “store” module. This can be enabled by the “category_menubox” setting under the Store Administration -> Settings menu in the iNet web interface.

3/14/2012 2.5 The html field search[notes] is no longer used by the iNet search engine as the new iNet search engine no longer requires notes to be searched separately. If you have customized the search form search[searchfor] should be used instead.

5/29/2013 3.0 Added jQuery section

5/29/2013 N/A Added login form section

5/29/2013 N/A Added instructions for customizing the appearance of outgoing e-mail.

5/29/2013 3.0 Added mobile device detection / support

Please review the “mobile site” section in this document and in the iNet User Manual.

5/29/2013 3.0 Add standard pack and order multiple to available variables on product templates.

5/29/2013 3.0 Add section on replacing customer facing icons as they are now kept separately from icons used within the employee UI.

11/3/2014 4.0 Added section on the iNet search form.

11/3/2014 4.0 Add list of template variables, including carousel to custom home page template.



11/3/2014 4.0 Add new variables to main templates: {STORE_NAME}, {STORE_PHONE} and {CART_TOTAL_MESSAGE}

11/3/2014 4.0 Added section on Google Analytics Customization.

11/3/2014 4.0 Added section on generic attributes in product templates.

11/3/2014 4.0 Added section on user defined fields in product templates.

11/27/2015 4.3 Add {STORE_PRODUCT_MAP_MESSAGE} variable for product pages

11/27/2015 4.3 Add note regarding the web designers section within the eagle community forum.

11/27/2015 4.3 Updated details on using FTP to update mobile templates.

11/27/2015 4.3 Removed section on featured product template (store_product_featured.ihtml) This template is now configurable from the web UI.

11/27/2015 4.3 New section on changes between versions 4.0 and 4.3 that may impact custom design.

12/02/2015 4.3 Updated jQuery section to reflect new version.

04/13/2017 4.5 New section on changes between version 4.3 and 4.5 that may impact custom web design.

04/13/2017 4.5 Add {LANGUAGE_SELECTION} template variable to section on navigation

04/13/2017 4.5 Add template variables for user information

04/08/2020 5.0 Rewrote document to include changes for 5.0, including the new responsive design

Documents

Epicor® Eagle® iNet™ eommerce