import React from 'react' import { graphql, Link } from 'gatsby' import Image from 'gatsby-image' import { ChevronLeft } from 'react-feather' import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import 'react-tabs/style/react-tabs.css'; import PageHeader from '../components/PageHeader' import Layout from '../components/Layout' import ProductForm from '../components/ProductForm' import PostCard from '../components/PostCard' import ProductGalleryThumbnails from '../components/ProductGalleryThumbnails' import './ProductPage.css' const ProductPage = ({ data }) => { const product = data.shopifyProduct console.log(product) //find posts corresponding to current product const productBlogTagMap = { "ecommerce-platform-strategy-plan" : "digital commerce", "conversion-rate-optimization" : "conversion rate optimization", "shopify-help" : "Shopify", "gatsbyjs" : "gatsby", "paid-search-help" : "search" }; const searchTag = productBlogTagMap[product.handle]; console.log("******* searchTag = "+searchTag) console.log("******* product.handle = "+product.handle) const filterdPostEdges = []; const filterdProjectEdges = []; if(searchTag){ //Filtering Posts as per the tag const postEdges = data.allPosts.edges; postEdges.map((edge)=>{ if(edge.node.frontmatter.tags) { edge.node.frontmatter.tags.map((tag)=>{ if(tag && tag.toLowerCase().includes(searchTag.toLowerCase())) { filterdPostEdges.push(edge.node) return; } }); } }); //console.log(filterdPostEdges) //Filtering Projects as per the tag const projectEdges = data.allProjects.edges; projectEdges.map((edge)=>{ if(edge.node.frontmatter.tags) { edge.node.frontmatter.tags.map((tag)=>{ if(tag && tag.toLowerCase().includes(searchTag.toLowerCase())) { filterdProjectEdges.push(edge.node) return; } }); } }); console.log(filterdProjectEdges) } const thisEdge = data.allServices.edges.find(edge => edge.node.id === product.id); const solutionEdge = data.allSolutions.edges.find(edge => edge.node.fileAbsolutePath.indexOf(product.handle)>=0) let solutionMetaTitle = ""; let solutionMetaDescription = ""; let solutionContent = null; if(solutionEdge){ solutionMetaTitle = solutionEdge.node.frontmatter.meta_title; solutionMetaDescription = solutionEdge.node.frontmatter.meta_description; solutionContent = solutionEdge.node.html; } //console.log("**** solutionEdge = ",solutionEdge) return ( <Layout title={product.title || false} description={solutionMetaDescription || product.description || false} meta={{title: solutionMetaTitle}}> <article className="SingleService section light" itemScope itemType="http://schema.org/BlogPosting" > <div className="container skinny"> <Link className="SingleService--BackButton" to="/solutions/"> <ChevronLeft /> BACK </Link> <div className="SingleService--Content relative"> <ProductGalleryThumbnails productimages={product.images} /> {product.title && ( <h1 className="SingleService--Title" itemProp="title"> {product.title} </h1> )} <div className="SingleService--InnerContent"> <ProductForm product={product} /> <Tabs> <TabList> <Tab>Description</Tab> {solutionContent && <Tab>Guide</Tab> } <Tab>Blog Posts</Tab> <Tab>Projects</Tab> </TabList> <TabPanel> <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} /> </TabPanel> {solutionContent && <TabPanel> <div dangerouslySetInnerHTML={{__html:solutionContent}} /> </TabPanel> } <TabPanel> {!!filterdPostEdges.length && ( <div className="ProductPostSection--Grid" style={{gridGap: "1rem"}}> {filterdPostEdges.map((post, index) => ( <PostCard key={index} featuredImage={`../${post.frontmatter.featuredImage}`} localImage={post.frontmatter.localImage} title={post.frontmatter.title} excerpt={post.excerpt} date={post.frontmatter.date} slug={post.fields.slug} /> ))} </div> )} </TabPanel> <TabPanel> {!!filterdProjectEdges.length && ( <div className="ProductPostSection--Grid" style={{gridGap: "1rem"}}> {filterdProjectEdges.map((post, index) => ( <PostCard key={index} featuredImage={`../${post.frontmatter.featuredImage}`} localImage={post.frontmatter.localImage} title={post.frontmatter.title} excerpt={post.frontmatter.excerpt} date={post.frontmatter.date} slug={post.fields.slug} /> ))} </div> )} </TabPanel> </Tabs> </div> <div className="SingleService--Pagination"> {thisEdge && thisEdge.previous && thisEdge.previous.handle && ( <Link className="SingleService--Pagination--Link prev" to={`/solution/${thisEdge.previous.handle}`} > Previous Service </Link> )} {thisEdge && thisEdge.next && thisEdge.next.handle && ( <Link className="SingleService--Pagination--Link next" to={`/solution/${thisEdge.next.handle}`} > Next Service </Link> )} </div> </div> </div> </article> </Layout > ) } export default ProductPage export const pageQuery = graphql` query($handle: String!) { shopifyProduct(handle: { eq: $handle }) { id title handle productType description descriptionHtml shopifyId options { id name values } variants { id title price availableForSale compareAtPrice shopifyId selectedOptions { name value } } priceRange { minVariantPrice { amount currencyCode } maxVariantPrice { amount currencyCode } } images { originalSrc id localFile { childImageSharp { fluid(maxWidth: 910) { ...GatsbyImageSharpFluid_withWebp_tracedSVG } } } } } allPosts: allMarkdownRemark( filter: { fields: { contentType: { eq: "posts" } } } sort: { order: DESC, fields: [frontmatter___date] } ) { edges { node { excerpt fields { slug } frontmatter { title date(formatString: "dddd MMMM DD, YYYY") categories { category } featuredImage localImage { childImageSharp { fluid (srcSetBreakpoints: [200, 400]) { ...GatsbyImageSharpFluid } } } tags } } } } allSolutions: allMarkdownRemark(filter: {fields: {contentType: {eq: "solutions"}}}) { edges { node { fileAbsolutePath html frontmatter { meta_title meta_description } } } } allProjects: allMarkdownRemark(filter: {fields: {contentType: {eq: "projects"}}}, sort: {order: DESC, fields: [frontmatter___date]}) { edges { node { fields { slug } frontmatter { title excerpt: client date(formatString: "MMMM YYYY") categories { category } featuredImage tags } } } } allServices: allShopifyProduct(sort: {fields: publishedAt, order: DESC}) { edges { node { id } next { title handle } previous { title handle } } } } `