fix(templates): ecommerce wrong links in readme and docs and issue with missing graphql dependency (#14045)

Fixes some links in readme and docs and missing graphql dependency for
npm users.

Author: paulpopus

docs/ecommerce/frontend.mdx

@@ -39,10 +39,10 @@ The `EcommerceProvider` component is used to wrap your application and provide t
 Example usage:
 
 ```tsx
-import { EcommerceProvider } from '@payloadcms/plugin-ecommerce/react'
+import { EcommerceProvider } from '@payloadcms/plugin-ecommerce/client/react'
 // Import any payment adapters you want to use on the client side
 import { stripeAdapterClient } from '@payloadcms/plugin-ecommerce/payments/stripe'
-import { USD, EUR } from '@payloadcms/plugin-ecommerce/currencies'
+import { USD, EUR } from '@payloadcms/plugin-ecommerce'
 
 export const Providers = () => (
   <EcommerceProvider
@@ -117,7 +117,7 @@ The `useCart` hook is used to manage the cart state and actions. It provides met
 Example usage:
 
 ```tsx
-import { useCart } from '@payloadcms/plugin-ecommerce/react'
+import { useCart } from '@payloadcms/plugin-ecommerce/client/react'
 
 const CartComponent = () => {
   const { addItem, cart, clearCart, decrementItem, incrementItem, removeItem } =
@@ -140,7 +140,7 @@ The `useAddresses` hook is used to fetch and manage addresses. It provides metho
 Example usage:
 
 ```tsx
-import { useAddresses } from '@payloadcms/plugin-ecommerce/react'
+import { useAddresses } from '@payloadcms/plugin-ecommerce/client/react'
 
 const AddressesComponent = () => {
   const { addresses, createAddress, updateAddress } = useAddresses()
@@ -163,7 +163,7 @@ The `usePayments` hook is used to manage the checkout process. It provides metho
 Example usage:
 
 ```tsx
-import { usePayments } from '@payloadcms/plugin-ecommerce/react'
+import { usePayments } from '@payloadcms/plugin-ecommerce/client/react'
 
 const CheckoutComponent = () => {
   const {
@@ -244,7 +244,7 @@ The `useCurrency` hook is used to format prices based on the selected currency.
 `formatPrice` in particular is very helpful as all prices are stored as integers to avoid any potential issues with decimal calculations, therefore on the frontend you can use this utility to format your price accounting for the currency and decimals. Example usage:
 
 ```tsx
-import { useCurrency } from '@payloadcms/plugin-ecommerce/react'
+import { useCurrency } from '@payloadcms/plugin-ecommerce/client/react'
 
 const PriceComponent = ({ amount }) => {
   const { currenciesConfig, currency, setCurrency } = useCurrency()
@@ -260,7 +260,7 @@ The `useEcommerce` hook encompasses all of the above hooks in one. It provides a
 Example usage:
 
 ```tsx
-import { useEcommerce } from '@payloadcms/plugin-ecommerce/react'
+import { useEcommerce } from '@payloadcms/plugin-ecommerce/client/react'
 
 const EcommerceComponent = () => {
   const { cart, addresses, selectedPaymentMethod } = useEcommerce()

pnpm-lock.yaml

@@ -89,23 +89,23 @@ See the [Collections](https://payloadcms.com/docs/configuration/collections) doc
 
 - ### Carts
 
-  Used to track user and guest carts within Payload. Added by the [ecommerce plugin](https://payloadcms.com/docs/plugins/ecommerce#carts).
+  Used to track user and guest carts within Payload. Added by the [ecommerce plugin](https://payloadcms.com/docs/ecommerce/plugin#carts).
 
 - ### Addresses
 
-  Saves user's addresses for easier checkout. Added by the [ecommerce plugin](https://payloadcms.com/docs/plugins/ecommerce#addresses).
+  Saves user's addresses for easier checkout. Added by the [ecommerce plugin](https://payloadcms.com/docs/ecommerce/plugin#addresses).
 
 - ### Orders
 
-  Tracks orders once a transaction successfully completes. Added by the [ecommerce plugin](https://payloadcms.com/docs/plugins/ecommerce#orders).
+  Tracks orders once a transaction successfully completes. Added by the [ecommerce plugin](https://payloadcms.com/docs/ecommerce/plugin#orders).
 
 - ### Transactions
 
-  Tracks transactions from initiation to completion, once completed they will have a related Order item. Added by the [ecommerce plugin](https://payloadcms.com/docs/plugins/ecommerce#transactions).
+  Tracks transactions from initiation to completion, once completed they will have a related Order item. Added by the [ecommerce plugin](https://payloadcms.com/docs/ecommerce/plugin#transactions).
 
 - ### Products and Variants
 
-  Primary collections for product details such as pricing per currency and optionally supports variants per product. Added by the [ecommerce plugin](https://payloadcms.com/docs/plugins/ecommerce#products).
+  Primary collections for product details such as pricing per currency and optionally supports variants per product. Added by the [ecommerce plugin](https://payloadcms.com/docs/ecommerce/plugin#products).
 
 ### Globals
 
@@ -187,7 +187,7 @@ An order is created only once a transaction is successfully completed. This is a
 
 ## Currencies
 
-By default the template ships with support only for USD however you can change the supported currencies via the [plugin configuration](https://payloadcms.com/docs/plugins/ecommerce#currencies). You will need to ensure that the supported currencies in Payload are also configured in your Payment platforms.
+By default the template ships with support only for USD however you can change the supported currencies via the [plugin configuration](https://payloadcms.com/docs/ecommerce/plugin#currencies). You will need to ensure that the supported currencies in Payload are also configured in your Payment platforms.
 
 ## Stripe
 
@@ -360,8 +360,6 @@ export default buildConfig({
   // ...
 ```
 
-There is also a simplified [one click deploy](https://github.com/payloadcms/payload/tree/templates/with-vercel-postgres) to Vercel should you need it.
-
 ### Self-hosting
 
 Before deploying your app, you need to:

templates/ecommerce/README.md

@@ -49,6 +49,7 @@
     "embla-carousel-auto-scroll": "^8.1.5",
     "embla-carousel-react": "^8.5.2",
     "geist": "^1.3.0",
+    "graphql": "^16.8.2",
     "jsonwebtoken": "9.0.1",
     "lucide-react": "^0.477.0",
     "next": "^15.5.4",