Tutorial: Integrating Weaverse into Your Shopify Hydrogen Project

npm create @shopify/hydrogen@latest

npm run dev

npm install @weaverse/hydrogen

// weaverse/component.ts

import type {HydrogenComponent} from '@weaverse/hydrogen';

export const components: HydrogenComponent[] = [];

// weaverse/schema.ts

import type {HydrogenThemeSchema} from '@weaverse/hydrogen';

export const themeSchema: HydrogenThemeSchema = {
  info: {
    version: '1.0.0',
    author: 'Weaverse',
    name: 'Pilot',
    authorProfilePhoto:
      'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/Weaverse_logo_-_3000x_e2fa8c13-dac2-4dcb-a2c2-f7aaf7a58169.png?v=1698245759',
    documentationUrl: 'https://weaverse.io/docs',
    supportUrl: 'https://weaverse.io/contact',
  },
  inspector: [
    
  ],
};

// weaverse/weaverse.server.ts

import type {WeaverseClientArgs} from '@weaverse/hydrogen';
import {WeaverseClient} from '@weaverse/hydrogen';
import {components} from '~/weaverse/components';
import {themeSchema} from '~/weaverse/schema';

export function createWeaverseClient(args: WeaverseClientArgs) {
  return new WeaverseClient({
    ...args,
    themeSchema,
    components,
  });
}

export function getWeaverseCsp(request: Request) {
  const url = new URL(request.url);
  // Get weaverse host from query params
  const localDirectives =
    process.env.NODE_ENV === 'development'
      ? ['localhost:*', 'ws://localhost:*', 'ws://127.0.0.1:*']
      : [];
  const weaverseHost = url.searchParams.get('weaverseHost');
  const weaverseHosts = ['weaverse.io', '*.weaverse.io'];
  if (weaverseHost) {
    weaverseHosts.push(weaverseHost);
  }
  return {
    frameAncestors: weaverseHosts,
    defaultSrc: [
      "'self'",
      'cdn.shopify.com',
      'shopify.com',
      ...localDirectives,
      ...weaverseHosts,
    ],
    imgSrc: [
      "'self'",
      'data:',
      'cdn.shopify.com',
      ...localDirectives,
      ...weaverseHosts,
    ],
    styleSrc: [
      "'self'",
      "'unsafe-inline'",
      'cdn.shopify.com',
      ...localDirectives,
      ...weaverseHosts,
    ],
    connectSrc: [
      "'self'",
      'https://monorail-edge.shopifysvc.com',
      ...localDirectives,
      ...weaverseHosts,
    ],
  };
}

// weaverse/index.tsx

import {WeaverseHydrogenRoot} from '@weaverse/hydrogen';
import {components} from './components';

export function WeaverseContent() {
  return <WeaverseHydrogenRoot components={components} />;
}

// server.ts

// ...
import {createWeaverseClient} from '~/weaverse/weaverse.server';
// ...

/**
* Create Hydrogen's Storefront client.
*/
const {storefront} = createStorefrontClient({/** ... */ });

const weaverse = createWeaverseClient({
        storefront,
        request,
        env,
        cache,
        waitUntil,
});



/**
* Create a Remix request handler and pass
* Hydrogen's Storefront client to the loader context.
*/
const handleRequest = createRequestHandler({
        build: remixBuild,
        mode: process.env.NODE_ENV,
        getLoadContext: () => ({
          session,
          storefront,
          cart,
          env,
          waitUntil,
          weaverse, // add weaverse to Remix loader context
        }),
});

declare global {
	
	/** ... */
  
	/**
   * Declare expected Env parameter in fetch handler.
   */
  interface Env {

    /** ... */

    WEAVERSE_PROJECT_ID: string;
    WEAVERSE_API_KEY: string;
  }
}

declare module '@shopify/remix-oxygen' {
  /**
   * Declare local additions to the Remix loader context.
   */
  export interface AppLoadContext {
    env: Env;
    cart: HydrogenCart;
    storefront: Storefront;
    session: HydrogenSession;
    waitUntil: ExecutionContext['waitUntil'];

    weaverse: WeaverseClient;
  }

  /** ... */
}

// app/entry.server.tsx

// ...
import {getWeaverseCsp} from '~/weaverse/weaverse.server';
// ...

const {nonce, header, NonceProvider} = createContentSecurityPolicy(
    getWeaverseCsp(request),
);

// app/root.tsx

export async function loader({context}: LoaderFunctionArgs) {

  /** ... */

  return defer(
    {
      /** ... */
      weaverseTheme: await context.weaverse.loadThemeSettings(),
			/** ... */
    },
    {headers},
  );
}

function App() {
  const nonce = useNonce();
  const data = useLoaderData<typeof loader>();

  return (
    <html lang="en">
      /** ... */
    </html>
  );
}

export default withWeaverse(App);

// app/routes/_index.tsx

/** ... */

import {WeaverseContent} from '~/weaverse';


export async function loader({context}: LoaderFunctionArgs) {
  const {storefront} = context;
  const recommendedProducts = await storefront.query(
    RECOMMENDED_PRODUCTS_QUERY,
  );
	/** ... */
  return defer({
    recommendedProducts,
    weaverseData: await context.weaverse.loadPage(),
  });
}

export default function Homepage() {
  return (
    <div className="home">
      <WeaverseContent />
    </div>
  );
}

# .env

SESSION_SECRET="foobar"
PUBLIC_STORE_DOMAIN="mock.shop"
WEAVERSE_PROJECT_ID="your-project-id-here"

// app/sections/recommended-products.tsx

import {forwardRef} from 'react';
import {Link, useLoaderData} from '@remix-run/react';
import {Image, Money} from '@shopify/hydrogen';

const RecommendedProducts = forwardRef<HTMLDivElement, {productsCount: number}>(
  ({productsCount}, ref) => {
    const {
      recommendedProducts: {products},
    } = useLoaderData<any>();
    const displayProducts = products.nodes.slice(0, productsCount);
    return (
      <div className="recommended-products" ref={ref}>
        <h2>Recommended Products</h2>
        <div className="recommended-products-grid">
          {displayProducts.map((product: any) => (
            <Link
              key={product.id}
              className="recommended-product"
              to={`/products/${product.handle}`}
            >
              <Image
                data={product.images.nodes[0]}
                aspectRatio="1/1"
                sizes="(min-width: 45em) 20vw, 50vw"
              />
              <h4>{product.title}</h4>
              <small>
                <Money data={product.priceRange.minVariantPrice} />
              </small>
            </Link>
          ))}
        </div>
        <br />
      </div>
    );
  },
);

export default RecommendedProducts;

export const schema = {
  type: 'recommended-products',
  title: 'Recommended products',
  inspector: [
    {
      group: 'Settings',
      inputs: [
        {
          type: 'range',
          name: 'productsCount',
          label: 'Number of products',
          defaultValue: 4,
          configs: {
            min: 1,
            max: 12,
            step: 1,
          },
        },
      ],
    },
  ],
};