Skip to content

Commit

Permalink
chore: update deps, reformat code
Browse files Browse the repository at this point in the history
  • Loading branch information
paul-phan committed Jun 14, 2024
1 parent 7132762 commit 10b4520
Show file tree
Hide file tree
Showing 18 changed files with 13,403 additions and 2,233 deletions.
2 changes: 1 addition & 1 deletion DEVELOPMENT.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,4 @@ release process, follow these steps:
2. Run `pnpm changeset version` to bump the version of the packages that need to be upgraded.
3. Run `pnpm changeset publish` to publish the new version of the packages to `npm`.
4. Commit and push the changes to the `main` branch.
5. Release the new version of the packages on GitHub.
5. Release the new version of the packages on GitHub.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
## Overview

The **Weaverse SDKs** is a public collection of SDKs for integrating **Weaverse Headless CMS** with modern `React/JamStack`
frameworks such as *Shopify Hydrogen*, *Remix*, or *Next.js*. Developed by The Weaverse Team, these SDKs are designed to
frameworks such as _Shopify Hydrogen_, _Remix_, or _Next.js_. Developed by The Weaverse Team, these SDKs are designed to
simplify and enhance the integration of dynamic, content-rich web applications with the Weaverse CMS.

## Quick Links
Expand Down
30 changes: 11 additions & 19 deletions docs/deployment/hydrogen-domain-checkout-and-analytics-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,20 @@ This article provides a comprehensive guide to setting up your custom domain and
![Deployed and Published Hydrogen Project](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/weaverse_hydrogen_deployed.png?v=1713692590)

## **Setting Up Your Custom Domain**

Navigate to your Shopify store's admin panel, then go to Settings > Domains. Here, you can add your custom domain by clicking on **Connect existing domain** or **Buy new domain**.
For reference, I already own the domain `weaverse.dev` and will connect it to my Hydrogen store.
![Shopify Domain Settings](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/connect_existing_domain.png?v=1713694033)

If your domain is purchased and managed by Shopify, you can skip the step of updating DNS records as Shopify will automatically handle this for you.

For domains not managed by Shopify, you will need to update the DNS records in your domain provider's dashboard. Here are the DNS records you need to add:

- **CNAME**: Host: `@` (or the subdomain you want to connect), Points to: `shops.myshopify.com`.
![Shopify Domain DNS Records](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/dns_settings.png?v=1713694183)

After updating the DNS records, click **Verify connection**. Once verified, your domain will be linked to your Shopify store. It's then time to update the domain target to your Hydrogen store:

- Click on the domain you've added and select **Change target** to choose the Hydrogen target.
- Select the Hydrogen store and environment you wish to connect and click **Save**.
![Shopify Domain Target](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/set_hydrogen_target.png?v=1713694386)
Expand All @@ -32,27 +35,32 @@ The final step is to set your domain type to **Primary domain** to make it the d
![Shopify Primary Domain](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/domain_type.png?v=1713695844)

## **Redirect Traffic from Liquid Storefront to Hydrogen**

To redirect traffic from your old Shopify Liquid storefront to the new Hydrogen store, follow these steps:

- Download the [Hydrogen Redirect Theme](https://github.com/Shopify/hydrogen-redirect-theme/archive/refs/heads/master.zip) and navigate to your Shopify store's admin > Online Store > Themes > Add Theme > Upload zip file.
- Publish the theme, then access the theme customizer.
- In the theme customizer, go to "Theme settings" > "Storefront" and set the Hostname to your Hydrogen store URL, for example, `weaverse.dev`.
- Save and publish the changes.
![Hydrogen Redirect Theme Setup](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/hydrogen_redirect_theme_setup.png?v=1713694951)

## **Setup Checkout Domain**

While your Hydrogen store manages the storefront, the checkout process is still handled by Shopify (Liquid). To ensure a seamless checkout experience that matches your custom domain:

- Go to your Shopify store's admin > Settings > Domain.
- Add a domain and set it as the primary target for the Online Store.
- Update the DNS records in your domain provider's dashboard with the following:
- **CNAME**: Host: `www`, Points to: `shops.myshopify.com`.

I recommend using the `www` subdomain for checkout to maintain a consistent URL format like `yourdomain.com`. Alternatively, you can use subdomains such as `checkout` or `buy` if you prefer.


## **Setting Up Cookie Banner and Analytics**

Following the [Hydrogen April 2024 updates](https://hydrogen.shopify.dev/update/april-2024), Shopify's Hydrogen now supports the Native Cookie Banner and Analytics. If your Hydrogen project has not been updated, please follow [these instructions](https://github.com/Shopify/hydrogen/tree/main/examples/gtm#1-enable-customer-privacy--cookie-consent-banner) to upgrade.

The [Weaverse Hydrogen theme](https://github.com/Weaverse/pilot/tree/main) has been updated to the latest version to include these features. To enable the cookie banner and analytics, follow these steps:

- Enable the cookie banner by following [this guide](https://github.com/Shopify/hydrogen/tree/main/examples/gtm#1-enable-customer-privacy--cookie-consent-banner).
- Add the `PUBLIC_CHECKOUT_DOMAIN` to your storefront's environment variables. Set this variable to your checkout domain, such as `www.yourdomain.com`.
- Redeploy your Hydrogen project to apply these changes using the command `npx shopify hydrogen deploy`.
Expand All @@ -61,25 +69,9 @@ After redeployment, the cookie banner and analytics will be active on your Hydro
![Hydrogen Cookie Banner and Analytics](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/hydrogen_cookie_banner_activated.jpg?v=1713697054)

### **Optional: Google Tags Manager Integration**

The Weaverse Hydrogen theme includes integration with Google Tags Manager for enhanced tracking and analytics. To activate this feature, follow these steps:

- Obtain your Google Tags Manager ID from your account.
- Add the `PUBLIC_GOOGLE_GTM_ID` to your storefront's environment variables.
- Redeploy your Hydrogen project to implement these changes.


















3 changes: 2 additions & 1 deletion docs/deployment/oxygen.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ Within your Shopify store's Hydrogen app, click the "**Create storefront**" butt
### Publish Your Storefront & Update Weaverse Preview URL

After the GitHub Action completes:

- **Make the storefront public**: Click "**...**" next to the Storefront name, select "**Edit environment**," and then choose "**Publish**."
![hydrogen edit environment](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/hydrogen_edit_environment.png?v=1713673181)
![Make Hydrogen storefront public](https://cdn.shopify.com/s/files/1/0728/0410/6547/files/make_hydrogen_storefront_public.webp)
Expand All @@ -62,4 +63,4 @@ _Additional Note_: For Shopify Starter or Development plans, alternative deploym
## **Additional Resources**

- [Shopify Oxygen documentation](https://shopify.dev/docs/custom-storefronts/oxygen)
- [Environment Variables](/docs/guides/environment-variables)
- [Environment Variables](/docs/guides/environment-variables)
13 changes: 7 additions & 6 deletions docs/deployment/vercel.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,20 @@ order: 3
published: true
---


## **Deploying Your Weaverse Hydrogen Project to Vercel**

As a dynamic cloud platform, Vercel provides developers with robust tools for deploying, managing, and scaling their web and application projects. While it excels in deploying Next.js applications, its capabilities extend to a wide range of other application frameworks.



### Deprecated Notice

With the migration to Vite in the [Hydrogen April 2024 release](https://hydrogen.shopify.dev/update/april-2024), the existing Vercel adapter has become incompatible. We are actively updating the adapter to ensure compatibility with Vite. This guide will be revised once the adapter is updated.

In the interim, if you wish to continue using Vercel, you must utilize the classic remix compiler. The necessary code remains accessible on our `classic-compiler` branch. You can find it [here](https://github.com/Weaverse/pilot/tree/classic-compiler). Please clone the branch and adhere to the included instructions for deployment on Vercel.


This revision aims to clarify the message and enhance the formal tone of the document. Let me know if there are specific aspects you'd like further refined or adjusted!

### Important Considerations

Before opting to host your website on Vercel, be aware of these critical points:

- Vercel offers a unique approach to caching requests, which may not natively support the Remix app. Modifications in the code could be necessary for optimal performance on Vercel. Further information can be found [here](https://vercel.com/docs/frameworks/remix).
Expand All @@ -35,28 +32,32 @@ Before opting to host your website on Vercel, be aware of these critical points:

In this guide, we focus on deploying a Weaverse Hydrogen Project, a Remix-based application, to Vercel.



### Video Tutorial

For a visual walkthrough, watch our video tutorial below:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gCKq5dB95uw" title="Deploying Your Weaverse Hydrogen Project to Vercel" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## **Guided Deployment Procedure**

### Clone the Theme on GitHub

Weaverse offers two distinct starter themes: [Pilot](https://github.com/Weaverse/pilot) and [Naturelle](https://github.com/Weaverse/Naturelle). Select your preferred theme and use the "Use this template" button to forge a new repository. For a more streamlined approach, utilize the "Deploy to Vercel" option found in the theme's README page, allowing Vercel to facilitate the deployment process.

### Connect with Vercel

Once your repository is set up, navigate to your Vercel dashboard and select the "Add New Project" button. Identify and choose the newly created repository, then proceed by clicking the "Continue" button.

### Configure the Environment Variables

Following the repository connection, your next step is to configure the necessary environment variables. Detailed guidance on these variables can be found in our comprehensive [Environment Variables](/docs/guides/environment-variables) guide.

### Deploy

With the environment variables configured, simply click the "Deploy" button to initiate the deployment of your project on Vercel.

### Update Weaverse Preview URL

Upon successful deployment, acquire the public URL of your project and proceed to update the Weaverse Preview URL within the Weaverse Studio interface.

---
12 changes: 6 additions & 6 deletions docs/guides/input-settings.md
Original file line number Diff line number Diff line change
Expand Up @@ -299,12 +299,12 @@ process.
**`configs` details**
| Property | Type | Description | Required |
| ---------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `options` | `Array<OptionType>` | An array of **`OptionType`** objects. See below for the details of each property on an option. | ✅ |
| ↳ `value` | `string` | A unique value for the option. | ✅ |
| ↳ `label` | `string` | Displayed text for the option. | ✅ |
| ↳ `icon` | `string` | Displayed icon for the option. When an **`icon`** is set, the **`label`** will act as its `tooltip`. | ➖ |
| Property | Type | Description | Required |
| ---------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
| `options` | `Array<OptionType>` | An array of **`OptionType`** objects. See below for the details of each property on an option. | ✅ |
| ↳ `value` | `string` | A unique value for the option. | ✅ |
| ↳ `label` | `string` | Displayed text for the option. | ✅ |
| ↳ `icon` | `string` | Displayed icon for the option. When an **`icon`** is set, the **`label`** will act as its `tooltip`. | ➖ |
| ↳ `weight` | `string` | An optional weight for the icon, which can be one of the following values: `thin` \| `light` \| `regular` \| `bold` \| `fill` \| `duotone` | ➖ |
💡 **Note for icons:**
Expand Down
Loading

0 comments on commit 10b4520

Please sign in to comment.