@shopify/create-hydrogen 1.0.0-alpha.23 → 1.0.4

package/templates/template-hydrogen-default/src/components/ProductDetails.client.jsx

@@ -0,0 +1,233 @@
+import {
+  flattenConnection,
+  useProduct,
+  useParsedMetafields,
+  ProductProvider,
+  ProductTitle,
+  ProductDescription,
+  ProductPrice,
+  AddToCartButton,
+  BuyNowButton,
+} from '@shopify/hydrogen/client';
+import ProductOptions from './ProductOptions.client';
+import Gallery from './Gallery.client';
+import {
+  BUTTON_PRIMARY_CLASSES,
+  BUTTON_SECONDARY_CLASSES,
+} from './Button.client';
+
+function AddToCartMarkup() {
+  const {selectedVariant} = useProduct();
+  const isOutOfStock = !selectedVariant.availableForSale;
+
+  return (
+    <div className="space-y-2 mb-8">
+      <AddToCartButton
+        className={BUTTON_PRIMARY_CLASSES}
+        disabled={isOutOfStock}
+      >
+        {isOutOfStock ? 'Out of stock' : 'Add to bag'}
+      </AddToCartButton>
+      {isOutOfStock ? (
+        <p className="text-black text-center">Available in 2-3 weeks</p>
+      ) : (
+        <BuyNowButton
+          variantId={selectedVariant.id}
+          className={BUTTON_SECONDARY_CLASSES}
+        >
+          Buy it now
+        </BuyNowButton>
+      )}
+    </div>
+  );
+}
+
+function SizeChart() {
+  return (
+    <>
+      <h3
+        className="text-xl text-black font-semibold mt-8 mb-4"
+        id="size-chart"
+      >
+        Size Chart
+      </h3>
+      <table className="min-w-full table-fixed text-sm text-center bg-white">
+        <thead>
+          <tr className="bg-black text-white">
+            <th className="w-1/4 py-2 px-4 font-normal">Board Size</th>
+            <th className="w-1/4 py-2 px-4 font-normal">154</th>
+            <th className="w-1/4 py-2 px-4 font-normal">158</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="p-3 border border-black">Weight Range</td>
+            <td className="p-3 border border-black">120-180 lbs. /54-82kg</td>
+            <td className="p-3 border border-black">150-200 lbs. /68-91 kg</td>
+          </tr>
+          <tr>
+            <td className="p-3 border border-black">Waist Width</td>
+            <td className="p-3 border border-black">246mm</td>
+            <td className="p-3 border border-black">255mm</td>
+          </tr>
+          <tr>
+            <td className="p-3 border border-black">Stance Width</td>
+            <td className="p-3 border border-black">-40</td>
+            <td className="p-3 border border-black">-40</td>
+          </tr>
+          <tr>
+            <td className="p-3 border border-black">Binding Sizes</td>
+            <td className="p-3 border border-black">
+              Men&rsquo;s S/M, Women&rsquo;s S/M
+            </td>
+            <td className="p-3 border border-black">
+              Men&rsquo;s L, Women&rsquo;s L
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  );
+}
+
+export default function ProductDetails({product}) {
+  const initialVariant = flattenConnection(product.variants)[0];
+
+  const productMetafields = useParsedMetafields(product.metafields);
+  const sizeChartMetafield = productMetafields.find(
+    (metafield) =>
+      metafield.namespace === 'my_fields' && metafield.key === 'size_chart',
+  );
+  const sustainableMetafield = productMetafields.find(
+    (metafield) =>
+      metafield.namespace === 'my_fields' && metafield.key === 'sustainable',
+  );
+  const lifetimeWarrantyMetafield = productMetafields.find(
+    (metafield) =>
+      metafield.namespace === 'my_fields' &&
+      metafield.key === 'lifetime_warranty',
+  );
+
+  return (
+    <>
+      <ProductProvider data={product} initialVariantId={initialVariant.id}>
+        <div className="grid grid-cols-1 md:grid-cols-[2fr,1fr] gap-x-8 my-16">
+          <div className="md:hidden mt-5 mb-8">
+            <ProductTitle
+              as="h1"
+              className="text-4xl font-bold text-black mb-4"
+            />
+            {product.vendor && (
+              <div className="text-sm font-medium mb-2 text-gray-900">
+                {product.vendor}
+              </div>
+            )}
+            <span />
+            <div className="flex justify-between md:block">
+              <ProductPrice
+                className="text-gray-500 line-through text-lg font-semibold"
+                priceType="compareAt"
+                variantId={initialVariant.id}
+              />
+              <ProductPrice
+                className="text-gray-900 text-lg font-semibold"
+                variantId={initialVariant.id}
+              />
+            </div>
+          </div>
+
+          <Gallery />
+
+          <div>
+            <div className="hidden md:block">
+              <ProductTitle
+                as="h1"
+                className="text-5xl font-bold text-black mb-4"
+              />
+              {product.vendor && (
+                <div className="text-sm font-medium mb-2 text-gray-900">
+                  {product.vendor}
+                </div>
+              )}
+              <ProductPrice
+                className="text-gray-500 line-through text-lg font-semibold"
+                priceType="compareAt"
+                variantId={initialVariant.id}
+              />
+              <ProductPrice
+                className="text-gray-900 text-lg font-semibold"
+                variantId={initialVariant.id}
+              />
+            </div>
+            {/* Product Options */}
+            <div className="mt-8">
+              <ProductOptions />
+              {sizeChartMetafield?.value && (
+                <a
+                  href="#size-chart"
+                  className="block underline text-gray-500 text-sm tracking-wide my-4"
+                >
+                  Size Chart
+                </a>
+              )}
+              <AddToCartMarkup />
+              <div className="flex items space-x-4">
+                {sustainableMetafield?.value && (
+                  <span className="flex items-center mb-8">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="stroke-current text-blue-600 mr-3"
+                    >
+                      <path
+                        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364-.7071-.7071M6.34315 6.34315l-.70711-.70711m12.72796.00005-.7071.70711M6.3432 17.6569l-.70711.7071M16 12c0 2.2091-1.7909 4-4 4-2.20914 0-4-1.7909-4-4 0-2.20914 1.79086-4 4-4 2.2091 0 4 1.79086 4 4Z"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-900 font-medium">
+                      Sustainable Material
+                    </span>
+                  </span>
+                )}
+                {lifetimeWarrantyMetafield?.value && (
+                  <span className="flex items-center mb-8">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="stroke-current text-blue-600 mr-3"
+                    >
+                      <path
+                        d="M9 12L11 14L15 10M20.6179 5.98434C20.4132 5.99472 20.2072 5.99997 20 5.99997C16.9265 5.99997 14.123 4.84453 11.9999 2.94434C9.87691 4.84446 7.07339 5.99985 4 5.99985C3.79277 5.99985 3.58678 5.9946 3.38213 5.98422C3.1327 6.94783 3 7.95842 3 9.00001C3 14.5915 6.82432 19.2898 12 20.622C17.1757 19.2898 21 14.5915 21 9.00001C21 7.95847 20.8673 6.94791 20.6179 5.98434Z"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-900 font-medium">
+                      Lifetime Warranty
+                    </span>
+                  </span>
+                )}
+              </div>
+            </div>
+            {/* Product Description */}
+            <ProductDescription className="prose border-t border-gray-200 pt-6 text-black text-md" />
+            {sizeChartMetafield?.value && (
+              <div className="border-t border-gray-200">
+                <SizeChart />
+              </div>
+            )}
+          </div>
+        </div>
+      </ProductProvider>
+    </>
+  );
+}

