@rebuy/rebuy-hydrogen 1.0.0-rc.3 → 1.0.0-rc.4

package/README.md

@@ -48,13 +48,13 @@ If you want to [integrate with an existing React framework](https://shopify.dev/
 
 #### 1. Navigate to your working directoy
 Navigate to the directory where you want to create your project and run the following command:
-```
+```bash
 cd <directory>
 ```
 
 #### 2. Create your project
 Create a new Hydrogen project with a default template linked to a demo-store with the following command:
-```
+```bash
 npm init @shopify/hydrogen -- --template demo-store
 ```
 
@@ -70,12 +70,15 @@ Open `hydrogen.config.js` file located in the root of your project directory.
 
 #### 2. Update your config file
 Edit your `hydrogen.config.js` file with the following changes and save the file:
-- Update storeDomain to specify your store's domain name.
-- Update storefrontToken to specify your Storefront API access token.
-- Update storefrontApiVersion to specify the Storefront API version that you want to use.
-```
+- Update `storeDomain` to specify your store's domain name.
+- Update `storefrontToken` to specify your Storefront API access token.
+- Update `storefrontApiVersion` to specify the Storefront API version that you want to use.
+
+```javascript
 export default defineConfig({
   shopify: {
+    defaultCountryCode: 'US',
+    defaultLanguageCode: 'EN',
     storeDomain: 'YOUR_STORE_NAME.myshopify.com',
     storefrontToken: 'YOUR_STOREFRONT_ACCESS_TOKEN',
     storefrontApiVersion: '2022-07',
@@ -89,13 +92,13 @@ Create a new local development server to start testing your changes.
 
 #### 1. Navigate to your project directoy
 Navigate to the root of your project directory:
-```
+```bash
 cd <directory>
 ```
 
 #### 2. Start the development server
 Start up a new local development server on `localhost`:
-```
+```bash
 npm run dev
 ```
 
@@ -107,13 +110,13 @@ Once you have successfully created your new Hydrogen app and linked it to your S
 
 #### 1. Navigate to your project directoy
 Navigate to the root of your project directory:
-```
+```bash
 cd <directory>
 ```
 
 #### 2. Install the Rebuy + Hydrogen package
 Install the Rebuy + Hydrogen package from [npm](https://www.npmjs.com/) with the following command:
-```
+```bash
 npm install @rebuy/rebuy-hydrogen
 ```
 
@@ -134,7 +137,8 @@ Once you have included Rebuy + Hydrogen in your project, it's time to start buil
 
 #### 1. Create a Recommended Products Component
 Create a new file in `src/components` called `ProductRecommendations.jsx`, and add the following to the file:
-```
+
+```javascript
 import {
   ProductOptionsProvider,
   AddToCartButton,
@@ -145,7 +149,7 @@ import {
 } from './Button.client';
 
 function AddToCartMarkup({product}) {
-  const selectedVariant = product.variants.edges[0].node;
+  const selectedVariant = product.variants.nodes[0];
   const isOutOfStock = !selectedVariant.availableForSale;
 
   return (
@@ -177,7 +181,7 @@ export default function ProductRecommendations(props) {
       <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
         {products.map((product) => (
           <li key={product.id}>
-            <ProductOptionsProvider data={product} initialVariantId={product.variants.edges[0].node.id}>
+            <ProductOptionsProvider data={product} initialVariantId={product.variants.nodes[0].id}>
               <ProductCard product={product} />
               <AddToCartMarkup product={product} />
             </ProductOptionsProvider>
@@ -191,7 +195,8 @@ export default function ProductRecommendations(props) {
 
 #### 2. Create a Recently Viewed Products Component
 Create a new file in `src/components` called `RecentlyViewedProducts.jsx`, and add the following to the file:
-```
+
+```javascript
 import {
   ProductOptionsProvider,
   AddToCartButton,
@@ -202,7 +207,7 @@ import {
 } from './Button.client';
 
 function AddToCartMarkup({product}) {
-  const selectedVariant = product.variants.edges[0].node;
+  const selectedVariant = product.variants.nodes[0];
   const isOutOfStock = !selectedVariant.availableForSale;
 
   return (
@@ -234,7 +239,7 @@ export default function RecentlyViewedProducts(props) {
       <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
         {products.map((product) => (
           <li key={product.id}>
-            <ProductOptionsProvider data={product} initialVariantId={product.variants.edges[0].node.id}>
+            <ProductOptionsProvider data={product} initialVariantId={product.variants.nodes[0].id}>
               <ProductCard product={product} />
               <AddToCartMarkup product={product} />
             </ProductOptionsProvider>
@@ -249,14 +254,14 @@ export default function RecentlyViewedProducts(props) {
 #### 3. Install the RebuyContextProvider
 Open `/src/App.server.jsx` file and install the `RebuyContextProvider`, so all Rebuy API calls are enriched with contextual information.  Open the file and make the following edits:
 
-##### Import your the provider
-```
+##### Import the provider
+```javascript
 import {RebuyContextProvider} from '@rebuy/rebuy-hydrogen/RebuyContextProvider.client';
 ```
 
 ##### Add RebuyContextProvider component
 Wrap the `<Route>` component with the `RebuyContextProvider`, as follows:
-```
+```html
 <RebuyContextProvider>
   <Route path="*" page={<NotFound />} />
 </RebuyContextProvider>
@@ -267,21 +272,21 @@ Let's include our new components to the `ProductDetails` client component, locat
 
 ##### Import your new UI components
 Import the `ProductRecommendations` and `RecentlyViewedProducts` components in to the `ProductDetails.client.jsx` file.
-```
+```javascript
 import ProductRecommendations from './ProductRecommendations';
 import RecentlyViewedProducts from './RecentlyViewedProducts';
 ```
 
 ##### Import Rebuy components
 Import the `RebuyWidgetContainer` and `RebuyProductViewed` components in to the `ProductDetails.client.jsx` file.
-```
+```javascript
 import RebuyWidgetContainer from '@rebuy/rebuy-hydrogen/RebuyWidgetContainer.client';
 import RebuyProductViewed from '@rebuy/rebuy-hydrogen/RebuyProductViewed.client';
 ```
 
 ##### Add imported components in to the `ProductDetails` functional component
 Before the closing `</ProductOptionsProvider>` tag, insert our imported components:
-```
+```html
 <RebuyWidgetContainer product={product} dataSource="/api/v1/products/recommended" limit="6">
   <ProductRecommendations />
 </RebuyWidgetContainer>
@@ -309,24 +314,30 @@ The `RebuyContextProvider` is a React provider component.  It is responsible for
 
 The `RebuyContextProvider` is a client component, which means it renders in the browser.  It has two dependencies, which are `useUrl` and `useCart`, so the component should be located high up in the component tree but **below** the `ShopifyProvider` and `CartProvider`.
 
-The recommended location is in `src/App.server.jsx` and wrapping the `<Route>` component, which makes the `RebuyContext` automatically available on all pages across the site.
+The recommended location is in `src/App.server.jsx` inside `<Router>` and wrapping **both** `<FileRoutes>` and the `<Route>` components, which makes the `RebuyContext` automatically available on all pages across the site.
 
 #### Import the RebuyContextProvider
-```
+```javascript
 import {RebuyContextProvider} from '@rebuy/rebuy-hydrogen/RebuyContextProvider.client';
 ```
 
 #### Wrap the Route compontent with RebuyContextProvider
-```
-<RebuyContextProvider>
-  <Route path="*" page={<NotFound />} />
-</RebuyContextProvider>
+```html
+<Router>
+  <RebuyContextProvider>
+    <FileRoutes
+      basePath={countryCode ? `/${countryCode}/` : undefined}
+      routes={routes}
+    />
+    <Route path="*" page={<NotFound />} />
+  </RebuyContextProvider>
+</Router>
 ```
 
 #### Access RebuyContext
 Rebuy + Hydrogen components will automatically include and use `RebuyContext`, but if you would like to use this context information in your own components, you certainly can!
 
-```
+```javascript
 import React from 'react';
 import {RebuyContext} from '@rebuy/rebuy-hydrogen/RebuyContextProvider.client';
 
@@ -365,7 +376,7 @@ In the following example, we are using an example compontent called `ProductReco
 
 When the components are rendered, it will display `6` products powered by Rebuy's AI algorithm based on the provided input `product`.  So if the input product was ketchup, you would likely see recommended products like mustard, mayo, or other condiments.
 
-```
+```javascript
 import ProductRecommendations from './ProductRecommendations';
 import RebuyWidgetContainer from '@rebuy/rebuy-hydrogen/RebuyWidgetContainer.client';
 
@@ -389,7 +400,7 @@ The component accepts argments via props to allow for registering different prod
 #### Example implementation
 The following example would be included in the `ProductDetails.client.jsx` component to automatically register customer product view events.  The current product displayed is passed to the `RebuyProductViewed` component via props as `product={product}`.
 
-```
+```javascript
 import RebuyProductViewed from '@rebuy/rebuy-hydrogen/RebuyProductViewed.client';
 
 <RebuyProductViewed product={product} />

package/RebuyWidgetContainer.client.jsx

@@ -56,7 +56,17 @@ export default function RebuyWidgetContainer(props) {
 
     useEffect(() => {
         fetchData();
-    }, []);
+    }, [
+        product,
+        productId,
+        variant,
+        variantId,
+        collection,
+        collectionId,
+        dataSource,
+        limit,
+        options,
+    ]);
 
     const fetchData = async () => {
         const response = await Rebuy.getStorefrontData(request.url, request.parameters);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rebuy/rebuy-hydrogen",
     "description": "This is the default library for Rebuy + Shopify Hydrogen",
-    "version": "1.0.0-rc.3",
+    "version": "1.0.0-rc.4",
     "license": "MIT",
     "author": "Rebuy, Inc.",
     "type": "module",