search

hyva-themes / magento2-checkout-example

A React Checkout template that allows you to quickly create a customized Hyvä Checkout for your project.
11 stars 2 forks source link

Replacing/Extending React components not working with Luma theme. #18

Open underser opened 2 years ago

underser commented 2 years ago

Preconditions (*)

  1. Magento CLI 2.4.3-p1
  2. hyva-themes/magento2-react-checkout -> 1.0.5 (installed via Composer)
  3. magento2-checkout-example -> latest (master branch)

Steps to reproduce (*)

  1. Install "hyva-themes/magento2-react-checkout" via Composer

  2. Set HYVA THEMES->Checkout->General Settings->Enable configuration to Yes

  3. Clone magento2-checkout-example to app/code/Hyva/CheckoutExample

  4. Follow the process described in installation and get React app running on http://localhost:3000/

  5. Try to do simple customization from the README.

    Screenshot 2022-02-10 at 11 16 19

  6. Execute build process as in docs.

  7. Go to Magento checkout under [magento-domain]/checkout/index

  8. Notice that the customization we did in step 5 is not loaded in the default M2 instance with the Luma theme.

    Screenshot 2022-02-10 at 11 20 27

Expected result (*)

  1. React components should be replaced/extended in M2 instance with the Luma theme.

Actual result (*)

  1. Replacing/Extending mechanism only works on http://localhost:3000/ (server started with npm start)

I did quick investigation and found that JS event there app/code/Hyva/CheckoutExample/view/frontend/templates/react-script.phtml:23 - private-content-loaded has never triggered so that customizations under app/code/Hyva/CheckoutExample/view/frontend/web/js/react-checkout.js has never loaded.

jissereitsma commented 2 years ago

Though this ticket is open already quite long, let me try to get to some solution anyway. Thank you for being thorough in your documentation. But perhaps it is fair to say that if the final result is a JS bundling that excludes your modification, that perhaps the JS bundle is not built with that customization. In step 6, you say that you followed the official doc to build things. This includes a command cd src/reactapp/. But which folder have you navigated into? The original src/reactapp or the new src/reactapp?

rajeev-k-tomy commented 1 year ago

This issue should be fixed now with the version 1.1.3 where we are not relying on the event private-content-loaded anymore.