crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-17 06:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor naming

Browse Source
This commit is contained in:
FrciSmrci 2022-12-08 21:02:11 +01:00
parent dd65bed43d
commit 3f3094fa6a
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/rally/README.md
View File

@ -1,8 +1,8 @@
## Rally <sub><sup>♥</sup></sub> Next.js ## Rally <sub><sup>♥</sup></sub> Next.js
To successfully integrate the Rally checkout button follow the steps below. To successfully integrate the Rally Checkout Button follow the steps below.
#### **1. Install the Rally checkout button** #### **1. Install the Rally Checkout Button**
```bash ```bash
npm install @rallycommerce/checkout-button npm install @rallycommerce/checkout-button
@ -10,9 +10,9 @@ npm install @rallycommerce/checkout-button
<br /> <br />
#### **2. Create a Cart Button component** #### **2. Create a Rally Checkout Button component**
Create a `CartButton.tsx` component in the project with the following content 👇. Structure example 👉 `lib/rally/CartButton.tsx` Create a `RallyCheckoutButton.tsx` component in the project with the following content 👇. Structure example 👉 `lib/rally/RallyCheckoutButton.tsx`
```javascript ```javascript
import React from 'react' import React from 'react'
@ -25,13 +25,13 @@ declare global {
} }
} }
} }
interface CartButtonProps { interface RallyCheckoutButtonProps {
customText?: string | undefined; customText?: string | undefined;
customClass?: string | undefined; customClass?: string | undefined;
cart?: any; cart?: any;
} }
const CartButton = (props: CartButtonProps) => { const RallyCheckoutButton = (props: RallyCheckoutButtonProps) => {
const customClass = props.customClass || "rally-custom-button-class"; const customClass = props.customClass || "rally-custom-button-class";
const cart = props?.cart; const cart = props?.cart;
@ -49,18 +49,18 @@ const CartButton = (props: CartButtonProps) => {
</>) </>)
} }
export default CartButton; export default RallyCheckoutButton;
``` ```
<br /> <br />
#### **3. Import the Cart Button component** #### **3. Use the Rally Checkout Button component**
The component can now be imported (ex. on the cart page) like this 👇. The component can now be imported (ex. on the cart page) like this 👇.
```javascript ```javascript
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
const CartButton = dynamic(() => import('@lib/rally/CartButton'), { const RallyCheckoutButton = dynamic(() => import('@lib/rally/RallyCheckoutButton'), {
ssr: false, ssr: false,
}) })
@ -68,8 +68,8 @@ import { Context } from '../../lib/xy/storefront-data-hooks/src/Context';
const { cart } = useContext(Context) const { cart } = useContext(Context)
<CartButton cart={cart} customText="Custom text" customClass="custom-css-class"></CartButton> <RallyCheckoutButton cart={cart} customText="Custom text" customClass="custom-css-class"></RallyCheckoutButton>
``` ```
To learn more about Rally's checkout button capabilities visit our [Developer's portal](https://developers.rallyon.com/docs/jssdk/checkout-button/integrating-the-checkout-button/). To learn more about Rally's Checkout Button capabilities visit our [Developer's portal](https://developers.rallyon.com/docs/jssdk/checkout-button/integrating-the-checkout-button/).

6
packages/rally/CartButton.tsx → packages/rally/RallyCheckoutButton.tsx
View File

@ -8,13 +8,13 @@ declare global {
} }
} }
} }
interface CartButtonProps { interface RallyCheckoutButtonProps {
customText?: string | undefined; customText?: string | undefined;
customClass?: string | undefined; customClass?: string | undefined;
cart?: any; cart?: any;
} }
const CartButton = (props: CartButtonProps) => { const RallyCheckoutButton = (props: RallyCheckoutButtonProps) => {
const customClass = props.customClass || "rally-custom-button-class"; const customClass = props.customClass || "rally-custom-button-class";
const cart = props?.cart; const cart = props?.cart;
@ -32,4 +32,4 @@ const CartButton = (props: CartButtonProps) => {
</>) </>)
} }
export default CartButton; export default RallyCheckoutButton;