Tutorial Documentation

Component Description

• At a high level, my component's make function takes in an object as input and builds a sortable product collection,integrated with an image slideshow functionality for each product in the collection, based on the input object's values
• The makeSortableCollection has a pubic function, setImgDimensions to set image dimensions maybe based on your type of product.(This could be done via css but we need a public function and it specifies image tweaking to a specific collection
• Our makeSortableCollection function's parameter object(paramObject) take in the following properties (paramObjects's (Key: Data Type) Syntax
  1.   productCollection: Array of Objects Array of Object's (Key: Data Type) Syntax Comment: (from JSON File, Database, hard-coded, etc ) [ { productId: Integer, productName: String, brand: String stock: Integer, wholesalePrice: Integer retailPrice: Integer Rating: Decimal or Double images: Object Object's (Key: Data Type) Syntax { color1: String, Comment: (color1's URL), color2: String, Comment: (color2's URL), .... } }, ... ]
  2.   title: String
  3.   sortPhrase: String
  4.   locale: String
  5.   currrency: String
  6.   NumColums: Integer Comment: (This is used to calculate the appropriate width for all products in collection, based on given margin)
  7.   HrzMarginSum: Integer Comment: (This is used to calculate the appropriate width for all products in collection, based on num of rows)
  8.   sortPropertyAliases:: Object Object's (Key: Data Type) Syntax Comment: (Passes in sort options and specifies the UI representation for that and the sort order (ascending or descending)) { propertyName1 : Array of Strings Array Syntax["Desired Name","Ascending or Descending"] Comment: (propertyName1 has to be an existing productCollection's existing array of Object's key) propertyName2: Array of Strings Array Syntax["Desired Name","Ascending or Descending"] Comment: (propertyName2 has to be an existing productCollection's existing array of Object's key) ..... }
  9.   newProductPropColl:: Array of Objects Array of Object's (Key: Data Type) Syntax Comment: (Defining a function and its parameters. The return value will be added to the productCollection's existing array of Object's keys) [ { prodPropName: String, funcParameters: Array of Strings Comment: (String Array consists of some number of productCollection's existing array of Object's keys) prodFunction: function(paramsArray) Comment: (paramsArray is the array of strings in funcParameters: , listed right above. Also,Function must return a text or a number }, ... ]

Demo

Click here to open the first demo which entails:-

• 4 columns for each collection
• Money formated by U.S. Currency, dollars
• Additional Properties(profitMargin and maxProfit) added. profitMargin added to sort list as well
• Image dimensions tweaked for first Collection

Click here to open the second demo which entails:-

• 3 columns for first collection and 5 for second
• Money formated by British Currency, pounds
• No additional product properties
• No image dimensions tweaked
• Stock(Quantity) Sorted from high to low

Zip File

• Click here to download tutorial zip file

Code Snippets

• Click here to view the snippet code that helped me change, number of reviews and rating into graphical star representation.Cloudflare CDN is needed.So basically, the function takes a rating between 0 and 5 inclusive as a double, and the number of reviews as an integer. The rating is converted to an integer. Then the function creates the returning div, ,creates a span tag, appends some text to the span, transforms the ratings to stars using a for-loop to five(color changing effect id added to a created starusing the Cloudflare CDN, for first(number of ratings inputed, converted to an integer). Then the stars are appended to the span The number of reviews in brackets, appended to the span, then the span to the returning div.

• Click here to view the snippet code that helped me transform average image object with (colors as keys and image URL as values) into graphical representation. The returning div is created, an image tag is created and its source is set to the first image value in the image object, then appended to the returning div. Circles are created as a span tag, according to the number of images in the object, and the image object keys extracted to color the circles.A new property(URL) is added to each circle(span). An onclick listener is set for each circle, to change the image URL to the span's image property, ands some css is added on to visually differentiate the circle clicked.The colored circles are appended to a new div, then appended to the returning div

• Click here to view the snippet code that helped me sort a list of objects depending on the given sort property and sort order. Here, an array of objects, sort property(number of string), and sort order("ascending" or "descending"). Javascript's sort algorithm is different for strings and numbers.The sort property is what is compared in the sort function. The return value of Javascript's sort function determine the order of the sort. So we test for the date type of array values and return the appropriate values. Now depending on the sort other, switching the sign of the return value, switches the sort order within the array, so it is switched if the sort order is not ascending. There function then returns the sorted array of objects

Inspiration/Troubleshooting

• Earlier when I was thinking about what component to build. I thought of "Fashionnova's" product collections. Fashionnova is an e-commerce fashion store
• Click here to open a link that exhibits the best of best's sortable product collection. Credit to Fashionnova
• Some star overflow links that helped me
  • Click here for link that helped me learn cosole.log gets updated to the latest object, if your logging the same tweaked object, for optimization, and led me to use console.table instead
  • Click here for link that helped me select elements based on the CSS selectors, under a particular DOM Element
  • Click here for link that helped me realize I can't edit change css via javascript for an element which hasn't been created. It wasn't so direct