components#SEO JavaScript Examples

SingleItem = ({ data, pageContext }) => {
  const { name, date, url, category, tags, amazonlink, sociallink, about, country, state, city, like } = data.googleSheetListRow

  return (
    <Layout>
      <SEO
        title={name}
        description={about || ' '}
        pathname={url}
      />
      <Header title={name} date={date} />
      <Container>
        <br/ >URL = <Content input={url} />
        <br/ >Category = <Content input={category} />
        <br/ >Tags = <Content input={tags} />
        <br/ >AmazonLink = <Content input={amazonlink} />
        <br/ >SocialLink = <Content input={sociallink} />
        <br/ >Country = <Content input={country} />
        <br/ >City = <Content input={city} />
        <br/ >State = <Content input={state} />
        <br/ >Like = <Content input={like} />
      </Container>
    </Layout>
  );
}

IndexPage = () => {
  const { collections } = React.useContext(ProductContext);

  return (
    <Layout>
      <SEO description="The MadHatter store homepage" title="Homepage" />
      <HomepageCollectionsGrid
        collections={
          collections.filter(
            collection => collection.title !== 'Featured Hats'
          ) || []
        }
      />
      {!!collections.find(
        collection => collection.title === 'Featured Hats'
      ) && <FeaturedProducts />}
    </Layout>
  );
}

Layout = ({ children, title, description }) => (
  <Blockstack>
    <ThemeProvider theme={theme}>
      <CartContextProvider>
        <Fragment>
          <Global
            styles={css`
          *,
          *:before,
          *:after {
            box-sizing: inherit;
          }
          html {
            text-rendering: optimizeLegibility;
            overflow-x: hidden;
            box-sizing: border-box;
            -ms-overflow-style: scrollbar;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
          }
          html,
          body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
          }

          body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
          }
          a {
            color: ${theme.colors.link};
            transition: color 0.5s;
            text-decoration: none;
          }
          a:hover {
            text-decoration: none;
            color: ${theme.colors.linkHover};
          }
          h1 {
            font-family: ${theme.fontFamily.heading};
          }

          ${headroom}
        `}
          />
          <SEO title={title} description={description} />
          <NavBar />
          {children}
          <Footer />
        </Fragment>
      </CartContextProvider>
    </ThemeProvider>
  </Blockstack>
)

Tags = ({ pageContext, data }) => {
  const { tags } = pageContext;
  const { edges } = data.allMysqlMainView;

  const [countFilter, setCountFilter] = React.useState()

  const title = "All Tags Page";

  const lowerList = _.mapValues(tags, _.method('toLowerCase'));
  const trimedList = _.mapValues(lowerList, _.method('trim'))
  const uniqueList = _.uniq(Object.values(trimedList))
  const orderdList = _.orderBy(uniqueList)
  //remove blank tags
  const filteredList = _.filter(orderdList, (tag) => (tag != null && tag.trim().length > 0))

  const getPostsByTag = (tag) => {
    //filter from trimmed and lowercase
    const filteredPosts = _.filter(edges, ({ node }) => node.tags && node.tags.toLowerCase().indexOf(tag) >= 0)
    return filteredPosts
  }

  //creating map of tags and its posts counts
  let tagList = [];
  const countList = [];
  filteredList.map((tag) => {
    const count = getPostsByTag(tag.trim()).length;
    const newItem = {
      tag: tag,
      count: count
    }
    tagList.push(newItem)
    countList.push(count)
  });

  const finalCountList = _.orderBy(_.uniq(countList))

  const handleChange = (event) => {
    let selectedOption = event.target.value;
    setCountFilter(selectedOption)
    //console.log(`Option selected:`, selectedOption);
  }

  //if countFilter is set then filter finaltag list
  if (countFilter && countFilter.length > 0) {
    tagList = _.filter(tagList, (item) => item.count == countFilter)
  }

  return (
    <Layout>
      <SEO
        title={`${title} | ${config.title}`}
      />
      <Header title={title}>All Tags</Header>
      <Container>
        <div style={{ display: "flex", verticalAlign: "middle" }}>
          Filter based on count : {` `}
          <select style={{ padding: "0.5rem" }} onChange={event => handleChange(event)}>
            <option value=""></option>
            {finalCountList.map((count) =>
              <option key={count}>{count}</option>
            )}
          </select>
        </div>
        <TagsContainer>
          {tagList && tagList.map((item, index) => {
            //const upperTag = tag.charAt(0).toUpperCase() + tag.slice(1);
            return (
              <Link key={index} to={`/tags/${_.kebabCase(item.tag.trim())}`}>
                <span>{item.tag} - </span><span className="count">{item.count}</span>
              </Link>
            );
          })}
        </TagsContainer>
      </Container>
    </Layout>
  );
}

Post = ({ data, pageContext }) => {
  const { next, prev } = pageContext;
  const {html, frontmatter, excerpt } = data.markdownRemark
  const {date, title, tags, path, description} = frontmatter
  const image = frontmatter.cover.childImageSharp.fluid;

  return (
    <Layout>
      <SEO
        title={title}
        description={description || excerpt || ' '}
        banner={image}
        pathname={path}
        article
      />
      <Header title={title} date={date} cover={image} />
      <Container>
        <Content input={html} />
        <TagsBlock list={tags || []} />
      </Container>
      <SuggestionBar>
        <PostSuggestion>
          {prev && (
            <Link to={prev.frontmatter.path}>
              Previous
              <h3>{prev.frontmatter.title}</h3>
            </Link>
          )}
        </PostSuggestion>
        <PostSuggestion>
          {next && (
            <Link to={next.frontmatter.path}>
              Next
              <h3>{next.frontmatter.title}</h3>
            </Link>
          )}
        </PostSuggestion>
      </SuggestionBar>
    </Layout>
  );
}

Tag = ({ data, pageContext }) => {
  const { posts, tagName } = pageContext;
  const upperTag = tagName.charAt(0).toUpperCase() + tagName.slice(1);
  const title = "Tag: " + tagName;
  const description = `Discover the most popular direct to consumer ${tagName} stores on emprezzo.`
  const listEdges = [];
  const maxItems = 15;
  const [limit, setLimit] = React.useState(maxItems);
  const [showMore, setShowMore] = React.useState(true);

  const increaseLimit = () => {
      setLimit(limit + maxItems);
  }

  //Now sorting (desc) based on FollowerRate
  var sortedEdges = _.sortBy(posts, obj => -obj.FollowerRate)

  //filtering as per limit
  sortedEdges.map((node) => {
    if (listEdges.length < limit) {
      listEdges.push(node);
    }
  })

  const rowDataViewEdges = data.allMysqlDataView.edges;
  const rowPages = data.allMysqlPages.edges;
  const filteredPage = _.filter(rowPages, ({node}) => _.kebabCase(node.topic).trim()==tagName.trim())
  const TagDescription = filteredPage && filteredPage.length>0?filteredPage[0].node.topicDescription : "";

  return (
    <Layout>
      <SEO
        title={`${title} | ${config.title}`}
        description={description}
      />
      <Header title={upperTag}>
        {description}
      </Header>
        <TagWrapper>
          <h3>{TagDescription}</h3>
          {listEdges.map((node) => (
            <PostList
              key={node.UserName}
              title={node.name}
              excerpt={node.about}
              path={`/shops/${node.UserName}/`}
              mysqldataview={rowDataViewEdges}
              instagramname={node.UserName}
            />
          ))}
        </TagWrapper>
        {showMore && listEdges.length > 0 && listEdges.length < posts.length &&
          <div className="center">
              <button className="button" onClick={increaseLimit}>
                  Load More
              </button>
          </div>
        }
    </Layout>
  );
}

