Related Articles

Onymos presenta el componente DocKnow OCR mejorado con API LLM

octubre 13, 2024

Gemini vs ChatGPT: las diferencias clave en 2024

octubre 12, 2024

Atlassian Rovo ahora está disponible de forma generalizada, brindando a los usuarios acceso rápido a todo el conocimiento de la empresa.

octubre 12, 2024

Aprenda a crear una página de producto Magento 2 utilizando ReactJs en un entorno de desarrollo sin cabeza. Al aprovechar la arquitectura sin cabeza, integraremos perfectamente el backend de Magento 2 con React, lo que permitirá una experiencia de usuario más flexible y dinámica y todo el potencial del comercio sin cabeza. Introducción Crear una página de producto en React para su tienda Magento 2 puede influir significativamente en la decisión de un usuario de comprar su producto o seguir adelante. Esta guía lo guiará a través del proceso de creación de una página de producto eficiente y fácil de usar, con ejemplos de código y explicaciones detalladas. A lo largo del camino, obtendrá información valiosa sobre el desarrollo de React.js. Aprenderá cómo obtener datos de la API GraphQL de Magento 2, administrar el estado y diseñar un diseño responsivo que mejore la experiencia de compra general. Implementación Ahora implementemos la página del producto paso a paso. Configurando la página de su producto con ReactJs 1. Cree su proyecto ReactJs: abra la terminal y ejecute el siguiente comando para crear un nuevo proyecto React.Js npx create-react-app my-magento-store cd my-magento-store 2. Navegue al directorio raíz: cd my-magento-store 3. Instale los paquetes necesarios en ReactJs: Como lo creé con Tailwind, Eslint, React router dom, TypeScript y luego: // typescript y eslint npm install -D typescript eslint // tailwind css npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p // reaccionar enrutador npm instalar reaccionar-router-dom 4. Configure consultas GraphQL: dado que estamos usando la API GraphQl de Magento 2, creemos una carpeta para consultas GraphQL. . Esto mantiene su código organizado. mkdir src/graphql touch src/graphql/queries.ts //En query.ts, puede definir la consulta GraphQL para recuperar detalles del producto: // graphql/queries.ts export const GET_PRODUCT_BY_SKU = (sku: string) => ` { productos (filtro: {sku: {eq: «${sku}»}}) { artículos { id nombre rating_summary review_count sku stock_status precio { precio regular { cantidad { valor de la moneda } } } descripción { html } media_gallery { url } } } } `; 5. Cree la página de su producto en ReactJs: dentro del directorio src, en un archivo llamado App.tsx agregue la estructura de enrutamiento: import { BrowserRouter as Router, Route, Routes } from ‘react-router-dom’; importar ProductPage desde ‘../components/ProductPage’; // Función del componente de la página de tu producto App() { return ( {/* Otras rutas */> < /Router> ); } exportar aplicación predeterminada; 6. Cree un componente de página de producto mkdir src/components touch src/components/ProductPage.tsx y agregue el siguiente código en el componente de página de producto: import React, { useEffect, useState } from «react»; importar {GET_PRODUCT_BY_SKU} desde «../graphql/queries»; importar {StarIcon} desde «./StarIcon»; importar { HeartIcon } desde «./Heart»; importar { ChartBarIcon } desde «./CompareIcon»; importar {useParams} desde «react-router-dom»; Interfaz ProductType { precio: cualquiera; media_gallery: {url: cadena; }[]; nombre: cadena; stock_status: cadena; sku:cadena; identificación: cadena; } const ProductPage: React.FC = () => { const { sku=»» } = useParams<{ sku: string }>(); constante [product, setProduct] = estado de uso(Nada); constante [loading, setLoading] = useState(verdadero); const APP_URL = MAGENTO_ENDPOINT/graphql; useEffect(() => { const fetchProduct = async () => { intentar { const res = await fetch(«APP_URL», { método: «POST», encabezados: { «Content-Type»: «application/json», }, cuerpo: JSON.stringify({ consulta: GET_PRODUCT_BY_SKU, }), });[0] || nulo; setProduct(producto recuperado); } captura (error) { error de consola (error); } finalmente { setLoading(false); } }; recuperarProducto(); }, [sku]); si (cargando) {regresar

; } si (!producto) { volver

; } const priceData = producto.precio.regularPrice.cantidad; moneda constante = «USD»; valor constante = precioDatos?.valor; precio constante = valor?.toLocaleString(«en-US», {estilo: «moneda», moneda, }); elementos constantes = nueva matriz (5). devolver (

{ producto.media_gallery && producto.media_gallery.length > 0 && ( )}

{nombre.delproducto}

{items.map((calificación) => ( evaluación ? ? texto-amarillo-500 relleno-amarillo-500″: «texto-gris-200″} h-5 w-5 flex-shrink-0`} aria-hidden=»true» /> ))}

< p className="text-sm font-medium cursore-pointer md:text-base text-sky-600 hover:text-sky-700">{item.review_count} Reseñas

Añade tu reseña

{precio}

{producto?.stock_status?. reemplazar(«_», » «)}

Sku#: {producto?.sku}

---

Cantidad:

Añadir a la cesta

Añadir a la lista de deseos Añadir para comparar

); }; exportar la página del producto predeterminada; MObile View 7. Ejecute su aplicación: Finalmente, ejecute su aplicación ReactJs para ver la página de su producto en acción: npm start Conclusión Siguiendo estos pasos, habrá creado exitosamente una página de producto usando React.Js que se integra perfectamente con su backend Magento 2. Esta base no sólo muestra información esencial del producto, sino que también sienta las bases para futuras mejoras. Puede mejorar la experiencia del usuario agregando funciones como carrito de clientes, reseñas de usuarios, productos relacionados y opciones de estilo avanzadas. Estas adiciones no sólo enriquecerán la funcionalidad sino que también crearán una experiencia de compra más atractiva para sus clientes. Siéntase libre de personalizar y ampliar estas bases según sea necesario, adaptándolas para satisfacer sus objetivos comerciales específicos y las necesidades de los usuarios. ¡Las posibilidades son infinitas!