ساخت فروشگاه تجارت الکترونیک: راهنمای گام به گام با Solidjs و Medusa

npm install @medusajs/medusa-cli -g

medusa new my-medusa-store --seed

medusa develop

git clone https://github.com/medusajs/admin medusa-admin

npm install

npm start

npx degit solidjs/templates/js solid-app

cd solid-app
npm install

npm run dev

npm install @suid/material @suid/icons-material

npm i @solidjs/router

npm install @medusajs/medusa-js

VITE_baseUrl=http://localhost:9000

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

//https://vitejs.dev/config/
export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 8000,
  },
  build: {
    target: 'esnext',
  },
});

import Medusa from "@medusajs/medusa-js"

const medusaClient = new Medusa({ baseUrl: import.meta.env.VITE_MEDUSA_SERVER_URL })

export { medusaClient }

//Header.jsx
import { A } from "@solidjs/router";
import { Box } from "@suid/material";
import { Typography, IconButton, AppBar, Toolbar } from "@suid/material";
import ShoppingCartIcon from "@suid/icons-material/ShoppingCart";

const Header = () => {
  const cartCount = localStorage.getItem("cartCount") ?? 0;

  return (
    <Box>
      <AppBar position="fixed" color="primary">
        <Toolbar>
          <Box
            sx={{
              display: "flex",
              width: "100%",
              alignItems: "center",
              flexDirection: {
                lg: "row",
                md: "column",
                sm: "column",
                xs: "row",
              },
              justifyContent: "space-between",
            }}
          >
            <Typography
              variant="h6"
              component="h6"
              sx={{
                marginBottom: { lg: "0", md: "0.7rem", sm: "0.7rem", xs: "0" },
              }}
            >
              Reuben09
            </Typography>
          </Box>

          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              marginBottom: { lg: "0", md: "0.7rem", sm: "0.7rem", xs: "0" },
            }}
          >
            <A href="/">
              <Typography
                sx={{
                  marginRight: "1rem",
                  fontSize: "1.1rem",
                  cursor: "pointer",
                }}
              >
                Home
              </Typography>
            </A>
            <A href="/products">
              <Typography
                sx={{
                  marginRight: "1rem",
                  fontSize: "1.1rem",
                  cursor: "pointer",
                }}
              >
                Products
              </Typography>
            </A>
            <IconButton>
              <ShoppingCartIcon sx={{ color: "#fff" }} />
            </IconButton>
            <p>{cartCount}</p>
          </Box>
        </Toolbar>
      </AppBar>
    </Box>
  );
};

export default Header;

//ProductList.jsx
import { createEffect, createSignal, For } from "solid-js";
import { A } from "@solidjs/router";
import { Box, Typography, Link } from "@suid/material";
import { medusaClient } from "../utils/client.js";

function ProductList() {
  const [products, setProducts] = createSignal([]);
  createEffect(() => {
    const fetchProducts = async () => {
      const res = await medusaClient.products.list();
      setProducts(res.products);
    };
    fetchProducts();
  });
  return (
    <>
      <Box
        sx={{
          marginTop: "2rem",
          paddingLeft: { lg: "4rem", xs: "1.5rem" },
          paddingRight: { lg: "4rem", xs: "1.5rem" },
        }}
        component="section"
      >
        <Typography
          sx={{
            textAlign: "center",
            fontSize: "1.5rem",
            marginBottom: "2rem",
          }}
        >
          Featured Products
        </Typography>

        <Box sx={{ margin: "0 2rem" }}>
          <Box
            sx={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr 1fr 1fr",
              gridGap: "2rem",
            }}
          >
            <For each={products()}>
              {(product) => (
                <Box
                  component="div"
                  sx={{
                    backgroundColor: "rgb(231, 231, 231)",
                    height: "350px",
                    padding: "0.5rem",
                  }}
                >
                  <Box component="div" sx={{ height: "12rem" }}>
                    <Box
                      component="img"
                      src={product?.thumbnail}
                      sx={{
                        height: "12rem",
                        width: "100%",
                        objectFit: "cover",
                      }}
                    />
                  </Box>
                  <Typography
                    sx={{
                      padding: "1rem 0",
                      textAlign: "center",
                      fontWeight: "600",
                    }}
                  >
                    {product?.title}
                  </Typography>
                  <Typography sx={{ textAlign: "center" }}>
                    &euro; {product?.variants[0].prices[0].amount / 100}
                  </Typography>
                  <Box sx={{ textAlign: "center" }}>
                    <Link underline="always">
                      <A href={`/products/${product.id}`}>See product</A>
                    </Link>
                  </Box>
                </Box>
              )}
            </For>
          </Box>
        </Box>
      </Box>
    </>
  );
}

