Uso de la conversión de divisas en Shopify
Platforms:
La conversión de divisas integrada en Shopify facilita la lectura del símbolo de la divisa y el tipo de cambio desde la tienda online.
De forma estándar, Clerk.js para Shopify viene con un formato que funcionará siempre y cuando tu aplicación de terceros utilice el objeto de moneda integrado de Shopify.
**Incluyendo un formateador en tu Diseño##
Necesitas usar un formateador en tus Diseños para convertir precios. Esto es tomando un ejemplo de nuestro lenguaje estándar de plantillas aquí. Sin embargo, cuando se utilizan conversiones de moneda y símbolos, entonces Clerk.js detecta estos ajustes como el idioma, la moneda y el código de país. Los siguientes ejemplos le darán una visión más general de cómo funcionan los diferentes componentes.
| Formatter | Description | Example Output |
|---|---|---|
| Símbolo de moneda: Símbolo de moneda para el país o región dados. Puede variar en función de lo que haya establecido en la configuración de la tienda | € , £ y kr. | |
| currency_converter | Un formateador de conversación basado en la configuración de la moneda y el tipo de cambio de la configuración de la tienda | Digamos que tienes 10 euros en un producto. Si un usuario cambia a otra moneda como la corona danesa (dependiendo de la configuración), entonces se convertirá a la conversión correspondiente |
En el Editor de Diseño
- Cree un componente Texto donde desee que aparezca el precio
2. 2. Añada el siguiente código Liquid para mostrar el precio basado en el conversor de divisas dentro del componente de texto:
{{ currency_symbol }}{{ item.price | currency_converter }}
En modo código…
1. En my.clerk.io vaya a Búsqueda/Recomendaciones -> Diseños y haga clic en Editar diseño para su diseño.
2. Sustituir el formateador existente money o money_eu para los precios, por currency_converter.
3. Haga clic en Actualizar diseño.
4. Ahora podrá ver los precios convertidos y el símbolo de moneda en su diseño:
En diseño HTML/CSS (modo Código)
1. En my.clerk.io vaya a Búsqueda/Recomendaciones -> Diseños y haga clic en Editar diseño para su diseño.
2. Sustituir el formateador existente money o money_eu para los precios, por currency_converter.
3. Haga clic en Actualizar diseño.
4. Ahora podrá ver los precios convertidos y el símbolo de moneda en su diseño:
Soluciones Shopify-frontend-api
> Descargo de responsabilidad: Esta es una solución muy personalizada para obtener conversiones de precios si no hay datos de la API de shopify. Sólo use esto si está utilizando una configuración específica y personalizada para las conversiones de precios basados en los cambios geo-ip.
Esta es la documentación de la solución frontend en Github.
Obtención de datos contextuales JIT
Esta sección cubre cómo obtener datos contextuales en tiempo real para mostrarlos dentro del contenido devuelto por la API de Clerk.io.
Los patrones de diseño se compone de las siguientes partes:
- Una colección que contiene todos los productos.
- Un diseño alternativo para renderizar la información de la colección como JSON.
- Una clase Javascript que recoge los datos disponibles en la colección.
- Un fragmento de Javascript que consume los datos para los ids de producto relevantes en un resultado dado y los coloca dentro de un div en la plantilla.
1. **La Colección
Para asegurarte de tener una colección con todos los productos posibles, te recomiendo crear una colección con una condición que cumplan todos los productos. La colección debe llamarse Clerk api, ya que esto hará que reciba la ruta /collection/clerk-api frontend.
La condición para la colección debe ser algo así como precio > -1000000.
2. **El diseño alternativo para las colecciones
En segundo lugar tenemos que crear un diseño alternativo para mostrar nuestros datos utilizando la colección.
Para ello, primero editamos el código del tema que queremos utilizar. En la sección de plantillas en el lado izquierdo, pulse Añadir nueva plantilla.
En la ventana emergente seleccione collection para el tipo de recurso.
Seleccione líquido para el tipo de archivo.
Escribe json en el campo más inferior, para que el nombre de la plantilla creada sea collection.json.liquid.
El contenido de este archivo debe ser el archivo collection.json.liquid que se encuentra en la carpeta liquid de este proyecto.
Puede añadir campos al producto en esta plantilla según sea necesario.
3. La clase JS que maneja los datos de nuestro recién creado endpoint.
Con el fin de obtener los datos de nuestra colección y prepararlos para que puedan ser utilizados, tenemos que colocar todo el contenido de index.js en nuestra carpeta class en este proyecto, dentro de la etiqueta script que contiene Clerk.js que has colocado en theme.liquid.
Debería ser algo como esto:
Esta clase invalidará los datos basados en marcas de tiempo y monedas, sin necesidad de cambiar el código.
El tiempo antes de la invalidación es de 12 horas desde los últimos datos de construcción.
Cualquier cambio en el contexto monetario también invalida los datos.
4. **La función JS que carga los datos relevantes en la plantilla.
Por último debes incluir el template.js en la plantilla de diseño utilizada. La función toma los datos cuando están disponibles y los coloca en elementos hijos específicos dentro de cada ficha de producto.
El ejemplo incluye los campos list_price y price.
Cosas a tener en cuenta: Si necesitas utilizar campos diferentes a price y list_price, debes añadirlos en collection.json.liquid y luego editar template.html y template.js para consumir también esos campos. Nunca debería ser necesario editar la clase descrita en el paso 3.