Display Item Options of matrix items on webstore

Step-by-step guide

1.         

   Simple Solution

   • Create a Folder in the File Cabinet, following naming conventions.

     1. Upload images for item options icons (e.g. S,M,L etc.)

     2. For best practice, upload the images on a folder under the Website Hosting Files > Live Hosting Files

     3. Adding the images there, also following naming conventions.

     4. For naming convention, can use the ID from the item options

   • Customizing the Item Drilldown Template to pull images out of naming conventions.

     1. Edit the theme (Setup > Site Builder > Setup Web Site > Appearance tab > Default Item Drilldown Template)

     2. You may edit the Item Drilldown Template by going to Setup > Site Builder > Item/Category Template

   • Enhance the page with JQuery events for clicks and changes.

     1. Start with JQuery script

     2. On the script, add values on the options, put up the images; add event on the click on of images

     3. Create the script separately and put that on the template (together with the HTML)

         

2. Complex solution

   • Turn all lists into Custom Record types. Creating a field for “image thumbnail” in it, along with the value.

   • Creating all values in the list, adding the images.

   • Customizing the Item drill down Template. Utilizing a SuiteScript to pull the images.

   • And enhance the page with JQuery events for clicks and changes.

Related articles