NotFoundPage = () => (
  <Layout>
    <SEO title="404: Not found" />
    <h1>NOT FOUND</h1>
    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
  </Layout>
)

export default function CartPage() {
  return (
    <Layout>
      <SEO description="The MadHatter cart" title="Cart" />
      <CartContents />
    </Layout>
  );
}

IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Hi people</h1>
    <p>Welcome to the Gatsby &amp; Shopify starter.</p>
  </Layout>
)

SingleItem = ({ data, pageContext }) => {
  const { next, prev } = pageContext;

  //Extracting Posts from MySQL Data
  const maxPosts = 3;
  const listPostEdges = [];
  const rowDataViewEdges = data.allMysqlDataView.edges;
  //filtering top 3 for current instagram id
  rowDataViewEdges.map((edge) => {
    if (listPostEdges.length < maxPosts) {
      listPostEdges.push(edge);
    }
  })
  const firstRowDataView = listPostEdges && listPostEdges.length ? listPostEdges[0] : null;

  //Now filtering instagram posts if the image or caption is not present
  const listInstaPostEdges = [];
  listPostEdges.map((edge) => {
    if (edge.node.PhotoLink && edge.node.Caption) {
      listInstaPostEdges.push(edge);
    }
  })

  //Extracting Products from MySQL Data
  const maxProducts = 5;
  const listProductEdges = [];
  const rowShopifyViewEdges = data.allMysqlShopifyView.edges;
  //filtering top 3 for current instagram id
  rowShopifyViewEdges.map((edge) => {
    if (listProductEdges.length < maxProducts) {
      listProductEdges.push(edge);
    }
  })

  const subtitle = ((firstRowDataView && firstRowDataView.node.AlexaCountry) || "")
  const about = ((firstRowDataView && firstRowDataView.node.Biography) || "")
  const name = ((firstRowDataView && firstRowDataView.node.FullName) || "")
  const url = ((firstRowDataView && firstRowDataView.node.AlexaURL) || "")
  const image = (firstRowDataView && firstRowDataView.node.ProfilePicURL);

  //Creating Social IDs Data to pass to header for displaying
  let socialDetails = {
    "InstagramLink": (firstRowDataView && firstRowDataView.node.Instagram) ? "https://www.instagram.com/" + (firstRowDataView && firstRowDataView.node.Instagram) : null,
    "FacebookLink": (firstRowDataView && firstRowDataView.node.Facebook) ? "https://www.facebook.com/" + (firstRowDataView && firstRowDataView.node.Facebook) : null,
    "PinterestLink": (firstRowDataView && firstRowDataView.node.Pinterest) ? "https://www.pinterest.com/" + (firstRowDataView && firstRowDataView.node.Pinterest) : null,
    "TikTokLink": (firstRowDataView && firstRowDataView.node.TikTok) ? "https://www.tiktok.com/" + (firstRowDataView && firstRowDataView.node.TikTok) : null,
    "TwitterLink": (firstRowDataView && firstRowDataView.node.Twitter) ? "https://www.twitter.com/" + (firstRowDataView && firstRowDataView.node.Twitter) : null,
    "YouTubeLink": (firstRowDataView && firstRowDataView.node.YouTube) ? "https://www.youtube.com/c/" + (firstRowDataView && firstRowDataView.node.YouTube) : null
  }

  const defaultImageOnError = (e) => { e.target.src = "https://source.unsplash.com/100x100/?abstract," + (Math.random() * 1000) }

  const renderProfilePicURL = (node, name) => {
    if (node.mysqlImages && node.mysqlImages.length > 0) {
      return (
        <Image fluid={node.mysqlImages[0].childImageSharp.fluid} style={{ width: '100px', height: '100px' }} title={name} alt={name} />
      );
    } else if (node.ProfilePicURL) {
      return (
        <img src={node.ProfilePicURL} className="profileimage" onError={defaultImageOnError} style={{ width: '100px', height: '100px' }} title={name} alt={name} />
      );
    } else {
      return (
        <img src={"https://source.unsplash.com/100x100/?abstract," + (Math.random() * 1000)} className="profileimage" style={{ width: '100px', height: '100px' }} title={name} alt={name} />
      );
    }
  }

  return (
    <Layout>
      <SEO
        title={name}
        description={about || ' '}
        banner={image}
        pathname={url}
      />
      <Header title={name} children={subtitle} socialDetails={socialDetails} />
      <Container>
        <div className="profileimage" style={{ display: "flex" }}>
          {firstRowDataView && renderProfilePicURL(firstRowDataView.node, name)}
          <div style={{ paddingLeft: "15px" }}>
            <Statistics>
              {firstRowDataView && (firstRowDataView.node.activity || firstRowDataView.node.FollowerRate || firstRowDataView.node.PostRate) &&
                <StatisticItem><a target="_blank" href={firstRowDataView && firstRowDataView.node.ShortCodeURL}><StatisticIcon src="/instagram_icon.png" alt={instagramname} width="15px" height="15px" max-width="25px" /></a></StatisticItem>
              }
              {firstRowDataView && firstRowDataView.node.activity &&
                <StatisticItem>{firstRowDataView.node.activity} <br /><span className="stat_title" title="Instagram Activity Score">ACTIVITY</span></StatisticItem>
              }
              {firstRowDataView && firstRowDataView.node.FollowerRate &&
                <StatisticItem>{firstRowDataView.node.FollowerRate} <br /><span className="stat_title" title="*Instagram Follower Rate">FFR</span></StatisticItem>
              }
              {firstRowDataView && firstRowDataView.node.PostRate &&
                <StatisticItem>{firstRowDataView.node.PostRate} <br /><span className="stat_title" title="Instagram Post Rate">PFR</span></StatisticItem>
              }
            </Statistics>


            <Statistics>
              {firstRowDataView && (firstRowDataView.node.GlobalRank || firstRowDataView.node.LocalRank || firstRowDataView.node.TOS) &&
                <StatisticItem><StatisticIcon width="15px" height="15px" max-width="25px" /></StatisticItem>
              }
              {firstRowDataView && firstRowDataView.node.GlobalRank &&
                <StatisticItem>{firstRowDataView.node.GlobalRank} <br /><span className="stat_title" title="Social Score">GLOBAL RANK</span></StatisticItem>
              }
              {firstRowDataView && firstRowDataView.node.LocalRank &&
                <StatisticItem>{firstRowDataView.node.LocalRank} <br /><span className="stat_title" title="">LOCAL RANK</span></StatisticItem>
              }
              {firstRowDataView && firstRowDataView.node.TOS &&
                <StatisticItem>{firstRowDataView.node.TOS} <br /><span className="stat_title" title="Time on Site">TIME ON SITE</span></StatisticItem>
              }
            </Statistics>


          </div>
        </div>
        <Content input={about} /><br />
        {/* List of Products from MySQL View */}
        {listProductEdges && listProductEdges.length > 0 && <h3>shop {name}</h3>}
        <ViewContainer>
          {listProductEdges.map(({ node }) => {
            return (
              <ViewCard key={node.ProductURL} itemWidth="18%">
                <a href={node.ProductURL} target="_blank">
                  <ViewImage>
                    <img src={node.ImageURL} style={{ height: "100px" }} />
                  </ViewImage>
                </a>
                <small>${node.Price}</small>
                <ViewInfo className="info">
                  <a href={node.ProductURL} target="_blank">
                    {node.Title && node.Title.substring(0, 50)}
                  </a>
                </ViewInfo>
              </ViewCard>
            );
          })}

          <br />
          {/* List of Posts from MySQL View */}
          {listInstaPostEdges && listInstaPostEdges.length > 0 && <h3>instagram posts</h3>}
          <ViewContainer>
            {listInstaPostEdges.map(({ node }) => {
              return (
                <ViewCard key={node.PhotoLink} itemWidth="30%">
                  <a href={node.ShortCodeURL} target="_blank">
                    <ViewImage>
                      <img src={node.PhotoLink} />
                    </ViewImage>
                  </a>
                  <ViewInfo className="info">
                    {node.Caption && node.Caption.substring(0, 140) + "..."}
                  </ViewInfo>
                </ViewCard>
              );
            })}
          </ViewContainer>
        </ViewContainer><br />
        <a href="/randomshop" className="button ">Discover another shop</a>



      </Container>
      <SuggestionBar>
        <PostSuggestion>
          {prev && (
            <Link to={`/shops/${prev.slug}/`}>

              <p>&lt; {prev.name}</p>
            </Link>
          )}
        </PostSuggestion>
        <PostSuggestion>
          {next && (
            <Link to={`/shops/${next.slug}/`}>

              <p>{next.name}	&gt;</p>
            </Link>
          )}
        </PostSuggestion>
      </SuggestionBar>
    </Layout>
  );
}

