Merge pull request #227 from w3bdesign/development

w3bdesign · web-flow · commit 0f932c90f409 · 2020-07-23T23:58:58.000+02:00
Update page title and add product name as title
diff --git a/components/Checkout/Billing.component.jsx b/components/Checkout/Billing.component.jsx
@@ -1,6 +1,6 @@
 import { useForm } from 'react-hook-form';
 
-import CheckoutTitle from 'components/Header/CheckoutTitle.component';
+import CheckoutTitle from 'components/Title/CheckoutTitle.component';
 
 const Input = ({
   name,
diff --git a/components/Checkout/CheckoutForm.component.jsx b/components/Checkout/CheckoutForm.component.jsx
@@ -19,7 +19,6 @@ import {
 
 const CheckoutForm = () => {
   const [cart, setCart] = useContext(AppContext);
-
   const [orderData, setOrderData] = useState(null);
   const [requestError, setRequestError] = useState(null);
   const [orderCompleted, setorderCompleted] = useState(false); 
diff --git a/components/Checkout/MobileOrderDetails.component.jsx b/components/Checkout/MobileOrderDetails.component.jsx
@@ -1,7 +1,7 @@
 import { v4 } from 'uuid';
 
 import MobileOrderDetailsItem from './MobileOrderDetailsItem.component';
-import CheckoutTitle from 'components/Header/CheckoutTitle.component';
+import CheckoutTitle from 'components/Title/CheckoutTitle.component';
 
 const MobileOrderDetails = ({ cart }) => {
   return (
diff --git a/components/Checkout/OrderDetails.component.jsx b/components/Checkout/OrderDetails.component.jsx
@@ -1,4 +1,4 @@
-import CheckoutTitle from 'components/Header/CheckoutTitle.component';
+import CheckoutTitle from 'components/Title/CheckoutTitle.component';
 import OrderDetailsCartItem from './OrderDetailsCartItem.component';
 
 const OrderDetails = ({ cart }) => {
diff --git a/components/Header/Header.component.jsx b/components/Header/Header.component.jsx
@@ -3,17 +3,19 @@ import Head from 'next/head';
 import Navbar from './Navbar.component';
 
 /**
- * Header for the application. 
+ * Header for the application.
  * Adds title and some meta properties
  */
-const Header = () => {
+const Header = ({title}) => {
   return (
     <>
       <Head>
-        <title>Nextjs Ecommerce with Woocommerce</title>
+        <title>Nextjs Ecommerce with Woocommerce {title && title}</title>
+        <meta name="description" content="WooCommerce webshop" />
+        <meta name="keywords" content="Ecommerce, WooCommerce" />
         <meta
           property="og:title"
-          content="Nextjs ecommerce with Woocommerce"
+          content="Nextjs Ecommerce with Woocommerce"
           key="pagetitle"
         />
       </Head>
diff --git a/components/Title/CheckoutTitle.component.jsx b/components/Title/CheckoutTitle.component.jsx
diff --git a/components/Title/PageTitle.component.jsx b/components/Title/PageTitle.component.jsx
diff --git a/pages/_app.js b/pages/_app.js
@@ -4,12 +4,11 @@ import { AppProvider } from 'utils/context/AppContext';
 import Router from 'next/router';
 import NProgress from 'nprogress';
 
-import Header from '../components/Header/Header.component';
 import Footer from '../components/Footer/Footer.component';
 
-import '../styles/index.css';
-import '../styles/algolia.min.css';
-import '../styles/animate.min.css';
+import "styles/index.css";
+import 'styles/algolia.min.css';
+import 'styles/animate.min.css';
 import 'nprogress/nprogress.css';
 
 import client from '../utils/apollo/ApolloClient';
@@ -22,8 +21,7 @@ const App = ({ Component, pageProps }) => {
   return (
     <>
       <ApolloProvider client={client}>
-        <AppProvider>
-          <Header />
+        <AppProvider>         
           <Component {...pageProps} />
           <Footer />
         </AppProvider>
diff --git a/pages/handlekurv.js b/pages/handlekurv.js
@@ -1,8 +1,10 @@
+import Header from 'components/Header/Header.component';
 import CartItemsContainer from 'components/Cart/CartPage/CartItemsContainer.component';
 
 const Handlekurv = () => {
   return (
     <>
+      <Header title="- Handlekurv" />
       <CartItemsContainer />
     </>
   );
diff --git a/pages/index.js b/pages/index.js
@@ -1,6 +1,7 @@
+import Header from 'components/Header/Header.component';
 import Hero from 'components/Index/Hero.component';
 import IndexProducts from 'components/Product/IndexProducts.component';
-import PageTitle from 'components/Header/PageTitle.component';
+import PageTitle from 'components/Title/PageTitle.component';
 
 import client from 'utils/apollo/ApolloClient.js';
 
@@ -14,6 +15,7 @@ import { FETCH_ALL_PRODUCTS_QUERY } from 'utils/const/GQL_QUERIES';
 const HomePage = ({ products }) => {
   return (
     <>
+      <Header title="- Forside" />
       <Hero />
       <PageTitle title="Produkter" />
       {products && <IndexProducts products={products} />}
diff --git a/pages/kasse.js b/pages/kasse.js
@@ -1,7 +1,9 @@
+import Header from 'components/Header/Header.component';
 import CheckoutForm from 'components/Checkout/CheckoutForm.component';
 
 const Kasse = () => (
   <>
+    <Header title="- Gå til kasse" />
     <CheckoutForm />
   </>
 );
diff --git a/pages/kategorier.js b/pages/kategorier.js
@@ -1,6 +1,7 @@
+import Header from 'components/Header/Header.component';
 import Categories from 'components/Category/Categories.component';
 import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
-import PageTitle from 'components/Header/PageTitle.component';
+import PageTitle from 'components/Title/PageTitle.component';
 
 import client from 'utils/apollo/ApolloClient.js';
 
@@ -14,6 +15,7 @@ const CategoryPage = ({ categories }) => {
 
   return (
     <>
+      <Header title="- Kategorier" />
       <PageTitle title="Kategorier" />
 
       {categories && <Categories categories={categories} />}
diff --git a/pages/produkt/[slug].js b/pages/produkt/[slug].js
@@ -1,21 +1,21 @@
 import { withRouter } from 'next/router';
 
 import SingleProduct from 'components/Product/SingleProduct.component';
+import Header from 'components/Header/Header.component';
+
 import client from 'utils/apollo/ApolloClient';
 
-import { WOO_CONFIG } from 'utils/config/nextConfig';
 import { GET_SINGLE_PRODUCT } from 'utils/const/GQL_QUERIES';
 
 /**
  * Display a single product with dynamic pretty urls
  */
-const Produkt = (props) => {
-  const { product } = props;
-
-  const error = false;
+const Produkt = ({ product }) => {
+  let error = false;
 
   return (
     <>
+      <Header title={`- ${product.name && product.name}`} />
       {product ? (
         <SingleProduct product={product} />
       ) : (
diff --git a/pages/produkter.js b/pages/produkter.js
@@ -1,3 +1,4 @@
+import Header from 'components/Header/Header.component';
 import IndexProducts from 'components/Product/IndexProducts.component';
 import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
 import PageTitle from 'components/Header/PageTitle.component';
@@ -17,6 +18,7 @@ const Produkter = ({ products }) => {
 
   return (
     <>
+      <Header title="- Produkter" />
       <PageTitle title="Produkter" marginleft="50" />
 
       {products && <IndexProducts products={products} />}
diff --git a/utils/config/nextConfig.js b/utils/config/nextConfig.js
@@ -19,8 +19,8 @@ export const WOO_CONFIG = {
   ALGOLIA_APP_ID: '7L9M5Y0B1K',
   ALGOLIA_PUBLIC_API_KEY: '925cc92373120f1bf477bb8ce0e71649',
   ALGOLIA_INDEX_NAME: 'dfweb',
-  PLACEHOLDER_SMALL_IMAGE_URL: 'https://via.placeholder.com/272',
-  PLACEHOLDER_LARGE_IMAGE_URL: 'https://via.placeholder.com/616',
+  PLACEHOLDER_SMALL_IMAGE_URL: 'https://res.cloudinary.com/duelisue0/image/upload/v1595540954/Nextjs-Woocommerce/placeholder-272-272_pg8t0z.jpg',
+  PLACEHOLDER_LARGE_IMAGE_URL: 'https://res.cloudinary.com/duelisue0/image/upload/v1595541416/Nextjs-Woocommerce/placeholder-616-616_beecp5.jpg',
 };
 
 export default WOO_CONFIG;

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import CheckoutTitle from 'components/Header/CheckoutTitle.component';`
	`1`	`+import CheckoutTitle from 'components/Title/CheckoutTitle.component';`
`2`	`2`	`import OrderDetailsCartItem from './OrderDetailsCartItem.component';`
`3`	`3`
`4`	`4`	`const OrderDetails = ({ cart }) => {`