Add checkout button to cart page

Author: w3bdesign

components/Cart/Cart.component.jsx

@@ -18,7 +18,7 @@ const Cart = () => {
 
   return (
     <>
-      <Link href="/cart">
+      <Link href="/handlekurv">
         <a className="inline-block pl-3 no-underline hover:text-black">
           <svg
             className="fill-current hover:text-black"

components/Cart/CartPage/CartItem.component.jsx

@@ -41,28 +41,12 @@ const CartItem = ({
           ? item.totalPrice.toFixed(2)
           : item.totalPrice}
       </td>
+
+     
+
+
     </tr>
   );
 };
 
 export default CartItem;
-
-/*
-<tr className="bg-gray-100">
-                  <td className="px-4 py-2 border">Test</td>
-                  <td className="px-4 py-2 border">Test</td>
-                  <td className="px-4 py-2 border">Test</td>
-                  <td className="px-4 py-2 border">Test</td>
-                </tr>
-                <tr className="bg-gray-100">
-                  <td className="px-4 py-2 border">Test</td>
-                  <td className="px-4 py-2 border">Test</td>
-                  <td className="px-4 py-2 border">Test</td>
-                  <td className="px-4 py-2 border">Test</td>
-                </tr>
-                <tr className="bg-gray-100">
-                  <td className="px-4 py-2 border">Testx</td>
-                  <td className="px-4 py-2 border">Testxx</td>
-                  <td className="px-4 py-2 border">Testxxxx</td>
-                  <td className="px-4 py-2 border">Test xxxxxxxxxx</td>
-                  */

components/Cart/CartPage/CartItemsContainer.component.jsx

@@ -14,7 +14,6 @@ import {
 import CartItem from 'components/Cart/CartPage/CartItem.component';
 import PageTitle from 'components/Header/PageTitle.component';
 
-import { WOO_CONFIG } from 'utils/config/nextConfig';
 import { GET_CART } from 'utils/const/GQL_QUERIES';
 
 /*
@@ -75,12 +74,25 @@ const CartItemsContainer = () => {
                       <CartItem
                         key={item.productId}
                         item={item}
+                        products={cart.products}
                         // updateCartProcessing={updateCartProcessing}
-                        // products={cart.products}
                         // handleRemoveProductClick={handleRemoveProductClick}
                         // updateCart={updateCart}
                       />
                     ))}
+
+                  <tr>
+                    <td>
+                      <Link href="/kasse">
+                        <a
+                          className="inline-block px-6 py-3 mt-6 text-xl leading-relaxed uppercase border border-gray-600 border-solid hover:underline"
+                          href="#"
+                        >
+                          gå til kasse
+                        </a>
+                      </Link>
+                    </td>
+                  </tr>
                 </tbody>
               </table>
             </div>

components/Header/PageTitle.component.jsx

@@ -2,14 +2,14 @@ const PageTitle = ({ title, marginleft }) => {
   return (
     <>
       {marginleft ? (
-        <section className="container pl-6 mx-auto mt-24 bg-white">
-          <span className="py-2 text-xl font-bold tracking-wide text-left text-gray-800 no-underline uppercase hover:no-underline">
+        <section className="container pl-8 mx-auto mt-24 text-center bg-white">
+          <span className="py-2 text-xl font-bold tracking-wide text-gray-800 no-underline uppercase hover:no-underline">
             {title}
           </span>
         </section>
       ) : (
-        <section className="container pl-4 mx-auto mt-24 bg-white">
-          <span className="py-2 text-xl font-bold tracking-wide text-left text-gray-800 no-underline uppercase hover:no-underline">
+        <section className="container pl-4 mx-auto mt-24 text-center bg-white">
+          <span className="py-2 text-xl font-bold tracking-wide text-gray-800 no-underline uppercase hover:no-underline">
             {title}
           </span>
         </section>

components/Index/Hero.component.jsx

@@ -16,7 +16,7 @@ const Hero = () => {
           </h1>
 
           <a
-            className="inline-block px-6 py-3 text-xl leading-relaxed border border-gray-600 border-solid hover:underline"
+            className="inline-block px-6 py-3 text-xl leading-relaxed uppercase border border-gray-600 border-solid hover:underline"
             href="#"
           >
             Kjøp Nå

pages/cart.js renamed to pages/handlekurv.js

@@ -1,11 +1,11 @@
 import CartItemsContainer from '../components/Cart/CartPage/CartItemsContainer.component';
 
-const Cart = () => {
+const Handlekurv = () => {
   return (
     <>
       <CartItemsContainer />
     </>
   );
 };
 
-export default Cart;
+export default Handlekurv;

pages/checkout.js renamed to pages/kasse.js

@@ -1,5 +1,5 @@
 import CheckoutForm from '../components/Checkout/CheckoutForm.component';
 
-const Checkout = () => <CheckoutForm />;
+const Handlekurv = () => <CheckoutForm />;
 
-export default Checkout;
+export default Handlekurv;

pages/produkter.js

@@ -17,7 +17,7 @@ const Produkter = ({ products }) => {
 
   return (
     <>
-      <PageTitle title="Produkter" marginleft="true" />
+      <PageTitle title="Produkter" marginleft="50" />
 
       {products && <IndexProducts products={products} />}