SingleItem = ({ data, pageContext, location }) => {
  const { next, prev } = pageContext;
  let {
    AlexaURL,
    InstaFollowers,
    InstaFollowing,
    GlobalRank,
    LocalRank,
    TOS,
    ProfileImage,
    emprezzoID,
    UserName,
    category,
    tags,
    FBLikes,
    PinFollowers,
    PinFollowing,
    TTFollowers,
    TTFollowing,
    TTLikes,
    TwitterFollowers,
    TwitterFollowing,
    YTSubs,
    name,
    about,
    signup_promos,
    AmazonPay,
    ApplePay,
    ShopifyPay,
    PaypalShopID,
  } = data.mysqlMainView;
  if (AlexaURL.slice(-1) != '/') AlexaURL += "/";

  const clearbitLogoURL = getClearbitLogoURL(AlexaURL);

  const allMysqlMainViewEdges = data.allMysqlMainView.edges;
  const rowallMysqlCrunchBaseViewEdges = data.allMysqlCrunchBaseView ? data.allMysqlCrunchBaseView.edges : [];
  const rowallMysqlPayNShipEdges = data.allMysqlPayNShip ? data.allMysqlPayNShip.edges : [];
  const rowSocialIDViewEdges = data.allMysqlSocialIdView.edges;
  const filteredSocialIDView = _.filter(rowSocialIDViewEdges, ({ node }) => node.Instagram == UserName);
  const { Facebook, Instagram, Pinterest, TikTok, Twitter, URL, YouTube } = filteredSocialIDView.length > 0 ? filteredSocialIDView[0].node : [];

  //Creating Social IDs Data to pass to header for displaying
  let socialDetails = {
    InstagramLink: Instagram ? 'https://www.instagram.com/' + Instagram : null,
    FacebookLink: Facebook ? 'https://www.facebook.com/' + Facebook : null,
    PinterestLink: Pinterest ? 'https://www.pinterest.com/' + Pinterest : null,
    TikTokLink: TikTok ? 'https://www.tiktok.com/' + TikTok : null,
    TwitterLink: Twitter ? 'https://www.twitter.com/' + Twitter : null,
    YouTubeLink: YouTube ? 'https://www.youtube.com/c/' + YouTube : null,
  };

  const maxVisibleItems = 10;
  const [visibleItems, setVisibleItems] = React.useState(maxVisibleItems);
  const [showMore, setShowMore] = React.useState(true);
  const increaseLimit = () => {
    setVisibleItems(visibleItems + maxVisibleItems);
  }

  const [sortBy, setSortBy] = React.useState("UpdateDate");
  const [sortOrder, setSortOrder] = React.useState("DESC");
  const changeSortBy = (e) => { setSortBy(e.target.value) }
  const changeSortOrder = (e) => { setSortOrder((sortOrder == "DESC") ? "ASC" : "DESC") }

  const isMobile = useMediaQuery({ query: '(max-width: 600px)' });
  //console.log("****** isMobile = " + isMobile)

  const removeTimeFromDate = (datawithtime) => {
    return _.map(datawithtime, el => {
      let datetime = _.split(el.trim(), ' ');
      return datetime && datetime.length > 0 ? datetime[0] : el;
    });
  }

  //converting comma seperated tags to tags map
  const tagsList = tags ? tags.split(',') : [];

  //Extracting Posts from MySQL Data
  const maxPosts = 3;
  const rowDataViewEdges = data.allMysqlDataView.edges;
  //filtering top 3 for current instagram id
  const filteredDataView = _.filter(rowDataViewEdges, ({ node }) => node.AlexaURL == AlexaURL || node.AlexaURL == AlexaURL.substring(0, AlexaURL.length - 1));
  const listPostEdges = _.slice(filteredDataView, 0, maxPosts);
  let firstRowDataView = listPostEdges && listPostEdges.length ? listPostEdges[0] : [];
  //adding profileimage to firstrow
  var crunchBaseData = _.filter(rowallMysqlCrunchBaseViewEdges, ({ node }) => node.URL == AlexaURL || node.URL == AlexaURL.substring(0, AlexaURL.length - 1))
  var crunchBaseRow = crunchBaseData.length > 0 ? crunchBaseData[0] : [];
  //adding PayNShip data to firstrow
  var payNShipData = _.filter(rowallMysqlPayNShipEdges, ({ node }) => node.URL == AlexaURL || node.URL == AlexaURL.substring(0, AlexaURL.length - 1))
  var payNShipRow = payNShipData.length > 0 ? payNShipData[0] : [];
  firstRowDataView = {
    node: {
      ...firstRowDataView.node,
      ...crunchBaseRow.node,
      ...payNShipRow.node,
    }
  }

  //Now filtering instagram posts if the image or caption is not present
  const listInstaPostEdges = _.filter(listPostEdges, ({ node }) => node.PhotoLink);

  //Creating a new dataset with original nodes and required columns from DataView
  let combinedMainDataEdges = [];
  allMysqlMainViewEdges.map((edge) => {
    let newNode = {
      name: edge.node.name,
      slug: edge.node.emprezzoID,
      ...edge.node
    }
    const inputID = edge.node.AlexaURL;
    var filteredDataViewEdge = _.filter(rowDataViewEdges, ({ node }) => (node.AlexaURL == inputID))
    if (filteredDataViewEdge.length > 0) {
      newNode = {
        ...newNode,
        ...filteredDataViewEdge[0].node
      }
    }
    combinedMainDataEdges.push(newNode);
  })
  const relatedShops = getRelatedShops(data.mysqlMainView, combinedMainDataEdges);
  const combinedRelatedShops = [];
  relatedShops.map(({ shop, points }) => {
    //filter for profileimage
    var crunchBaseData = _.filter(rowallMysqlCrunchBaseViewEdges, ({ node }) => node.URL == AlexaURL)
    var crunchBaseRow = crunchBaseData.length > 0 ? crunchBaseData[0] : [];
    let newNode = {
      points,
      shop: {
        ...shop,
        ...crunchBaseRow.node,
      }
    }
    combinedRelatedShops.push(newNode);
  })

  //Extracting Products from MySQL Data
  const maxProducts = 10;
  const rowShopifyViewEdges = data.allMysqlShopifyView.edges;
  //filtering top 3 for current AlexaURL
  const filteredProductView = _.filter(rowShopifyViewEdges, ({ node }) =>
    node.AlexaURL == AlexaURL &&
    node.Price > 5 &&
    node.Title.toLowerCase().indexOf('gift') < 0 &&
    node.Title.toLowerCase().indexOf('test') < 0 &&
    node.Title.toLowerCase().indexOf('shipping') < 0
  );
  const listProductEdges = _.slice(filteredProductView, 0, maxProducts);
  //console.log("*****++listProductEdges+++********")
  //console.log(listProductEdges)

  const rowallMysqlShopifyProductsAllEdges = data.allMysqlShopifyProductsAll ? data.allMysqlShopifyProductsAll.edges : [];

  //Extracting bestseller products
  const filteredShopifyBestSellers = _.sortBy(_.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.Position != null && node.Title.toLowerCase().indexOf("gift card") < 0 && node.Title.toLowerCase().indexOf("shipping") < 0 && node.Title.toLowerCase().indexOf("insurance") < 0), ({ node }) => node.Position);
  const listShopifyBestSellersEdges = _.slice(filteredShopifyBestSellers, 0, maxProducts);

  //Extracting classic products
  let filteredShopifyClassicProducts = _.sortBy(_.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.Title.toLowerCase().indexOf("gift card") < 0 && node.Title.toLowerCase().indexOf("shipping") < 0 && node.Title.toLowerCase().indexOf("insurance") < 0), ({ node }) => node.PublishedDate);
  //Now applying sorting
  if (sortBy != "UpdateDate") {
    filteredShopifyClassicProducts = _.sortBy(filteredShopifyClassicProducts, ({ node }) => sortOrder != "DESC" ? node[sortBy] : -node[sortBy])
  } else {
    filteredShopifyClassicProducts = _.sortBy(filteredShopifyClassicProducts, ({ node }) => sortOrder != "DESC" ? new Date(node[sortBy]) : -(new Date(node[sortBy])))
  }
  //Now limiting the items as per limit
  const visibleShopifyClassicProductsEdges = _.slice(filteredShopifyClassicProducts, 0, visibleItems);
  if (showMore && visibleShopifyClassicProductsEdges.length >= filteredShopifyClassicProducts.length) setShowMore(false);
  //Now checking if 'Position' and 'DiscountPct' data is present in the list, if yes then only show 'Position' and 'DiscountPct' in the sorting options
  const isPositionPresent = _.filter(visibleShopifyClassicProductsEdges, ({ node }) => node.Position != null).length > 0;

  //Extracting new products
  const filteredShopifyNewProducts = _.sortBy(_.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.Title.toLowerCase().indexOf("gift card") < 0 && node.Title.toLowerCase().indexOf("shipping") < 0 && node.Title.toLowerCase().indexOf("insurance") < 0), ({ node }) => -node.PublishedDate);
  const listShopifyNewProductsEdges = _.slice(filteredShopifyNewProducts, 0, maxProducts);

  //Extracting sale products
  const filteredShopifySaleProducts = _.sortBy(_.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.DiscountPct > 0.10 && node.DiscountPct < 1 && node.Title.toLowerCase().indexOf("gift card") < 0 && node.Title.toLowerCase().indexOf("shipping") < 0 && node.Title.toLowerCase().indexOf("insurance") < 0), ({ node }) => -node.DiscountPct);
  const listShopifySaleProducts = _.slice(filteredShopifySaleProducts, 0, maxProducts);

  //Extracting gift cards
  const filteredShopifyGiftCards = _.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.Title.toLowerCase().indexOf("gift card") >= 0);
  const listShopifyGiftCards = _.slice(filteredShopifyGiftCards, 0, maxProducts);

  //Extracting emails
  const maxEmails = 3;
  const rowallMysqlEmailsEdges = data.allMysqlEmails ? data.allMysqlEmails.edges : [];
  const filteredEmails = _.filter(rowallMysqlEmailsEdges, ({ node }) => AlexaURL.toLowerCase().indexOf(node.domain.toLowerCase()) >= 0);
  const listEmails = _.slice(filteredEmails, 0, maxEmails);
  //console.log("***** listEmails", AlexaURL.toLowerCase(), listEmails)

  //Generating the data for chart
  let chartRankData = null;
  let chartTOSData = null;
  let globalRank_Dates = _.split(data.mysqlMainView.GlobalRank_Dates, ',') || [];
  let globalRank_Dates_NoTime = removeTimeFromDate(globalRank_Dates)

  //Rank data
  if (data.mysqlMainView.GlobalRank_List) {
    chartRankData = {
      labels: globalRank_Dates_NoTime,
      datasets: [
        {
          name: 'alexa global rank',
          type: 'line',
          values: _.split(data.mysqlMainView.GlobalRank_List, ','),
        },
      ],
      yMarkers: [
        {
          label: 'Low rank is better',
          value: '01',
        },
      ],

    };
  }
  //TOS data
  if (data.mysqlMainView.TOS_List) {
    chartTOSData = {
      labels: globalRank_Dates_NoTime,
      datasets: [
        {
          name: 'Time on site',
          type: 'line',
          values: _.split(data.mysqlMainView.TOS_List, ','),
        },
      ],
    };
  }

  //Social chart data
  const chartSocialFollowerLabels = [];
  const chartSocialFollowerValues = [];
  if (InstaFollowers && InstaFollowers != 0) {
    chartSocialFollowerLabels.push('Instagram');
    chartSocialFollowerValues.push(InstaFollowers);
  }
  if (FBLikes && FBLikes != 0) {
    chartSocialFollowerLabels.push('Facebook');
    chartSocialFollowerValues.push(FBLikes);
  }
  if (TwitterFollowers && TwitterFollowers != 0) {
    chartSocialFollowerLabels.push('Twitter');
    chartSocialFollowerValues.push(TwitterFollowers);
  }
  if (YTSubs && YTSubs != 0) {
    chartSocialFollowerLabels.push('Youtube');
    chartSocialFollowerValues.push(YTSubs);
  }
  if (PinFollowers && PinFollowers != 0) {
    chartSocialFollowerLabels.push('Pinterest');
    chartSocialFollowerValues.push(PinFollowers);
  }
  if (TTFollowers && TTFollowers != 0) {
    chartSocialFollowerLabels.push('TikTok');
    chartSocialFollowerValues.push(TTFollowers);
  }

  const chartSocialFollowingValues = [];
  if (InstaFollowing && InstaFollowing != 0) {
    chartSocialFollowingValues.push(InstaFollowing);
  }
  if (TwitterFollowing && TwitterFollowing != 0) {
    chartSocialFollowingValues.push(TwitterFollowing);
  }
  if (PinFollowing && PinFollowing != 0) {
    chartSocialFollowingValues.push(PinFollowing);
  }
  if (TTFollowing && TTFollowing != 0) {
    chartSocialFollowingValues.push(TTFollowing);
  }

  const chartSocialData = {
    labels: chartSocialFollowerLabels,
    datasets: [
      {
        name: 'followers',
        values: chartSocialFollowerValues,
      },

    ],
  };

  //Extracting social history
  const rowSocialHistoryEdges = data.allMysqlSocialHistory.edges;
  //filtering top 3 for current AlexaURL
  const filteredSocialHistory = _.filter(
    rowSocialHistoryEdges,
    ({ node }) => node.Instagram == UserName
  );

  let facebookChartData = null;
  let instagramChartData = null;
  let pinterestChartData = null;
  let tiktokChartData = null;
  let twitterChartData = null;
  let youtubeChartData = null;
  if (filteredSocialHistory && filteredSocialHistory.length > 0) {
    if (filteredSocialHistory[0].node.FacebookLikesList) {
      facebookChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.FacebookCreateDates, ',')),
        datasets: [
          {
            name: 'Facebook',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.FacebookLikesList,
              ','
            ),
          },
        ],
      };
    }
    if (filteredSocialHistory[0].node.InstagramFollowersList) {
      instagramChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.InstagramCreateDates, ',')),
        datasets: [
          {
            name: 'Instagram',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.InstagramFollowersList,
              ','
            ),
          },
        ],
      };
    }
    if (filteredSocialHistory[0].node.PinterestFollowersList) {
      pinterestChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.PinterestCreateDates, ',')),
        datasets: [
          {
            name: 'Pinterest',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.PinterestFollowersList,
              ','
            ),
          },
        ],
      };
    }
    if ((filteredSocialHistory[0].node.TiktokFollowersList) && (filteredSocialHistory[0].node.TiktokFollowersList) != '#') {
      tiktokChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.TiktokCreateDates, ',')),
        datasets: [
          {
            name: 'Tiktok',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.TiktokFollowersList,
              ','
            ),
          },
        ],
      };
    }
    if (filteredSocialHistory[0].node.TwitterFollowersList) {
      twitterChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.TwitterCreateDates, ',')),
        datasets: [
          {
            name: 'Twitter',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.TwitterFollowersList,
              ','
            ),
          },
        ],
      };
    }
    if (filteredSocialHistory[0].node.YoutubeSubscribersList) {
      youtubeChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.YoutubeCreateDates, ',')),
        datasets: [
          {
            name: 'Youtube',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.YoutubeSubscribersList,
              ','
            ),
          },
        ],
      };
    }
  }

  /*
  let allSocialChartsData = null;
  if (filteredSocialHistory && filteredSocialHistory.length > 0) {
    let socialLabels = [];
    let socialDataSet = [];
    if (filteredSocialHistory[0].node.FacebookLikesList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.FacebookCreateDates, ',')))
      socialDataSet.push({
        name: 'Facebook',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.FacebookLikesList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }

    if (filteredSocialHistory[0].node.InstagramFollowersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.InstagramCreateDates, ',')))
      socialDataSet.push({
        name: 'Instagram',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.InstagramFollowersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
    if (filteredSocialHistory[0].node.PinterestFollowersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.PinterestCreateDates, ',')))
      socialDataSet.push({
        name: 'Pinterest',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.PinterestFollowersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
    if (filteredSocialHistory[0].node.TiktokFollowersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.TiktokCreateDates, ',')))
      socialDataSet.push({
        name: 'Tiktok',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.TiktokFollowersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
    if (filteredSocialHistory[0].node.TwitterFollowersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.TwitterCreateDates, ',')))
      socialDataSet.push({
        name: 'Twitter',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.TwitterFollowersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
    if (filteredSocialHistory[0].node.YoutubeSubscribersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.YoutubeCreateDates, ',')))
      socialDataSet.push({
        name: 'Youtube',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.YoutubeSubscribersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
  }
  */

  const rowShopifyProductSummary = data.mysqlShopifyProductSummary || [];
  let productSummary_Dates = _.split(rowShopifyProductSummary.DateListActive, ',') || [];
  let productSummary_Dates_NoTime = _.map(productSummary_Dates, el => {
    let datetime = _.split(el.trim(), ' ');
    return datetime && datetime.length > 0 ? datetime[0] : el;
  });

  let subtitle = '';
  let FreeShipText = '';

  const get100Words = text => {
    let calculatedText = _.join(_.split(text, ' ', 100), ' ');
    return calculatedText;
  };

  const renderProduct = (node, key) => {
    return (
      <ProductCategoryItem
        key={key}
        cover={getProductImage(node)}
        path={`/shops/${node.emprezzoID}/`}
        vendorname={node.VendorName}
        title={node.Title}
        price={node.Price}
        node={node}
      />
    );
  };

  const renderProductList = (edges, key) => {
    const limitedEdges = edges //_.slice(edges, 0, maxProducts)
    return (
      <>
        {/* below renderer for desktop version */}
        { !isMobile && limitedEdges && limitedEdges.length > 0 && (
          <CategoryWrapper>
            {limitedEdges.map(({ node }, index) => {
              return renderProduct(node, key + "-" + index)
            })}
          </CategoryWrapper>
        )}
        {/* below renderer for mobile version */}
        { isMobile && limitedEdges && limitedEdges.length > 0 && (
          <Carousel
            showThumbs={false}
            infiniteLoop
            showIndicators={false}
            selectedItem={1}
            showArrows={true}
            showStatus={false}
          >
            {limitedEdges.map(({ node }, index) => {
              return renderProduct(node, key + "-" + index);
            })}
          </Carousel>
        )}
      </>
    );
  }

  const renderPost = (node, ismobile) => {
    return (
      <ViewCard
        key={node.PhotoLink}
        style={{ padding: ismobile && '15px', width: !ismobile && '30%' }}
      >

        <ViewImage style={{ height: '200px' }}>
          <a href={node.ShortCodeURL} target="_blank">
            {node.mysqlImage && (
              <Image
                fluid={node.mysqlImage.childImageSharp.fluid}
                alt={node.Caption && node.Caption.substring(0, 140) + '...'}
                style={{ height: '200px', width: '100%', margin: 'auto' }}
              />
            )}
            {!node.mysqlImage && (
              <img
                src={node.PhotoLink}
                alt={node.Caption && node.Caption.substring(0, 140) + '...'}
                style={{
                  objectFit: 'cover',
                  height: '200px',
                  width: '100%',
                  margin: 'auto',
                }}
              />
            )}
          </a>
        </ViewImage>

        <ViewInfo className="info" style={{ color: ismobile && 'white' }}>
          {node.Caption && node.Caption.substring(0, 140) + '...'}
        </ViewInfo>
      </ViewCard>
    );
  };

  const defaultImageOnError = (e) => { e.target.src = "/logo/logo.png" }

  const renderProfilePicURL = (node, name) => {
    if (node.mysqlImages && node.mysqlImages.length > 0) {
      return (
        <Image fluid={node.mysqlImages[0].childImageSharp.fluid} style={{ width: '100px', height: '100px' }} title={name} alt={name} />
      );
    } else if (ProfileImage) {
      return (
        <img src={ProfileImage} className="profileimage" onError={defaultImageOnError} style={{ width: '100px', height: '100px', 'border-radius': '100%', margin: '3%' }} title={name} alt={name} />
      );
    } else if (node.ProfilePicURL) {
      return (
        <img src={node.ProfilePicURL} className="profileimage" onError={defaultImageOnError} style={{ width: '100px', height: '100px', 'border-radius': '100%', margin: '3%' }} title={name} alt={name} />
      );
    } else if (node.profile_image_url) {
      return (
        <img src={node.profile_image_url} className="profileimage" onError={defaultImageOnError} style={{ width: '100px', height: '100px', 'border-radius': '100%', margin: '3%' }} title={name} alt={name} />
      );
    } else {
      return (
        <img src={"/logo/logo.png"} className="profileimage" style={{ width: '100px', height: '100px' }} title={name} alt={name} />
      );
    }
  }

  const getProductImage = (node) => {
    let productImage = node.VariantImageURL;
    if (!productImage) productImage = node.ImageURL;
    return productImage;
  }

  return (
    <Layout>
      <SEO
        title={`Discover ${name}: Best Sellers, Social Media, & Stats `}
        description={`${name} is a ${category} brand that sells products related to ${tags} direct to consumers on its website. Prices range from ${rowShopifyProductSummary.PriceMin} - ${rowShopifyProductSummary.PriceMax} with an average price of ${rowShopifyProductSummary.PriceAvg}. See product data about ${name} at emprezzo. `}
        pathname={AlexaURL}
      />
      <Header
        description={`${category}: ${tags}`} children={subtitle} likeEnabled={{ storeName: name, storeURL: AlexaURL, storeProfileImage: clearbitLogoURL || ProfileImage || (firstRowDataView && firstRowDataView.node.ProfilePicURL) }} />
      <Container>
        <div className="profileimage" style={{ display: 'flex' }}>
          {/*firstRowDataView && renderProfilePicURL(firstRowDataView.node, name)*/}
          <div style={{ paddingLeft: '5px' }}>

            <Title>
              <AddShopToCartButton
                details={{
                  storeName: name,
                  storeURL: AlexaURL,
                  storeProfileImage: clearbitLogoURL || ProfileImage || (firstRowDataView && firstRowDataView.node.ProfilePicURL),
                  emprezzoID: emprezzoID,
                  description: about,
                }}
              />
              {name}
            </Title>
            <Subtitle><b>{category}</b> {tags}<br /></Subtitle>
            <Stat>{rowShopifyProductSummary.PriceMin &&
              rowShopifyProductSummary.PriceMax && (
                <span>
                  ${rowShopifyProductSummary.PriceMin}-${rowShopifyProductSummary.PriceMax} (${rowShopifyProductSummary.PriceAvg} avg)</span>
              )}
              &nbsp;
              {PaypalShopID && PaypalShopID != '#' &&
                <span style={{ paddingRight: "0.25rem" }}><FaPaypal size="16" color="#666" /></span>
              }
              {AmazonPay == '1' &&
                <span style={{ paddingRight: "0.25rem" }}><FaAmazon size="16" color="#666" /></span>
              }
              {ShopifyPay && ShopifyPay == '1' &&
                <span style={{ paddingRight: "0.25rem" }}><FaShopify size="16" color="#666" /></span>
              }
              {ApplePay && ApplePay == '1' &&
                <span style={{ paddingRight: "0.25rem" }}><FaApple size="16" color="#666" /></span>
              }
            </Stat>



            <Stat>


            </Stat>


            <Stat>

              {firstRowDataView &&
                <div>

                  {firstRowDataView.node.FreeShipMin != null && firstRowDataView.node.FreeShipMin != 0 &&
                    <span><FaTruck size="16" color="#666" class="icon" title="free shipping info" /> Free shipping ${firstRowDataView.node.FreeShipMin}+ &nbsp;</span>
                  }
                  {firstRowDataView.node.FreeShipMin == 0 &&
                    <span><FaTruck size="16" color="#666" class="icon" title="free shipping on most orders" /> Most orders ship free! &nbsp;</span>
                  }
                  {firstRowDataView.node.BaseShipRate > 1 &&
                    <span><FaBoxOpen size="16" color="#666" class="icon" title="shipping rates" /> Rates ${firstRowDataView.node.BaseShipRate}+ &nbsp; </span>
                  }
                  <br />
                  {firstRowDataView.node.ReturnDays != null && firstRowDataView.node.ReturnDays != "0" &&
                    <span><FaUndoAlt size="16" color="#666" /> {firstRowDataView.node.ReturnDays} day returns</span>
                  }
                  {firstRowDataView.node.ReturnShipFree != "." && firstRowDataView.node.ReturnShipFree == "Yes" &&
                    <span><br /><FaRegStar size="16" color="#666" /> Returns ship free!</span>
                  }

                </div>
              }

            </Stat>
            <br />








          </div>
        </div>





        <Tabs>
          <TabList>
            <Tab style={TabStyle}>Shop {name}</Tab>
            {/* {listShopifyBestSellersEdges &&
              listShopifyBestSellersEdges.length > 0 && (
                <Tab style={TabStyle}>Best sellers</Tab>
              )}
            {listShopifyNewProductsEdges &&
              listShopifyNewProductsEdges.length > 0 && (
                <Tab style={TabStyle}>New products</Tab>
              )}
            {listShopifySaleProducts &&
              listShopifySaleProducts.length > 0 && (
                <Tab style={TabStyle}>Sale</Tab>
              )}
            {listShopifyGiftCards &&
              listShopifyGiftCards.length > 0 && (
                <Tab style={TabStyle}>Gift Cards</Tab>
              )} */}
          </TabList>

          <TabPanel>
            <AlgoliaProductList
              defaultFilter={`emprezzoID:"${emprezzoID}"`}
              hideLeftPanel={true}
              facetsToShow={'onsale,giftcard'}
              showSearchBox={false}
              showClearFilter={false}
              hideCTAButton={true} f
              enableCart={true}
              currentShop={{ name: name, link: AlexaURL }}
              location={location}
              noResultMessage={`Shop direct at <a href=${AlexaURL} target="_blank">${name}</a>`}
            />
          </TabPanel>

          {/* {listShopifyBestSellersEdges && listShopifyBestSellersEdges.length > 0 && (
            <TabPanel>
              {renderProductList(listShopifyBestSellersEdges, 'listShopifyBestSellersEdges')}
            </TabPanel>
          )}
          {listShopifyNewProductsEdges && listShopifyNewProductsEdges.length > 0 && (
            <TabPanel>
              {renderProductList(listShopifyNewProductsEdges, 'listShopifyNewProductsEdges')}
            </TabPanel>
          )}

          {listShopifySaleProducts && listShopifySaleProducts.length > 0 && (
            <TabPanel>
              {renderProductList(listShopifySaleProducts, 'listShopifySaleProducts')}
            </TabPanel>
          )}
          {listShopifyGiftCards &&
            listShopifyGiftCards.length > 0 && (
              <TabPanel>

                <PostSectionGrid>
                  {listShopifyGiftCards.map(({ node, index }) => {
                    return renderProduct(node, 'Giftcard-' + index);
                  })}
                </PostSectionGrid>
              </TabPanel>
            )} */}
        </Tabs>


        <Tabs>
          <TabList>
            <Tab style={TabStyle}>Recent emails</Tab>
            {/* {listShopifyBestSellersEdges &&
              listShopifyBestSellersEdges.length > 0 && (
                <Tab style={TabStyle}>Best sellers</Tab>
              )}
            {listShopifyNewProductsEdges &&
              listShopifyNewProductsEdges.length > 0 && (
                <Tab style={TabStyle}>New products</Tab>
              )}
            {listShopifySaleProducts &&
              listShopifySaleProducts.length > 0 && (
                <Tab style={TabStyle}>Sale</Tab>
              )}
            {listShopifyGiftCards &&
              listShopifyGiftCards.length > 0 && (
                <Tab style={TabStyle}>Gift Cards</Tab>
              )} */}
          </TabList>





          <TabPanel>

            <EmailGrid>
              {listEmails && listEmails.map((emailNode) => (
                <EmailsItem email={emailNode} emprezzoID={emprezzoID} />
              ))}
            </EmailGrid>
          </TabPanel>


        </Tabs>
        <br />

        {listInstaPostEdges && listInstaPostEdges.length > 0 && (
          <h3>See recent posts from @{firstRowDataView.node.UserName}</h3>
        )}




        {/* Show carousel for mobile version */}
        {isMobile && (
          <Carousel
            showThumbs={false}
            infiniteLoop
            showIndicators={false}
            selectedItem={1}
            showArrows={true}
            showStatus={false}
          >
            {listInstaPostEdges &&
              listInstaPostEdges.map(({ node }) => {
                return renderPost(node, true);
              })}
          </Carousel>
        )}
        {/* Show carousel for mobile version */}
        {!isMobile && (
          <ViewContainer>
            {listInstaPostEdges &&
              listInstaPostEdges.map(({ node }) => {
                return renderPost(node);
              })}
          </ViewContainer>
        )}

        <br />

      
        <h3>About {name}</h3>
        <b>{name}</b> produces and sells {category} products {tags} and more. The company sells direct-to-consumer on its website.

      {rowShopifyProductSummary.PriceMin &&
          rowShopifyProductSummary.PriceMax && (
            <span>
              &nbsp;Prices range from ${rowShopifyProductSummary.PriceMin} - ${rowShopifyProductSummary.PriceMax} with an average price of ${rowShopifyProductSummary.PriceAvg}.</span>
          )}
        {socialDetails && (
          <span>
            &nbsp;The {name} brand can be found on
            {socialDetails.InstagramLink && (
              " Instagram, "
            )}
            {socialDetails.FacebookLink && (
              " Facebook, "
            )}
            {socialDetails.PinterestLink && (
              " Pinterest, "
            )}
            {socialDetails.TikTok && (
              " TikTok, "
            )}
            {socialDetails.TwitterLink && (
              " Twitter, "
            )}
            {socialDetails.YouTubeLink && (
              " Youtube, "
            )}
               and here on Emprezzo.&nbsp;
          </span>
        )}
        <div class="shopButtons" style={{ 'margin-top': '1em' }}>
          <a href={AlexaURL} className="button" target="_blank">
            shop {name}
          </a>{' '}
          <a href="/randomshop" className="button buttonalt">
            Discover another shop
      </a>
        </div>
        <div>
          <br />
          {!!combinedRelatedShops.length && (
            <>
              <h3>Discover shops similar to {name}</h3>
              <PostSectionGrid>
                {combinedRelatedShops && combinedRelatedShops.map(({ shop }, index) => (
                  <span key={index}>
                    <PostSectionImage>
                      <Link key={index} to={`/shops/${shop.emprezzoID}/`}>
                        <img src={getClearbitLogoURL(shop.AlexaURL) || shop.ProfileImage || shop.ProfilePicURL || shop.profile_image_url || "/logo/logo.png"} title={shop.name} alt={shop.name} onError={defaultImageOnError} style={{ height: 'inherit', 'textAlign': 'center', 'borderRadius': '5%' }} />
                      </Link>
                    </PostSectionImage>
                    <PostSectionContent>
                      <Link key={index} to={`/shops/${shop.emprezzoID}/`}>
                        {shop.name && <b>{shop.name}</b>}
                      </Link>

                    </PostSectionContent>
                  </span>
                ))}
              </PostSectionGrid>
            </>
          )}
          <br />
        </div>
        <h3 style={{ 'top-margin': '1rem' }}>{name} data and charts</h3>
        <Tabs>
          <TabList>
            <Tab style={TabStyle}>Fans</Tab>
            <Tab style={TabStyle}>Breakdown</Tab>

            {rowShopifyProductSummary.PriceListActive && (<Tab style={TabStyle}>Prices</Tab>)}
            <Tab style={TabStyle}>Traffic</Tab>
            {chartTOSData && (<Tab style={TabStyle}>Time</Tab>)}


          </TabList>
          <TabPanel>
            <div style={{ flex: '60%' }}>
              <Tabs >
                <TabList>
                  {facebookChartData && <Tab style={TabStyle}>Facebook</Tab>}
                  {instagramChartData && <Tab style={TabStyle}>Instagram</Tab>}
                  {pinterestChartData && <Tab style={TabStyle}>Pinterest</Tab>}
                  {tiktokChartData && <Tab style={TabStyle}>TikTok</Tab>}
                  {twitterChartData && <Tab style={TabStyle}>Twitter</Tab>}
                  {youtubeChartData && <Tab style={TabStyle}>Youtube</Tab>}
                </TabList>
                {facebookChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      colors={['#743ee2']}
                      title="Facebook"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      data={facebookChartData}
                    />
                  </TabPanel>
                )}
                {instagramChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Instagram"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={instagramChartData}
                    />
                  </TabPanel>
                )}
                {pinterestChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Pinterest"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={pinterestChartData}
                    />
                  </TabPanel>
                )}
                {tiktokChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Tiktok"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={tiktokChartData}
                    />
                  </TabPanel>
                )}
                {twitterChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Twitter"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={twitterChartData}
                    />
                  </TabPanel>
                )}
                {youtubeChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Youtube"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={youtubeChartData}
                    />
                  </TabPanel>
                )}
              </Tabs>
            </div>
          </TabPanel>
          <TabPanel>

            <div style={{ flex: '100%' }}>

              {chartSocialData && chartSocialData.labels && chartSocialData.labels.length > 0 && (
                <ReactFrappeChart
                  type="donut"
                  title="Total fans by platform"
                  height={300}
                  data={chartSocialData}
                />
              )}
            </div>
          </TabPanel>

          {rowShopifyProductSummary.PriceListActive && (
            <TabPanel>

              {rowShopifyProductSummary && (
                <ReactFrappeChart
                  title="Product prices by release date"
                  type="axis-mixed"
                  colors={['#743ee2']}
                  height={250}
                  axisOptions={{ xAxisMode: 'tick', xIsSeries: 1 }}
                  lineOptions={{ hideLine: 1 }}
                  tooltipOptions={{
                    formatTooltipX: d => d,
                    formatTooltipY: d => '$ ' + parseFloat(d || 0).toFixed(2),
                  }}
                  data={{
                    labels: _.split(productSummary_Dates_NoTime, ','),
                    datasets: [
                      {
                        name: 'Product prices',
                        type: 'line',
                        values: _.split(
                          rowShopifyProductSummary.PriceListActive,
                          ','
                        ),
                      },
                    ],
                    yMarkers: [
                      {
                        label: 'Avg Price',
                        value: rowShopifyProductSummary.PriceAvg,
                      },
                    ],
                  }}
                />
              )}
            </TabPanel>
          )}
          <TabPanel>
            {chartRankData && (
              <ReactFrappeChart
                title="Alexa traffic rank over time"
                type="axis-mixed"
                colors={['#743ee2']}
                height={250}
                axisOptions={{ xAxisMode: 'tick', xIsSeries: 1 }}
                lineOptions={{ spline: 1 }}
                data={chartRankData}
              />
            )}
          </TabPanel>
          <TabPanel>
            {chartTOSData && (
              <ReactFrappeChart
                type="axis-mixed"
                title="Average time spent on site"
                colors={['#743ee2']}
                height={250}
                axisOptions={{ xAxisMode: 'tick', xIsSeries: 1 }}
                lineOptions={{ spline: 1 }}
                data={chartTOSData}
                tooltipOptions={{
                  formatTooltipX: d => d,
                  formatTooltipY: d => d + " seconds",
                }}
              />
            )}
          </TabPanel>



        </Tabs>




      </Container>
      <SuggestionBar>
        <div style={{ margin: '2rem 2rem 2rem 4rem', 'max-width': '60%' }}>



        </div>

        <div style={{ float: 'right', margin: '2rem', }}>

        </div>
      </SuggestionBar>

    </Layout>
  );
}

