polish pdp

Author: anru

gulpfile.js

@@ -2,6 +2,7 @@
 const fs = require('fs-extra');
 const path = require('path');
 const gulp = require('gulp');
+const addsrc = require('gulp-add-src');
 const postcss = require('gulp-postcss');
 const sourcemaps = require('gulp-sourcemaps');
 const concat = require('gulp-concat');
@@ -15,8 +16,7 @@ function saveTokens(cssFile, exportTokens) {
 }
 
 const src = [
-  'src/**/*.css',
-  'node_modules/react-image-gallery/styles/css/image-gallery.css',
+  'src/components/**/*.css',
 ];
 
 gulp.task('css', function () {
@@ -29,6 +29,10 @@ gulp.task('css', function () {
         processTokens: saveTokens,
       })
     ]) )
+    .pipe(addsrc.prepend([
+      'src/css/reset.css',
+      'node_modules/react-image-gallery/styles/css/image-gallery.css'
+    ]))
     .pipe( concat('bundle.css') )
     .pipe( gulp.dest('lib/') );
 });

package.json

@@ -53,6 +53,7 @@
     "flow-bin": "^0.46.0",
     "fs-extra": "^3.0.1",
     "gulp": "^3.9.1",
+    "gulp-add-src": "^0.2.0",
     "gulp-concat": "^2.6.1",
     "gulp-postcss": "^7.0.0",
     "gulp-sourcemaps": "^2.6.0",

src/components/pdp/pdp.jsx