export default ProductList;

import {
    Grid,
    Box,
    Typography,
    Input,
    IconButton,
    Button
  } from "@suid/material";
function NewsLetter() {
    return (
      <Box
        component="section"
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "column",
          paddingLeft: { lg: "4rem", xs: "2rem" },
          paddingRight: { lg: "4rem", xs: "2rem" }
        }}
      >
        <Box component="form">
          <Typography
            variant="h2"
            mt={10}
            sx={{
              textAlign: "center",
              fontSize: "1.5rem",
              marginBottom: "0.3rem",
            }}
          >
            {" "}
            Subscribe to our newsletter
          </Typography>
          <Typography sx={{textAlign: "center", marginBottom: "1rem" }}>
            Get 10% off your first purchase and stay on top of the latest in
            Debutify, it's win-win-WIN!
          </Typography>
          <Box sx={{marginBottom: "2rem" }}>
            <Input
              placeholder="First Name"
              sx={{textAlign: "center", width: "100%" }}
            />
          </Box>
          <Box sx={{marginBottom: "2rem" }}>
            <Input
              placeholder="Your Email"
              sx={{textAlign: "center", width: "100%" }}
            />
          </Box>
          <Box sx={{textAlign: "center", width: "100%", marginBottom: "1rem" }}>
            <IconButton>
              <Button variant="contained" color="primary">
                Subscribe
              </Button>
            </IconButton>
          </Box>
        </Box>
      </Box>
    );
  }

  export default NewsLetter;

import { Box, Typography } from "@suid/material";
import NewsLetter from "./NewsLetter";

function Footer (){
    return (
        <>
       <Box component="section" sx={{ marginBottom: "2rem" }}>
        <NewsLetter />
      </Box>
      <Box
      component="div"
      sx={{textAlign: "center", backgroundColor: "#1976D2", padding: "1rem" }}
      color="primary"
    >
      <Box
        component="a"
        sx={{textAlign: "center", color: "#fff" }}
        href="https://github.com/Reuben09"
      >
        created by Reuben09
      </Box>
    </Box>
        </>
    )
}

export default Footer;

import { Box, Typography, IconButton, Button } from "@suid/material";
import ProductList from '../component/ProductList'
import Footer from '../component/Footer'