export default function AllProducts() {
  const { products, collections } = React.useContext(ProductContext);
  const collectionProductMap = {};
  const { search } = useLocation();
  const qs = queryString.parse(search);
  const selectedCollectionIds = qs.c?.split(',').filter(c => !!c) || [];
  const selectedCollectionIdsMap = {};
  const searchTerm = qs.s;

  selectedCollectionIds.forEach(collectionId => {
    selectedCollectionIdsMap[collectionId] = true;
  });

  if (collections) {
    collections.forEach(collection => {
      collectionProductMap[collection.shopifyId] = {};

      collection.products.forEach(product => {
        collectionProductMap[collection.shopifyId][product.shopifyId] = true;
      });
    });
  }

  const filterByCategory = product => {
    if (Object.keys(selectedCollectionIdsMap).length) {
      for (let key in selectedCollectionIdsMap) {
        if (collectionProductMap[key]?.[product.shopifyId]) {
          return true;
        }
      }
      return false;
    }

    return true;
  };

  const filterBySearchTerm = product => {
    if (searchTerm) {
      return product.title.toLowerCase().indexOf(searchTerm.toLowerCase()) >= 0;
    }

    return true;
  };

  const filteredProducts = products
    .filter(filterByCategory)
    .filter(filterBySearchTerm);
  return (
    <Layout>
      <SEO
        description="The MadHatter store all products"
        title="All products"
      />
      {!!searchTerm && !!filteredProducts.length && (
        <h3>
          Search term: <strong>'{searchTerm}'</strong>
        </h3>
      )}
      {!!filteredProducts.length && <h4>{filteredProducts.length} products</h4>}
      <Content>
        <Filters />
        {!filteredProducts.length && (
          <div>
            <h3>
              <span>Oh no! Nothing matches</span>
              &nbsp;
              <strong>'{searchTerm}'</strong>
            </h3>
            <div>
              To help with your search why not try:
              <br />
              <br />
              <ul>
                <li>Checking your spelling</li>
                <li>Using less words</li>
                <li>Try using a different search term</li>
              </ul>
            </div>
          </div>
        )}
        {!!filteredProducts.length && (
          <div>
            <ProductsGrid products={filteredProducts} />
          </div>
        )}
      </Content>
    </Layout>
  );
}

