Skip to content
This repository has been archived by the owner on Jul 14, 2022. It is now read-only.

Ordinary conditional checks when no data exist to make storefront works #551

Merged
merged 3 commits into from
Jan 7, 2020
Merged

Ordinary conditional checks when no data exist to make storefront works #551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
66910e4
Ordinary conditional checks when no data exist to make storefront works
orzechdev Dec 27, 2019
fca9369
Update changelog
orzechdev Dec 27, 2019
f3df92b
remove unused code
orzechdev Dec 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ All notable, unreleased changes to this project will be documented in this file.
## [Unreleased]

- Add missing product attributes on product page - #536 by @orzechdev
- Fix not working storefront when no data in saleor database exist - #551 by @orzechdev

## 0.7.0

Expand Down
2 changes: 2 additions & 0 deletions src/components/ProductsFeatured/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ const ProductsFeatured: React.FC<ProductsFeaturedProps> = ({ title }) => {
</div>
</div>
);
} else {
return null;
}
}}
</TypedFeaturedProductsQuery>
Expand Down
4 changes: 2 additions & 2 deletions src/core/SEO/Homepage/structuredData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ export const structuredData = shop => {
return JSON.stringify({
"@context": "https://schema.org",
"@type": "WebSite",
description: shop.description,
name: shop.name,
description: shop ? shop.description : "",
name: shop ? shop.name : "",
potentialAction: {
"@type": "SearchAction",
"query-input": "required name=q",
Expand Down
147 changes: 80 additions & 67 deletions src/views/Home/Page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { generateCategoryUrl } from "../../core/utils";
import {
ProductsList_categories,
ProductsList_shop,
ProductsList_shop_homepageCollection_backgroundImage
ProductsList_shop_homepageCollection_backgroundImage,
} from "./types/ProductsList";

import { structuredData } from "../../core/SEO/Homepage/structuredData";
Expand All @@ -22,77 +22,90 @@ const Page: React.FC<{
categories: ProductsList_categories;
backgroundImage: ProductsList_shop_homepageCollection_backgroundImage;
shop: ProductsList_shop;
}> = ({ loading, categories, backgroundImage, shop }) => (
<>
<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>
}> = ({ loading, categories, backgroundImage, shop }) => {
const categoriesExist = () => {
return categories && categories.edges && categories.edges.length > 0;
};

return (
<>
<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>
</div>
<div className="home-page__hero-action">
{loading && !categories ? (
<Loader />
) : (
<Link
to={generateCategoryUrl(
categories.edges[0].node.id,
categories.edges[0].node.name
)}
>
<Button>Shop sale</Button>
</Link>
)}
</div>
</div>
<ProductsFeatured />
<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}>
<div className="home-page__hero-action">
{loading && !categories ? (
<Loader />
) : (
categoriesExist() && (
<Link
to={generateCategoryUrl(category.id, category.name)}
key={category.id}
to={generateCategoryUrl(
categories.edges[0].node.id,
categories.edges[0].node.name
)}
>
<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>
<Button>Shop sale</Button>
</Link>
</div>
))}
)
)}
</div>
</div>
</div>
</>
);
<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>
)}
</>
);
};

export default Page;
45 changes: 20 additions & 25 deletions src/views/Home/View.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,33 @@ import "./scss/index.scss";

import * as React from "react";

import { Loader, MetaWrapper } from "../../components";
import { maybe } from "../../core/utils";
import { MetaWrapper } from "../../components";
import Page from "./Page";
import { TypedHomePageQuery } from "./queries";
import { ProductsList } from "./types/ProductsList";

const canDisplay = (data: ProductsList) =>
maybe(() => !!data.shop.homepageCollection && !!data.categories.edges.length);

const View: React.FC = () => (
<div className="home-page">
<TypedHomePageQuery alwaysRender displayLoader={false} errorPolicy="all">
{({ data, loading }) => {
if (canDisplay(data)) {
return (
<MetaWrapper
meta={{
description: data.shop.description,
title: data.shop.name,
}}
>
<Page
loading={loading}
backgroundImage={data.shop.homepageCollection.backgroundImage}
categories={data.categories}
shop={data.shop}
/>
</MetaWrapper>
);
}

return <Loader full />;
return (
<MetaWrapper
meta={{
description: data.shop ? data.shop.description : "",
title: data.shop ? data.shop.name : "",
}}
>
<Page
loading={loading}
backgroundImage={
data.shop &&
data.shop.homepageCollection &&
data.shop.homepageCollection.backgroundImage
}
categories={data.categories}
shop={data.shop}
/>
</MetaWrapper>
);
}}
</TypedHomePageQuery>
</div>
Expand Down