Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Rally to the integrations list #885

Closed

Conversation

zenkkor
Copy link

@zenkkor zenkkor commented Nov 21, 2022

Rally Next.js

  • Read more about Rally on our rallyon.com marketing page.

  • To learn more about Rally's Checkout Button capabilities visit our Developer's portal.


#### To successfully integrate the Rally Checkout Button follow the steps below.

1. Install the Rally Checkout Button

npm install @rallycommerce/checkout-button

2. Create a Rally Checkout Button component

Create a RallyCheckoutButton.tsx component in the project with the following content 👇. Structure example 👉 lib/rally/RallyCheckoutButton.tsx

import React from 'react'
import { Rally, RallyCheckoutButtonConfig } from '@rallycommerce/checkout-button';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'rally-checkout-button': any;
    }
  }
}
interface RallyCheckoutButtonProps {
  customText?: string | undefined;
  customClass?: string | undefined;
  cart?: any;
}

const RallyCheckoutButton = (props: RallyCheckoutButtonProps) => {
  const customClass = props.customClass || "rally-custom-button-class";
  const cart = props?.cart;

  if (cart) {
    const configuration: RallyCheckoutButtonConfig = {
      cartData: { content: cart, id: cart.id, currency: cart.currency }
    };

    Rally.init('clientId', configuration);
  }

  return (<>
    {<rally-checkout-button suppressHydrationWarning={true} custom-class={customClass} custom-text={props.customText} loader="true">
    </rally-checkout-button>}
  </>)
}

export default RallyCheckoutButton;

3. Use the Rally Checkout Button component

The component can now be imported (ex. on the cart page) like this 👇.

import dynamic from 'next/dynamic';
const RallyCheckoutButton = dynamic(() => import('@lib/rally/RallyCheckoutButton'), {
  ssr: false,
})

import { Context } from '../../lib/xy/storefront-data-hooks/src/Context'; 
const { cart } = useContext(Context)


 <RallyCheckoutButton cart={cart} customText="Custom text" customClass="custom-css-class"></RallyCheckoutButton>

@vercel
Copy link

vercel bot commented Nov 21, 2022

@FrciSmrci is attempting to deploy a commit to the Vercel Solutions Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link

vercel bot commented Nov 21, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
commerce-bigcommerce ❌ Failed (Inspect) Dec 8, 2022 at 8:03PM (UTC)
commerce-commercejs ❌ Failed (Inspect) Dec 8, 2022 at 8:03PM (UTC)
commerce-kibocommerce ❌ Failed (Inspect) Dec 8, 2022 at 8:03PM (UTC)
commerce-local ✅ Ready (Inspect) Visit Preview Dec 8, 2022 at 8:03PM (UTC)
commerce-ordercloud ❌ Failed (Inspect) Dec 8, 2022 at 8:03PM (UTC)
commerce-saleor ❌ Failed (Inspect) Dec 8, 2022 at 8:03PM (UTC)
commerce-shopify ❌ Failed (Inspect) Dec 8, 2022 at 8:03PM (UTC)
commerce-spree ❌ Failed (Inspect) Dec 8, 2022 at 8:03PM (UTC)
commerce-swell ❌ Failed (Inspect) Dec 8, 2022 at 8:03PM (UTC)
commerce-vendure ❌ Failed (Inspect) Dec 8, 2022 at 8:03PM (UTC)

@leerob
Copy link
Member

leerob commented Apr 18, 2023

Hey there! Thank you for your contribution. We have decided to take Next.js Commerce in a new direction and will be closing out current PRs and issues due to this change. Please see this PR for more details: #966

P.S. we'd still love to see a Rally fork of the new direction! 🙏

@leerob leerob closed this Apr 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants