FAQ customize

Components
  • File locate: theme/src/containers/faq.js
Code Snippets
import React from 'react'
import { themeSettings, text } from '../lib/settings'
import MetaTags from '../components/metaTags'
import HeadBox from '../components/headBox'
import * as helper from '../lib/helper'
import Subscribe from '../components/subscribe'

const data = [
  {
    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit?",
    answer:"Lorem ipsum dolor sit amet, consectetur adipiscing elit?"
  },
  {
    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit?",
    answer:"Lorem ipsum dolor sit amet, consectetur adipiscing elit?"
  },
  {
    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit?",
    answer:"Lorem ipsum dolor sit amet, consectetur adipiscing elit?"
  },
  {
    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit?",
    answer:"Lorem ipsum dolor sit amet, consectetur adipiscing elit?"
  },
  {
    question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit?",
    answer:"Lorem ipsum dolor sit amet, consectetur adipiscing elit?"
  }
]

class FaqContainer extends React.Component {

  state = {
    selectedIndexs:[]
  }

  render() {
    let {pageDetails, settings} = this.props.state

    return (
      <div>
        <MetaTags
          title={pageDetails.meta_title}
          description={pageDetails.meta_description}
          canonicalUrl={pageDetails.url}
          ogTitle={pageDetails.meta_title}
          ogDescription={pageDetails.meta_description}
        />
        <HeadBox title="FAQ" backgroundColor="#9CDDA8"/>
        <div className="faq-wrap">
          {data.map((item,index)=>this.renderItem(item,index))}
        </div>
        <Subscribe />
      </div>
    )
  }

  renderItem = (item,index) => {
    let showing = this.state.selectedIndexs.indexOf(index) > -1
    return (
      <section className="container">
        <div className="faq-item" onClick={()=>this.onClickItem(index)}>
          <img src={showing ? "/assets/images/cestore/ic_collapse.svg" : "/assets/images/cestore/ic_expand.svg"} alt="img"/>
          <div className="faq-item-content">
              <p>{item.question}</p>
              {showing && <p className="faq-item-answer">{item.answer}</p>}
          </div>
        </div>
      </section>
    )
  }

  onClickItem = (index)=>{
    var indexs = this.state.selectedIndexs
    let i = indexs.indexOf(index)
    if (i > -1) {
      indexs.splice(i, 1);
    }else{
      indexs.push(index)
    }
    this.setState({selectedIndexs: indexs})
  }

}

export default FaqContainer
Screenshots

FAQ

Create custom page

  • Create new file custome-page.js in theme/src/containers/custom-page.js
import React from 'react'
import { themeSettings, text } from '../lib/settings'
import MetaTags from '../components/metaTags'
import HeadBox from '../components/headBox'
import * as helper from '../lib/helper'
import Subscribe from '../components/subscribe'

class CustomPageContainer extends React.Component {

  render() {
    let {pageDetails, settings} = this.props.state
    return (
      <div>
        <MetaTags
          title={pageDetails.meta_title}
          description={pageDetails.meta_description}
          canonicalUrl={pageDetails.url}
          ogTitle={pageDetails.meta_title}
          ogDescription={pageDetails.meta_description}
        />
        <HeadBox title="Custom Page" backgroundColor="#9CDDA8"/>
        <div className="content">

        </div>
        <Subscribe />
      </div>
    )
  }
}

export default CustomPageContainer
  • Export CustomPageContainer in theme/src/index.js
export {default as CustomPageContainer} from './containers/custom-page'
  • Create new file custome-page.js in src/store/shared/containers/custom-page.js
import React from 'react'
import {connect} from 'react-redux'
import {withRouter} from 'react-router'
import {mapStateToProps, mapDispatchToProps} from '../containerProps'
import {CustomPageContainer} from 'theme'
import PageWrap from './PageWrap'
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PageWrap(CustomPageContainer)));
  • Import CustomPageContainer in src/store/shared/app.js
import FavoriteContainer from './containers/favorite'
render() {
  const { history, location, currentPage } = this.props;
  const locationPathname =
    location && location.pathname ? location.pathname : '/';

  switch (currentPage.type) {
    case PRODUCT:
      return <ProductContainer />;
    case PRODUCT_CATEGORY:
      return <CategoryContainer />;
    case SEARCH:
      return <SearchContainer />;
    case PAGE:
      if(locationPathname === '/'){
        return <IndexContainer />;
      } else if(locationPathname === '/cart'){
        return <CartContainer />;
      } else if(locationPathname === '/checkout'){
        return <CheckoutContainer />;
      } else if(locationPathname === '/checkout-success'){
        return <CheckoutSuccessContainer />;
      } else if(locationPathname === '/about'){
        return <AboutContainer />;
      } else if(locationPathname === '/faq'){
        return <FaqContainer />;
      } else if(locationPathname === '/contact'){
        return <ContactContainer />;
      } else if(locationPathname === '/favorite'){
        return <FavoriteContainer />;
      } else if(locationPathname === '/custom-page'){
        return <CustomPageContainer />;
      } else {
        return <PageContainer />;
      }
    default:
      return <NotFoundContainer />;
  }
}