scottyzen / woonuxt Goto Github PK
View Code? Open in Web Editor NEWStatic e-commerce powered by WooCommerce & Nuxt
Home Page: https://woonuxt.com
License: GNU General Public License v3.0
Static e-commerce powered by WooCommerce & Nuxt
Home Page: https://woonuxt.com
License: GNU General Public License v3.0
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.
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
Hi! Really nice implementation!
I was wondering: Why aren't you using NuxtImage to leverage image processing so that images get converted to webp?
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.
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.
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.
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: {…}
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?
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?
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?
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:
I am unable to proceed to payments as a guest. Is it possible / is there any workaround to achieve that?
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 think it would be a good idea to put a button on each product in the cart to be able to delete it.
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
git clone ...
pnpm i
npm run dev
I think you already addressed some how here but again; I'm not a dev.
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"
},
npm i vue-i18n @intlify/vue-router-bridge @intlify/vue-i18n-bridge vue-i18n-routing --force
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"
},
pnpm install --no-frozen-lockfile
after too.I hope that will help others to enjoy your project.
winget install -e --id pnpm.pnpm
winget install -e --id OpenJS.NodeJS.LTS
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?
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": []
}
}
}
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
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!
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?
Hey! Looks like on the demo and my deployed test that the wishlist page shows broken images.
Wanted to make you aware!
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,
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
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
Do you have planing to show content blog from wordpress on front page?
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
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 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?
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!
i cannot create an account
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,
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?
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:
Hello,
I got error
FATAL Failed to run command nuxt-preview: 11:29:05
Error: Command failed with ENOENT: nuxt-preview
spawn nuxt-preview ENOENT
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 !
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
.
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.
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.
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.
I'm having an issue navigating back to the other pages once I checkout, is there a way around this?
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.
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.
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' },
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.
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,
Just tried a brand new wordpres install and brand new install of woonuxt and it isnt working anymore.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.