+
+ );
+}
+
+function CloseAside() {
+ return (
+ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
+ history.go(-1)}>
+ ×
+
+ );
+}
diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
new file mode 100644
index 0000000..e5c48cc
--- /dev/null
+++ b/app/components/Cart.tsx
@@ -0,0 +1,340 @@
+import {CartForm, Image, Money} from '@shopify/hydrogen';
+import type {CartLineUpdateInput} from '@shopify/hydrogen/storefront-api-types';
+import {Link} from '@remix-run/react';
+import type {CartApiQueryFragment} from 'storefrontapi.generated';
+import {useVariantUrl} from '~/utils';
+
+type CartLine = CartApiQueryFragment['lines']['nodes'][0];
+
+type CartMainProps = {
+ cart: CartApiQueryFragment | null;
+ layout: 'page' | 'aside';
+};
+
+export function CartMain({layout, cart}: CartMainProps) {
+ const linesCount = Boolean(cart?.lines?.nodes?.length || 0);
+ const withDiscount =
+ cart &&
+ Boolean(cart.discountCodes.filter((code) => code.applicable).length);
+ const className = `cart-main ${withDiscount ? 'with-discount' : ''}`;
+
+ return (
+
+
+ );
+}
+
+function CartDetails({layout, cart}: CartMainProps) {
+ const cartHasItems = !!cart && cart.totalQuantity > 0;
+
+ return (
+
+
+
+ )}
+
+ );
+}
+
+function CartLines({
+ lines,
+ layout,
+}: {
+ layout: CartMainProps['layout'];
+ lines: CartApiQueryFragment['lines'] | undefined;
+}) {
+ if (!lines) return null;
+
+ return (
+
+
+ );
+}
+
+function CartLineItem({
+ layout,
+ line,
+}: {
+ layout: CartMainProps['layout'];
+ line: CartLine;
+}) {
+ const {id, merchandise} = line;
+ const {product, title, image, selectedOptions} = merchandise;
+ const lineItemUrl = useVariantUrl(product.handle, selectedOptions);
+
+ return (
+ -
+ {lines.nodes.map((line) => (
+
+ {
+ if (layout === 'aside') {
+ // close the drawer
+ window.location.href = lineItemUrl;
+ }
+ }}
+ >
+
+ + {product.title} +
+ +-
+ {selectedOptions.map((option) => (
+
- + + {option.name}: {option.value} + + + ))} +
+
+ );
+}
+
+function CartLineRemoveButton({lineIds}: {lineIds: string[]}) {
+ return (
+ Totals
+-
+
- Subtotal +
-
+ {cost?.subtotalAmount?.amount ? (
+
+ ) : ( + '-' + )} +
+
+ Quantity: {quantity}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function CartLinePrice({
+ line,
+ priceType = 'regular',
+ ...passthroughProps
+}: {
+ line: CartLine;
+ priceType?: 'regular' | 'compareAt';
+ [key: string]: any;
+}) {
+ if (!line?.cost?.amountPerQuantity || !line?.cost?.totalAmount) return null;
+
+ const moneyV2 =
+ priceType === 'regular'
+ ? line.cost.totalAmount
+ : line.cost.compareAtAmountPerQuantity;
+
+ if (moneyV2 == null) {
+ return null;
+ }
+
+ return (
+
+
+ );
+}
+
+export function CartEmpty({
+ hidden = false,
+ layout = 'aside',
+}: {
+ hidden: boolean;
+ layout?: CartMainProps['layout'];
+}) {
+ return (
+
+
+
+ { + if (layout === 'aside') { + window.location.href = '/collections'; + } + }} + > + Continue shopping → + +
+ );
+}
+
+function CartDiscounts({
+ discountCodes,
+}: {
+ discountCodes: CartApiQueryFragment['discountCodes'];
+}) {
+ const codes: string[] =
+ discountCodes
+ ?.filter((discount) => discount.applicable)
+ ?.map(({code}) => code) || [];
+
+ return (
+ +
+ Looks like you haven’t added anything yet, let’s get you + started! +
++ { + if (layout === 'aside') { + window.location.href = '/collections'; + } + }} + > + Continue shopping → + +
+ {/* Have existing discount, display it with a remove option */}
+
+
+
+ );
+}
+
+function UpdateDiscountForm({
+ discountCodes,
+ children,
+}: {
+ discountCodes?: string[];
+ children: React.ReactNode;
+}) {
+ return (
+ -
+
- Discount(s) +
+
+
+
+
+
+ {codes?.join(', ')}
+
+
+
+
+
+
+
+ Thanks for Subscribing
+// ); +// } + +const FALLBACK_FOOTER_MENU = { + id: 'gid://shopify/Menu/199655620664', + items: [ + { + id: 'gid://shopify/MenuItem/461633060920', + resourceId: 'gid://shopify/ShopPolicy/23358046264', + tags: [], + title: 'Privacy Policy', + type: 'SHOP_POLICY', + url: '/policies/privacy-policy', + items: [], + }, + { + id: 'gid://shopify/MenuItem/461633093688', + resourceId: 'gid://shopify/ShopPolicy/23358013496', + tags: [], + title: 'Refund Policy', + type: 'SHOP_POLICY', + url: '/policies/refund-policy', + items: [], + }, + { + id: 'gid://shopify/MenuItem/461633126456', + resourceId: 'gid://shopify/ShopPolicy/23358111800', + tags: [], + title: 'Shipping Policy', + type: 'SHOP_POLICY', + url: '/policies/shipping-policy', + items: [], + }, + { + id: 'gid://shopify/MenuItem/461633159224', + resourceId: 'gid://shopify/ShopPolicy/23358079032', + tags: [], + title: 'Terms of Service', + type: 'SHOP_POLICY', + url: '/policies/terms-of-service', + items: [], + }, + ], +}; + +function activeLinkStyle({ + isActive, + isPending, +}: { + isActive: boolean; + isPending: boolean; +}) { + return { + fontWeight: isActive ? 'bold' : undefined, + color: isPending ? 'grey' : 'white', + }; +} diff --git a/app/components/Header.tsx b/app/components/Header.tsx new file mode 100644 index 0000000..e63d6f4 --- /dev/null +++ b/app/components/Header.tsx @@ -0,0 +1,187 @@ +import {Await, NavLink} from '@remix-run/react'; +import {Suspense} from 'react'; +import type {HeaderQuery} from 'storefrontapi.generated'; +import type {LayoutProps} from './Layout'; +import {useRootLoaderData} from '~/root'; +import contentstack_logo from '../../public/contentstack_logo.svg'; + +type HeaderProps = Pick☰
+ + ); +} + +function SearchToggle() { + return Search; +} + +function CartBadge({count}: {count: number}) { + return Cart {count}; +} + +function CartToggle({cart}: Pick
+ {results &&
+ keys.map((type) => {
+ const resourceResults = results[type];
+
+ if (resourceResults.nodes[0]?.__typename === 'Page') {
+ const pageResults = resourceResults as SearchQuery['pages'];
+ return resourceResults.nodes.length ? (
+
+ );
+}
+
+function SearchResultsProductsGrid({products}: Pick
+
+ {({nodes, isLoading, NextLink, PreviousLink}) => {
+ const itemsMarkup = nodes.map((product) => (
+
+
+
+ );
+}
+
+function SearchResultPageGrid({pages}: PickProducts
+
+
+ {product.title}
+
+
+ ));
+ return (
+
+
+ );
+ }}
+
+
+ {isLoading ? 'Loading...' : ↑ Load previous}
+
+
+
+ {itemsMarkup}
+
+
+ +
+
+ {isLoading ? 'Loading...' : Load more ↓}
+
+
+ +
+
+
+ );
+}
+
+function SearchResultArticleGrid({articles}: PickPages
+
+ {pages?.nodes?.map((page) => (
+
+
+
+ {page.title}
+
+
+ ))}
+ +
+
+
+ );
+}
+
+export function NoSearchResults() {
+ return Articles
+
+ {articles?.nodes?.map((article) => (
+
+
+
+ {article.title}
+
+
+ ))}
+ +
No results, try a different search.
; +} + +type ChildrenRenderProps = { + fetchResults: (event: React.ChangeEvent
+
+ );
+}
+
+function NoPredictiveSearchResults({
+ searchTerm,
+}: {
+ searchTerm: React.MutableRefObject
+ {results.map(({type, items}) => (
+
+ {/* view all results /search?q=term */}
+ {searchTerm.current && (
+
+
+ View all results for {searchTerm.current}
+ →
+
+ No results found for {searchTerm.current}
+
+
+
+ );
+}
+
+type SearchResultItemProps = Pick{isSuggestions ? 'Suggestions' : type}
+ +-
+ {items.map((item: NormalizedPredictiveSearchResultItem) => (
+
+ {item.styledTitle ? (
+
+ ) : (
+ {item.title}
+ )}
+ {item?.price && (
+
+
+
+
+
+ Oops
+{errorStatus}
+ {errorMessage && ( + + )} +
+ {/*
+ );
+}
+
+function FeaturedCollection({
+ collection,
+}: {
+ collection: FeaturedCollectionFragment;
+}) {
+ if (!collection) return null;
+ const image = collection?.image;
+ return (
+
+ {image && (
+
+
+ )}
+
+ );
+}
+
+function RecommendedProducts({
+ products,
+ cmsData,
+}: {
+ products: Promise
+ Loading...
}>
+
+
+ {cmsData?.banner_title}
+ +
+
+ );
+ }}
+
+
+ {cmsData.feature_title}
+
+ {products.nodes.map((product) => {
+ return (
+
+ {!product.images.nodes[0] ||
+ (product.images.nodes[0] != null && (
+
+ {product.images.nodes[0] && (
+
+ );
+ })}
+
+ {product.title}
*/} +{product.title}
+ +
+
+ {cmsData.view_all_product.cta_title.title}
+
+
+ + + ); +} + +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: 9, sortKey: UPDATED_AT, reverse: true) { + nodes { + ...RecommendedProduct + } + + } + } +` as const; diff --git a/app/routes/($locale).about.tsx b/app/routes/($locale).about.tsx new file mode 100644 index 0000000..803fa82 --- /dev/null +++ b/app/routes/($locale).about.tsx @@ -0,0 +1,53 @@ +import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import {useLoaderData, type MetaFunction} from '@remix-run/react'; +import '../styles/pages.css'; +import {getEntryByUid} from '~/components/contentstack-sdk'; + +export const meta: MetaFunction = () => { + return [{title: 'Hydrogen | Home'}]; +}; + +export async function loader({context}: LoaderFunctionArgs) { + const envConfig = context.env; + const fetchData = async () => { + try { + const result = await getEntryByUid({ + contentTypeUid: 'about_us', + entryUid: 'blta3850ce0d777edd0', + envConfig, + }); + return result; + } catch (error) { + // eslint-disable-next-line no-console + console.error('ERROR', error); + } + }; + return defer({ + fetchedData: await fetchData(), + }); +} + +export default function Homepage() { + const data = useLoaderData
+
+ );
+}
+
+function RecommendedProducts({
+ cmsData,
+}: {
+ cmsData: Awaited
+
+
+ );
+}
diff --git a/app/routes/($locale).account.$.tsx b/app/routes/($locale).account.$.tsx
new file mode 100644
index 0000000..8b14aaa
--- /dev/null
+++ b/app/routes/($locale).account.$.tsx
@@ -0,0 +1,8 @@
+import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+
+export async function loader({context}: LoaderFunctionArgs) {
+ if (await context.session.get('customerAccessToken')) {
+ return redirect('/account');
+ }
+ return redirect('/account/login');
+}
diff --git a/app/routes/($locale).account.addresses.tsx b/app/routes/($locale).account.addresses.tsx
new file mode 100644
index 0000000..23ff85b
--- /dev/null
+++ b/app/routes/($locale).account.addresses.tsx
@@ -0,0 +1,563 @@
+import type {MailingAddressInput} from '@shopify/hydrogen/storefront-api-types';
+import type {AddressFragment, CustomerFragment} from 'storefrontapi.generated';
+import {
+ json,
+ redirect,
+ type ActionFunctionArgs,
+ type LoaderFunctionArgs,
+} from '@shopify/remix-oxygen';
+import {
+ Form,
+ useActionData,
+ useNavigation,
+ useOutletContext,
+ type MetaFunction,
+} from '@remix-run/react';
+
+export type ActionResponse = {
+ addressId?: string | null;
+ createdAddress?: AddressFragment;
+ defaultAddress?: string | null;
+ deletedAddress?: string | null;
+ error: Record
+
+ {cmsData?.heading}
+{cmsData?.description}
++
+
+ {!addresses.nodes.length ? ( +
+ );
+}
+
+function NewAddressForm() {
+ const newAddress = {
+ address1: '',
+ address2: '',
+ city: '',
+ company: '',
+ country: '',
+ firstName: '',
+ id: 'new',
+ lastName: '',
+ phone: '',
+ province: '',
+ zip: '',
+ } as AddressFragment;
+
+ return (
+ Addresses
++ {!addresses.nodes.length ? ( +
You have no addresses saved.
+ ) : ( +
+
+
+
+
+ )}
+
+
+
+ +
+
+
+
+
+ )}
+
+
+ {addresses.nodes.map((address) => (
+
+ {({stateForMethod}) => (
+
+ ))}
+
+ );
+}
+
+export function AddressForm({
+ address,
+ defaultAddress,
+ children,
+}: {
+ children: (props: {
+ stateForMethod: (
+ method: 'PUT' | 'POST' | 'DELETE',
+ ) => ReturnType
+
+
+
+ )}
+
+
+
+ +
+ );
+}
+
+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.firstName && + order.shippingAddress.firstName + ' '} + {order.shippingAddress.lastName} +
+ {order?.shippingAddress?.formatted ? ( + order.shippingAddress.formatted.map((line: string) => ( +{line}
+ )) + ) : ( + <> + )} + + ) : ( +No shipping address defined
+ )} +Status
+
+
+ {order.fulfillmentStatus}
++ +
+
+ {lineItem?.variant?.image && (
+
+
+
+ )}
+
+
+
+ {lineItem.title}
+ {lineItem.variant!.title} +
+
+ {orders.nodes.length ?
+ );
+}
+
+function OrdersTable({orders}: Pick+ Orders ({numberOfOrders}) +
++ {orders.nodes.length ?
+ {orders?.nodes.length ? (
+
+ {({nodes, isLoading, PreviousLink, NextLink}) => {
+ return (
+ <>
+
+ {isLoading ? 'Loading...' : ↑ Load previous}
+
+ {nodes.map((order) => {
+ return
+ {isLoading ? 'Loading...' : Load more ↓}
+
+
+ );
+ }}
+
+ ) : (
+
+ );
+}
+
+function EmptyOrders() {
+ return (
+
+
+
+ );
+}
+
+function OrderItem({order}: {order: OrderItemFragment}) {
+ return (
+ <>
+
+ You haven't placed any orders yet.
++
+ Start Shopping → +
++ + ); +} + +const ORDER_ITEM_FRAGMENT = `#graphql + fragment OrderItem on Order { + currentTotalPrice { + amount + currencyCode + } + financialStatus + fulfillmentStatus + id + lineItems(first: 10) { + nodes { + title + variant { + image { + url + altText + height + width + } + } + } + } + orderNumber + customerUrl + statusUrl + processedAt + } +` as const; + +export const CUSTOMER_FRAGMENT = `#graphql + fragment CustomerOrders on Customer { + numberOfOrders + 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; + +// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/customer +const CUSTOMER_ORDERS_QUERY = `#graphql + ${CUSTOMER_FRAGMENT} + query CustomerOrders( + $country: CountryCode + $customerAccessToken: String! + $endCursor: String + $first: Int + $language: LanguageCode + $last: Int + $startCursor: String + ) @inContext(country: $country, language: $language) { + customer(customerAccessToken: $customerAccessToken) { + ...CustomerOrders + } + } +` as const; diff --git a/app/routes/($locale).account.profile.tsx b/app/routes/($locale).account.profile.tsx new file mode 100644 index 0000000..a546e6f --- /dev/null +++ b/app/routes/($locale).account.profile.tsx @@ -0,0 +1,294 @@ +import type {CustomerFragment} from 'storefrontapi.generated'; +import type {CustomerUpdateInput} from '@shopify/hydrogen/storefront-api-types'; +import { + json, + redirect, + type ActionFunctionArgs, + type LoaderFunctionArgs, +} from '@shopify/remix-oxygen'; +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) { + const customerAccessToken = await context.session.get('customerAccessToken'); + if (!customerAccessToken) { + return redirect('/account/login'); + } + return json({}); +} + +export async function action({request, context}: ActionFunctionArgs) { + const {session, storefront} = context; + + if (request.method !== 'PUT') { + return json({error: 'Method not allowed'}, {status: 405}); + } + + const form = await request.formData(); + const customerAccessToken = await session.get('customerAccessToken'); + if (!customerAccessToken) { + return json({error: 'Unauthorized'}, {status: 401}); + } + + try { + const password = getPassword(form); + const customer: CustomerUpdateInput = {}; + const validInputKeys = [ + 'firstName', + 'lastName', + 'email', + 'password', + 'phone', + ] as const; + for (const [key, value] of form.entries()) { + if (!validInputKeys.includes(key as any)) { + continue; + } + if (key === 'acceptsMarketing') { + customer.acceptsMarketing = value === 'on'; + } + if (typeof value === 'string' && value.length) { + customer[key as (typeof validInputKeys)[number]] = value; + } + } + + if (password) { + customer.password = password; + } + + // update customer and possibly password + const updated = await storefront.mutate(CUSTOMER_UPDATE_MUTATION, { + variables: { + customerAccessToken: customerAccessToken.accessToken, + customer, + }, + }); + + // check for mutation errors + if (updated.customerUpdate?.customerUserErrors?.length) { + return json( + {error: updated.customerUpdate?.customerUserErrors[0]}, + {status: 400}, + ); + } + + // update session with the updated access token + if (updated.customerUpdate?.customerAccessToken?.accessToken) { + session.set( + 'customerAccessToken', + updated.customerUpdate?.customerAccessToken, + ); + } + + return json( + {error: null, customer: updated.customerUpdate?.customer}, + { + headers: { + 'Set-Cookie': await session.commit(), + }, + }, + ); + } 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
+
+ +
+ );
+}
+
+function getPassword(form: FormData): string | undefined {
+ let password;
+ const currentPassword = form.get('currentPassword');
+ const newPassword = form.get('newPassword');
+ const newPasswordConfirm = form.get('newPasswordConfirm');
+
+ let passwordError;
+ if (newPassword && !currentPassword) {
+ passwordError = new Error('Current password is required.');
+ }
+
+ if (newPassword && newPassword !== newPasswordConfirm) {
+ passwordError = new Error('New passwords must match.');
+ }
+
+ if (newPassword && currentPassword && newPassword === currentPassword) {
+ passwordError = new Error(
+ 'New password must be different than current password.',
+ );
+ }
+
+ if (passwordError) {
+ throw passwordError;
+ }
+
+ if (currentPassword && newPassword) {
+ password = newPassword;
+ } else {
+ password = currentPassword;
+ }
+
+ return String(password);
+}
+
+const CUSTOMER_UPDATE_MUTATION = `#graphql
+ # https://shopify.dev/docs/api/storefront/latest/mutations/customerUpdate
+ mutation customerUpdate(
+ $customerAccessToken: String!,
+ $customer: CustomerUpdateInput!
+ $country: CountryCode
+ $language: LanguageCode
+ ) @inContext(language: $language, country: $country) {
+ customerUpdate(customerAccessToken: $customerAccessToken, customer: $customer) {
+ customer {
+ acceptsMarketing
+ email
+ firstName
+ id
+ lastName
+ phone
+ }
+ customerAccessToken {
+ accessToken
+ expiresAt
+ }
+ customerUserErrors {
+ code
+ field
+ message
+ }
+ }
+ }
+` as const;
diff --git a/app/routes/($locale).account.tsx b/app/routes/($locale).account.tsx
new file mode 100644
index 0000000..d52e884
--- /dev/null
+++ b/app/routes/($locale).account.tsx
@@ -0,0 +1,204 @@
+import {Form, NavLink, Outlet, useLoaderData} from '@remix-run/react';
+import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import type {CustomerFragment} from 'storefrontapi.generated';
+
+export function shouldRevalidate() {
+ return true;
+}
+
+export async function loader({request, context}: LoaderFunctionArgs) {
+ const {session, storefront} = context;
+ const {pathname} = new URL(request.url);
+ const customerAccessToken = await session.get('customerAccessToken');
+ const isLoggedIn = !!customerAccessToken?.accessToken;
+ const isAccountHome = pathname === '/account' || pathname === '/account/';
+ const isPrivateRoute =
+ /^\/account\/(orders|orders\/.*|profile|addresses|addresses\/.*)$/.test(
+ pathname,
+ );
+
+ if (!isLoggedIn) {
+ if (isPrivateRoute || isAccountHome) {
+ session.unset('customerAccessToken');
+ return redirect('/account/login', {
+ headers: {
+ 'Set-Cookie': await session.commit(),
+ },
+ });
+ } else {
+ // public subroute such as /account/login...
+ return json({
+ isLoggedIn: false,
+ isAccountHome,
+ isPrivateRoute,
+ customer: null,
+ });
+ }
+ } else {
+ // loggedIn, default redirect to the orders page
+ if (isAccountHome) {
+ return redirect('/account/orders');
+ }
+ }
+
+ try {
+ const {customer} = await storefront.query(CUSTOMER_QUERY, {
+ variables: {
+ customerAccessToken: customerAccessToken.accessToken,
+ country: storefront.i18n.country,
+ language: storefront.i18n.language,
+ },
+ cache: storefront.CacheNone(),
+ });
+
+ if (!customer) {
+ throw new Error('Customer not found');
+ }
+
+ return json(
+ {isLoggedIn, isPrivateRoute, isAccountHome, customer},
+ {
+ headers: {
+ 'Cache-Control': 'no-cache, no-store, must-revalidate',
+ },
+ },
+ );
+ } catch (error) {
+ // eslint-disable-next-line no-console
+ console.error('There was a problem loading account', error);
+ session.unset('customerAccessToken');
+ return redirect('/account/login', {
+ headers: {
+ 'Set-Cookie': await session.commit(),
+ },
+ });
+ }
+}
+
+export default function Acccount() {
+ const {customer, isPrivateRoute, isAccountHome} =
+ 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 (
+
+ );
+}
+
+export const CUSTOMER_FRAGMENT = `#graphql
+ fragment Customer on Customer {
+ acceptsMarketing
+ addresses(first: 6) {
+ nodes {
+ ...Address
+ }
+ }
+ defaultAddress {
+ ...Address
+ }
+ email
+ firstName
+ lastName
+ numberOfOrders
+ phone
+ }
+ fragment Address on MailingAddress {
+ id
+ formatted
+ firstName
+ lastName
+ company
+ address1
+ address2
+ country
+ province
+ city
+ zip
+ phone
+ }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/customer
+const CUSTOMER_QUERY = `#graphql
+ query Customer(
+ $customerAccessToken: String!
+ $country: CountryCode
+ $language: LanguageCode
+ ) @inContext(country: $country, language: $language) {
+ customer(customerAccessToken: $customerAccessToken) {
+ ...Customer
+ }
+ }
+ ${CUSTOMER_FRAGMENT}
+` as const;
diff --git a/app/routes/($locale).account_.activate.$id.$activationToken.tsx b/app/routes/($locale).account_.activate.$id.$activationToken.tsx
new file mode 100644
index 0000000..69724e9
--- /dev/null
+++ b/app/routes/($locale).account_.activate.$id.$activationToken.tsx
@@ -0,0 +1,161 @@
+import {
+ json,
+ redirect,
+ type ActionFunctionArgs,
+ type LoaderFunctionArgs,
+} from '@shopify/remix-oxygen';
+import {Form, useActionData, type MetaFunction} from '@remix-run/react';
+
+type ActionResponse = {
+ error: string | null;
+};
+
+export const meta: MetaFunction = () => {
+ return [{title: 'Activate Account'}];
+};
+
+export async function loader({context}: LoaderFunctionArgs) {
+ if (await context.session.get('customerAccessToken')) {
+ return redirect('/account');
+ }
+ return json({});
+}
+
+export async function action({request, context, params}: ActionFunctionArgs) {
+ const {session, storefront} = context;
+ const {id, activationToken} = params;
+
+ if (request.method !== 'POST') {
+ return json({error: 'Method not allowed'}, {status: 405});
+ }
+
+ try {
+ if (!id || !activationToken) {
+ throw new Error('Missing token. The link you followed might be wrong.');
+ }
+
+ const form = await request.formData();
+ const password = form.has('password') ? String(form.get('password')) : null;
+ const passwordConfirm = form.has('passwordConfirm')
+ ? String(form.get('passwordConfirm'))
+ : null;
+
+ const validPasswords =
+ password && passwordConfirm && password === passwordConfirm;
+
+ if (!validPasswords) {
+ throw new Error('Passwords do not match');
+ }
+
+ const {customerActivate} = await storefront.mutate(
+ CUSTOMER_ACTIVATE_MUTATION,
+ {
+ variables: {
+ id: `gid://shopify/Customer/${id}`,
+ input: {
+ password,
+ activationToken,
+ },
+ },
+ },
+ );
+
+ if (customerActivate?.customerUserErrors?.length) {
+ throw new Error(customerActivate.customerUserErrors[0].message);
+ }
+
+ const {customerAccessToken} = customerActivate ?? {};
+ if (!customerAccessToken) {
+ throw new Error('Could not activate account.');
+ }
+ session.set('customerAccessToken', customerAccessToken);
+
+ return redirect('/account', {
+ headers: {
+ 'Set-Cookie': await session.commit(),
+ },
+ });
+ } catch (error: unknown) {
+ if (error instanceof Error) {
+ return json({error: error.message}, {status: 400});
+ }
+ return json({error}, {status: 400});
+ }
+}
+
+export default function Activate() {
+ const action = useActionData{heading}
++
+
+ );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/mutations/customeractivate
+const CUSTOMER_ACTIVATE_MUTATION = `#graphql
+ mutation customerActivate(
+ $id: ID!,
+ $input: CustomerActivateInput!,
+ $country: CountryCode,
+ $language: LanguageCode
+ ) @inContext(country: $country, language: $language) {
+ customerActivate(id: $id, input: $input) {
+ customerAccessToken {
+ accessToken
+ expiresAt
+ }
+ customerUserErrors {
+ code
+ field
+ message
+ }
+ }
+ }
+` as const;
diff --git a/app/routes/($locale).account_.login.tsx b/app/routes/($locale).account_.login.tsx
new file mode 100644
index 0000000..0277df9
--- /dev/null
+++ b/app/routes/($locale).account_.login.tsx
@@ -0,0 +1,142 @@
+import {
+ json,
+ redirect,
+ type ActionFunctionArgs,
+ type LoaderFunctionArgs,
+} from '@shopify/remix-oxygen';
+import {Form, Link, useActionData, type MetaFunction} from '@remix-run/react';
+
+type ActionResponse = {
+ error: string | null;
+};
+
+export const meta: MetaFunction = () => {
+ return [{title: 'Login'}];
+};
+
+export async function loader({context}: LoaderFunctionArgs) {
+ if (await context.session.get('customerAccessToken')) {
+ return redirect('/account');
+ }
+ return json({});
+}
+
+export async function action({request, context}: ActionFunctionArgs) {
+ const {session, storefront} = context;
+
+ if (request.method !== 'POST') {
+ return json({error: 'Method not allowed'}, {status: 405});
+ }
+
+ try {
+ const form = await request.formData();
+ const email = String(form.has('email') ? form.get('email') : '');
+ const password = String(form.has('password') ? form.get('password') : '');
+ const validInputs = Boolean(email && password);
+
+ if (!validInputs) {
+ throw new Error('Please provide both an email and a password.');
+ }
+
+ const {customerAccessTokenCreate} = await storefront.mutate(
+ LOGIN_MUTATION,
+ {
+ variables: {
+ input: {email, password},
+ },
+ },
+ );
+
+ if (!customerAccessTokenCreate?.customerAccessToken?.accessToken) {
+ throw new Error(customerAccessTokenCreate?.customerUserErrors[0].message);
+ }
+
+ const {customerAccessToken} = customerAccessTokenCreate;
+ session.set('customerAccessToken', customerAccessToken);
+
+ return redirect('/account', {
+ headers: {
+ 'Set-Cookie': await session.commit(),
+ },
+ });
+ } catch (error: unknown) {
+ if (error instanceof Error) {
+ return json({error: error.message}, {status: 400});
+ }
+ return json({error}, {status: 400});
+ }
+}
+
+export default function Login() {
+ const data = useActionDataActivate Account.
+Create your password to activate your account.
+ +
+
+
+ );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/mutations/customeraccesstokencreate
+const LOGIN_MUTATION = `#graphql
+ mutation login($input: CustomerAccessTokenCreateInput!) {
+ customerAccessTokenCreate(input: $input) {
+ customerUserErrors {
+ code
+ field
+ message
+ }
+ customerAccessToken {
+ accessToken
+ expiresAt
+ }
+ }
+ }
+` as const;
diff --git a/app/routes/($locale).account_.logout.tsx b/app/routes/($locale).account_.logout.tsx
new file mode 100644
index 0000000..ef1ecb2
--- /dev/null
+++ b/app/routes/($locale).account_.logout.tsx
@@ -0,0 +1,29 @@
+import {json, redirect, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {type MetaFunction} from '@remix-run/react';
+
+export const meta: MetaFunction = () => {
+ return [{title: 'Logout'}];
+};
+
+export async function loader() {
+ return redirect('/account/login');
+}
+
+export async function action({request, context}: ActionFunctionArgs) {
+ const {session} = context;
+ session.unset('customerAccessToken');
+
+ if (request.method !== 'POST') {
+ return json({error: 'Method not allowed'}, {status: 405});
+ }
+
+ return redirect('/', {
+ headers: {
+ 'Set-Cookie': await session.commit(),
+ },
+ });
+}
+
+export default function Logout() {
+ return null;
+}
diff --git a/app/routes/($locale).account_.recover.tsx b/app/routes/($locale).account_.recover.tsx
new file mode 100644
index 0000000..25a20fe
--- /dev/null
+++ b/app/routes/($locale).account_.recover.tsx
@@ -0,0 +1,129 @@
+import {
+ json,
+ redirect,
+ type LoaderFunctionArgs,
+ type ActionFunctionArgs,
+} from '@shopify/remix-oxygen';
+import {Form, Link, useActionData} from '@remix-run/react';
+
+type ActionResponse = {
+ error?: string;
+ resetRequested?: boolean;
+};
+
+export async function loader({context}: LoaderFunctionArgs) {
+ const customerAccessToken = await context.session.get('customerAccessToken');
+ if (customerAccessToken) {
+ return redirect('/account');
+ }
+
+ return json({});
+}
+
+export async function action({request, context}: ActionFunctionArgs) {
+ const {storefront} = context;
+ const form = await request.formData();
+ const email = form.has('email') ? String(form.get('email')) : null;
+
+ if (request.method !== 'POST') {
+ return json({error: 'Method not allowed'}, {status: 405});
+ }
+
+ try {
+ if (!email) {
+ throw new Error('Please provide an email.');
+ }
+ await storefront.mutate(CUSTOMER_RECOVER_MUTATION, {
+ variables: {email},
+ });
+
+ return json({resetRequested: true});
+ } catch (error: unknown) {
+ const resetRequested = false;
+ if (error instanceof Error) {
+ return json({error: error.message, resetRequested}, {status: 400});
+ }
+ return json({error, resetRequested}, {status: 400});
+ }
+}
+
+export default function Recover() {
+ const action = useActionDataSign in.
+ ++
+
+ + Forgot password → +
++ Register → +
+
+
+ );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/mutations/customerrecover
+const CUSTOMER_RECOVER_MUTATION = `#graphql
+ mutation customerRecover(
+ $email: String!,
+ $country: CountryCode,
+ $language: LanguageCode
+ ) @inContext(country: $country, language: $language) {
+ customerRecover(email: $email) {
+ customerUserErrors {
+ code
+ field
+ message
+ }
+ }
+ }
+` as const;
diff --git a/app/routes/($locale).account_.register.tsx b/app/routes/($locale).account_.register.tsx
new file mode 100644
index 0000000..3253007
--- /dev/null
+++ b/app/routes/($locale).account_.register.tsx
@@ -0,0 +1,207 @@
+import {
+ json,
+ redirect,
+ type ActionFunctionArgs,
+ type LoaderFunctionArgs,
+} from '@shopify/remix-oxygen';
+import {Form, Link, useActionData} from '@remix-run/react';
+import type {CustomerCreateMutation} from 'storefrontapi.generated';
+
+type ActionResponse = {
+ error: string | null;
+ newCustomer:
+ | NonNullable
+ {action?.resetRequested ? (
+ <>
+
+ Return to Login + + ) : ( + <> +
+ +
+ Request Sent.
++ If that email address is in our system, you will receive an email + with instructions about how to reset your password in a few + minutes. +
++ Return to Login + + ) : ( + <> +
Forgot Password.
++ Enter the email address associated with your account to receive a + link to reset your password. +
++ +
+
+
+
+ )}
+ +
+ Login → +
+
+
+
+ );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/mutations/customerCreate
+const CUSTOMER_CREATE_MUTATION = `#graphql
+ mutation customerCreate(
+ $input: CustomerCreateInput!,
+ $country: CountryCode,
+ $language: LanguageCode
+ ) @inContext(country: $country, language: $language) {
+ customerCreate(input: $input) {
+ customer {
+ id
+ }
+ customerUserErrors {
+ code
+ field
+ message
+ }
+ }
+ }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/mutations/customeraccesstokencreate
+const REGISTER_LOGIN_MUTATION = `#graphql
+ mutation registerLogin(
+ $input: CustomerAccessTokenCreateInput!,
+ $country: CountryCode,
+ $language: LanguageCode
+ ) @inContext(country: $country, language: $language) {
+ customerAccessTokenCreate(input: $input) {
+ customerUserErrors {
+ code
+ field
+ message
+ }
+ customerAccessToken {
+ accessToken
+ expiresAt
+ }
+ }
+ }
+` as const;
diff --git a/app/routes/($locale).account_.reset.$id.$resetToken.tsx b/app/routes/($locale).account_.reset.$id.$resetToken.tsx
new file mode 100644
index 0000000..a116c13
--- /dev/null
+++ b/app/routes/($locale).account_.reset.$id.$resetToken.tsx
@@ -0,0 +1,136 @@
+import {type ActionFunctionArgs, json, redirect} from '@shopify/remix-oxygen';
+import {Form, useActionData, type MetaFunction} from '@remix-run/react';
+
+type ActionResponse = {
+ error: string | null;
+};
+
+export const meta: MetaFunction = () => {
+ return [{title: 'Reset Password'}];
+};
+
+export async function action({request, context, params}: ActionFunctionArgs) {
+ if (request.method !== 'POST') {
+ return json({error: 'Method not allowed'}, {status: 405});
+ }
+ const {id, resetToken} = params;
+ const {session, storefront} = context;
+
+ try {
+ if (!id || !resetToken) {
+ throw new Error('customer token or id not found');
+ }
+
+ const form = await request.formData();
+ const password = form.has('password') ? String(form.get('password')) : '';
+ const passwordConfirm = form.has('passwordConfirm')
+ ? String(form.get('passwordConfirm'))
+ : '';
+ const validInputs = Boolean(password && passwordConfirm);
+ if (validInputs && password !== passwordConfirm) {
+ throw new Error('Please provide matching passwords');
+ }
+
+ const {customerReset} = await storefront.mutate(CUSTOMER_RESET_MUTATION, {
+ variables: {
+ id: `gid://shopify/Customer/${id}`,
+ input: {password, resetToken},
+ },
+ });
+
+ if (customerReset?.customerUserErrors?.length) {
+ throw new Error(customerReset?.customerUserErrors[0].message);
+ }
+
+ if (!customerReset?.customerAccessToken) {
+ throw new Error('Access token not found. Please try again.');
+ }
+ session.set('customerAccessToken', customerReset.customerAccessToken);
+
+ return redirect('/account', {
+ headers: {
+ 'Set-Cookie': await session.commit(),
+ },
+ });
+ } catch (error: unknown) {
+ if (error instanceof Error) {
+ return json({error: error.message}, {status: 400});
+ }
+ return json({error}, {status: 400});
+ }
+}
+
+export default function Reset() {
+ const action = useActionDataRegister.
+ ++
+ Login → +
+
+
+ );
+}
+
+// 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/($locale).blogs.$blogHandle._index.tsx b/app/routes/($locale).blogs.$blogHandle._index.tsx
new file mode 100644
index 0000000..9b9f069
--- /dev/null
+++ b/app/routes/($locale).blogs.$blogHandle._index.tsx
@@ -0,0 +1,162 @@
+import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import {Image, Pagination, getPaginationVariables} from '@shopify/hydrogen';
+import type {ArticleItemFragment} from 'storefrontapi.generated';
+
+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}
+
+
+ {({nodes, isLoading, PreviousLink, NextLink}) => {
+ return (
+ <>
+
+ {isLoading ? 'Loading...' : ↑ Load previous}
+
+ {nodes.map((article, index) => {
+ return (
+
+ {isLoading ? 'Loading...' : Load more ↓}
+
+
+ );
+ }}
+
+
+
+
+ {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/($locale).blogs._index.tsx b/app/routes/($locale).blogs._index.tsx
new file mode 100644
index 0000000..8d92c6a
--- /dev/null
+++ b/app/routes/($locale).blogs._index.tsx
@@ -0,0 +1,96 @@
+import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
+
+export const meta: MetaFunction = () => {
+ return [{title: `Hydrogen | Blogs`}];
+};
+
+export const loader = async ({
+ request,
+ context: {storefront},
+}: LoaderFunctionArgs) => {
+ const paginationVariables = getPaginationVariables(request, {
+ pageBy: 10,
+ });
+
+ const {blogs} = await storefront.query(BLOGS_QUERY, {
+ variables: {
+ ...paginationVariables,
+ },
+ });
+
+ return json({blogs});
+};
+
+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/($locale).cart.$lines.tsx b/app/routes/($locale).cart.$lines.tsx
new file mode 100644
index 0000000..fab617e
--- /dev/null
+++ b/app/routes/($locale).cart.$lines.tsx
@@ -0,0 +1,69 @@
+import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+
+/**
+ * Automatically creates a new cart based on the URL and redirects straight to checkout.
+ * Expected URL structure:
+ * ```js
+ * /cart/Blogs
+
+
+ {({nodes, isLoading, PreviousLink, NextLink}) => {
+ return (
+ <>
+
+ {isLoading ? 'Loading...' : ↑ Load previous}
+
+ {nodes.map((blog) => {
+ return (
+
+
+ {isLoading ? 'Loading...' : Load more ↓}
+
+
+ );
+ }}
+
+
+ {blog.title}
+ + ); + })} +
+ Loading cart ...}>
+ An error occurred
}
+ >
+ {(cart) => {
+ return Cart
+
+
+ {({nodes, isLoading, PreviousLink, NextLink}) => (
+ <>
+
+ {isLoading ? 'Loading...' : ↑ Load previous}
+
+
+
+ {isLoading ? 'Loading...' : Load more ↓}
+
+
+ )}
+
+
+ );
+}
+
+function ProductsGrid({products}: {products: ProductItemFragment[]}) {
+ return (
+ {collection.title}
+{collection.description}
++
+ {products.map((product, index) => {
+ return (
+
+ );
+}
+
+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 && (
+ {product.title}
+ +
+
+ {({nodes, isLoading, PreviousLink, NextLink}) => (
+
+
+ );
+}
+
+function CollectionsGrid({collections}: {collections: CollectionFragment[]}) {
+ return (
+ Collections
+
+
+ {isLoading ? (
+ 'Loading...'
+ ) : (
+ ↑ Load previous
+ )}
+
+
+ {isLoading ? (
+ 'Loading...'
+ ) : (
+ Load more ↓
+ )}
+
+
+ )}
+
+ {collections.map((collection, index) => (
+
+ );
+}
+
+function CollectionItem({
+ collection,
+ index,
+}: {
+ collection: CollectionFragment;
+ index: number;
+}) {
+ return (
+
+ {collection?.image && (
+ {collection.title}
+ + ); +} + +const COLLECTIONS_QUERY = `#graphql + fragment Collection on Collection { + id + title + handle + description + 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/($locale).collections.all.tsx b/app/routes/($locale).collections.all.tsx new file mode 100644 index 0000000..df5fa2c --- /dev/null +++ b/app/routes/($locale).collections.all.tsx @@ -0,0 +1,198 @@ +import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import {Await, useLoaderData, Link, type MetaFunction} from '@remix-run/react'; +import type {ReactNode} from 'react'; +import {Fragment, Suspense, useEffect} from 'react'; +import { + getPaginationVariables, + Image, + Money, + Pagination, +} from '@shopify/hydrogen'; +import '../styles/pages.css'; +import {getEntryByUid} from '~/components/contentstack-sdk'; +import NoImg from '../../public/NoImg.svg'; + +export const meta: MetaFunction = () => { + return [{title: 'Hydrogen | Products'}]; +}; + +export async function loader({context, request}: LoaderFunctionArgs) { + const {storefront} = context; + const paginationVariables = getPaginationVariables(request, { + pageBy: 8, + }); + const recommendedProducts = await storefront.query( + RECOMMENDED_PRODUCTS_QUERY, + { + variables: paginationVariables, + }, + ); + + const envConfig = context.env; + const fetchData = async () => { + try { + const result = await getEntryByUid({ + contentTypeUid: 'shopify_home', + entryUid: 'blt9743f5cf3740e66a', + envConfig, + }); + return result; + } catch (error) { + // eslint-disable-next-line no-console + console.error('ERROR', error); + } + }; + return defer({ + recommendedProducts, + fetchedData: await fetchData(), + }); +} + +export default function Productpage() { + const data = useLoaderData
+
+ {({nodes, isLoading, PreviousLink, NextLink}) => (
+
+
+ );
+}
+
+function RecommendedProducts({
+ products,
+ cmsData,
+}: {
+ products: any;
+ cmsData: any;
+}) {
+ console.log('product*****', products);
+ return (
+
+ {/*
+ {isLoading ? (
+ 'Loading...'
+ ) : (
+ ↑ Load previous
+ )}
+ */}
+
+ {isLoading ? (
+ 'Loading...'
+ ) : (
+ Load more ↓
+ )}
+
+
+ )}
+
+ Loading...
}>
+
+
+
+
+
+
+ {cmsData.product_title}
+
+ {products?.map((product: any) => {
+ console.log('product', product?.images?.nodes);
+ return (
+
+ {/* { */}
+ {/* product?.images?.nodes[0] && */}
+ {/* product?.images?.nodes.length > 0 */}
+ {/* && ( */}
+ {/* // || (product.images.nodes[0] != null */}
+
+ {product.images.nodes[0] ? (
+ 
+ //
+ );
+ })}
+
+ {product.title}
*/} +{product.title}
+ ++ + ); +} + +const RECOMMENDED_PRODUCTS_QUERY = `#graphql + fragment Product on Product { + id + title + handle + priceRange { + minVariantPrice { + amount + currencyCode + } + } + images(first: 1) { + nodes { + id + url + altText + width + height + } + } + } + query RecommendedProducts ( $country: CountryCode + $endCursor: String + $first: Int + $language: LanguageCode + $last: Int + $startCursor: String + ) @inContext(country: $country, language: $language) { + products(first: $first, + last: $last, + before: $startCursor, + after: $endCursor + ) { + nodes { + ...Product + } + pageInfo { + hasNextPage + hasPreviousPage + startCursor + endCursor + } + } + } +` as const; diff --git a/app/routes/($locale).discount.$code.tsx b/app/routes/($locale).discount.$code.tsx new file mode 100644 index 0000000..c613c82 --- /dev/null +++ b/app/routes/($locale).discount.$code.tsx @@ -0,0 +1,47 @@ +import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; + +/** + * Automatically applies a discount found on the url + * If a cart exists it's updated with the discount, otherwise a cart is created with the discount already applied + * + * @example + * Example path applying a discount and optional redirecting (defaults to the home page) + * ```js + * /discount/FREESHIPPING?redirect=/products + * + * ``` + */ +export async function loader({request, context, params}: LoaderFunctionArgs) { + const {cart} = context; + const {code} = params; + + const url = new URL(request.url); + const searchParams = new URLSearchParams(url.search); + let redirectParam = + searchParams.get('redirect') || searchParams.get('return_to') || '/'; + + if (redirectParam.includes('//')) { + // Avoid redirecting to external URLs to prevent phishing attacks + redirectParam = '/'; + } + + searchParams.delete('redirect'); + searchParams.delete('return_to'); + + const redirectUrl = `${redirectParam}?${searchParams}`; + + if (!code) { + return redirect(redirectUrl); + } + + const result = await cart.updateDiscountCodes([code]); + const headers = cart.setCartId(result.cart.id); + + // Using set-cookie on a 303 redirect will not work if the domain origin have port number (:3000) + // If there is no cart id and a new cart id is created in the progress, it will not be set in the cookie + // on localhost:3000 + return redirect(redirectUrl, { + status: 303, + headers, + }); +} diff --git a/app/routes/($locale).pages.$handle.tsx b/app/routes/($locale).pages.$handle.tsx new file mode 100644 index 0000000..30f3130 --- /dev/null +++ b/app/routes/($locale).pages.$handle.tsx @@ -0,0 +1,104 @@ +/* eslint-disable prettier/prettier */ +import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import {useLoaderData, type MetaFunction} from '@remix-run/react'; +import { getEntry, getEntryByUid } from '../components/contentstack-sdk' +import contact_us from '../public/contact_us.svg'; + +export const meta: MetaFunction
+
+ {/*
+ {/* */}
+
+ );
+}
+
+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/($locale).policies.$handle.tsx b/app/routes/($locale).policies.$handle.tsx
new file mode 100644
index 0000000..367d4c4
--- /dev/null
+++ b/app/routes/($locale).policies.$handle.tsx
@@ -0,0 +1,93 @@
+import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+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}
*/} +
+
+
+ {fetchData?.heading}
+{fetchData?.description}
+
+
+
+
+
+ );
+}
+
+// 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/($locale).policies._index.tsx b/app/routes/($locale).policies._index.tsx
new file mode 100644
index 0000000..243ee1f
--- /dev/null
+++ b/app/routes/($locale).policies._index.tsx
@@ -0,0 +1,63 @@
+import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+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/($locale).products.$handle.tsx b/app/routes/($locale).products.$handle.tsx
new file mode 100644
index 0000000..669fd99
--- /dev/null
+++ b/app/routes/($locale).products.$handle.tsx
@@ -0,0 +1,432 @@
+import {Suspense} from 'react';
+import {defer, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {
+ Await,
+ Link,
+ useLoaderData,
+ type MetaFunction,
+ type FetcherWithComponents,
+} from '@remix-run/react';
+import type {
+ ProductFragment,
+ ProductVariantsQuery,
+ ProductVariantFragment,
+} from 'storefrontapi.generated';
+
+import {
+ Image,
+ Money,
+ VariantSelector,
+ type VariantOption,
+ getSelectedProductOptions,
+ CartForm,
+} from '@shopify/hydrogen';
+import type {
+ CartLineInput,
+ SelectedOption,
+} from '@shopify/hydrogen/storefront-api-types';
+import {getVariantUrl} from '~/utils';
+
+export const meta: MetaFunctionPolicies
+
+ {policies.map((policy) => {
+ if (!policy) return null;
+ return (
+
+ );
+ })}
+
+
+
+ );
+}
+
+function ProductImage({image}: {image: ProductVariantFragment['image']}) {
+ if (!image) {
+ return ;
+ }
+ return (
+
+
+ );
+}
+
+function ProductMain({
+ selectedVariant,
+ product,
+ variants,
+}: {
+ product: ProductFragment;
+ selectedVariant: ProductFragment['selectedVariant'];
+ variants: Promise
+
+
+ {(data) => (
+
+
+
+
+
+ +
+
+ );
+}
+
+function ProductPrice({
+ selectedVariant,
+}: {
+ selectedVariant: ProductFragment['selectedVariant'];
+}) {
+ return (
+ {title}
++
+
+
+ Description +
++ +
+
+ {selectedVariant?.compareAtPrice ? (
+ <>
+
+
+ );
+}
+
+function ProductForm({
+ product,
+ selectedVariant,
+ variants,
+}: {
+ product: ProductFragment;
+ selectedVariant: ProductFragment['selectedVariant'];
+ variants: ArraySale
++
+ {selectedVariant ?
+
+
+
+ ) : (
+ selectedVariant?.price &&
+
+ {({option}) => {
+ return
+
+ {
+ window.location.href = window.location.href + '#cart-aside';
+ }}
+ lines={
+ selectedVariant
+ ? [
+ {
+ merchandiseId: selectedVariant.id,
+ quantity: 1,
+ },
+ ]
+ : []
+ }
+ >
+ {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
+
+
+ );
+}
+
+function ProductOptions({option}: {option: VariantOption}) {
+ return (
+ +
+
+
+ );
+}
+
+function AddToCartButton({
+ analytics,
+ children,
+ disabled,
+ lines,
+ onClick,
+}: {
+ analytics?: unknown;
+ children: React.ReactNode;
+ disabled?: boolean;
+ lines: CartLineInput[];
+ onClick?: () => void;
+}) {
+ return (
+ {option.name}
+
+ {option.values.map(({value, isAvailable, isActive, to}) => {
+ return (
+
+ {value}
+
+ );
+ })}
+
+ +
+
+ );
+}
+
+const SEARCH_QUERY = `#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
+ }
+ }
+ }
+ }
+ fragment SearchPage on Page {
+ __typename
+ handle
+ id
+ title
+ trackingParameters
+ }
+ fragment SearchArticle on Article {
+ __typename
+ handle
+ id
+ title
+ trackingParameters
+ }
+ query search(
+ $country: CountryCode
+ $endCursor: String
+ $first: Int
+ $language: LanguageCode
+ $last: Int
+ $query: String!
+ $startCursor: String
+ ) @inContext(country: $country, language: $language) {
+ products: search(
+ query: $query,
+ unavailableProducts: HIDE,
+ types: [PRODUCT],
+ first: $first,
+ sortKey: RELEVANCE,
+ last: $last,
+ before: $startCursor,
+ after: $endCursor
+ ) {
+ nodes {
+ ...on Product {
+ ...SearchProduct
+ }
+ }
+ pageInfo {
+ hasNextPage
+ hasPreviousPage
+ startCursor
+ endCursor
+ }
+ }
+ pages: search(
+ query: $query,
+ types: [PAGE],
+ first: 10
+ ) {
+ nodes {
+ ...on Page {
+ ...SearchPage
+ }
+ }
+ }
+ articles: search(
+ query: $query,
+ types: [ARTICLE],
+ first: 10
+ ) {
+ nodes {
+ ...on Article {
+ ...SearchArticle
+ }
+ }
+ }
+ }
+` as const;
diff --git a/app/routes/[robots.txt].tsx b/app/routes/[robots.txt].tsx
new file mode 100644
index 0000000..3feeb47
--- /dev/null
+++ b/app/routes/[robots.txt].tsx
@@ -0,0 +1,118 @@
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+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/_index.tsx b/app/routes/_index.tsx
new file mode 100644
index 0000000..04d2ef6
--- /dev/null
+++ b/app/routes/_index.tsx
@@ -0,0 +1,145 @@
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+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({context}: LoaderFunctionArgs) {
+ const {storefront} = context;
+ const {collections} = await storefront.query(FEATURED_COLLECTION_QUERY);
+ const featuredCollection = collections.nodes[0];
+ const recommendedProducts = storefront.query(RECOMMENDED_PRODUCTS_QUERY);
+
+ return defer({featuredCollection, recommendedProducts});
+}
+
+export default function Homepage() {
+ const data = useLoaderDataSearch
+
+
+ );
+}
+
+function FeaturedCollection({
+ collection,
+}: {
+ collection: FeaturedCollectionFragment;
+}) {
+ if (!collection) return null;
+ const image = collection?.image;
+ return (
+
+ {image && (
+
+
+ )}
+ {collection.title}
+ + ); +} + +function RecommendedProducts({ + products, +}: { + products: Promise
+ Loading...
}>
+ Recommended Products
+
+ {products.nodes.map((product) => (
+
+
+ )}
+ {product.title}
+ ++ + ); +} + +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/styles/app.css b/app/styles/app.css new file mode 100644 index 0000000..7b26c00 --- /dev/null +++ b/app/styles/app.css @@ -0,0 +1,493 @@ +:root { + --aside-width: 400px; + --cart-aside-summary-height-with-discount: 300px; + --cart-aside-summary-height: 250px; + --grid-item-width: 355px; + --header-height: 64px; + --color-dark: #000; + --color-light: #fff; +} + +img { + border-radius: 4px; +} + +/* +* -------------------------------------------------- +* components/Aside +* -------------------------------------------------- +*/ +aside { + background: var(--color-light); + box-shadow: 0 0 50px rgba(0, 0, 0, 0.3); + height: 100vh; + max-width: var(--aside-width); + min-width: var(--aside-width); + position: fixed; + right: calc(-1 * var(--aside-width)); + top: 0; + transition: transform 200ms ease-in-out; +} + +aside header { + align-items: center; + border-bottom: 1px solid var(--color-dark); + display: flex; + height: var(--header-height); + justify-content: space-between; + padding: 0 20px; +} + +aside header h3 { + margin: 0; +} + +aside header .close { + font-weight: bold; + opacity: 0.8; + text-decoration: none; + transition: all 200ms; + width: 20px; +} + +aside header .close:hover { + opacity: 1; +} + +aside header h2 { + margin-bottom: 0.6rem; + margin-top: 0; +} + +aside main { + margin: 1rem; +} + +aside p { + margin: 0 0 0.25rem; +} + +aside p:last-child { + margin: 0; +} + +aside li { + margin-bottom: 0.125rem; +} + +.overlay { + background: rgba(0, 0, 0, 0.2); + bottom: 0; + left: 0; + opacity: 0; + pointer-events: none; + position: fixed; + right: 0; + top: 0; + transition: opacity 400ms ease-in-out; + transition: opacity 400ms; + visibility: hidden; + z-index: 10; +} + +.overlay .close-outside { + background: transparent; + border: none; + color: transparent; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: calc(100% - var(--aside-width)); +} + +.overlay .light { + background: rgba(255, 255, 255, 0.5); +} + +.overlay .cancel { + cursor: default; + height: 100%; + position: absolute; + width: 100%; +} + +.overlay:target { + opacity: 1; + pointer-events: auto; + visibility: visible; +} +/* reveal aside */ +.overlay:target aside { + transform: translateX(calc(var(--aside-width) * -1)); +} + +/* +* -------------------------------------------------- +* components/Header +* -------------------------------------------------- +*/ +.header { + align-items: center; + background: #fff; + display: flex; + height: var(--header-height); + padding: 0 1rem; + position: sticky; + top: 0; + z-index: 999; + border-bottom: .1rem solid rgba(18,18,18, 0.08); +} + +.header-menu-mobile-toggle { + @media (min-width: 48em) { + display: none; + } +} + +.header-menu-mobile { + display: flex; + flex-direction: column; + grid-gap: 1rem; +} + +.header-menu-desktop { + display: none; + grid-gap: 1rem; + @media (min-width: 45em) { + display: flex; + grid-gap: 1rem; + margin-left: 3rem; + } +} + +.header-menu-item { + cursor: pointer; +} + +.header-ctas { + align-items: center; + display: flex; + grid-gap: 1rem; + margin-left: auto; +} + +/* +* -------------------------------------------------- +* components/Footer +* -------------------------------------------------- +*/ +.footer { + /* background: var(--color-dark); */ + border-top: .1rem solid rgba(18,18,18, 0.08); + margin-top: auto; + padding: 36px; + text-align: center; +} + +.footer-menu-missing { + display: inline-block; + margin: 1rem; +} + +.footer-menu { + align-items: center; + display: flex; + grid-gap: 1rem; + padding: 1rem; +} + +.footer-menu a { + color: var(--color-light); +} + +/* +* -------------------------------------------------- +* components/Cart +* -------------------------------------------------- +*/ +.cart-main { + height: 100%; + max-height: calc(100vh - var(--cart-aside-summary-height)); + overflow-y: auto; + width: auto; +} + +.cart-main.with-discount { + max-height: calc(100vh - var(--cart-aside-summary-height-with-discount)); +} + +.cart-line { + display: flex; + padding: 0.75rem 0; +} + +.cart-line img { + height: 100%; + display: block; + margin-right: 0.75rem; +} + +.cart-summary-page { + position: relative; +} + +.cart-summary-aside { + background: white; + border-top: 1px solid var(--color-dark); + bottom: 0; + padding-top: 0.75rem; + position: absolute; + width: calc(var(--aside-width) - 40px); +} + +.cart-line-quantiy { + display: flex; +} + +.cart-discount { + align-items: center; + display: flex; + margin-top: 0.25rem; +} + +.cart-subtotal { + align-items: center; + display: flex; +} +/* +* -------------------------------------------------- +* components/Search +* -------------------------------------------------- +*/ +.predictive-search { + height: calc(100vh - var(--header-height) - 40px); + overflow-y: auto; +} + +.predictive-search-form { + background: var(--color-light); + position: sticky; + top: 0; +} + +.predictive-search-result { + margin-bottom: 2rem; +} + +.predictive-search-result h5 { + text-transform: uppercase; +} + +.predictive-search-result-item { + margin-bottom: 0.5rem; +} + +.predictive-search-result-item a { + align-items: center; + display: flex; +} + +.predictive-search-result-item a img { + margin-right: 0.75rem; + height: 100%; +} + +.search-result { + margin-bottom: 1.5rem; +} + +.search-results-item { + margin-bottom: 0.5rem; +} + +/* +* -------------------------------------------------- +* routes/__index +* -------------------------------------------------- +*/ +.featured-collection { + display: block; + margin-bottom: 2rem; + position: relative; +} + +.featured-collection-image { + aspect-ratio: 1 / 1; + @media (min-width: 45em) { + aspect-ratio: 16 / 9; + } +} + +.featured-collection img { + height: auto; + max-height: 100%; + object-fit: cover; +} + +.recommended-products-grid { + display: grid; + grid-gap: 1.5rem; + grid-template-columns: repeat(2, 1fr); + margin: 0 80px; + @media (min-width: 45em) { + grid-template-columns: repeat(4, 1fr); + } +} + +.recommended-product img { + height: auto; +} + +/* +* -------------------------------------------------- +* routes/collections._index.tsx +* -------------------------------------------------- +*/ +.collections-grid { + display: grid; + grid-gap: 1.5rem; + /* grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-width), 1fr)); */ + margin-bottom: 2rem; + grid-template-columns: repeat(2, 1fr); + @media (min-width: 45em) { + grid-template-columns: repeat(4, 1fr); + } +} + +.collection-item img { + height: auto; + margin-bottom: 30px; +} + +.collection-item { + /* width: 300px; + max-height: 300px; */ + margin: 40px; +} + +/* +* -------------------------------------------------- +* routes/collections.$handle.tsx +* -------------------------------------------------- +*/ +.collection-description { + margin-bottom: 1rem; + max-width: 95%; + @media (min-width: 45em) { + max-width: 600px; + } +} + +.products-grid { + display: grid; + grid-gap: 1.5rem; + grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-width), 1fr)); + margin-bottom: 2rem; +} + +.product-item img { + height: auto; + width: 100%; +} + +/* +* -------------------------------------------------- +* routes/products.$handle.tsx +* -------------------------------------------------- +*/ +.product { + display: grid; + margin-top: 50px; + margin-bottom: 50px; + @media (min-width: 45em) { + grid-template-columns: 1fr 1fr; + grid-gap: 4rem; + } +} + +.product h1 { + margin-top: 0; +} + +.product-images { + display: grid; + grid-gap: 1rem; +} + +.product-image img { + height: auto; + width: 100%; + object-fit: contain; + border: .1rem solid rgba(18,18,18, 0.08); +} + +.product-main { + align-self: start; + position: sticky; + top: 6rem; +} + +.product-price-on-sale { + display: flex; + grid-gap: 0.5rem; +} + +.product-price-on-sale s { + opacity: 0.5; +} + +.product-options-grid { + display: flex; + flex-wrap: wrap; + grid-gap: 0.75rem; +} + +.product-options-item { + padding: 0.25rem 0.5rem; +} + +/* +* -------------------------------------------------- +* routes/blog._index.tsx +* -------------------------------------------------- +*/ +.blog-grid { + display: grid; + grid-gap: 1.5rem; + grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-width), 1fr)); + margin-bottom: 2rem; +} + +.blog-article-image { + aspect-ratio: 3/2; + display: block; +} + +.blog-article-image img { + height: 100%; +} + +/* +* -------------------------------------------------- +* routes/blog.$articlehandle.tsx +* -------------------------------------------------- +*/ +.article img { + height: auto; + width: 100%; +} + +/* +* -------------------------------------------------- +* routes/account +* -------------------------------------------------- +*/ +.account-profile-marketing { + display: flex; + align-items: center; +} + +.account-logout { + display: inline-block; +} diff --git a/app/styles/pages.css b/app/styles/pages.css new file mode 100644 index 0000000..3d4f3c7 --- /dev/null +++ b/app/styles/pages.css @@ -0,0 +1,150 @@ +.bodyCss { + font-weight: 300; +} +.product_css { +font-size: 40px; +font-weight: 400; +} + +.flex { + display: flex; +} + +.gap { + gap: 35px; +} +.home { + flex-direction: column-reverse; +} + +.wrapper { + border-bottom: .1rem solid rgba(18,18,18, 0.08); +} + .pg_bt { + padding-bottom: 36px; + } +.container { + max-width: 1280px; + width: 100%; + margin-left: auto; + margin-right: auto; +} +.home_page_banner{ + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + margin-bottom: 30px; + height: 800px; + background-image: url(public/banner.svg); + position: relative; +} +.home_page_banner:after{ + position: absolute; + content: ""; + height: 100%; + width: 100%; + background: black; + opacity: 0.4; + z-index: 1; + } +.page_banner_content { + font-size: 3.875rem; + line-height: 1; + letter-spacing: -.03em; + color: white; + z-index: 2; + /* font-weight: 400; */ +} +.banner_repo_cta { + z-index: 2; + display: inline-flex; + justify-content: center; + border: 1px solid white; + align-items: center; + /* border: 0; */ + padding: 0 3rem; + cursor: pointer; + font: inherit; + font-size: 1.5rem; + text-decoration: none !important; + padding: 16px; + color: white; + transition: box-shadow var(--duration-short) ease; + -webkit-appearance: none; + appearance: none; + + &:hover { + border: 2px solid white; + transition: box-shadow var(--duration-short) ease; + } +} +.featured_wrapper { + padding-top: 44px; + + .featuredContent { + margin-bottom: 2.5rem; + margin-top: 0; + padding: 0 5rem; + max-width: 120rem; + } + h2 { + font-size: 24px; + letter-spacing: 0.6px; + line-height: 31.2px; + } + .product_cta { + margin-bottom: 10px; + font-size: 13px; + } + .recommended-product { + /* text-align: center; */ + text-transform: uppercase; + } + .product_price { + font-size: 16px; + } +} +.center { + text-align: center; + /* padding-bottom: 36px; */ +} +.view_allproducts { + font-size: 15px; + min-height: 47px; + line-height: 18px; + letter-spacing: 1px; + margin-top: 30px; + min-width: 122px; + background-color: black; + position: relative; + color: white; + display: inline-flex; + justify-content: center; + text-decoration: none; + /* color: rgb(var(--color-button-text)); */ + transition: box-shadow var(--duration-short) ease; + align-items: center; + border: 0; + padding: 0 10px; + cursor: pointer; +} +.footer_email { + margin-top: 20px !important; + align-items: flex-start; + margin: 0 auto; + max-width: 360px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + position: relative; + border-radius: 0%; + height: 25px; +} + +.load_more { + display: flex; + justify-content: center; +} diff --git a/app/styles/reset.css b/app/styles/reset.css new file mode 100644 index 0000000..5c1c084 --- /dev/null +++ b/app/styles/reset.css @@ -0,0 +1,129 @@ +body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin: 0; + padding: 0; +} + +h1, +h2, +p { + margin: 0; + padding: 0; +} + +h1 { + font-size: 1.6rem; + font-weight: 700; + line-height: 1.4; + margin-bottom: 2rem; + margin-top: 2rem; +} + +h2 { + font-size: 1.2rem; + font-weight: 700; + line-height: 1.4; + margin-bottom: 1rem; +} + +h4 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +h5 { + margin-bottom: 1rem; + margin-top: 0.5rem; +} + +p { + font-size: 1rem; + line-height: 1.4; +} + +a { + color: #000; + text-decoration: none; +} + +a:hover { + text-decoration: underline; + cursor: pointer; +} + +hr { + border-bottom: none; + border-top: 1px solid #000; + margin: 0; +} + +pre { + white-space: pre-wrap; +} + +body { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +/* body > main { + margin: 0 1rem 1rem 1rem; +} */ + +section { + padding: 1rem 0; + @media (min-width: 768px) { + padding: 2rem 0; + } +} + +fieldset { + display: flex; + flex-direction: column; + margin-bottom: 0.5rem; + padding: 1rem; +} + +form { + max-width: 100%; + @media (min-width: 768px) { + max-width: 400px; + } +} + +input { + border-radius: 4px; + border: 1px solid #000; + font-size: 1rem; + margin-bottom: 0.5rem; + margin-top: 0.25rem; + padding: 0.5rem; +} + +legend { + font-weight: 600; + margin-bottom: 0.5rem; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +li { + margin-bottom: 0.5rem; +} + +dl { + margin: 0.5rem 0; +} + +code { + background: #ddd; + border-radius: 4px; + font-family: monospace; + padding: 0.25rem; +} diff --git a/app/utils.ts b/app/utils.ts new file mode 100644 index 0000000..ffea0a7 --- /dev/null +++ b/app/utils.ts @@ -0,0 +1,46 @@ +import {useLocation} from '@remix-run/react'; +import type {SelectedOption} from '@shopify/hydrogen/storefront-api-types'; +import {useMemo} from 'react'; + +export function useVariantUrl( + handle: string, + selectedOptions: SelectedOption[], +) { + const {pathname} = useLocation(); + + return useMemo(() => { + return getVariantUrl({ + handle, + pathname, + searchParams: new URLSearchParams(), + selectedOptions, + }); + }, [handle, selectedOptions, pathname]); +} + +export function getVariantUrl({ + handle, + pathname, + searchParams, + selectedOptions, +}: { + handle: string; + pathname: string; + searchParams: URLSearchParams; + selectedOptions: SelectedOption[]; +}) { + const match = /(\/[a-zA-Z]{2}-[a-zA-Z]{2}\/)/g.exec(pathname); + const isLocalePathname = match && match.length > 0; + + const path = isLocalePathname + ? `${match![0]}products/${handle}` + : `/products/${handle}`; + + selectedOptions.forEach((option) => { + searchParams.set(option.name, option.value); + }); + + const searchString = searchParams.toString(); + + return path + (searchString ? '?' + searchParams.toString() : ''); +} diff --git a/contentstack-app/.eslintignore b/contentstack-app/.eslintignore new file mode 100644 index 0000000..a362bca --- /dev/null +++ b/contentstack-app/.eslintignore @@ -0,0 +1,5 @@ +build +node_modules +bin +*.d.ts +dist diff --git a/contentstack-app/.eslintrc.js b/contentstack-app/.eslintrc.js new file mode 100644 index 0000000..57a969e --- /dev/null +++ b/contentstack-app/.eslintrc.js @@ -0,0 +1,18 @@ +/** + * @type {import("@types/eslint").Linter.BaseConfig} + */ +module.exports = { + extends: [ + '@remix-run/eslint-config', + 'plugin:hydrogen/recommended', + 'plugin:hydrogen/typescript', + ], + rules: { + '@typescript-eslint/ban-ts-comment': 'off', + '@typescript-eslint/naming-convention': 'off', + 'hydrogen/prefer-image-component': 'off', + 'no-useless-escape': 'off', + '@typescript-eslint/no-non-null-asserted-optional-chain': 'off', + 'no-case-declarations': 'off', + }, +}; diff --git a/contentstack-app/.gitignore b/contentstack-app/.gitignore new file mode 100644 index 0000000..ad5f2ca --- /dev/null +++ b/contentstack-app/.gitignore @@ -0,0 +1 @@ +.shopify diff --git a/contentstack-app/.graphqlrc.yml b/contentstack-app/.graphqlrc.yml new file mode 100644 index 0000000..bd38d07 --- /dev/null +++ b/contentstack-app/.graphqlrc.yml @@ -0,0 +1 @@ +schema: node_modules/@shopify/hydrogen-react/storefront.schema.json diff --git a/contentstack-app/CHANGELOG.md b/contentstack-app/CHANGELOG.md new file mode 100644 index 0000000..491e666 --- /dev/null +++ b/contentstack-app/CHANGELOG.md @@ -0,0 +1,213 @@ +# skeleton + +## 1.0.1 + +### Patch Changes + +- Sync up environment variable names across all example & type files. ([#1542](https://github.com/Shopify/hydrogen/pull/1542)) by [@michenly](https://github.com/michenly) + +- Remove error boundary from robots.txt file in the Skeleton template ([#1492](https://github.com/Shopify/hydrogen/pull/1492)) by [@andrewcohen](https://github.com/andrewcohen) + +- Use the worker runtime by default when running the `dev` or `preview` commands. ([#1525](https://github.com/Shopify/hydrogen/pull/1525)) by [@frandiox](https://github.com/frandiox) + + Enable it in your project by adding the `--worker` flag to your package.json scripts: + + ```diff + "scripts": { + "build": "shopify hydrogen build", + - "dev": "shopify hydrogen dev --codegen", + + "dev": "shopify hydrogen dev --worker --codegen", + - "preview": "npm run build && shopify hydrogen preview", + + "preview": "npm run build && shopify hydrogen preview --worker", + ... + } + ``` + +- Update to the latest version of `@shopify/oxygen-workers-types`. ([#1494](https://github.com/Shopify/hydrogen/pull/1494)) by [@frandiox](https://github.com/frandiox) + + In TypeScript projects, when updating to the latest `@shopify/remix-oxygen` adapter release, you should also update to the latest version of `@shopify/oxygen-workers-types`: + + ```diff + "devDependencies": { + "@remix-run/dev": "2.1.0", + "@remix-run/eslint-config": "2.1.0", + - "@shopify/oxygen-workers-types": "^3.17.3", + + "@shopify/oxygen-workers-types": "^4.0.0", + "@shopify/prettier-config": "^1.1.2", + ... + }, + ``` + +- Update internal dependencies for bug resolution. ([#1496](https://github.com/Shopify/hydrogen/pull/1496)) by [@vincentezw](https://github.com/vincentezw) + + Update your `@shopify/cli` dependency to avoid duplicated sub-dependencies: + + ```diff + "dependencies": { + - "@shopify/cli": "3.50.2", + + "@shopify/cli": "3.51.0", + } + ``` + +- Update all Node.js dependencies to version 18. (Not a breaking change, since Node.js 18 is already required by Remix v2.) ([#1543](https://github.com/Shopify/hydrogen/pull/1543)) by [@michenly](https://github.com/michenly) + +- 🐛 fix undefined menu error ([#1533](https://github.com/Shopify/hydrogen/pull/1533)) by [@michenly](https://github.com/michenly) + +- Add `@remix-run/server-runtime` dependency. ([#1489](https://github.com/Shopify/hydrogen/pull/1489)) by [@frandiox](https://github.com/frandiox) + + Since Remix is now a peer dependency of `@shopify/remix-oxygen`, you need to add `@remix-run/server-runtime` to your dependencies, with the same version as the rest of your Remix dependencies. + + ```diff + "dependencies": { + "@remix-run/react": "2.1.0" + + "@remix-run/server-runtime": "2.1.0" + ... + } + ``` + +- Updated dependencies [[`b2a350a7`](https://github.com/Shopify/hydrogen/commit/b2a350a754ea2d29bc267c260dc298a02f8f4470), [`9b4f4534`](https://github.com/Shopify/hydrogen/commit/9b4f453407338874bd8f1a1f619b607670e021d0), [`74ea1dba`](https://github.com/Shopify/hydrogen/commit/74ea1dba9af37a146882df7ed9674be5659862b5), [`2be9ce82`](https://github.com/Shopify/hydrogen/commit/2be9ce82fd4a5121f1772bbb7349e96ed530e84e), [`a9b8bcde`](https://github.com/Shopify/hydrogen/commit/a9b8bcde96c22cedef7d87631d429199810b4a7a), [`bca112ed`](https://github.com/Shopify/hydrogen/commit/bca112ed7db49e533fe49898b663fa0dd318e6ba), [`848c6260`](https://github.com/Shopify/hydrogen/commit/848c6260a2db3a9cb0c86351f0f7128f61e028f0), [`d53b4ed7`](https://github.com/Shopify/hydrogen/commit/d53b4ed752eb0530622a666ea7dcf4b40239cafa), [`961fd8c6`](https://github.com/Shopify/hydrogen/commit/961fd8c630727784f77b9f693d2e8ff8601969fc), [`2bff9fc7`](https://github.com/Shopify/hydrogen/commit/2bff9fc75916fa95f9a9279d069408fb7a33755c), [`c8e8f6fd`](https://github.com/Shopify/hydrogen/commit/c8e8f6fd233e52cf5570b1904af710d6b907aae5), [`8fce70de`](https://github.com/Shopify/hydrogen/commit/8fce70de32bd61ee86a6d895ac43cc1f78f1bf49), [`f90e4d47`](https://github.com/Shopify/hydrogen/commit/f90e4d4713c6c1fc1e921a7ecd08e95fe5da1744), [`e8cc49fe`](https://github.com/Shopify/hydrogen/commit/e8cc49feff18f5ee72d5f6965ff2094addc23466)]: + - @shopify/cli-hydrogen@6.1.0 + - @shopify/remix-oxygen@2.0.2 + - @shopify/hydrogen@2023.10.3 + +## 1.0.0 + +### Major Changes + +- The Storefront API 2023-10 now returns menu item URLs that include the `primaryDomainUrl`, instead of defaulting to the Shopify store ID URL (example.myshopify.com). The skeleton template requires changes to check for the `primaryDomainUrl`: by [@blittle](https://github.com/blittle) + + 1. Update the `HeaderMenu` component to accept a `primaryDomainUrl` and include + it in the internal url check + + ```diff + // app/components/Header.tsx + + + import type {HeaderQuery} from 'storefrontapi.generated'; + + export function HeaderMenu({ + menu, + + primaryDomainUrl, + viewport, + }: { + menu: HeaderProps['header']['menu']; + + primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url']; + viewport: Viewport; + }) { + + // ...code + + // if the url is internal, we strip the domain + const url = + item.url.includes('myshopify.com') || + item.url.includes(publicStoreDomain) || + + item.url.includes(primaryDomainUrl) + ? new URL(item.url).pathname + : item.url; + + // ...code + + } + ``` + + 2. Update the `FooterMenu` component to accept a `primaryDomainUrl` prop and include + it in the internal url check + + ```diff + // app/components/Footer.tsx + + - import type {FooterQuery} from 'storefrontapi.generated'; + + import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated'; + + function FooterMenu({ + menu, + + primaryDomainUrl, + }: { + menu: FooterQuery['menu']; + + primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url']; + }) { + // code... + + // if the url is internal, we strip the domain + const url = + item.url.includes('myshopify.com') || + item.url.includes(publicStoreDomain) || + + item.url.includes(primaryDomainUrl) + ? new URL(item.url).pathname + : item.url; + + // ...code + + ); + } + ``` + + 3. Update the `Footer` component to accept a `shop` prop + + ```diff + export function Footer({ + menu, + + shop, + }: FooterQuery & {shop: HeaderQuery['shop']}) { + return ( + + ); + } + ``` + + 4. Update `Layout.tsx` to pass the `shop` prop + + ```diff + export function Layout({ + cart, + children = null, + footer, + header, + isLoggedIn, + }: LayoutProps) { + return ( + <> +
+
+ );
+}
+
+function CloseAside() {
+ return (
+ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
+ history.go(-1)}>
+ ×
+
+ );
+}
diff --git a/contentstack-app/app/components/Cart.tsx b/contentstack-app/app/components/Cart.tsx
new file mode 100644
index 0000000..e5c48cc
--- /dev/null
+++ b/contentstack-app/app/components/Cart.tsx
@@ -0,0 +1,340 @@
+import {CartForm, Image, Money} from '@shopify/hydrogen';
+import type {CartLineUpdateInput} from '@shopify/hydrogen/storefront-api-types';
+import {Link} from '@remix-run/react';
+import type {CartApiQueryFragment} from 'storefrontapi.generated';
+import {useVariantUrl} from '~/utils';
+
+type CartLine = CartApiQueryFragment['lines']['nodes'][0];
+
+type CartMainProps = {
+ cart: CartApiQueryFragment | null;
+ layout: 'page' | 'aside';
+};
+
+export function CartMain({layout, cart}: CartMainProps) {
+ const linesCount = Boolean(cart?.lines?.nodes?.length || 0);
+ const withDiscount =
+ cart &&
+ Boolean(cart.discountCodes.filter((code) => code.applicable).length);
+ const className = `cart-main ${withDiscount ? 'with-discount' : ''}`;
+
+ return (
+
+
+ );
+}
+
+function CartDetails({layout, cart}: CartMainProps) {
+ const cartHasItems = !!cart && cart.totalQuantity > 0;
+
+ return (
+
+
+
+ )}
+
+ );
+}
+
+function CartLines({
+ lines,
+ layout,
+}: {
+ layout: CartMainProps['layout'];
+ lines: CartApiQueryFragment['lines'] | undefined;
+}) {
+ if (!lines) return null;
+
+ return (
+
+
+ );
+}
+
+function CartLineItem({
+ layout,
+ line,
+}: {
+ layout: CartMainProps['layout'];
+ line: CartLine;
+}) {
+ const {id, merchandise} = line;
+ const {product, title, image, selectedOptions} = merchandise;
+ const lineItemUrl = useVariantUrl(product.handle, selectedOptions);
+
+ return (
+ -
+ {lines.nodes.map((line) => (
+
+ {
+ if (layout === 'aside') {
+ // close the drawer
+ window.location.href = lineItemUrl;
+ }
+ }}
+ >
+
+ + {product.title} +
+ +-
+ {selectedOptions.map((option) => (
+
- + + {option.name}: {option.value} + + + ))} +
+
+ );
+}
+
+function CartLineRemoveButton({lineIds}: {lineIds: string[]}) {
+ return (
+ Totals
+-
+
- Subtotal +
-
+ {cost?.subtotalAmount?.amount ? (
+
+ ) : ( + '-' + )} +
+
+ Quantity: {quantity}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function CartLinePrice({
+ line,
+ priceType = 'regular',
+ ...passthroughProps
+}: {
+ line: CartLine;
+ priceType?: 'regular' | 'compareAt';
+ [key: string]: any;
+}) {
+ if (!line?.cost?.amountPerQuantity || !line?.cost?.totalAmount) return null;
+
+ const moneyV2 =
+ priceType === 'regular'
+ ? line.cost.totalAmount
+ : line.cost.compareAtAmountPerQuantity;
+
+ if (moneyV2 == null) {
+ return null;
+ }
+
+ return (
+
+
+ );
+}
+
+export function CartEmpty({
+ hidden = false,
+ layout = 'aside',
+}: {
+ hidden: boolean;
+ layout?: CartMainProps['layout'];
+}) {
+ return (
+
+
+
+ { + if (layout === 'aside') { + window.location.href = '/collections'; + } + }} + > + Continue shopping → + +
+ );
+}
+
+function CartDiscounts({
+ discountCodes,
+}: {
+ discountCodes: CartApiQueryFragment['discountCodes'];
+}) {
+ const codes: string[] =
+ discountCodes
+ ?.filter((discount) => discount.applicable)
+ ?.map(({code}) => code) || [];
+
+ return (
+ +
+ Looks like you haven’t added anything yet, let’s get you + started! +
++ { + if (layout === 'aside') { + window.location.href = '/collections'; + } + }} + > + Continue shopping → + +
+ {/* Have existing discount, display it with a remove option */}
+
+
+
+ );
+}
+
+function UpdateDiscountForm({
+ discountCodes,
+ children,
+}: {
+ discountCodes?: string[];
+ children: React.ReactNode;
+}) {
+ return (
+ -
+
- Discount(s) +
+
+
+
+
+
+ {codes?.join(', ')}
+
+
+
+
+
+
+
+ ☰
+ + ); +} + +function SearchToggle() { + return Search; +} + +function CartBadge({count}: {count: number}) { + return Cart {count}; +} + +function CartToggle({cart}: Pick
+ {results &&
+ keys.map((type) => {
+ const resourceResults = results[type];
+
+ if (resourceResults.nodes[0]?.__typename === 'Page') {
+ const pageResults = resourceResults as SearchQuery['pages'];
+ return resourceResults.nodes.length ? (
+
+ );
+}
+
+function SearchResultsProductsGrid({products}: Pick
+
+ {({nodes, isLoading, NextLink, PreviousLink}) => {
+ const itemsMarkup = nodes.map((product) => (
+
+
+
+ );
+}
+
+function SearchResultPageGrid({pages}: PickProducts
+
+
+ {product.title}
+
+
+ ));
+ return (
+
+
+ );
+ }}
+
+
+ {isLoading ? 'Loading...' : ↑ Load previous}
+
+
+
+ {itemsMarkup}
+
+
+ +
+
+ {isLoading ? 'Loading...' : Load more ↓}
+
+
+ +
+
+
+ );
+}
+
+function SearchResultArticleGrid({articles}: PickPages
+
+ {pages?.nodes?.map((page) => (
+
+
+
+ {page.title}
+
+
+ ))}
+ +
+
+
+ );
+}
+
+export function NoSearchResults() {
+ return Articles
+
+ {articles?.nodes?.map((article) => (
+
+
+
+ {article.title}
+
+
+ ))}
+ +
No results, try a different search.
; +} + +type ChildrenRenderProps = { + fetchResults: (event: React.ChangeEvent
+
+ );
+}
+
+function NoPredictiveSearchResults({
+ searchTerm,
+}: {
+ searchTerm: React.MutableRefObject
+ {results.map(({type, items}) => (
+
+ {/* view all results /search?q=term */}
+ {searchTerm.current && (
+
+
+ View all results for {searchTerm.current}
+ →
+
+ No results found for {searchTerm.current}
+
+
+
+ );
+}
+
+type SearchResultItemProps = Pick{isSuggestions ? 'Suggestions' : type}
+ +-
+ {items.map((item: NormalizedPredictiveSearchResultItem) => (
+
+ {item.styledTitle ? (
+
+ ) : (
+ {item.title}
+ )}
+ {item?.price && (
+
+
+
+
+
+