Quick view app (secomapp)

📘
Components:

components/Cards/Product/view.tsx

Open components/Cards/Product/view.tsx and import withProps to your component:

import { withProps } from 'recompose'

Create productHandle and add it to the ProductCardView:

const enhancer = withProps(({item}) => ({
  productHandle: item.get('product_url').split('/')
}));

const ProductCardView: React.SFC<IProductCardProps> = ({
  item,
  config,
  theme,
  productHandle
}: any) => (

Then add this HTML code to the ProductCardView:

<div className='findify-quickview-wrapper sca-qv-button-wrap'>
  <a 
    className="sca-qv-button sca-qv-handle  sca-qv-button-plus" 
    href="#sca-qv-showqv" 
    data-index="0" 
    data-handle={productHandle[productHandle.length-1]}
  >
    <span>QUICK VIEW</span>
	</a>
</div>

The final ProductCardView component will look like this:

/**
 * @module components/Cards/Product
 */

import React from 'react'
import classNames from 'classnames'
import Image from 'components/common/Image'
import Truncate from 'components/common/Truncate'
import Text from 'components/Text'
import Rating from 'components/Cards/Product/Rating';
import Price from 'components/Cards/Product/Price';
import template from 'helpers/template';
import { DiscountSticker, OutOfStockSticker  } from 'components/Cards/Product/Stickers';
import { List } from 'immutable'
import { IProduct, MJSConfiguration, ThemedSFCProps } from 'types/index';
import BundleAction from 'components/Cards/Product/BundleAction';
import { withProps } from 'recompose'

const Title: any = ({ text, theme, ...rest }) => (
  <Text display-if={!!text} className={theme.title} {...rest}>{text}</Text>
);

const Description: any = ({ text, theme, ...rest }) => (
  <p
    display-if={!!text}
    className={theme.description}
    {...rest}
  >
    <Truncate>{text}</Truncate>
  </p>
);

const enhancer = withProps(({item}) => ({
  productHandle: item.get('product_url').split('/')
}));


export interface IProductCardProps extends ThemedSFCProps {
  item: IProduct;
  config: MJSConfiguration;
}

const ProductCardView: React.SFC<IProductCardProps> = ({
  item,
  config,
  theme,
  productHandle
}: any) => (
  <div
    className={classNames(
      theme.root,
      config.get('simple') && theme.simple,
      theme.productCard,
    )}
  >
    <div className={classNames(theme.imageWrap)}>
      <BundleAction display-if={config.get('bundle')} item={item} />
      <a href={item.get('product_url')} onClick={item.onClick}>
        <Image
          className={classNames(theme.image)}
          aspectRatio={false}
          thumbnail={item.get('thumbnail_url')}
          src={item.get('image_url') || item.get('thumbnail_url')}
          alt={item.get('title')}
        />
      </a>
      <div className='findify-quickview-wrapper sca-qv-button-wrap'>
        <a 
          className="sca-qv-button sca-qv-handle  sca-qv-button-plus" 
          href="#sca-qv-showqv" 
          data-index="0" 
          data-handle={productHandle[productHandle.length-1]}
        >
            <span>QUICK VIEW</span>
        </a>
      </div>
    </div>
    <div className={theme.content}>
      <a href={item.get('product_url')} onClick={item.onClick}>
        <Title
          theme={theme}
          display-if={config.getIn(['product', 'title', 'display'])}
          text={item.get('title')}
          config={config.getIn(['product', 'title'])} 
        />
        <Description
          theme={theme}
          display-if={config.getIn(['product', 'description', 'display'])}
          text={item.get('description')}
          config={config.getIn(['product', 'description'])} />
        <Price
          className={theme.priceWrapper}
          display-if={config.getIn(['product', 'price', 'display'])}
          price={item.get('price')}
          oldPrice={item.get('compare_at')}
          discount={item.get('discount')}
          currency={config.get('currency_config').toJS()} />
        <OutOfStockSticker
          display-if={item.getIn(['stickers', 'out-of-stock'])}
          config={config} />
      </a>
    </div>
  </div>
)

export default enhancer(ProductCardView);

📘Components:

📘
Components: