saleor / saleor-storefront

A GraphQL-powered, NextJs-based, PWA storefront for Saleor. IMPORTANT: This project is [DEPRECATED] in favor of saleor/react-storefront soon to become our default demo and storefront starter pack.

Home Page:https://demo.saleor.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Getting rid of the home-page_hero div causes bomb?

sourcesolver opened this issue · comments

Hey, a weird thing happened as I was sprucing up the saleor storefront.

The original code in the Page.tsx file started with the following home-page hero div:

<script className="structured-data-list" type="application/ld+json"> {structuredData(shop)} </script>
  <div
    className="home-page__hero"
    style={
      backgroundImage
        ? { backgroundImage: `url(${backgroundImage.url})` }
        : null
    }
  >
    <div className="home-page__hero-text">
      <div>
        <span className="home-page__hero__title">
          <h1>Final reduction</h1>
        </span>
      </div>
      <div>
        <span className="home-page__hero__title">
          <h1>Up to 70% off sale</h1>
        </span>
      </div>
    </div>

I wanted to get rid of this sale notice and just begin with the shop by categories portion right after. When I did this however (removing the home-page hero

) the build bombed altogether:

<script className="structured-data-list" type="application/ld+json"> {structuredData(shop)} </script>
  <ProductsFeatured />
  {categoriesExist() && (
    <div className="home-page__categories">
      <div className="container">
        <h3>Shop by category</h3>
        <div className="home-page__categories__list">
          {categories.edges.map(({ node: category }) => (
            <div key={category.id}>
              <Link
                to={generateCategoryUrl(category.id, category.name)}
                key={category.id}
              >
                <div
                  className={classNames(
                    "home-page__categories__list__image",
                    {
                      "home-page__categories__list__image--no-photo": !category.backgroundImage,
                    }
                  )}
                  style={{
                    backgroundImage: `url(${
                      category.backgroundImage
                        ? category.backgroundImage.url
                        : noPhotoImg
                           })`,
                  }}
                />
                <h3>{category.name}</h3>
              </Link>
            </div>
          ))}
        </div>
      </div>
    </div>
  )}
</>

);
};

I ended up getting it to work using a CSS style display: none attribute on the home-page hero div, but (as I'm not a react person) why did the build bomb when I went to remove the home-page hero div?

Is there a requirement for the sale link which I had removed, but is specified elsewhere?

Problem solved: it was, primarily, too many warnings cause a build failure (one warning will evidently still allow for a build...). I ended up using esLint to check my code as I'm not a react programmer and was receiving too many warnings.