Hyva React Checkout is not showing in frontend in Magento 2 - reactjs

I am working on Hyva React checkout along with Hyva Theme for a page and created a custom module for checkout. However it showing up like so in frontend -
There is no products showing up here which were added in the cart. I have tried all the steps from the documentation with the first method of customization. Someone please help.

Please try the following steps
1.composer require hyva-themes/magento2-react-checkout
2.bin/magento s:up
3.bin/magento config:set hyva_react_checkout/general/enable 1
check the checkout page after run this commands.

Related

404 page not found on nextJs app refreshing on netlify

This is the link to my GitHub project, see the directory structure: https://github.com/SutirthaDey/crowdcoin
app link: https://crowdcoins.netlify.app/
I have used react,nextJs, and next routes for dynamic routing. The problem I'm facing is after deploying it using netlify, everything is working fine but when I do a refresh, it's showing 404 pages not found(except the main index.js page/landing page). I don't know whether I was doing it appropriately but tried several things like using netlify.toml and _redirects but nothing really worked. Other than the refreshing part, everything is working fine.
I was stressing out for days over this its such unique problem that I couldn't find the answer too anywhere. I also followed the same Solidity tutorial as you and unfortunately the tutorial is very out of date so a lot of things don't really work. I had the exact same issue as you when trying to build on netlify. It took a while to figure out but basically the next-routes package does not work with netlify. So you will have to set up your routes just using vanilla Next.js. So delete the server.js and routes.js files then search up how to create routes using Next.js I would suggest these tutorials they are very good! Next routes tutorials. Hopefully this helps others I don't want anyone else to go through what I had to go through lol

Integrate Stripe in React

I would like to know whether it is possible to integrate the same design(checkout form) i.e,(https://checkout.stripe.dev/preview) in ReactJs. I have used the doc but able to add card number, expiry and cvv but unable add remaining fields.
PS: package used: npm i #stripe/react-stripe-js, npm i #stripe/stripe-js
You can get build a Checkout form that looks very close in React by using the PaymentElement. You can follow this guide (selecting Web as the platform and React as the frontend) to get started.

React-Django: How to send different functional components (React) to Django Views?

So I am new to React and I can currently create different functional components when I use npx create-react-app appname but if I want to "package" these files and send them to my Django's view page, what is the best way to do this? I am having some trouble with webpack configuring everything in the methods I've attempted. I am trying to create a web app. Thank you.
Basically to "deploy" Django + React app, you need to use webpack on your react project, then you store react webpacked scripts in your staticfiles directory in django. Then, you define a view that returns index.html with attached scripts {% static 'reactscripts.js' %}. Thats basically all if you want to combine theese two on simple project.
I hope thats the answer you're looking for.
[edit] Also if you would like to deploy your project (after you've figured everything out), this article may help you to do so
https://mattsegal.dev/django-spa-infrastructure.html

gh-pages displaying a blank page instead of project page

I'm trying to deploy my first react app and I followed the link below to deploy it on gh-pages. When using Git Bash I didn't get any error message, assuming that it worked. However, when I open the link through settings, it just shows a blank page. What am I doing wrong? Thank you in advance.
Here is the link to my repository: https://zerhar.github.io/todo-app/
Link to how to deploy a react app to Git Hub Pages: https://facebook.github.io/create-react-app/docs/deployment#github-pages-https-pagesgithubcom
If I "view-source" https://zerhar.github.io/todo-app/ I see that the JavaScript script tags are not pointing to the correct path.
For example, here is one of the script tags which links out to this dead link:
<script src="/Zerhar/todo-app/static/js/2.15fea075.chunk.js">
It needs to be adjusted, so the link becomes this:
<script src="/todo-app/static/js/2.15fea075.chunk.js">
I'm not quite sure where the script tags are being setup as I didn't see them listed here but that would be the first thing to try to fix.

Using antd after initializing app with CRA

Here is my case:
I initialized a project using create-react-app and I just figured out that using antd will be difficult.
I followed the steps in the dedicated part on ant design web site and it doesn't work. I tried to eject my project but when I do I have an error 'config' already exists in your app folder (I don't know what is that config).
I can't make ant working. I tried to add a simple button with the ant style but in the browser the button is a basic html button.
My question is: is there a way to use antd after creating a react application using CRA ?
I've read a lot of stuff on internet but accordingly to these posts and commentaries, nothing seems to work. Should I create a new project ?
Thanks a lot !
Ok I found the solution.
I followed the steps here ant.design/docs/react/use-with-create-react-app and my mistake was installing babel-import-plugin globaly instead of directly in the project. So everything seems to work now.
Sorry for that and thanks #iagowp for the help.

Resources