function Home (){
    return <div>
        <Box
        sx={{
          backgroundImage:
            "url(https://images.unsplash.com/photo-1552346154-21d32810aba3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80)",
          width: "100%",
          height: "80vh",
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
          marginBottom: "5rem"
        }}
      >
        <Box
          sx={{
            width: "100%",
            height: "80vh",
            backgroundColor: "rgba(25, 118, 210, 0.2)",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <Typography
            sx={{
              fontSize: "3rem",
              color: "#ffffff",
            }}
          >
            Reuben09
          </Typography>
          <Typography
            sx={{
              fontSize: "3rem",
              color: "#ffffff",
            }}
          >
            Sneakers
          </Typography>
          <Typography sx={{textAlign: "center", color: "#ffffff" }}>
            Users of the highest converting shopify theme deserve a lifestyle to
            match!
          </Typography>
          <Box sx={{marginTop: "1rem" }}>
            <IconButton>
              <Button
                variant="contained"
                color="primary"
                sx={{marginRight: "0.5rem" }}
              >
                Shop now
              </Button>
            </IconButton>
            <IconButton>
              <Button
                variant="contained"
                color="primary"
                sx={{marginLeft: "0.5rem" }}
              >
                Learn more
              </Button>
            </IconButton>
          </Box>
        </Box>
      </Box>
      <Box component="div" sx={{marginBottom: "2rem" }}>
      <ProductList />
      </Box>
      <Box section="footer">
        <Footer />
      </Box>
    </div>
}

export default Home;

import ProductList from '../component/ProductList'
import Footer from '../component/Footer'

function Products (){
  return <div>
    <ProductList />
    <Footer />
  </div>
}

export default Products;

import { useParams } from "@solidjs/router";
import { createEffect, createSignal } from 'solid-js'
import {Container, Box, Grid, IconButton, Button, Typography} from '@suid/material';
import Footer from '../component/Footer'
import { medusaClient } from '../utils/client.js'

const addProduct = async (cartId, product) => {
    const { cart } = await medusaClient.carts.lineItems.create(cartId, {
        variant_id: product()?.variants[0].id,
        quantity: 1
    })
    console.log(cart);
    localStorage.setItem('cartCount', cart.items.length)
    setTimeout(window.location.reload(), 5000)
}


function SingleProduct (){
    const [productItem, setProductItem] = createSignal();
    const [regionId, setRegionId] = createSignal("");
    const params = useParams();
    const productId = params.productId;

    createEffect(()=> {
        const fetchSingleProduct = async () => {
            const results = await medusaClient.products.retrieve(productId);
            setProductItem(results.product)
        }

        const fetchRegions = async () => {
            const results = await medusaClient.regions.list()
            setRegionId(results.regions[1].id)
        }

        fetchSingleProduct()
        fetchRegions()
      })

      const handleAddToCart = async () => {
        const cartId = localStorage.getItem('cartId');

        if (cartId) {
            addProduct(cartId, productItem)
        } else {
            const { cart } = await medusaClient.carts.create({ region_id: regionId })
            localStorage.setItem('cartId', cart.id);
            addProduct(cart.id, productItem)
        }
    }
        return <>
        <Box sx={{marginTop: "7rem"}}>
          <Container maxWidth="sm">
          <Grid container spacing={2}>
             <Grid item xs={6}>
             <Box>
                      <img sx={{width:"500px"}}
                          alt={productItem()?.title}
                          src={productItem()?.thumbnail} />
                  </Box>
                  </Grid>
                  <Grid item xs={6}>
                  <Box sx={{marginTop: "2rem", display: "flex", justifyContent: "flex-start", alignItems: "flex-start", flexDirection: "column"}}>
                      <Typography variant="h5" mb={2}>{productItem()?.title}</Typography>
                      <Typography mb={2}>&euro; {productItem()?.variants[0].prices[0].amount / 100 }</Typography>
                      <Typography mb={2}>{productItem()?.description}</Typography>
                      <IconButton>
                        <Button onClick={handleAddToCart} variant="contained" color="primary">
                          Add to cart
                        </Button>
                      </IconButton>
                  </Box>
                  </Grid>
          </Grid>
          </Container>
        </Box>
        <Footer />
        </>
}

export default SingleProduct;

/* @refresh reload */
import { render } from 'solid-js/web';
import { Router } from "@solidjs/router";
import './index.css';
import App from './App';

const root = document.getElementById('root');

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got mispelled?',
  );
}

render(() => 
<Router>
<App />
</Router>, root);

import { Routes, Route } from "@solidjs/router"
import { lazy } from "solid-js";
import Header from './component/Header'
const Products = lazy(() => import("./pages/Products"));
const Home = lazy(() => import("./pages/Home"));
const SingleProduct = lazy(() => import("./pages/SingleProduct"));

function App() {
  return (
    <div>
      <Header />
      <Routes>
      <Route path="/" component={Home} />
      <Route path="/products" component={Products}  />
      <Route path="/products/:productId" component={SingleProduct}  />
      </Routes>
    </div>
  );
}

export default App;