crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 23:46:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

checkout from cart to keep user logged in

Browse Source
This commit is contained in:
Shlomo 2024-03-05 02:38:31 +00:00
parent b972e23876
commit f2fcbde534
3 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -77,7 +77,13 @@ You can use this comprehensive [integration guide](http://vercel.com/docs/integr
## Shopify Customer Accounts
This fork is designed to provide a basic implementation of [Shopify's new Customer Accounts API](), which will allow a customer to login into their Next.js Shopify Website to update information and view orders. It uses the concepts of Next.js middleware and server actions to implement the Shopify Customer Accounts API Integration. All the new code for the Customer Accounts API is included in: lib/shopify/customer folder, middleware
to do: env settings file
update Shopify stuff so points here
instructions
This fork is designed to provide a basic implementation of [Shopify's new Customer Accounts API](https://shopify.dev/docs/api/customer), which will allow a customer to login into their Next.js Shopify Website to update information and view orders, see Shopify's [launch announcement](https://www.shopify.com/partners/blog/introducing-customer-account-api-for-headless-stores) to learn more.
It uses the concepts of Next.js middleware and server actions to implement the Shopify Customer Accounts API Integration. All the new code for the Customer Accounts API is included in: lib/shopify/customer folder, middleware
The code for this repo is adapted for Next.js from code provided by Shopify
@ -86,9 +92,7 @@ To Set This Up, please follow:
1. icons/client components
2. Get
3. Set up URLs
4.
to do: env settings file
4. Add the following ENV variables to your .env (and Vercel dashboard)
https://shopify.dev/docs/custom-storefronts/building-with-the-customer-account-api/hydrogen
https://shopify.dev/docs/api/customer

6
components/auth/login-form.tsx
View File

@ -1,8 +1,6 @@
'use client';
import { UserIcon as LogInIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import { doLogin } from './actions';
import LoadingDots from 'components/loading-dots';
import { useFormState, useFormStatus } from 'react-dom';
function SubmitButton(props: any) {
@ -27,12 +25,10 @@ function SubmitButton(props: any) {
>
{pending ? (
<>
<LoadingDots className="mr-2 h-4 w-4" />
<span>Logging In</span>
<span>Logging In...</span>
</>
) : (
<>
<LogInIcon className="hidden md:mr-2 md:flex md:h-4 md:w-4" />
<span>Log-In</span>
</>
)}

8
components/cart/index.tsx
View File

@ -8,6 +8,14 @@ export default async function Cart() {
if (cartId) {
cart = await getCart(cartId);
//pass logged_in true to shopify checout to utilize customer api
//see: https://shopify.dev/docs/api/customer#step-stay-authenticated-on-checkout
const newCheckoutUrl = new URL(cart?.checkoutUrl || '');
newCheckoutUrl.searchParams.append('logged_in', 'true');
cart = {
...cart,
checkoutUrl: newCheckoutUrl.toString()
};
}
return <CartModal cart={cart} />;