export default function ProductTemplate(props) {
  const { getProductById } = React.useContext(CartContext);
  const [product, setProduct] = React.useState(null);
  const [selectedVariant, setSelectedVariant] = React.useState(null);
  const { search, origin, pathname } = useLocation();
  const variantId = queryString.parse(search).variant;

  React.useEffect(() => {
    getProductById(props.data.shopifyProduct.shopifyId).then(result => {
      setProduct(result);
      setSelectedVariant(
        result.variants.find(({ id }) => id === variantId) || result.variants[0]
      );
    });
  }, [
    getProductById,
    setProduct,
    props.data.shopifyProduct.shopifyId,
    variantId,
  ]);

  const handleVariantChange = e => {
    const newVariant = product?.variants.find(v => v.id === e.target.value);
    setSelectedVariant(newVariant);
    navigate(
      `${origin}${pathname}?variant=${encodeURIComponent(newVariant.id)}`,
      {
        replace: true,
      }
    );
  };

  return (
    <Layout>
      <SEO
        description={props.data.shopifyProduct.description}
        title={props.data.shopifyProduct.title}
      />
      <Button onClick={() => navigate(-1)}>Back to products</Button>
      <Grid>
        <div>
          <h1>{props.data.shopifyProduct.title}</h1>
          <p>{props.data.shopifyProduct.description}</p>
          {product?.availableForSale && !!selectedVariant && (
            <>
              {product?.variants.length > 1 && (
                <SelectWrapper>
                  <strong>Variant</strong>
                  <select
                    value={selectedVariant.id}
                    onChange={handleVariantChange}
                  >
                    {product?.variants.map(v => (
                      <option key={v.id} value={v.id}>
                        {v.title}
                      </option>
                    ))}
                  </select>
                </SelectWrapper>
              )}
              {!!selectedVariant && (
                <>
                  <Price>£{selectedVariant.price}</Price>
                  <ProductQuantityAdder
                    available={selectedVariant.available}
                    variantId={selectedVariant.id}
                  />
                </>
              )}
            </>
          )}
        </div>
        <div>
          <ImageGallery
            selectedVariantImageId={selectedVariant?.image.id}
            images={props.data.shopifyProduct.images}
          />
        </div>
      </Grid>
    </Layout>
  );
}