package/{template-hydrogen → templates/template-hydrogen-default}/src/components/ProductOptions.client.jsx

@@ -1,5 +1,8 @@
 import {useProduct} from '@shopify/hydrogen/client';
 
+/**
+ * A client component that tracks a selected variant and/or selling plan state, as well as callbacks for modifying the state
+ */
 export default function ProductOptions() {
   const {options, setSelectedOption, selectedOptions} = useProduct();
 
@@ -7,11 +10,11 @@ export default function ProductOptions() {
     <>
       {options.map(({name, values}) => {
         return (
-          <fieldset key={name} className="mb-6">
-            <legend className="mb-2 d:mb-4 md:text-xl font-medium text-gray-900">
+          <fieldset key={name} className="mt-8">
+            <legend className="mb-4 text-xl font-medium text-gray-900">
               {name}
             </legend>
-            <div className="flex items-center flex-wrap gap-2">
+            <div className="flex items-center flex-wrap gap-4">
               {values.map((value) => {
                 const checked = selectedOptions[name] === value;
                 const id = `option-${name}-${value}`;
@@ -28,7 +31,7 @@ export default function ProductOptions() {
                       onChange={() => setSelectedOption(name, value)}
                     />
                     <div
-                      className={`p-2 border rounded-md cursor-pointer text-sm md:text-md ${
+                      className={`p-2 border cursor-pointer rounded text-sm md:text-md ${
                         checked ? 'bg-gray-900 text-white' : 'text-gray-900'
                       }`}
                     >

package/templates/template-hydrogen-default/src/components/Welcome.server.jsx

@@ -0,0 +1,188 @@
+import {useShopQuery, flattenConnection, Link} from '@shopify/hydrogen';
+import gql from 'graphql-tag';
+import {Suspense} from 'react';
+
+function ExternalIcon() {
+  return (
+    <svg
+      className="ml-3"
+      width="15"
+      height="14"
+      viewBox="0 0 15 14"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+    >
+      <path d="M8.11963 0.000976562C7.56734 0.000976562 7.11963 0.448692 7.11963 1.00098C7.11963 1.55326 7.56734 2.00098 8.11963 2.00098H10.7054L4.41252 8.29387C4.022 8.68439 4.022 9.31756 4.41252 9.70808C4.80305 10.0986 5.43621 10.0986 5.82674 9.70808L12.1196 3.41519V6.00098C12.1196 6.55326 12.5673 7.00098 13.1196 7.00098C13.6719 7.00098 14.1196 6.55326 14.1196 6.00098V1.00098C14.1196 0.448692 13.6719 0.000976562 13.1196 0.000976562H8.11963Z" />
+      <path d="M2.11963 2.00098C1.01506 2.00098 0.119629 2.89641 0.119629 4.00098V12.001C0.119629 13.1055 1.01506 14.001 2.11963 14.001H10.1196C11.2242 14.001 12.1196 13.1055 12.1196 12.001V9.00098C12.1196 8.44869 11.6719 8.00098 11.1196 8.00098C10.5673 8.00098 10.1196 8.44869 10.1196 9.00098V12.001H2.11963V4.00098L5.11963 4.00098C5.67191 4.00098 6.11963 3.55326 6.11963 3.00098C6.11963 2.44869 5.67191 2.00098 5.11963 2.00098H2.11963Z" />
+    </svg>
+  );
+}
+
+function DocsButton({url, label}) {
+  return (
+    <a
+      href={url}
+      target="_blank"
+      className="bg-white shadow py-2 px-5 rounded-full inline-flex items-center hover:opacity-80"
+      rel="noreferrer"
+    >
+      {label}
+      <ExternalIcon />
+    </a>
+  );
+}
+
+function BoxFallback() {
+  return (
+    <div className="bg-white p-12 shadow-xl rounded-xl text-gray-900 h-60"></div>
+  );
+}
+
+function StorefrontInfo() {
+  const {data} = useShopQuery({query: QUERY, preload: true});
+  const shopName = data ? data.shop.name : '';
+  const products = data && flattenConnection(data.products);
+  const collections = data && flattenConnection(data.collections);
+  const totalProducts = products && products.length;
+  const totalCollections = collections && collections.length;
+
+  const pluralize = (count, noun, suffix = 's') =>
+    `${count} ${noun}${count === 1 ? '' : suffix}`;
+  return (
+    <div className="bg-white p-12 shadow-xl rounded-xl text-gray-900">
+      <p className="text-md font-medium uppercase mb-4">Connected Storefront</p>
+      <h2 className="text-2xl font-bold mb-4">{shopName}</h2>
+      <p className="text-md">
+        {pluralize(totalProducts, 'Product')}
+        {', '}
+        {pluralize(totalCollections, 'Collection')}
+      </p>
+      {totalProducts === 0 && totalCollections === 0 && (
+        <div className="py-2 px-3 bg-red-100 text-md">
+          Use the{' '}
+          <a
+            href="https://shopify.dev/apps/tools/cli/getting-started"
+            className="text-primary font-mono font-bold underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Shopify CLI
+          </a>{' '}
+          to populate sample products and collections.
+        </div>
+      )}
+      <hr className="my-4" />
+      <a
+        href="https://shopify.dev/custom-storefronts/hydrogen/getting-started/create#step-2-update-information-about-your-shopify-storefront"
+        className="text-md inline-flex items-center text-blue-700 font-medium hover:underline"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Change your storefront access token
+        <ExternalIcon />
+      </a>
+    </div>
+  );
+}
+
+function TemplateLinks() {
+  const {data} = useShopQuery({query: QUERY, preload: true});
+  const products = data && flattenConnection(data.products);
+  const collections = data && flattenConnection(data.collections);
+
+  const firstProduct = products && products.length ? products[0].handle : '';
+  const firstCollection = collections[0] ? collections[0].handle : '';
+
+  return (
+    <div className="bg-white p-12 md:p-12 shadow-xl rounded-xl text-gray-900">
+      <p className="text-md font-medium uppercase mb-4">
+        Explore the templates
+      </p>
+      <ul>
+        <li className="mb-4">
+          <Link
+            to={`/collections/${firstCollection}`}
+            className="text-md font-medium text-blue-700 hover:underline"
+          >
+            Collection template
+          </Link>
+        </li>
+        <li className="mb-4">
+          <Link
+            to={`/products/${firstProduct}`}
+            className="text-md font-medium text-blue-700 hover:underline"
+          >
+            Product template
+          </Link>
+        </li>
+        <li>
+          <Link
+            to="/error-page"
+            className="text-md font-medium text-blue-700 hover:underline"
+          >
+            404 template
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * A server component that displays the content on the homepage of the Hydrogen app
+ */
+export default function Welcome() {
+  return (
+    <div className="text-gray-900 pt-16 rounded-[40px] my-16 px-4 xl:px-12 bg-gradient-to-b from-white -mx-4 xl:-mx-12">
+      <div className="text-center mb-16">
+        <h1 className="font-extrabold mb-4 text-5xl md:text-7xl">
+          Hello, Hydrogen
+        </h1>
+        <p className="text-lg mb-8">
+          Welcome to your custom storefront. Let&rsquo;s get building.
+        </p>
+        <div className="flex flex-col lg:flex-row justify-center items-center gap-8 text-gray-700">
+          <DocsButton
+            url="https://shopify.dev/custom-storefronts/hydrogen"
+            label="Browse Hydrogen documentation"
+          />
+          <DocsButton url="/graphql" label="Open the GraphiQL explorer" />
+          <DocsButton
+            url="https://github.com/Shopify/hydrogen-examples"
+            label="Explore Hydrogen examples"
+          />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
+        <Suspense fallback={<BoxFallback />}>
+          <StorefrontInfo />
+        </Suspense>
+        <Suspense fallback={<BoxFallback />}>
+          <TemplateLinks />
+        </Suspense>
+      </div>
+    </div>
+  );
+}
+
+const QUERY = gql`
+  query welcomeContent {
+    shop {
+      name
+    }
+    products(first: 250) {
+      edges {
+        node {
+          handle
+        }
+      }
+    }
+    collections(first: 250) {
+      edges {
+        node {
+          handle
+        }
+      }
+    }
+  }
+`;

package/{template-hydrogen → templates/template-hydrogen-default}/src/index.css

@@ -2,6 +2,37 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+  .scroll-snap-x {
+    scroll-snap-type: x mandatory;
+  }
+  .snap-start {
+    scroll-snap-align: start;
+  }
+  .snap-smooth {
+    scroll-behavior: smooth;
+  }
+  .snap-px-4 {
+    scroll-padding-left: 1rem;
+    scroll-padding-right: 1rem;
+  }
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
+* {
+  font-variant-ligatures: none;
+}
+
+html {
+  scroll-padding-top: 10rem;
+}
+
 model-viewer::part(default-progress-mask) {
   display: none;
 }

package/templates/template-hydrogen-default/src/pages/collections/[handle].server.jsx

@@ -0,0 +1,105 @@
+import {
+  MediaFileFragment,
+  ProductProviderFragment,
+  useShopQuery,
+  flattenConnection,
+  RawHtml,
+  Seo,
+} from '@shopify/hydrogen';
+import gql from 'graphql-tag';
+
+import LoadMoreProducts from '../../components/LoadMoreProducts.client';
+import Layout from '../../components/Layout.server';
+import ProductCard from '../../components/ProductCard';
+import NotFound from '../../components/NotFound.server';
+
+export default function Collection({
+  country = {isoCode: 'US'},
+  collectionProductCount = 24,
+  params,
+}) {
+  const {handle} = params;
+  const {data} = useShopQuery({
+    query: QUERY,
+    variables: {
+      handle,
+      country: country.isoCode,
+      numProducts: collectionProductCount,
+    },
+    preload: true,
+  });
+
+  if (data?.collection == null) {
+    return <NotFound />;
+  }
+
+  const collection = data.collection;
+  const products = flattenConnection(collection.products);
+  const hasNextPage = data.collection.products.pageInfo.hasNextPage;
+
+  return (
+    <Layout>
+      {/* the seo object will be expose in API version 2022-04 or later */}
+      <Seo type="collection" data={{seo: {}, ...collection}} />
+      <h1 className="font-bold text-4xl md:text-5xl text-gray-900 mb-6 mt-6">
+        {collection.title}
+      </h1>
+      <RawHtml string={collection.descriptionHtml} className="text-lg" />
+      <p className="text-sm text-gray-500 mt-5 mb-5">
+        {products.length} {products.length > 1 ? 'products' : 'product'}
+      </p>
+      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+        {products.map((product) => (
+          <li key={product.id}>
+            <ProductCard product={product} />
+          </li>
+        ))}
+      </ul>
+      {hasNextPage && (
+        <LoadMoreProducts startingCount={collectionProductCount} />
+      )}
+    </Layout>
+  );
+}
+
+const QUERY = gql`
+  query CollectionDetails(
+    $handle: String!
+    $country: CountryCode
+    $numProducts: Int!
+    $includeReferenceMetafieldDetails: Boolean = false
+    $numProductMetafields: Int = 0
+    $numProductVariants: Int = 250
+    $numProductMedia: Int = 6
+    $numProductVariantMetafields: Int = 0
+    $numProductVariantSellingPlanAllocations: Int = 0
+    $numProductSellingPlanGroups: Int = 0
+    $numProductSellingPlans: Int = 0
+  ) @inContext(country: $country) {
+    collection(handle: $handle) {
+      id
+      title
+      description
+      descriptionHtml
+      image {
+        url
+        width
+        height
+      }
+      products(first: $numProducts) {
+        edges {
+          node {
+            vendor
+            ...ProductProviderFragment
+          }
+        }
+        pageInfo {
+          hasNextPage
+        }
+      }
+    }
+  }
+
+  ${MediaFileFragment}
+  ${ProductProviderFragment}
+`;