@@ -50,6 +50,7 @@ type State = {
 
 export default class Pdp extends Component<DefaultProps, Props, State> {
   _productVariants: ProductVariants;
+  _productViewTracked: boolean = false;
 
   state: State = {
     currentSku: null,
@@ -60,6 +61,14 @@ export default class Pdp extends Component<DefaultProps, Props, State> {
     t: _.identity,
   };
 
+  componentDidMount() {
+    this.trackProductView();
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    this.trackProductView(nextProps);
+  }
+
   get isArchived(): boolean {
     return !!_.get(this.props, ['product', 'archivedAt']);
   }
@@ -68,13 +77,33 @@ export default class Pdp extends Component<DefaultProps, Props, State> {
     return this.state.currentSku || this.sortedSkus[0];
   }
 
-  get sortedSkus(): Array<Sku> {
+  getSortedSkus(props: Props = this.props): Array<Sku> {
     return _.sortBy(
-      _.get(this.props, 'product.skus', []),
+      _.get(props, 'product.skus', []),
       'attributes.salePrice.v.value'
     );
   }
 
+  get sortedSkus(): Array<Sku> {
+    return this.getSortedSkus();
+  }
+
+  trackProductView(props: Props = this.props) {
+    if (this._productViewTracked) return;
+
+    const {
+      isLoading,
+      notFound,
+      fetchError,
+      product
+    } = props;
+
+    if (!isLoading && !notFound && !fetchError && product) {
+      tracking.viewDetails(this.getProductView(props));
+      this._productViewTracked = true;
+    }
+  }
+
   @autobind
   setCurrentSku(currentSku: Sku) {
     this.setState({ currentSku });
@@ -87,12 +116,12 @@ export default class Pdp extends Component<DefaultProps, Props, State> {
     this.setState(assoc(this.state, namePath, stateValue));
   }
 
-  get productView(): TProductView {
-    const attributes = _.get(this.props.product, 'attributes', {});
+  getProductView(props: Props = this.props): TProductView {
+    const attributes = _.get(props.product, 'attributes', {});
     const price = _.get(this.currentSku, 'attributes.salePrice.v', {});
     let images = _.get(this.currentSku, ['albums', '0', 'images'], []);
     if (_.isEmpty(images)) {
-      images = _.get(this.props.product, ['albums', '0', 'images'], []);
+      images = _.get(props.product, ['albums', '0', 'images'], []);
     }
     const imageUrls = images.map(image => image.src);
 
@@ -102,10 +131,14 @@ export default class Pdp extends Component<DefaultProps, Props, State> {
       images: imageUrls,
       currency: _.get(price, 'currency', 'USD'),
       price: _.get(price, 'value', 0),
-      skus: this.sortedSkus,
+      skus: this.getSortedSkus(props),
     };
   }
 
+  get productView(): TProductView {
+    return this.getProductView();
+  }
+
   get productShortDescription(): ?Element<any> {
     const shortDescription = _.get(this.props.product, 'attributes.shortDescription.v');
 

src/components/related-products-list/related-products-list.jsx

@@ -11,9 +11,12 @@ import styles from './related-products-list.css';
 import WaitAnimation from 'components/core/wait-animation/wait-animation';
 import ListItem from './related-list-item';
 
+// types
+import type { Product } from '@foxcomm/api-js/types/api/views/product';
+
 type Props = {
-  list: ?Array<Object>,
-  productsOrder: ?Array<number>,
+  list: ?Array<Product>,
+  productsOrder?: Array<number>,
   isLoading: ?boolean,
   title: string,
 };
@@ -34,30 +37,25 @@ class RelatedProductsList extends Component {
     title: 'You Might Also Like',
   };
 
-  renderProducts() {
+  renderProducts(): ?Array<Element<ListItem>> {
     const { list, productsOrder } = this.props;
 
-    if (_.isEmpty(list)) return null;
-
-    let sortedProductsList = [];
-    _.forEach(productsOrder, function(productId) {
-      sortedProductsList = _.concat(sortedProductsList, _.find(list, { productId }));
-    });
+    if (list == null || list.length == 0) return null;
 
-    const avoidKeyCollision = 9999;
+    let sortedProductsList: Array<Product> = list;
 
+    if (productsOrder) {
+      sortedProductsList = _.map(productsOrder, productId => _.find(list, {productId}));
+    }
     const { startingId } = this.state;
-    const endingId = Math.min(sortedProductsList.length, startingId + 6);
-
-    const toDisplay = _.slice(sortedProductsList, startingId, endingId);
+    const toDisplay = sortedProductsList.slice(startingId, startingId + 6);
 
     return _.map(toDisplay, (item, index) => {
       return (
         <ListItem
           {...item}
           index={index}
-          key={`product-${_.get(item, 'id', _.random(avoidKeyCollision))}`}
-          ref={`product-${_.get(item, 'id', _.random(avoidKeyCollision))}`}
+          key={`product-${_.get(item, 'id', index)}`}
         />
       );
     });

src/index.js

@@ -32,3 +32,4 @@ export WrapToLines from './components/core/wrap-to-lines/wrap-to-lines';
 export Pdp from './components/pdp/pdp';
 export ProductImage from './components/product-image/product-image';
 export ImagePlaceholder from './components/product-image/image-placeholder';
+export RelatedProductList from './components/related-products-list/related-products-list';

src/lib/analytics-init-example.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="text/javascript">
+      function initGA(gaId, enableLocal) {
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+        var gaOpts = enableLocal ? { cookieDomain: 'none' } : 'auto';
+        ga('create', gaId, gaOpts);
+        ga('send', 'pageview');
+      }
+      var enableAnalyticsWhileLocalDevelopment = false;
+      initGA('GA-XXXXXXXX-X', enableAnalyticsWhileLocalDevelopment);
+    </script>
+  </head>
+  <body>
+  </body>
+</html>

src/lib/analytics.js

@@ -2,6 +2,12 @@
 import _ from 'lodash';
 import { isGiftCard } from 'paragons/sku';
 
+function ga(...args) {
+  if (typeof window != 'undefined' && window.ga) {
+    window.ga(...args);
+  }
+}
+
 export function trackPageView(page, fieldsObject) {
   ga('send', 'pageview', page, fieldsObject);
 }

src/opt/css-modules-export.js

@@ -26,7 +26,7 @@ module.exports = postcss.plugin(PLUGIN_NAME, (opts = {}) => {
     const loader = getLoader(opts, plugins);
     const parser = new Parser(loader.fetch.bind(loader));
 
-    return postcss([...plugins, parser.plugin])
+    return postcss([parser.plugin])
       .process(css, { from: inputFile })
       .then(() => {
         const out = loader.finalSource;