+
+
+
+ );
+}
+
+const AsideContext = createContext
+ {
+ if (layout === 'aside') {
+ close();
+ }
+ }}
+ >
+
+ + {product.title} +
+ +-
+ {selectedOptions.map((option) => (
+
- + + {option.name}: {option.value} + + + ))} +
+ Quantity: {quantity}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+/**
+ * A button that removes a line item from the cart. It is disabled
+ * when the line item is new, and the server hasn't yet responded
+ * that it was successfully added to the cart.
+ */
+function CartLineRemoveButton({
+ lineIds,
+ disabled,
+}: {
+ lineIds: string[];
+ disabled: boolean;
+}) {
+ return (
+
+
+ );
+}
+
+function CartEmpty({
+ hidden = false,
+}: {
+ hidden: boolean;
+ layout?: CartMainProps['layout'];
+}) {
+ const {close} = useAside();
+ return (
+
+
+
+
+ {cartHasItems && -
+ {(cart?.lines?.nodes ?? []).map((line) => (
+
+
+
+ + Continue shopping → + +
+ );
+}
diff --git a/app/components/CartSummary.tsx b/app/components/CartSummary.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cfd15a8979567ba2bff30867f1ad28e337da8b95
--- /dev/null
+++ b/app/components/CartSummary.tsx
@@ -0,0 +1,101 @@
+import type {CartApiQueryFragment} from 'storefrontapi.generated';
+import type {CartLayout} from '~/components/CartMain';
+import {CartForm, Money, type OptimisticCart} from '@shopify/hydrogen';
+
+type CartSummaryProps = {
+ cart: OptimisticCart+
+ Looks like you haven’t added anything yet, let’s get you + started! +
++ + Continue shopping → + +
+
+ );
+}
+function CartCheckoutActions({checkoutUrl}: {checkoutUrl?: string}) {
+ if (!checkoutUrl) return null;
+
+ return (
+
+ );
+}
+
+function CartDiscounts({
+ discountCodes,
+}: {
+ discountCodes?: CartApiQueryFragment['discountCodes'];
+}) {
+ const codes: string[] =
+ discountCodes
+ ?.filter((discount) => discount.applicable)
+ ?.map(({code}) => code) || [];
+
+ return (
+ Totals
+-
+
- Subtotal +
-
+ {cart.cost?.subtotalAmount?.amount ? (
+
+ ) : ( + '-' + )} +
+
+ {/* Have existing discount, display it with a remove option */}
+
+
+
+ );
+}
+
+function UpdateDiscountForm({
+ discountCodes,
+ children,
+}: {
+ discountCodes?: string[];
+ children: React.ReactNode;
+}) {
+ return (
+ -
+
- Discount(s) +
+
+
+
+
+
+ {codes?.join(', ')}
+
+
+
+
+
+
+
+
+
+ {isLoading ? 'Loading...' : ↑ Load previous}
+
+ {resourcesClassName ? (
+
+ {isLoading ? 'Loading...' : Load more ↓}
+
+
+ );
+ }}
+ {resoucesMarkup}
+ ) : (
+ resoucesMarkup
+ )}
+
+ option.values.length > 1)}
+ variants={variants}
+ >
+ {({option}) =>
+
+ {
+ open('cart');
+ }}
+ lines={
+ selectedVariant
+ ? [
+ {
+ merchandiseId: selectedVariant.id,
+ quantity: 1,
+ selectedVariant,
+ },
+ ]
+ : []
+ }
+ >
+ {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
+
+
+ );
+}
+
+function ProductOptions({option}: {option: VariantOption}) {
+ return (
+ +
+
+
+ );
+}
diff --git a/app/components/ProductImage.tsx b/app/components/ProductImage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5f3ac1cce42216766adf1e12fe82d39566800243
--- /dev/null
+++ b/app/components/ProductImage.tsx
@@ -0,0 +1,23 @@
+import type {ProductVariantFragment} from 'storefrontapi.generated';
+import {Image} from '@shopify/hydrogen';
+
+export function ProductImage({
+ image,
+}: {
+ image: ProductVariantFragment['image'];
+}) {
+ if (!image) {
+ return ;
+ }
+ return (
+ {option.name}
+
+ {option.values.map(({value, isAvailable, isActive, to}) => {
+ return (
+
+ {value}
+
+ );
+ })}
+
+ +
+
+ );
+}
diff --git a/app/components/ProductPrice.tsx b/app/components/ProductPrice.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..32460ae28d4ff9c7850045aa8679aa6f9cc1f5dd
--- /dev/null
+++ b/app/components/ProductPrice.tsx
@@ -0,0 +1,27 @@
+import {Money} from '@shopify/hydrogen';
+import type {MoneyV2} from '@shopify/hydrogen/storefront-api-types';
+
+export function ProductPrice({
+ price,
+ compareAtPrice,
+}: {
+ price?: MoneyV2;
+ compareAtPrice?: MoneyV2 | null;
+}) {
+ return (
+
+ {compareAtPrice ? (
+
+ );
+}
diff --git a/app/components/SearchForm.tsx b/app/components/SearchForm.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d298850c4998c0a5c21c6e207844574e0db14f4e
--- /dev/null
+++ b/app/components/SearchForm.tsx
@@ -0,0 +1,68 @@
+import {useRef, useEffect} from 'react';
+import {Form, type FormProps} from '@remix-run/react';
+
+type SearchFormProps = Omit
+ {price ?
+
+
+ ) : price ? (
+
+
+
+ );
+}
+
+function SearchResultsPages({term, pages}: PartialSearchResult<'pages'>) {
+ if (!pages?.nodes.length) {
+ return null;
+ }
+
+ return (
+ Articles
+
+ {articles?.nodes?.map((article) => {
+ const articleUrl = urlWithTrackingParams({
+ baseUrl: `/blogs/${article.handle}`,
+ trackingParams: article.trackingParameters,
+ term,
+ });
+
+ return (
+
+
+
+ {article.title}
+
+
+ );
+ })}
+ +
+
+
+ );
+}
+
+function SearchResultsProducts({
+ term,
+ products,
+}: PartialSearchResult<'products'>) {
+ if (!products?.nodes.length) {
+ return null;
+ }
+
+ return (
+ Pages
+
+ {pages?.nodes?.map((page) => {
+ const pageUrl = urlWithTrackingParams({
+ baseUrl: `/pages/${page.handle}`,
+ trackingParams: page.trackingParameters,
+ term,
+ });
+
+ return (
+
+
+
+ {page.title}
+
+
+ );
+ })}
+ +
+
+ {({nodes, isLoading, NextLink, PreviousLink}) => {
+ const ItemsMarkup = nodes.map((product) => {
+ const productUrl = urlWithTrackingParams({
+ baseUrl: `/products/${product.handle}`,
+ trackingParams: product.trackingParameters,
+ term,
+ });
+
+ return (
+
+
+
+ );
+}
+
+function SearchResultsEmpty() {
+ return Products
+
+
+ {product.variants.nodes[0].image && (
+
+ );
+ });
+
+ return (
+
+
+
+ {product.title}
+ +
+
+ );
+ }}
+
+
+ {isLoading ? 'Loading...' : ↑ Load previous}
+
+
+
+ {ItemsMarkup}
+
+
+ +
+
+ {isLoading ? 'Loading...' : Load more ↓}
+
+
+ +
No results, try a different search.
; +} diff --git a/app/components/SearchResultsPredictive.tsx b/app/components/SearchResultsPredictive.tsx new file mode 100644 index 0000000000000000000000000000000000000000..4e6b014745cc6d8fc64e0ae950727b135ed47abb --- /dev/null +++ b/app/components/SearchResultsPredictive.tsx @@ -0,0 +1,322 @@ +import {Link, useFetcher, type Fetcher} from '@remix-run/react'; +import {Image, Money} from '@shopify/hydrogen'; +import React, {useRef, useEffect} from 'react'; +import { + getEmptyPredictiveSearchResult, + urlWithTrackingParams, + type PredictiveSearchReturn, +} from '~/lib/search'; +import {useAside} from './Aside'; + +type PredictiveSearchItems = PredictiveSearchReturn['result']['items']; + +type UsePredictiveSearchReturn = { + term: React.MutableRefObject
+
+ );
+}
+
+function SearchResultsPredictiveCollections({
+ term,
+ collections,
+ closeSearch,
+}: PartialPredictiveSearchResult<'collections'>) {
+ if (!collections.length) return null;
+
+ return (
+ Articles
+-
+ {articles.map((article) => {
+ const articleUrl = urlWithTrackingParams({
+ baseUrl: `/blogs/${article.blog.handle}/${article.handle}`,
+ trackingParams: article.trackingParameters,
+ term: term.current ?? '',
+ });
+
+ return (
+
-
+
+ {article.image?.url && (
+
+ )} + + {article.title} ++ +
+ );
+ })}
+
+
+ );
+}
+
+function SearchResultsPredictivePages({
+ term,
+ pages,
+ closeSearch,
+}: PartialPredictiveSearchResult<'pages'>) {
+ if (!pages.length) return null;
+
+ return (
+ Collections
+-
+ {collections.map((collection) => {
+ const colllectionUrl = urlWithTrackingParams({
+ baseUrl: `/collections/${collection.handle}`,
+ trackingParams: collection.trackingParameters,
+ term: term.current,
+ });
+
+ return (
+
-
+
+ {collection.image?.url && (
+
+ )} + + {collection.title} ++ +
+ );
+ })}
+
+
+ );
+}
+
+function SearchResultsPredictiveProducts({
+ term,
+ products,
+ closeSearch,
+}: PartialPredictiveSearchResult<'products'>) {
+ if (!products.length) return null;
+
+ return (
+ Pages
+-
+ {pages.map((page) => {
+ const pageUrl = urlWithTrackingParams({
+ baseUrl: `/pages/${page.handle}`,
+ trackingParams: page.trackingParameters,
+ term: term.current,
+ });
+
+ return (
+
-
+
+ + {page.title} ++ +
+ );
+ })}
+
+
+ );
+}
+
+function SearchResultsPredictiveQueries({
+ queries,
+ inputRef,
+}: PartialPredictiveSearchResult<'queries', 'inputRef'>) {
+ if (!queries.length) return null;
+
+ return (
+ Products
+-
+ {products.map((product) => {
+ const productUrl = urlWithTrackingParams({
+ baseUrl: `/products/${product.handle}`,
+ trackingParams: product.trackingParameters,
+ term: term.current,
+ });
+
+ const image = product?.variants?.nodes?.[0].image;
+ return (
+
-
+
+ {image && (
+
+ )} + ++ +{product.title}
+ + {product?.variants?.nodes?.[0].price && ( ++ )} + +
+ );
+ })}
+
+
+ );
+}
+
+const FEATURED_COLLECTION_QUERY = `#graphql
+ fragment FeaturedCollection on Collection {
+ id
+ title
+ image {
+ id
+ url
+ altText
+ width
+ height
+ }
+ handle
+ }
+ query FeaturedCollection($country: CountryCode, $language: LanguageCode)
+ @inContext(country: $country, language: $language) {
+ collections(first: 1, sortKey: UPDATED_AT, reverse: true) {
+ nodes {
+ ...FeaturedCollection
+ }
+ }
+ }
+` as const;
+
+const RECOMMENDED_PRODUCTS_QUERY = `#graphql
+ fragment RecommendedProduct on Product {
+ id
+ title
+ handle
+ priceRange {
+ minVariantPrice {
+ amount
+ currencyCode
+ }
+ }
+ images(first: 1) {
+ nodes {
+ id
+ url
+ altText
+ width
+ height
+ }
+ }
+ }
+ query RecommendedProducts ($country: CountryCode, $language: LanguageCode)
+ @inContext(country: $country, language: $language) {
+ products(first: 4, sortKey: UPDATED_AT, reverse: true) {
+ nodes {
+ ...RecommendedProduct
+ }
+ }
+ }
+` as const;
diff --git a/app/routes/account.$.tsx b/app/routes/account.$.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f18f79978735b3d7ea902e8cda6913ba67e96b35
--- /dev/null
+++ b/app/routes/account.$.tsx
@@ -0,0 +1,8 @@
+import {redirect, type LoaderFunctionArgs} from '@netlify/remix-runtime';
+
+// fallback wild card for all unauthenticated routes in account section
+export async function loader({context}: LoaderFunctionArgs) {
+ await context.customerAccount.handleAuthStatus();
+
+ return redirect('/account');
+}
diff --git a/app/routes/account._index.tsx b/app/routes/account._index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..731434e4341ef62ac53640debc582067938a7d6e
--- /dev/null
+++ b/app/routes/account._index.tsx
@@ -0,0 +1,5 @@
+import {redirect} from '@netlify/remix-runtime';
+
+export async function loader() {
+ return redirect('/account/orders');
+}
diff --git a/app/routes/account.addresses.tsx b/app/routes/account.addresses.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e32791689f15aff03c2cb7345ac7f999d1ebff91
--- /dev/null
+++ b/app/routes/account.addresses.tsx
@@ -0,0 +1,512 @@
+import type {CustomerAddressInput} from '@shopify/hydrogen/customer-account-api-types';
+import type {
+ AddressFragment,
+ CustomerFragment,
+} from 'customer-accountapi.generated';
+import {
+ json,
+ type ActionFunctionArgs,
+ type LoaderFunctionArgs,
+} from '@netlify/remix-runtime';
+import {
+ Form,
+ useActionData,
+ useNavigation,
+ useOutletContext,
+ type MetaFunction,
+ type Fetcher,
+} from '@remix-run/react';
+import {
+ UPDATE_ADDRESS_MUTATION,
+ DELETE_ADDRESS_MUTATION,
+ CREATE_ADDRESS_MUTATION,
+} from '~/graphql/customer-account/CustomerAddressMutations';
+
+export type ActionResponse = {
+ addressId?: string | null;
+ createdAddress?: AddressFragment;
+ defaultAddress?: string | null;
+ deletedAddress?: string | null;
+ error: RecordQueries
+-
+ {queries.map((suggestion) => {
+ if (!suggestion) return null;
+
+ return (
+
-
+ { + if (!inputRef.current) return; + inputRef.current.value = suggestion.text; + inputRef.current.focus(); + }} + dangerouslySetInnerHTML={{ + __html: suggestion?.styledText, + }} + /> + + ); + })} + ++ ); +} + +function SearchResultsPredictiveEmpty({ + term, +}: { + term: React.MutableRefObject
; +}) { + if (!term.current) { + return null; + } + + return ( + + No results found for
+ ); +} + +/** + * Hook that returns the predictive search results and fetcher and input ref. + * @example + * '''ts + * const { items, total, inputRef, term, fetcher } = usePredictiveSearch(); + * ''' + **/ +function usePredictiveSearch(): UsePredictiveSearchReturn { + const fetcher = useFetcher{term.current}
+({key: 'search'}); + const term = useRef (''); + const inputRef = useRef (null); + + if (fetcher?.state === 'loading') { + term.current = String(fetcher.formData?.get('q') || ''); + } + + // capture the search input element as a ref + useEffect(() => { + if (!inputRef.current) { + inputRef.current = document.querySelector('input[type="search"]'); + } + }, []); + + const {items, total} = + fetcher?.data?.result ?? getEmptyPredictiveSearchResult(); + + return {items, total, inputRef, term, fetcher}; +} diff --git a/app/entry.client.tsx b/app/entry.client.tsx new file mode 100644 index 0000000000000000000000000000000000000000..725d14603de052770584bd8647c80ad5f2090b60 --- /dev/null +++ b/app/entry.client.tsx @@ -0,0 +1,14 @@ +import {RemixBrowser} from '@remix-run/react'; +import {startTransition, StrictMode} from 'react'; +import {hydrateRoot} from 'react-dom/client'; + +if (!window.location.origin.includes('webcache.googleusercontent.com')) { + startTransition(() => { + hydrateRoot( + document, + + , + ); + }); +} diff --git a/app/entry.server.tsx b/app/entry.server.tsx new file mode 100644 index 0000000000000000000000000000000000000000..d4a772e29492b68bc367db471fd29b45aec5a763 --- /dev/null +++ b/app/entry.server.tsx @@ -0,0 +1,2 @@ +// @ts-ignore -- This is a Vite virtual module. It will be resolved at build time. +export {default} from 'virtual:netlify-server-entry'; diff --git a/app/graphql/customer-account/CustomerAddressMutations.ts b/app/graphql/customer-account/CustomerAddressMutations.ts new file mode 100644 index 0000000000000000000000000000000000000000..5e0336e8193c018c933db04fe674911f117aeb03 --- /dev/null +++ b/app/graphql/customer-account/CustomerAddressMutations.ts @@ -0,0 +1,61 @@ +// NOTE: https://shopify.dev/docs/api/customer/latest/mutations/customerAddressUpdate +export const UPDATE_ADDRESS_MUTATION = `#graphql + mutation customerAddressUpdate( + $address: CustomerAddressInput! + $addressId: ID! + $defaultAddress: Boolean + ) { + customerAddressUpdate( + address: $address + addressId: $addressId + defaultAddress: $defaultAddress + ) { + customerAddress { + id + } + userErrors { + code + field + message + } + } + } +` as const; + +// NOTE: https://shopify.dev/docs/api/customer/latest/mutations/customerAddressDelete +export const DELETE_ADDRESS_MUTATION = `#graphql + mutation customerAddressDelete( + $addressId: ID!, + ) { + customerAddressDelete(addressId: $addressId) { + deletedAddressId + userErrors { + code + field + message + } + } + } +` as const; + +// NOTE: https://shopify.dev/docs/api/customer/latest/mutations/customerAddressCreate +export const CREATE_ADDRESS_MUTATION = `#graphql + mutation customerAddressCreate( + $address: CustomerAddressInput! + $defaultAddress: Boolean + ) { + customerAddressCreate( + address: $address + defaultAddress: $defaultAddress + ) { + customerAddress { + id + } + userErrors { + code + field + message + } + } + } +` as const; diff --git a/app/graphql/customer-account/CustomerDetailsQuery.ts b/app/graphql/customer-account/CustomerDetailsQuery.ts new file mode 100644 index 0000000000000000000000000000000000000000..382d697217bc11480557eb36f3157e0ad0db193a --- /dev/null +++ b/app/graphql/customer-account/CustomerDetailsQuery.ts @@ -0,0 +1,40 @@ +// NOTE: https://shopify.dev/docs/api/customer/latest/objects/Customer +export const CUSTOMER_FRAGMENT = `#graphql + fragment Customer on Customer { + id + firstName + lastName + defaultAddress { + ...Address + } + addresses(first: 6) { + nodes { + ...Address + } + } + } + fragment Address on CustomerAddress { + id + formatted + firstName + lastName + company + address1 + address2 + territoryCode + zoneCode + city + zip + phoneNumber + } +` as const; + +// NOTE: https://shopify.dev/docs/api/customer/latest/queries/customer +export const CUSTOMER_DETAILS_QUERY = `#graphql + query CustomerDetails { + customer { + ...Customer + } + } + ${CUSTOMER_FRAGMENT} +` as const; diff --git a/app/graphql/customer-account/CustomerOrderQuery.ts b/app/graphql/customer-account/CustomerOrderQuery.ts new file mode 100644 index 0000000000000000000000000000000000000000..a34052087993f792055ae7524da70075e56b6b96 --- /dev/null +++ b/app/graphql/customer-account/CustomerOrderQuery.ts @@ -0,0 +1,87 @@ +// NOTE: https://shopify.dev/docs/api/customer/latest/queries/order +export const CUSTOMER_ORDER_QUERY = `#graphql + fragment OrderMoney on MoneyV2 { + amount + currencyCode + } + fragment DiscountApplication on DiscountApplication { + value { + __typename + ... on MoneyV2 { + ...OrderMoney + } + ... on PricingPercentageValue { + percentage + } + } + } + fragment OrderLineItemFull on LineItem { + id + title + quantity + price { + ...OrderMoney + } + discountAllocations { + allocatedAmount { + ...OrderMoney + } + discountApplication { + ...DiscountApplication + } + } + totalDiscount { + ...OrderMoney + } + image { + altText + height + url + id + width + } + variantTitle + } + fragment Order on Order { + id + name + statusPageUrl + processedAt + fulfillments(first: 1) { + nodes { + status + } + } + totalTax { + ...OrderMoney + } + totalPrice { + ...OrderMoney + } + subtotal { + ...OrderMoney + } + shippingAddress { + name + formatted(withName: true) + formattedArea + } + discountApplications(first: 100) { + nodes { + ...DiscountApplication + } + } + lineItems(first: 100) { + nodes { + ...OrderLineItemFull + } + } + } + query Order($orderId: ID!) { + order(id: $orderId) { + ... on Order { + ...Order + } + } + } +` as const; diff --git a/app/graphql/customer-account/CustomerOrdersQuery.ts b/app/graphql/customer-account/CustomerOrdersQuery.ts new file mode 100644 index 0000000000000000000000000000000000000000..c628322e2d973586e1159d65adbbb16b09c8878c --- /dev/null +++ b/app/graphql/customer-account/CustomerOrdersQuery.ts @@ -0,0 +1,58 @@ +// https://shopify.dev/docs/api/customer/latest/objects/Order +export const ORDER_ITEM_FRAGMENT = `#graphql + fragment OrderItem on Order { + totalPrice { + amount + currencyCode + } + financialStatus + fulfillments(first: 1) { + nodes { + status + } + } + id + number + processedAt + } +` as const; + +// https://shopify.dev/docs/api/customer/latest/objects/Customer +export const CUSTOMER_ORDERS_FRAGMENT = `#graphql + fragment CustomerOrders on Customer { + orders( + sortKey: PROCESSED_AT, + reverse: true, + first: $first, + last: $last, + before: $startCursor, + after: $endCursor + ) { + nodes { + ...OrderItem + } + pageInfo { + hasPreviousPage + hasNextPage + endCursor + startCursor + } + } + } + ${ORDER_ITEM_FRAGMENT} +` as const; + +// https://shopify.dev/docs/api/customer/latest/queries/customer +export const CUSTOMER_ORDERS_QUERY = `#graphql + ${CUSTOMER_ORDERS_FRAGMENT} + query CustomerOrders( + $endCursor: String + $first: Int + $last: Int + $startCursor: String + ) { + customer { + ...CustomerOrders + } + } +` as const; diff --git a/app/graphql/customer-account/CustomerUpdateMutation.ts b/app/graphql/customer-account/CustomerUpdateMutation.ts new file mode 100644 index 0000000000000000000000000000000000000000..ad250b77639b393acf10a5b5892013934cfa4819 --- /dev/null +++ b/app/graphql/customer-account/CustomerUpdateMutation.ts @@ -0,0 +1,24 @@ +export const CUSTOMER_UPDATE_MUTATION = `#graphql + # https://shopify.dev/docs/api/customer/latest/mutations/customerUpdate + mutation customerUpdate( + $customer: CustomerUpdateInput! + ){ + customerUpdate(input: $customer) { + customer { + firstName + lastName + emailAddress { + emailAddress + } + phoneNumber { + phoneNumber + } + } + userErrors { + code + field + message + } + } + } +` as const; diff --git a/app/lib/context.ts b/app/lib/context.ts new file mode 100644 index 0000000000000000000000000000000000000000..aea8299d005fdcb45f5a292c5b61702c01c529c4 --- /dev/null +++ b/app/lib/context.ts @@ -0,0 +1,46 @@ +import { + createHydrogenContext, + type HydrogenContext, + InMemoryCache, +} from '@shopify/hydrogen'; +import {AppSession} from '~/lib/session'; +import {CART_QUERY_FRAGMENT} from '~/lib/fragments'; + +/** + * The context implementation is separate from server.ts + * so that type can be extracted for AppLoadContext + */ +export async function createAppLoadContext( + request: Request, + env: Env, + executionContext: ExecutionContext, +): Promise+ { + /** + * Open a cache instance in the worker and a custom session instance. + */ + if (!env?.SESSION_SECRET) { + throw new Error('SESSION_SECRET environment variable is not set'); + } + + const session = await AppSession.init(request, [env.SESSION_SECRET]); + + const hydrogenContext = createHydrogenContext({ + env, + request, + cache: new InMemoryCache(), + waitUntil: executionContext.waitUntil, + session, + i18n: { + language: 'EN', + country: 'US', + }, + cart: { + queryFragment: CART_QUERY_FRAGMENT, + }, + }); + + return { + ...hydrogenContext, + // add your custom context here + }; +} diff --git a/app/lib/fragments.ts b/app/lib/fragments.ts new file mode 100644 index 0000000000000000000000000000000000000000..d08c7c0ac22a34384c06684ed1f38939926703b9 --- /dev/null +++ b/app/lib/fragments.ts @@ -0,0 +1,227 @@ +// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/cart +export const CART_QUERY_FRAGMENT = `#graphql + fragment Money on MoneyV2 { + currencyCode + amount + } + fragment CartLine on CartLine { + id + quantity + attributes { + key + value + } + cost { + totalAmount { + ...Money + } + amountPerQuantity { + ...Money + } + compareAtAmountPerQuantity { + ...Money + } + } + merchandise { + ... on ProductVariant { + id + availableForSale + compareAtPrice { + ...Money + } + price { + ...Money + } + requiresShipping + title + image { + id + url + altText + width + height + + } + product { + handle + title + id + vendor + } + selectedOptions { + name + value + } + } + } + } + fragment CartLineComponent on ComponentizableCartLine { + id + quantity + attributes { + key + value + } + cost { + totalAmount { + ...Money + } + amountPerQuantity { + ...Money + } + compareAtAmountPerQuantity { + ...Money + } + } + merchandise { + ... on ProductVariant { + id + availableForSale + compareAtPrice { + ...Money + } + price { + ...Money + } + requiresShipping + title + image { + id + url + altText + width + height + } + product { + handle + title + id + vendor + } + selectedOptions { + name + value + } + } + } + } + fragment CartApiQuery on Cart { + updatedAt + id + checkoutUrl + totalQuantity + buyerIdentity { + countryCode + customer { + id + email + firstName + lastName + displayName + } + email + phone + } + lines(first: $numCartLines) { + nodes { + ...CartLine + } + nodes { + ...CartLineComponent + } + } + cost { + subtotalAmount { + ...Money + } + totalAmount { + ...Money + } + totalDutyAmount { + ...Money + } + totalTaxAmount { + ...Money + } + } + note + attributes { + key + value + } + discountCodes { + code + applicable + } + } +` as const; + +const MENU_FRAGMENT = `#graphql + fragment MenuItem on MenuItem { + id + resourceId + tags + title + type + url + } + fragment ChildMenuItem on MenuItem { + ...MenuItem + } + fragment ParentMenuItem on MenuItem { + ...MenuItem + items { + ...ChildMenuItem + } + } + fragment Menu on Menu { + id + items { + ...ParentMenuItem + } + } +` as const; + +export const HEADER_QUERY = `#graphql + fragment Shop on Shop { + id + name + description + primaryDomain { + url + } + brand { + logo { + image { + url + } + } + } + } + query Header( + $country: CountryCode + $headerMenuHandle: String! + $language: LanguageCode + ) @inContext(language: $language, country: $country) { + shop { + ...Shop + } + menu(handle: $headerMenuHandle) { + ...Menu + } + } + ${MENU_FRAGMENT} +` as const; + +export const FOOTER_QUERY = `#graphql + query Footer( + $country: CountryCode + $footerMenuHandle: String! + $language: LanguageCode + ) @inContext(language: $language, country: $country) { + menu(handle: $footerMenuHandle) { + ...Menu + } + } + ${MENU_FRAGMENT} +` as const; diff --git a/app/lib/search.ts b/app/lib/search.ts new file mode 100644 index 0000000000000000000000000000000000000000..f4b45631f14b2eba1b6e557bacfbc6599ea63562 --- /dev/null +++ b/app/lib/search.ts @@ -0,0 +1,79 @@ +import type { + PredictiveSearchQuery, + RegularSearchQuery, +} from 'storefrontapi.generated'; + +type ResultWithItems = { + type: Type; + term: string; + error?: string; + result: {total: number; items: Items}; +}; + +export type RegularSearchReturn = ResultWithItems< + 'regular', + RegularSearchQuery +>; +export type PredictiveSearchReturn = ResultWithItems< + 'predictive', + NonNullable ('root'); + + return ( + + + + + + + + + {data ? ( + + + ) : ( + children + )} +{children} ++ + + + ); +} + +export default function App() { + return ; +} + +export function ErrorBoundary() { + const error = useRouteError(); + let errorMessage = 'Unknown error'; + let errorStatus = 500; + + if (isRouteErrorResponse(error)) { + errorMessage = error?.data?.message ?? error.data; + errorStatus = error.status; + } else if (error instanceof Error) { + errorMessage = error.message; + } + + return ( + ++ ); +} diff --git a/app/routes/$.tsx b/app/routes/$.tsx new file mode 100644 index 0000000000000000000000000000000000000000..1153b1881acf1e574d0e8b0857b7c36826fc9907 --- /dev/null +++ b/app/routes/$.tsx @@ -0,0 +1,11 @@ +import type {LoaderFunctionArgs} from '@netlify/remix-runtime'; + +export async function loader({request}: LoaderFunctionArgs) { + throw new Response(`${new URL(request.url).pathname} not found`, { + status: 404, + }); +} + +export default function CatchAllPage() { + return null; +} diff --git a/app/routes/[robots.txt].tsx b/app/routes/[robots.txt].tsx new file mode 100644 index 0000000000000000000000000000000000000000..353282a0f6bbc2fcde43805f679ff3bfa90718cb --- /dev/null +++ b/app/routes/[robots.txt].tsx @@ -0,0 +1,118 @@ +import {type LoaderFunctionArgs} from '@netlify/remix-runtime'; +import {useRouteError, isRouteErrorResponse} from '@remix-run/react'; +import {parseGid} from '@shopify/hydrogen'; + +export async function loader({request, context}: LoaderFunctionArgs) { + const url = new URL(request.url); + + const {shop} = await context.storefront.query(ROBOTS_QUERY); + + const shopId = parseGid(shop.id).id; + const body = robotsTxtData({url: url.origin, shopId}); + + return new Response(body, { + status: 200, + headers: { + 'Content-Type': 'text/plain', + + 'Cache-Control': `max-age=${60 * 60 * 24}`, + }, + }); +} + +function robotsTxtData({url, shopId}: {shopId?: string; url?: string}) { + const sitemapUrl = url ? `${url}/sitemap.xml` : undefined; + + return ` +User-agent: * +${generalDisallowRules({sitemapUrl, shopId})} + +# Google adsbot ignores robots.txt unless specifically named! +User-agent: adsbot-google +Disallow: /checkouts/ +Disallow: /checkout +Disallow: /carts +Disallow: /orders +${shopId ? `Disallow: /${shopId}/checkouts` : ''} +${shopId ? `Disallow: /${shopId}/orders` : ''} +Disallow: /*?*oseid=* +Disallow: /*preview_theme_id* +Disallow: /*preview_script_id* + +User-agent: Nutch +Disallow: / + +User-agent: AhrefsBot +Crawl-delay: 10 +${generalDisallowRules({sitemapUrl, shopId})} + +User-agent: AhrefsSiteAudit +Crawl-delay: 10 +${generalDisallowRules({sitemapUrl, shopId})} + +User-agent: MJ12bot +Crawl-Delay: 10 + +User-agent: Pinterest +Crawl-delay: 1 +`.trim(); +} + +/** + * This function generates disallow rules that generally follow what Shopify's + * Online Store has as defaults for their robots.txt + */ +function generalDisallowRules({ + shopId, + sitemapUrl, +}: { + shopId?: string; + sitemapUrl?: string; +}) { + return `Disallow: /admin +Disallow: /cart +Disallow: /orders +Disallow: /checkouts/ +Disallow: /checkout +${shopId ? `Disallow: /${shopId}/checkouts` : ''} +${shopId ? `Disallow: /${shopId}/orders` : ''} +Disallow: /carts +Disallow: /account +Disallow: /collections/*sort_by* +Disallow: /*/collections/*sort_by* +Disallow: /collections/*+* +Disallow: /collections/*%2B* +Disallow: /collections/*%2b* +Disallow: /*/collections/*+* +Disallow: /*/collections/*%2B* +Disallow: /*/collections/*%2b* +Disallow: */collections/*filter*&*filter* +Disallow: /blogs/*+* +Disallow: /blogs/*%2B* +Disallow: /blogs/*%2b* +Disallow: /*/blogs/*+* +Disallow: /*/blogs/*%2B* +Disallow: /*/blogs/*%2b* +Disallow: /*?*oseid=* +Disallow: /*preview_theme_id* +Disallow: /*preview_script_id* +Disallow: /policies/ +Disallow: /*/*?*ls=*&ls=* +Disallow: /*/*?*ls%3D*%3Fls%3D* +Disallow: /*/*?*ls%3d*%3fls%3d* +Disallow: /search +Allow: /search/ +Disallow: /search/?* +Disallow: /apple-app-site-association +Disallow: /.well-known/shopify/monorail +${sitemapUrl ? `Sitemap: ${sitemapUrl}` : ''}`; +} + +const ROBOTS_QUERY = `#graphql + query StoreRobots($country: CountryCode, $language: LanguageCode) + @inContext(country: $country, language: $language) { + shop { + id + } + } +` as const; diff --git a/app/routes/[sitemap.xml].tsx b/app/routes/[sitemap.xml].tsx new file mode 100644 index 0000000000000000000000000000000000000000..389da2c4c979623dd136d5ce79b9df4810bcf089 --- /dev/null +++ b/app/routes/[sitemap.xml].tsx @@ -0,0 +1,177 @@ +import {flattenConnection} from '@shopify/hydrogen'; +import type {LoaderFunctionArgs} from '@netlify/remix-runtime'; +import type {SitemapQuery} from 'storefrontapi.generated'; + +/** + * the google limit is 50K, however, the storefront API + * allows querying only 250 resources per pagination page + */ +const MAX_URLS = 250; + +type Entry = { + url: string; + lastMod?: string; + changeFreq?: string; + image?: { + url: string; + title?: string; + caption?: string; + }; +}; + +export async function loader({ + request, + context: {storefront}, +}: LoaderFunctionArgs) { + const data = await storefront.query(SITEMAP_QUERY, { + variables: { + urlLimits: MAX_URLS, + language: storefront.i18n.language, + }, + }); + + if (!data) { + throw new Response('No data found', {status: 404}); + } + + const sitemap = generateSitemap({data, baseUrl: new URL(request.url).origin}); + + return new Response(sitemap, { + headers: { + 'Content-Type': 'application/xml', + + 'Cache-Control': `max-age=${60 * 60 * 24}`, + }, + }); +} + +function xmlEncode(string: string) { + return string.replace(/[&<>'"]/g, (char) => `&#${char.charCodeAt(0)};`); +} + +function generateSitemap({ + data, + baseUrl, +}: { + data: SitemapQuery; + baseUrl: string; +}) { + const products = flattenConnection(data.products) + .filter((product) => product.onlineStoreUrl) + .map((product) => { + const url = `${baseUrl}/products/${xmlEncode(product.handle)}`; + + const productEntry: Entry = { + url, + lastMod: product.updatedAt, + changeFreq: 'daily', + }; + + if (product.featuredImage?.url) { + productEntry.image = { + url: xmlEncode(product.featuredImage.url), + }; + + if (product.title) { + productEntry.image.title = xmlEncode(product.title); + } + + if (product.featuredImage.altText) { + productEntry.image.caption = xmlEncode(product.featuredImage.altText); + } + } + + return productEntry; + }); + + const collections = flattenConnection(data.collections) + .filter((collection) => collection.onlineStoreUrl) + .map((collection) => { + const url = `${baseUrl}/collections/${collection.handle}`; + + return { + url, + lastMod: collection.updatedAt, + changeFreq: 'daily', + }; + }); + + const pages = flattenConnection(data.pages) + .filter((page) => page.onlineStoreUrl) + .map((page) => { + const url = `${baseUrl}/pages/${page.handle}`; + + return { + url, + lastMod: page.updatedAt, + changeFreq: 'weekly', + }; + }); + + const urls = [...products, ...collections, ...pages]; + + return ` +Oops
+{errorStatus}
+ {errorMessage && ( + + )} ++ ${urls.map(renderUrlTag).join('')} + `; +} + +function renderUrlTag({url, lastMod, changeFreq, image}: Entry) { + const imageTag = image + ? `+ + `.trim(); +} + +const SITEMAP_QUERY = `#graphql + query Sitemap($urlLimits: Int, $language: LanguageCode) + @inContext(language: $language) { + products( + first: $urlLimits + query: "published_status:'online_store:visible'" + ) { + nodes { + updatedAt + handle + onlineStoreUrl + title + featuredImage { + url + altText + } + } + } + collections( + first: $urlLimits + query: "published_status:'online_store:visible'" + ) { + nodes { + updatedAt + handle + onlineStoreUrl + } + } + pages(first: $urlLimits, query: "published_status:'published'") { + nodes { + updatedAt + handle + onlineStoreUrl + } + } + } +` as const; diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..66716f059a28cd64587cb4bcb2fe9efc70148218 --- /dev/null +++ b/app/routes/_index.tsx @@ -0,0 +1,233 @@ +import {defer, type LoaderFunctionArgs} from '@netlify/remix-runtime'; +import {Await, useLoaderData, Link, type MetaFunction} from '@remix-run/react'; +import {Suspense} from 'react'; +import {Image, Money} from '@shopify/hydrogen'; +import type { + FeaturedCollectionFragment, + RecommendedProductsQuery, +} from 'storefrontapi.generated'; + +export const meta: MetaFunction = () => { + return [{title: 'Hydrogen | Home'}]; +}; + +export async function loader(args: LoaderFunctionArgs) { + // Start fetching non-critical data without blocking time to first byte + const deferredData = loadDeferredData(args); + + // Await the critical data required to render initial state of the page + const criticalData = await loadCriticalData(args); + + return defer({...deferredData, ...criticalData}); +} + +/** + * Load data necessary for rendering content above the fold. This is the critical data + * needed to render the page. If it's unavailable, the whole page should 400 or 500 error. + */ +async function loadCriticalData({context}: LoaderFunctionArgs) { + const [{collections}] = await Promise.all([ + context.storefront.query(FEATURED_COLLECTION_QUERY), + // Add other queries here, so that they are loaded in parallel + ]); + + return { + featuredCollection: collections.nodes[0], + }; +} + +/** + * Load data for rendering content below the fold. This data is deferred and will be + * fetched after the initial page load. If it's unavailable, the page should still 200. + * Make sure to not throw any errors here, as it will cause the page to 500. + */ +function loadDeferredData({context}: LoaderFunctionArgs) { + const recommendedProducts = context.storefront + .query(RECOMMENDED_PRODUCTS_QUERY) + .catch((error) => { + // Log query errors, but don't throw them so the page can still render + console.error(error); + return null; + }); + + return { + recommendedProducts, + }; +} + +export default function Homepage() { + const data = useLoaderData${url} +${lastMod} +${changeFreq} + ${imageTag} +(); + return ( + ++ ); +} + +function HeroSection() { + return ( ++ + + ++ ); +} + +function FeaturedCollection({ + collection, +}: { + collection: FeaturedCollectionFragment; +}) { + if (!collection) return null; + const image = collection?.image; + return ( + + {image && ( +
+ ++مستقبل التسوق هنا
+اكتشف أحدث التقنيات والأجهزة الذكية لعام 2026
+ + تسوق الآن + +++ )} ++ {collection.title}
+ + ); +} + +function RecommendedProducts({ + products, +}: { + products: Promise; +}) { + return ( + +}> +Recommended Products
+Loading... + {(response) => ( + + ++ {response + ? response.products.nodes.map((product) => ( + ++ )} ++ {product.title}
+ ++ + + )) + : null} +
+
+
+ {!addresses.nodes.length ? ( +
+ );
+}
+
+function NewAddressForm() {
+ const newAddress = {
+ address1: '',
+ address2: '',
+ city: '',
+ company: '',
+ territoryCode: '',
+ firstName: '',
+ id: 'new',
+ lastName: '',
+ phoneNumber: '',
+ zoneCode: '',
+ zip: '',
+ } as CustomerAddressInput;
+
+ return (
+ Addresses
++ {!addresses.nodes.length ? ( +
You have no addresses saved.
+ ) : ( +
+
+
+
+
+ )}
+
+
+
+ +
+
+
+
+
+ )}
+
+
+ {addresses.nodes.map((address) => (
+
+ {({stateForMethod}) => (
+
+ ))}
+
+ );
+}
+
+export function AddressForm({
+ addressId,
+ address,
+ defaultAddress,
+ children,
+}: {
+ addressId: AddressFragment['id'];
+ address: CustomerAddressInput;
+ defaultAddress: CustomerFragment['defaultAddress'];
+ children: (props: {
+ stateForMethod: (method: 'PUT' | 'POST' | 'DELETE') => Fetcher['state'];
+ }) => React.ReactNode;
+}) {
+ const {state, formMethod} = useNavigation();
+ const action = useActionData
+
+
+
+ )}
+
+
+
+ +
+ );
+}
+
+function OrderLineRow({lineItem}: {lineItem: OrderLineItemFullFragment}) {
+ return (
+ Order {order.name}
+Placed on {new Date(order.processedAt!).toDateString()}
++
+
+
+
+
+ | Product | +Price | +Quantity | +Total | +
|---|---|---|---|
|
+ Discounts + |
+
+ Discounts + |
+
+ {discountPercentage ? (
+ -{discountPercentage}% OFF
+ ) : (
+ discountValue && |
+ |
|
+ Subtotal + |
+
+ Subtotal + |
+
+ |
+ |
| + Tax + | +
+ Tax + |
+
+ |
+ |
| + Total + | +
+ Total + |
+
+ |
+
+
+ Shipping Address
+ {order?.shippingAddress ? ( + +{order.shippingAddress.name}
+ {order.shippingAddress.formatted ? ( +{order.shippingAddress.formatted}
+ ) : ( + '' + )} + {order.shippingAddress.formattedArea ? ( +{order.shippingAddress.formattedArea}
+ ) : ( + '' + )} + + ) : ( +No shipping address defined
+ )} +Status
+
+
+ {fulfillmentStatus}
++ +
+ {lineItem?.image && (
+
+
+
+ )}
+
+
+ {lineItem.title}
+ {lineItem.variantTitle} +
+ {orders.nodes.length ?
+ );
+}
+
+function OrdersTable({orders}: Pick
+ {orders?.nodes.length ? (
+
+ {({node: order}) =>
+ ) : (
+
+ );
+}
+
+function EmptyOrders() {
+ return (
+
+
+
+ );
+}
+
+function OrderItem({order}: {order: OrderItemFragment}) {
+ const fulfillmentStatus = flattenConnection(order.fulfillments)[0]?.status;
+ return (
+ <>
+
+ You haven't placed any orders yet.
++
+ Start Shopping → +
++ + ); +} diff --git a/app/routes/account.profile.tsx b/app/routes/account.profile.tsx new file mode 100644 index 0000000000000000000000000000000000000000..2d7a00c45ed1a4951023a9c282fb1e7c6633d8c5 --- /dev/null +++ b/app/routes/account.profile.tsx @@ -0,0 +1,136 @@ +import type {CustomerFragment} from 'customer-accountapi.generated'; +import type {CustomerUpdateInput} from '@shopify/hydrogen/customer-account-api-types'; +import {CUSTOMER_UPDATE_MUTATION} from '~/graphql/customer-account/CustomerUpdateMutation'; +import { + json, + type ActionFunctionArgs, + type LoaderFunctionArgs, +} from '@netlify/remix-runtime'; +import { + Form, + useActionData, + useNavigation, + useOutletContext, + type MetaFunction, +} from '@remix-run/react'; + +export type ActionResponse = { + error: string | null; + customer: CustomerFragment | null; +}; + +export const meta: MetaFunction = () => { + return [{title: 'Profile'}]; +}; + +export async function loader({context}: LoaderFunctionArgs) { + await context.customerAccount.handleAuthStatus(); + + return json({}); +} + +export async function action({request, context}: ActionFunctionArgs) { + const {customerAccount} = context; + + if (request.method !== 'PUT') { + return json({error: 'Method not allowed'}, {status: 405}); + } + + const form = await request.formData(); + + try { + const customer: CustomerUpdateInput = {}; + const validInputKeys = ['firstName', 'lastName'] as const; + for (const [key, value] of form.entries()) { + if (!validInputKeys.includes(key as any)) { + continue; + } + if (typeof value === 'string' && value.length) { + customer[key as (typeof validInputKeys)[number]] = value; + } + } + + // update customer and possibly password + const {data, errors} = await customerAccount.mutate( + CUSTOMER_UPDATE_MUTATION, + { + variables: { + customer, + }, + }, + ); + + if (errors?.length) { + throw new Error(errors[0].message); + } + + if (!data?.customerUpdate?.customer) { + throw new Error('Customer profile update failed.'); + } + + return json({ + error: null, + customer: data?.customerUpdate?.customer, + }); + } catch (error: any) { + return json( + {error: error.message, customer: null}, + { + status: 400, + }, + ); + } +} + +export default function AccountProfile() { + const account = useOutletContext<{customer: CustomerFragment}>(); + const {state} = useNavigation(); + const action = useActionData
+
+ +
+ );
+}
diff --git a/app/routes/account.tsx b/app/routes/account.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aa60ee69aadd54ecde8db6d5932280981c0777a7
--- /dev/null
+++ b/app/routes/account.tsx
@@ -0,0 +1,88 @@
+import {json, type LoaderFunctionArgs} from '@netlify/remix-runtime';
+import {Form, NavLink, Outlet, useLoaderData} from '@remix-run/react';
+import {CUSTOMER_DETAILS_QUERY} from '~/graphql/customer-account/CustomerDetailsQuery';
+
+export function shouldRevalidate() {
+ return true;
+}
+
+export async function loader({context}: LoaderFunctionArgs) {
+ const {data, errors} = await context.customerAccount.query(
+ CUSTOMER_DETAILS_QUERY,
+ );
+
+ if (errors?.length || !data?.customer) {
+ throw new Error('Customer not found');
+ }
+
+ return json(
+ {customer: data.customer},
+ {
+ headers: {
+ 'Cache-Control': 'no-cache, no-store, must-revalidate',
+ },
+ },
+ );
+}
+
+export default function AccountLayout() {
+ const {customer} = useLoaderDataMy profile
++ +
+
+
+
+
+ );
+}
+
+function AccountMenu() {
+ function isActiveStyle({
+ isActive,
+ isPending,
+ }: {
+ isActive: boolean;
+ isPending: boolean;
+ }) {
+ return {
+ fontWeight: isActive ? 'bold' : undefined,
+ color: isPending ? 'grey' : 'black',
+ };
+ }
+
+ return (
+
+ );
+}
+
+function Logout() {
+ return (
+
+ );
+}
diff --git a/app/routes/account_.authorize.tsx b/app/routes/account_.authorize.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..31c9204dc13f15b1b35d8c25c808c4de94f27a1d
--- /dev/null
+++ b/app/routes/account_.authorize.tsx
@@ -0,0 +1,5 @@
+import type {LoaderFunctionArgs} from '@netlify/remix-runtime';
+
+export async function loader({context}: LoaderFunctionArgs) {
+ return context.customerAccount.authorize();
+}
diff --git a/app/routes/account_.login.tsx b/app/routes/account_.login.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d2c56442d613940140b5b9081368b2a67439dd0a
--- /dev/null
+++ b/app/routes/account_.login.tsx
@@ -0,0 +1,5 @@
+import type {LoaderFunctionArgs} from '@netlify/remix-runtime';
+
+export async function loader({request, context}: LoaderFunctionArgs) {
+ return context.customerAccount.login();
+}
diff --git a/app/routes/account_.logout.tsx b/app/routes/account_.logout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..84c0723102de7b79b9ad433887ec656d8ce5c1ee
--- /dev/null
+++ b/app/routes/account_.logout.tsx
@@ -0,0 +1,10 @@
+import {redirect, type ActionFunctionArgs} from '@netlify/remix-runtime';
+
+// if we dont implement this, /account/logout will get caught by account.$.tsx to do login
+export async function loader() {
+ return redirect('/');
+}
+
+export async function action({context}: ActionFunctionArgs) {
+ return context.customerAccount.logout();
+}
diff --git a/app/routes/blogs.$blogHandle.$articleHandle.tsx b/app/routes/blogs.$blogHandle.$articleHandle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e36cfbb6dfbe1c020138e069fcc7cf2405432a34
--- /dev/null
+++ b/app/routes/blogs.$blogHandle.$articleHandle.tsx
@@ -0,0 +1,113 @@
+import {defer, type LoaderFunctionArgs} from '@netlify/remix-runtime';
+import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import {Image} from '@shopify/hydrogen';
+
+export const meta: MetaFunction{heading}
++
+
+
+
+ {title}
+
+
+ {image &&
+ );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/objects/blog#field-blog-articlebyhandle
+const ARTICLE_QUERY = `#graphql
+ query Article(
+ $articleHandle: String!
+ $blogHandle: String!
+ $country: CountryCode
+ $language: LanguageCode
+ ) @inContext(language: $language, country: $country) {
+ blog(handle: $blogHandle) {
+ articleByHandle(handle: $articleHandle) {
+ title
+ contentHtml
+ publishedAt
+ author: authorV2 {
+ name
+ }
+ image {
+ id
+ altText
+ url
+ width
+ height
+ }
+ seo {
+ description
+ title
+ }
+ }
+ }
+ }
+` as const;
diff --git a/app/routes/blogs.$blogHandle._index.tsx b/app/routes/blogs.$blogHandle._index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3485165ad4bb03a12564d9cb83fec2f4c2f9441a
--- /dev/null
+++ b/app/routes/blogs.$blogHandle._index.tsx
@@ -0,0 +1,175 @@
+import {defer, type LoaderFunctionArgs} from '@netlify/remix-runtime';
+import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import {Image, getPaginationVariables} from '@shopify/hydrogen';
+import type {ArticleItemFragment} from 'storefrontapi.generated';
+import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
+
+export const meta: MetaFunction
+ {title}
+
+ {publishedDate} · {author?.name}
+
+
+
+ {image &&
+
+ );
+}
+
+function ArticleItem({
+ article,
+ loading,
+}: {
+ article: ArticleItemFragment;
+ loading?: HTMLImageElement['loading'];
+}) {
+ const publishedAt = new Intl.DateTimeFormat('en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ }).format(new Date(article.publishedAt!));
+ return (
+ {blog.title}
+
+
+ {({node: article, index}) => (
+
+
+
+
+ {article.image && (
+
+ );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/objects/blog
+const BLOGS_QUERY = `#graphql
+ query Blog(
+ $language: LanguageCode
+ $blogHandle: String!
+ $first: Int
+ $last: Int
+ $startCursor: String
+ $endCursor: String
+ ) @inContext(language: $language) {
+ blog(handle: $blogHandle) {
+ title
+ seo {
+ title
+ description
+ }
+ articles(
+ first: $first,
+ last: $last,
+ before: $startCursor,
+ after: $endCursor
+ ) {
+ nodes {
+ ...ArticleItem
+ }
+ pageInfo {
+ hasPreviousPage
+ hasNextPage
+ hasNextPage
+ endCursor
+ startCursor
+ }
+
+ }
+ }
+ }
+ fragment ArticleItem on Article {
+ author: authorV2 {
+ name
+ }
+ contentHtml
+ handle
+ id
+ image {
+ id
+ altText
+ url
+ width
+ height
+ }
+ publishedAt
+ title
+ blog {
+ handle
+ }
+ }
+` as const;
diff --git a/app/routes/blogs._index.tsx b/app/routes/blogs._index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3df8b328e2ecdcca5fdf9237a583d2c455af4f98
--- /dev/null
+++ b/app/routes/blogs._index.tsx
@@ -0,0 +1,106 @@
+import {defer, type LoaderFunctionArgs} from '@netlify/remix-runtime';
+import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import {getPaginationVariables} from '@shopify/hydrogen';
+import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
+
+export const meta: MetaFunction = () => {
+ return [{title: `Hydrogen | Blogs`}];
+};
+
+export async function loader(args: LoaderFunctionArgs) {
+ // Start fetching non-critical data without blocking time to first byte
+ const deferredData = loadDeferredData(args);
+
+ // Await the critical data required to render initial state of the page
+ const criticalData = await loadCriticalData(args);
+
+ return defer({...deferredData, ...criticalData});
+}
+
+/**
+ * Load data necessary for rendering content above the fold. This is the critical data
+ * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
+ */
+async function loadCriticalData({context, request}: LoaderFunctionArgs) {
+ const paginationVariables = getPaginationVariables(request, {
+ pageBy: 10,
+ });
+
+ const [{blogs}] = await Promise.all([
+ context.storefront.query(BLOGS_QUERY, {
+ variables: {
+ ...paginationVariables,
+ },
+ }),
+ // Add other queries here, so that they are loaded in parallel
+ ]);
+
+ return {blogs};
+}
+
+/**
+ * Load data for rendering content below the fold. This data is deferred and will be
+ * fetched after the initial page load. If it's unavailable, the page should still 200.
+ * Make sure to not throw any errors here, as it will cause the page to 500.
+ */
+function loadDeferredData({context}: LoaderFunctionArgs) {
+ return {};
+}
+
+export default function Blogs() {
+ const {blogs} = useLoaderData
+
+ )}
+ {article.title}
+ {publishedAt} + +
+
+ );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/objects/blog
+const BLOGS_QUERY = `#graphql
+ query Blogs(
+ $country: CountryCode
+ $endCursor: String
+ $first: Int
+ $language: LanguageCode
+ $last: Int
+ $startCursor: String
+ ) @inContext(country: $country, language: $language) {
+ blogs(
+ first: $first,
+ last: $last,
+ before: $startCursor,
+ after: $endCursor
+ ) {
+ pageInfo {
+ hasNextPage
+ hasPreviousPage
+ startCursor
+ endCursor
+ }
+ nodes {
+ title
+ handle
+ seo {
+ title
+ description
+ }
+ }
+ }
+ }
+` as const;
diff --git a/app/routes/cart.$lines.tsx b/app/routes/cart.$lines.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..63b22b1607716eac77f235acb38625d78e9e08cf
--- /dev/null
+++ b/app/routes/cart.$lines.tsx
@@ -0,0 +1,69 @@
+import {redirect, type LoaderFunctionArgs} from '@netlify/remix-runtime';
+
+/**
+ * Automatically creates a new cart based on the URL and redirects straight to checkout.
+ * Expected URL structure:
+ * ```js
+ * /cart/Blogs
+
+
+ {({node: blog}) => (
+
+
+
+ {blog.title}
+ + )} +
+ Loading cart ...}>
+ An error occurred
}
+ >
+ {(cart) => {
+ return Cart
+
+
+ {({node: product, index}) => (
+
+
+ );
+}
+
+function ProductItem({
+ product,
+ loading,
+}: {
+ product: ProductItemFragment;
+ loading?: 'eager' | 'lazy';
+}) {
+ const variant = product.variants.nodes[0];
+ const variantUrl = useVariantUrl(product.handle, variant.selectedOptions);
+ return (
+
+ {product.featuredImage && (
+ {collection.title}
+{collection.description}
+{product.title}
+ +
+
+ {({node: collection, index}) => (
+
+
+ );
+}
+
+function CollectionItem({
+ collection,
+ index,
+}: {
+ collection: CollectionFragment;
+ index: number;
+}) {
+ return (
+
+ {collection?.image && (
+ Collections
+{collection.title}
+ + ); +} + +const COLLECTIONS_QUERY = `#graphql + fragment Collection on Collection { + id + title + handle + image { + id + url + altText + width + height + } + } + query StoreCollections( + $country: CountryCode + $endCursor: String + $first: Int + $language: LanguageCode + $last: Int + $startCursor: String + ) @inContext(country: $country, language: $language) { + collections( + first: $first, + last: $last, + before: $startCursor, + after: $endCursor + ) { + nodes { + ...Collection + } + pageInfo { + hasNextPage + hasPreviousPage + startCursor + endCursor + } + } + } +` as const; diff --git a/app/routes/collections.all.tsx b/app/routes/collections.all.tsx new file mode 100644 index 0000000000000000000000000000000000000000..d200831a9e208f5ba08a1b7b9d1a667cb67d2fee --- /dev/null +++ b/app/routes/collections.all.tsx @@ -0,0 +1,163 @@ +import {defer, type LoaderFunctionArgs} from '@netlify/remix-runtime'; +import {useLoaderData, Link, type MetaFunction} from '@remix-run/react'; +import {getPaginationVariables, Image, Money} from '@shopify/hydrogen'; +import type {ProductItemFragment} from 'storefrontapi.generated'; +import {useVariantUrl} from '~/lib/variants'; +import {PaginatedResourceSection} from '~/components/PaginatedResourceSection'; + +export const meta: MetaFunction
+
+ {({node: product, index}) => (
+
+
+ );
+}
+
+function ProductItem({
+ product,
+ loading,
+}: {
+ product: ProductItemFragment;
+ loading?: 'eager' | 'lazy';
+}) {
+ const variant = product.variants.nodes[0];
+ const variantUrl = useVariantUrl(product.handle, variant.selectedOptions);
+ return (
+
+ {product.featuredImage && (
+ Products
+{product.title}
+ +
+
+
+
+
+ );
+}
+
+const PAGE_QUERY = `#graphql
+ query Page(
+ $language: LanguageCode,
+ $country: CountryCode,
+ $handle: String!
+ )
+ @inContext(language: $language, country: $country) {
+ page(handle: $handle) {
+ id
+ title
+ body
+ seo {
+ description
+ title
+ }
+ }
+ }
+` as const;
diff --git a/app/routes/policies.$handle.tsx b/app/routes/policies.$handle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..deff1fea80be705389ad681571963d0de60f742d
--- /dev/null
+++ b/app/routes/policies.$handle.tsx
@@ -0,0 +1,93 @@
+import {json, type LoaderFunctionArgs} from '@netlify/remix-runtime';
+import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import {type Shop} from '@shopify/hydrogen/storefront-api-types';
+
+type SelectedPolicies = keyof Pick<
+ Shop,
+ 'privacyPolicy' | 'shippingPolicy' | 'termsOfService' | 'refundPolicy'
+>;
+
+export const meta: MetaFunction{page.title}
+
+
+
+
+
+ );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/objects/Shop
+const POLICY_CONTENT_QUERY = `#graphql
+ fragment Policy on ShopPolicy {
+ body
+ handle
+ id
+ title
+ url
+ }
+ query Policy(
+ $country: CountryCode
+ $language: LanguageCode
+ $privacyPolicy: Boolean!
+ $refundPolicy: Boolean!
+ $shippingPolicy: Boolean!
+ $termsOfService: Boolean!
+ ) @inContext(language: $language, country: $country) {
+ shop {
+ privacyPolicy @include(if: $privacyPolicy) {
+ ...Policy
+ }
+ shippingPolicy @include(if: $shippingPolicy) {
+ ...Policy
+ }
+ termsOfService @include(if: $termsOfService) {
+ ...Policy
+ }
+ refundPolicy @include(if: $refundPolicy) {
+ ...Policy
+ }
+ }
+ }
+` as const;
diff --git a/app/routes/policies._index.tsx b/app/routes/policies._index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d4f3d12f848f7fe1b2e599c0b216ac6e22d90457
--- /dev/null
+++ b/app/routes/policies._index.tsx
@@ -0,0 +1,63 @@
+import {json, type LoaderFunctionArgs} from '@netlify/remix-runtime';
+import {useLoaderData, Link} from '@remix-run/react';
+
+export async function loader({context}: LoaderFunctionArgs) {
+ const data = await context.storefront.query(POLICIES_QUERY);
+ const policies = Object.values(data.shop || {});
+
+ if (!policies.length) {
+ throw new Response('No policies found', {status: 404});
+ }
+
+ return json({policies});
+}
+
+export default function Policies() {
+ const {policies} = useLoaderData+
+
+ ← Back to Policies
+
+ +
{policy.title}
+ +
+
+ );
+}
+
+const POLICIES_QUERY = `#graphql
+ fragment PolicyItem on ShopPolicy {
+ id
+ title
+ handle
+ }
+ query Policies ($country: CountryCode, $language: LanguageCode)
+ @inContext(country: $country, language: $language) {
+ shop {
+ privacyPolicy {
+ ...PolicyItem
+ }
+ shippingPolicy {
+ ...PolicyItem
+ }
+ termsOfService {
+ ...PolicyItem
+ }
+ refundPolicy {
+ ...PolicyItem
+ }
+ subscriptionPolicy {
+ id
+ title
+ handle
+ }
+ }
+ }
+` as const;
diff --git a/app/routes/products.$handle.tsx b/app/routes/products.$handle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aa6429d18e2f2d97fc406d1997eecba2dde4bc53
--- /dev/null
+++ b/app/routes/products.$handle.tsx
@@ -0,0 +1,299 @@
+import {Suspense} from 'react';
+import {defer, redirect, type LoaderFunctionArgs} from '@netlify/remix-runtime';
+import {Await, useLoaderData, type MetaFunction} from '@remix-run/react';
+import type {ProductFragment} from 'storefrontapi.generated';
+import {
+ getSelectedProductOptions,
+ Analytics,
+ useOptimisticVariant,
+} from '@shopify/hydrogen';
+import type {SelectedOption} from '@shopify/hydrogen/storefront-api-types';
+import {getVariantUrl} from '~/lib/variants';
+import {ProductPrice} from '~/components/ProductPrice';
+import {ProductImage} from '~/components/ProductImage';
+import {ProductForm} from '~/components/ProductForm';
+
+export const meta: MetaFunctionPolicies
+
+ {policies.map((policy) => {
+ if (!policy) return null;
+ return (
+
+ );
+ })}
+
+
+
+ );
+}
+
+const PRODUCT_VARIANT_FRAGMENT = `#graphql
+ fragment ProductVariant on ProductVariant {
+ availableForSale
+ compareAtPrice {
+ amount
+ currencyCode
+ }
+ id
+ image {
+ __typename
+ id
+ url
+ altText
+ width
+ height
+ }
+ price {
+ amount
+ currencyCode
+ }
+ product {
+ title
+ handle
+ }
+ selectedOptions {
+ name
+ value
+ }
+ sku
+ title
+ unitPrice {
+ amount
+ currencyCode
+ }
+ }
+` as const;
+
+const PRODUCT_FRAGMENT = `#graphql
+ fragment Product on Product {
+ id
+ title
+ vendor
+ handle
+ descriptionHtml
+ description
+ options {
+ name
+ values
+ }
+ selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
+ ...ProductVariant
+ }
+ variants(first: 1) {
+ nodes {
+ ...ProductVariant
+ }
+ }
+ seo {
+ description
+ title
+ }
+ }
+ ${PRODUCT_VARIANT_FRAGMENT}
+` as const;
+
+const PRODUCT_QUERY = `#graphql
+ query Product(
+ $country: CountryCode
+ $handle: String!
+ $language: LanguageCode
+ $selectedOptions: [SelectedOptionInput!]!
+ ) @inContext(country: $country, language: $language) {
+ product(handle: $handle) {
+ ...Product
+ }
+ }
+ ${PRODUCT_FRAGMENT}
+` as const;
+
+const PRODUCT_VARIANTS_FRAGMENT = `#graphql
+ fragment ProductVariants on Product {
+ variants(first: 250) {
+ nodes {
+ ...ProductVariant
+ }
+ }
+ }
+ ${PRODUCT_VARIANT_FRAGMENT}
+` as const;
+
+const VARIANTS_QUERY = `#graphql
+ ${PRODUCT_VARIANTS_FRAGMENT}
+ query ProductVariants(
+ $country: CountryCode
+ $language: LanguageCode
+ $handle: String!
+ ) @inContext(country: $country, language: $language) {
+ product(handle: $handle) {
+ ...ProductVariants
+ }
+ }
+` as const;
diff --git a/app/routes/search.tsx b/app/routes/search.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..83072c096b187ac2b913b65a86b54d3f674d1507
--- /dev/null
+++ b/app/routes/search.tsx
@@ -0,0 +1,416 @@
+import {
+ json,
+ type LoaderFunctionArgs,
+ type ActionFunctionArgs,
+} from '@netlify/remix-runtime';
+import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
+import {SearchForm} from '~/components/SearchForm';
+import {SearchResults} from '~/components/SearchResults';
+import {
+ type RegularSearchReturn,
+ type PredictiveSearchReturn,
+ getEmptyPredictiveSearchResult,
+} from '~/lib/search';
+
+export const meta: MetaFunction = () => {
+ return [{title: `Hydrogen | Search`}];
+};
+
+export async function loader({request, context}: LoaderFunctionArgs) {
+ const url = new URL(request.url);
+ const isPredictive = url.searchParams.has('predictive');
+ const searchPromise = isPredictive
+ ? predictiveSearch({request, context})
+ : regularSearch({request, context});
+
+ searchPromise.catch((error: Error) => {
+ console.error(error);
+ return {term: '', result: null, error: error.message};
+ });
+
+ return json(await searchPromise);
+}
+
+/**
+ * Renders the /search route
+ */
+export default function SearchPage() {
+ const {type, term, result, error} = useLoaderData
+
+
+ {(data) => (
+
+
+
+
+
+ +
+
+ {title}
++
+
+
+ Description +
++ +
+
+
+ {({inputRef}) => (
+ <>
+
+
+
+
+ )}
+
+ {error &&
+ {({articles, pages, products, term}) => (
+
+ )}
+
+ );
+}
+
+/**
+ * Regular search query and fragments
+ * (adjust as needed)
+ */
+const SEARCH_PRODUCT_FRAGMENT = `#graphql
+ fragment SearchProduct on Product {
+ __typename
+ handle
+ id
+ publishedAt
+ title
+ trackingParameters
+ vendor
+ variants(first: 1) {
+ nodes {
+ id
+ image {
+ url
+ altText
+ width
+ height
+ }
+ price {
+ amount
+ currencyCode
+ }
+ compareAtPrice {
+ amount
+ currencyCode
+ }
+ selectedOptions {
+ name
+ value
+ }
+ product {
+ handle
+ title
+ }
+ }
+ }
+ }
+` as const;
+
+const SEARCH_PAGE_FRAGMENT = `#graphql
+ fragment SearchPage on Page {
+ __typename
+ handle
+ id
+ title
+ trackingParameters
+ }
+` as const;
+
+const SEARCH_ARTICLE_FRAGMENT = `#graphql
+ fragment SearchArticle on Article {
+ __typename
+ handle
+ id
+ title
+ trackingParameters
+ }
+` as const;
+
+const PAGE_INFO_FRAGMENT = `#graphql
+ fragment PageInfoFragment on PageInfo {
+ hasNextPage
+ hasPreviousPage
+ startCursor
+ endCursor
+ }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/search
+export const SEARCH_QUERY = `#graphql
+ query RegularSearch(
+ $country: CountryCode
+ $endCursor: String
+ $first: Int
+ $language: LanguageCode
+ $last: Int
+ $term: String!
+ $startCursor: String
+ ) @inContext(country: $country, language: $language) {
+ articles: search(
+ query: $term,
+ types: [ARTICLE],
+ first: $first,
+ ) {
+ nodes {
+ ...on Article {
+ ...SearchArticle
+ }
+ }
+ }
+ pages: search(
+ query: $term,
+ types: [PAGE],
+ first: $first,
+ ) {
+ nodes {
+ ...on Page {
+ ...SearchPage
+ }
+ }
+ }
+ products: search(
+ after: $endCursor,
+ before: $startCursor,
+ first: $first,
+ last: $last,
+ query: $term,
+ sortKey: RELEVANCE,
+ types: [PRODUCT],
+ unavailableProducts: HIDE,
+ ) {
+ nodes {
+ ...on Product {
+ ...SearchProduct
+ }
+ }
+ pageInfo {
+ ...PageInfoFragment
+ }
+ }
+ }
+ ${SEARCH_PRODUCT_FRAGMENT}
+ ${SEARCH_PAGE_FRAGMENT}
+ ${SEARCH_ARTICLE_FRAGMENT}
+ ${PAGE_INFO_FRAGMENT}
+` as const;
+
+/**
+ * Regular search fetcher
+ */
+async function regularSearch({
+ request,
+ context,
+}: Pick<
+ LoaderFunctionArgs,
+ 'request' | 'context'
+>): PromiseSearch
+{error}
} + {!term || !result?.total ? ( +
+
+ )}
+