Just tried a brand new wordpres install and brand new install of woonuxt and it isnt working anymore.

At first glance, i liked the project, but i see some points in projects that prevent it from becoming useful in a real-life project, even a small one. please correct me if i am wrong

1- it uses static build, but for all of the products at once, so its not possible to update one product via invalidating that build. assume that we have 1000 products and 5 variants for each and we want to update just one variant. basically, its not possible, solution would be capability of invalidating just one of statically generated pages. ( i know it's easily possible in nextjs)

2- in each e-commerce project, search is the most important feature, we don't have search here. trying to load everything in frontend and do a search in FE is not a good idea :) here we need a search layer and interface to be able to connect it to Wordpress itself or any other search engine, opensource or service like algolia.

3- inventory control on the product description page is essential, so we should be able to add some serverside functions and parts to manage things like that.

CartCard only shows a maximum of 10 products. You cannot scroll vertically to see all the products.

I have created a .env and added the STRIPE_PUBLISHABLE_KEY but it keeps telling me in the checkout page key not found!
What could be the issue?

refreshCart() method returns results from graphql query GqlGetCart where customer object fields are empty and viewer object is null.

Could this be because of incorrect graphql plugin configuration or something else?

When registering new user from nuxt app, it saves data on backend, but throws same error in nuxt.

Hello,

i try to query on graphiql-ide have reviews data and test on localhost it show not have problem. But on my production it show around 2 sec and then will show empty data for reviews data

Any idea to resolve ?

Hi,

amazing project, just adding some findings upon doing some SEO tests:

https://yellowlab.tools/result/gj1uza2w1b/rule/identicalFiles

https://pagespeed.web.dev/report?utm_source=psi&utm_medium=redirect&url=https%3A%2F%2Fdemo.woonuxt.com%2F
Also pagespeed recommends adding default image sizes, this can reduce CLS,

Serve images that are appropriately-sized to save cellular data and improve load time. Learn more.
NuxtUse the nuxt/image component and set the appropriate sizes. Learn more.

Same about:
Avoid serving legacy JavaScript to modern browsers
0.15 s
Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren't necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. Learn MoreTBT

And as noticed also here, it seems some content is loaded 2 times indeed:

https://gtmetrix.com/reports/demo.woonuxt.com/fm52agoe/

Hi. After some time of visiting your demo (v3.woonuxt.com), the ability to add a product to cart disappears: I get an Expired token error when requesting it.

{
    "errors": [
        {
            "message": "Expired token",
            "extensions": {
                "category": "user"
            },
            "locations": [
                {
                    "line": 3,
                    "column": 3
                }
            ],
            "path": [
                "addToCart"
            ]
        }
    ],
    "data": {
        "addToCart": null
    },
    "extensions": {
        "debug": [],
        "queryAnalyzer": {
            "keys": "f2b7cee48a28d7c3be59a960e2126368a330d76d420b1e2410a8bb52eb9dc90e graphql:Mutation operation:addToCart",
            "keysLength": 101,
            "keysCount": 3,
            "skippedKeys": "",
            "skippedKeysSize": 0,
            "skippedKeysCount": 0,
            "skippedTypes": []
        }
    }
}

Hey!

Weird little bug. When using the search I'm seeing this:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'toLowerCase')

Which is strange because nothing was changed on my end for search. Your demo is working fine. I did have a cors issue I solved, but this doesn't seem related. Just checked your source with my page and its exactly the same.

Also speaking on unrelated, any ideas for Algolia integration for faceted search?

Hey! Looks like on the demo and my deployed test that the wishlist page shows broken images.

Wanted to make you aware!

On the checkout page, when changing the country / shipping location, all the input fields related to the customer clear automatically. Is there a way to prevent this from happening?

Hi,

First congratulation for this amazing project.

I'm encountering an issue when using 3D Secure authentication test card provided from stripe website (4000002760003184).

it doesn't show the 2FA popup but the order is created and set as Pending payment.

Is there a workaround to make this work.

Sincerely,
Léo

Hi

I have question for deploy to production on netlify, When i'm add new product or review and approve it need to build to and deploy again with WooNuxt trigger right? Do you have any idea to resolve it if im add new products?

thank you in advance for your help

Hi @scottyzen

I felt the need to revise Woonuxt for use in the textile industry like Zalando. First, I started by revising the product page. Could you please examine the compatibility with the source code? I'll fix the places you want me to fix, if you like it, i can pull request it to the source code.

My fork link = https://github.com/zackha/woonuxt.git

WORDPRESS_URL = https://rays.terodon.com
GRAPHQL_ENDPOINT = https://rays.terodon.com/id8zCEmPUIOZc8eam74
DOMAIN = rays.terodon.com
STRIPE_PUBLISHABLE_KEY = pk_test_hYushiff8SDLQBTdWpHx5s192OzMpEh6o
GOOGLE_TAG_MANAGER_ID = G-80Z4HSDMGR

Best Regards,

I'm having an issue navigating back to the other pages once I checkout, is there a way around this?

Hi

Do you have planing to show content blog from wordpress on front page?

When I add a product and try to change its quantity (more or less) in the CartCard, the quantity increments or decrements infinitely.

Looks like I can't login on the demo or on my own branch. I can register a user just fine. But it hangs on logging in.

Hi team,

I'm geting an erro on Netlify when deploying : Failed to load schema from https://trade.chasleao.com.br/graphql:

Aparently the double dot after the URL is cousing it since it woks ok without the double points (https://trade.chasleao.com.br/graphql)

Any sugestion on how to adjust?

Hello

Thank you for this inspiring project in Nuxt. I want to try this solution!

I'm in a local environment. I installed wordpress and the required extensions. I created some sample products.

But I still get these errors. yarn dev. Where could this come from?

Thanks

ERROR  Cannot start nuxt:  GraphQL Document Validation failed with 4 errors;                                                                                  14:55:23
 Error 0: Cannot query field "date" on type "ProductUnion". Did you mean to use an inline fragment on "ContentNode", "Product", "ExternalProduct", "GroupProduct", or "ProductVariation"?
   at /front/woonuxt_base/queries/getProducts.gql:15:7

Error 1: Cannot query field "terms" on type "ProductUnion". Did you mean to use an inline fragment on "Product", "ExternalProduct", "GroupProduct", "SimpleProduct", or "UnsupportedProduct"?
   at /front/woonuxt_base/queries/getProducts.gql:20:7

Error 2: Cannot query field "productCategories" on type "ProductUnion". Did you mean to use an inline fragment on "Product", "ExternalProduct", "GroupProduct", "SimpleProduct", or "UnsupportedProduct"?
   at /front/woonuxt_base/queries/getProducts.gql:26:7

Error 3: Cannot query field "allowedCountryStates" on type "RootQuery". Did you mean "allowedCountries" or "countryStates"?
   at /front/woonuxt_base/queries/getStates.gql:2:3

 Error 0: Cannot query field "date" on type "ProductUnion". Did you mean to use an inline fragment on "ContentNode", "Product", "ExternalProduct", "GroupProduct", or "ProductVariation"?
 at woonuxt_base/queries/getProducts.gql:15:7

 Error 1: Cannot query field "terms" on type "ProductUnion". Did you mean to use an inline fragment on "Product", "ExternalProduct", "GroupProduct", "SimpleProduct", or "UnsupportedProduct"?
 at woonuxt_base/queries/getProducts.gql:20:7

 Error 2: Cannot query field "productCategories" on type "ProductUnion". Did you mean to use an inline fragment on "Product", "ExternalProduct", "GroupProduct", "SimpleProduct", or "UnsupportedProduct"?
 at woonuxt_base/queries/getProducts.gql:26:7

 Error 3: Cannot query field "allowedCountryStates" on type "RootQuery". Did you mean "allowedCountries" or "countryStates"?
 at woonuxt_base/queries/getStates.gql:2:3
 at executeCodegen (node_modules/@graphql-codegen/cli/esm/codegen.js:330:24)
 at async generate (node_modules/@graphql-codegen/cli/esm/generate-and-save.js:99:25)
 at async generate (node_modules/nuxt-graphql-client/dist/module.mjs:63:10)
 at async generateGqlTypes (node_modules/nuxt-graphql-client/dist/module.mjs:337:46)
 at async setup (node_modules/nuxt-graphql-client/dist/module.mjs:431:5)
 at async normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:2141:17)
 at async installModule (node_modules/@nuxt/kit/dist/index.mjs:2439:95)
 at async initNuxt (node_modules/nuxt/dist/index.mjs:3653:7)
 at async NuxtDevServer._load (node_modules/nuxi/dist/chunks/dev2.mjs:255:5)
 at async NuxtDevServer.load (node_modules/nuxi/dist/chunks/dev2.mjs:187:7)

Hi @scottyzen,

When I test Woonuxt on Node.js version (18.12.1), I get an error. So I reverted to Node.js version (16.18.1). It may be helpful to add the Node.js version under tested up to the readme file.

Best Regards,

Currently having an issue where products are not showing on /products page. They are showing when you go to the "categories" tab and select a category. Products will show up that way, but not on the product page. This is from a fresh install after cloning the woonuxt repository. I have not added anything to it besides my environment variables.

There is a typo in woonuxt.com website. Quick Start section > Woo Commerce card (1. Store data): "font-semibold".

Most likely due to wrong CSS style display.

Hi, this is my first comment in this project, by the way congrats, this is a huge work.

The problem i see is related to login:

• In /my-account page users are registed and login with a username.
• In /checkout page viewers are registed only with email and there is no username defined by themselves.
• I dont know if this a problem but the login mutation only accepts username and password.

hi,
my question is not about Nuxt app performance but wordpress backend performance - would you mind sharing your wordpress configuration (env settings, theme, plugins, php and db version, hosting ) ? I've been trying to duplicate what you did there and under no circumstances I get the same level of speed and responsiveness as your demo app.

thank you in advance for your help

I have a product and it doesnt show up on woonuxt netlify

I am unable to proceed to payments as a guest. Is it possible / is there any workaround to achieve that?

Hi! Really nice implementation!
I was wondering: Why aren't you using NuxtImage to leverage image processing so that images get converted to webp?

hi,
i try to register that is ok but when im log in at login button loading and i saw on network have return success login but the page stuck on login page when im re-loading need to login again

thank you in advance for your help

Hello,

I got error

1. FATAL Failed to run command nuxt-preview: 11:29:05
   Error: Command failed with ENOENT: nuxt-preview
   spawn nuxt-preview ENOENT

2. Error: Cannot query field "allPaColor" on type "VariableProduct".: {"response":{"errors":[{"message":"Cannot query field "allPaColor

idem for allPasize, image gallery / sourceUrl ...
Which plugin do you use for variation ?

Any idea to resolve ?

Your solutions seems great !
Pascal
keep up the good work !

Are you interested in having contact us gql form in woonuxt?

Just made a commit in my fork adding a contact us page functionality

allthough this required installing this plugin
Not sure if you want to include this as part of woonuxt plugins set. maybe optional?

Let me know if you like this @scottyzen.

i cannot create an account

after: npm run generate, i cannot view the products-page - but the rest works. hwo come?

I configured my GQL_HOST-endpoint correctly, i guess.

Any suggestions?

I think it would be a good idea to put a button on each product in the cart to be able to delete it.

i stumble upon with storefront-ui and i think its cool tailwind + nuxt3 ready commerce ui to be use with woonuxt...the only think storefront-ui missing are slider filter i guess compare to current woonuxt....can we plan to use the ui rather than reinvent the wheel (of ui)?

p/s : i like the way u use nuxt useState rather than use 3rd party state like pinia

Good evening, my cart does not update shipping prices when the country is changed.

It only changes after I click the checkout button to proceed with the order. In fact, when I return to the checkout page the selected country finally appears and the shipping cost is updated correctly.

In Vue Devtools Browser Extension, under , it shows that the selector works fine and correctly captures the chosen country. I believe there might be some issues with updating the shipping cost when changing the country selector.

Any help is appreciated. Thank you so much!

Hey!

Just dusted this off. and even on an old version or latest version new builds are failing here.

any ideas?

Hello, I'm trying to test it but I get a cors error.
please help

Guest Checkout on order summer page : 'Not authorized to access this order'
console log
Proxy(Object) {client: 'default', operationType: 'query', operationName: 'getOrder', statusCode: 200, gqlErrors: Array(1)}
gqlErrors: {message: 'Not authorized to access this order', extensions: {…}

In the ReadMe it is mentionned that the only required environment variables is: GQL_HOST, but when I try to deploy on Vercel it ask fo NUXT_IMAGE_DOMAIN too and I can't leave it empty.

so what I could do ?

So I cloned your repo and I did manageto run it locally
But, as a non programmer is was a hard road ;)

firstly I did'nt found the doc for that
but you could tell me if I did well

my mini how to

1. git clone ...

• obviously copying the .env

2. pnpm i

• after fixing the missing dependancies ...

3. npm run dev

fixing dependancies

I think you already addressed some how here but again; I'm not a dev.

FOR DEV: here how my package.json had to look like to make npm run dev happy

"dependencies": {
    "@intlify/vue-i18n-bridge": "^1.1.0",
    "@intlify/vue-router-bridge": "^1.1.0",
    "@stripe/stripe-js": "^2.2.1",
    "@vueform/slider": "^2.1.10",
    "@vueuse/core": "^10.7.0",
    "nuxi": "^3.10.0",
    "vue-i18n-routing": "^1.2.0"
  },

• I installed them with: npm i vue-i18n @intlify/vue-router-bridge @intlify/vue-i18n-bridge vue-i18n-routing --force

FOR PROD: here how my package.json looks like so npm run build on Cloudflare as a Page works

  "dependencies": {
    "@intlify/core-base": "^9.8.0",
    "@intlify/message-compiler": "^9.8.0",
    "@intlify/shared": "^9.8.0",
    "@intlify/vue-i18n-bridge": "^1.1.0",
    "@intlify/vue-router-bridge": "^1.1.0",
    "@stripe/stripe-js": "^2.2.1",
    "@vueform/slider": "^2.1.10",
    "@vueuse/core": "^10.7.0",
    "vue-i18n": "^9.8.0",
    "vue-i18n-routing": "^1.2.0"
  },

• and I had to run pnpm install --no-frozen-lockfile after too.

I hope that will help others to enjoy your project.

for Windows user who wonder how to install npm and pnpm

winget install -e --id pnpm.pnpm
winget install -e --id OpenJS.NodeJS.LTS

when someone tiring to add to cart out of stock product it will be remain add card loading state on entire site .I think better to be disable the button if it is out of stock product.

Hi @scottyzen,

Using GitHub's release feature for your Woonuxt project can increase the number of views on your project's GitHub page. Therefore, it would be great to use releases in this project. You can follow the steps below for this.

Step 1 - Generate Changelogs

We want the release we will make to automatically create a changelog, so we create a file path with the extension .github/workflows in the GitHub action and add a workflow file named release.yml inside.

# .github/workflows/release.yml

name: Release

permissions:
  contents: write

on:
  push:
    tags:
      - 'v*'

jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - uses: actions/setup-node@v3
        with:
          node-version: 18.x

      - run: npx changelogithub
        env:
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

It will be trigged whenever you push a tag to GitHub that starts with v.

This workflow file will save the following written commits as a changelog for the release.

feat: { title: '🚀 Features' },
fix: { title: '🐞 Bug Fixes' },
perf: { title: '🏎 Performance' },

👉 Changelog example

If you are using GitHub Actions and it's triggered by the correct event, the GITHUB_TOKEN will be generated automatically. If not you might go to /settings/actions to check your permission setting.

Step 2 - Install bumpp

npm install -g bumpp

Add the following script to the package.json file

"release": "bumpp"

and run.

npm run release

You can run the command directly by using the npx bumpp command instead of adding an extra command to the script.

That's all for the processes.

Best Regards,

Hi im try to implement Paypal payment method in sandbox test mode but when im try to click paypal button in cart woonuxt client then redirect to wordpress site and cancel order?

Hi,
I just installed WP + woocommerce and configured woonuxt settings, but nuxt application does not see the plugin and says Error fetching woonuxt settings. Make sure you have the latest version of woonuxt-settings plugin installed and activated on your WordPress site. You can download it from https://github.com/scottyzen/woonuxt-settings
Where could be the problem?

In graphiql ide I see woonuxtSettings

Any plans for converting this project to Nuxt 3?

I have recently converted https://github.com/w3bdesign/nuxtjs-woocommerce to Nuxt 3 and may help out a little if necessary.

I just found Woonuxt and it's amazing. Thanks for creating it! I'm not knowledagble about Nuxt, just a Woo/WP builder with low-code. I found html tags are available in the meta description https://i.imgur.com/wtzcTbD.png

Hope SEO optimization comes soon!

I can't seem to manage to override the AppHeader.vue.
i have tried creating a folder in the root components/generalElements/AppHeader.vue
but it's not reading the override.
Is there something missing for this?

(I managed to override CategoryCard.vue which is inside components folder but not the ones that are inside generalElements.

Do you have how to implement paypal on payment? When i active on woo setting in admin panel and connect to paypal but not have paypal button when im make payment in cart?