serifcolakel

import React from "react";
import ProductPageContent from "../../components/ProductPageContent";
import { getProduct, getAllProducts } from "../../lib/shopify";

export default function ProductPage({ product }) {
  return (
    <div className="min-h-screen py-12 sm:pt-20">
      <ProductPageContent product={product} />
    </div>
  );

serifcolakel

module.exports = {
  reactStrictMode: true,
  // env is used to define the environment variables that are available to the app
  env: {
    SHOPIFY_STORE_DOMAIN: process.env.SHOPIFY_STORE_DOMAIN,
    SHOPIFY_STOREFRONT_ACCESTOKEN: process.env.SHOPIFY_STOREFRONT_ACCESTOKEN,
  },
  // shopify will use the public folder as a static root
  images: {
    domains: ["cdn.shopify.com"],

serifcolakel

query {
  products(first: 250){
    edges{
      node{
        handle
        id
  
      }
    }
  }

serifcolakel

{
  collectionByHandle(handle: "frontpage") {
    id
    title
    products(first: 25) {
      edges {
        node {
          id
          title
          handle

serifcolakel

const domain = process.env.SHOPIFY_STORE_DOMAIN;
const storeFrontAccessToken = process.env.SHOPIFY_STOREFRONT_ACCESTOKEN;

async function ShopifyData(query) {
  const URL = `${domain}/api/2022-01/graphql.json`;

  const options = {
    endpoint: URL,
    method: "POST",
    headers: {

serifcolakel

import styles from "../styles/Home.module.css";
import { getProductsInCollection } from "../lib/shopify";

// object destructuring to get the data from the query -> products
export default function Home({ products }) {
  console.log(products);
  return <div className={styles.container}>You are in the home Page</div>;
}

// this is the query that will be used to get the data from the shopify store

serifcolakel

import React from 'react'
import { ProductCard } from './ProductCard'

export default function Products({ products }) {
    return (
        <div className='bg-white'>
            <div className='max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8'>
                <h2 className='text-2xl font-extrabold text-black mb-6'>
                    Products
                </h2>

serifcolakel

export const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2
})

serifcolakel

import React from "react";
import Link from "next/link";
import Image from "next/image";
import { formatter } from "../utils/helpers";
export const ProductCard = ({ product, state }) => {
  const { handle, title } = product.node;
  const { altText, originalSrc } = product.node.images.edges[0].node;
  const price = !state
    ? product.node.priceRange.minVariantPrice.amount
    : product.node.priceRange.maxVariantPrice.amount;

serifcolakel

{
  products(first: 25) {
    edges {
      node {
        handle
        id
      }
    }
  }
}