Add missing translations

Author: esezen

cspell.json

@@ -55,6 +55,11 @@
     "todo",
     "Usa",
     "tus",
-    "menos"
+    "menos",
+    "desde",
+    "hasta",
+    "Agregar",
+    "carrito",
+    "para"
   ]
 }

src/components/Filters/FilterRangeSlider.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState, useRef } from 'react';
 import classNames from 'classnames';
 import { PlpRangeFacet } from '../../types';
+import { translate } from '../../utils/helpers';
+import { useCioPlpContext } from '../../hooks/useCioPlpContext';
 
 export interface FilterRangeSliderProps {
   rangedFacet: PlpRangeFacet;
@@ -46,6 +48,7 @@ const COLLAPSED_TRACK_STYLE = { left: '0%', width: '100%' };
 
 export default function FilterRangeSlider(props: FilterRangeSliderProps) {
   const { rangedFacet: facet, modifyRequestRangeFilter, isCollapsed, sliderStep = 0.1 } = props;
+  const { translations } = useCioPlpContext();
   const visibleTrack = useRef<HTMLDivElement>(null);
   const [selectedTrackStyles, setSelectedTrackStyles] = useState({});
 
@@ -193,7 +196,7 @@ export default function FilterRangeSlider(props: FilterRangeSliderProps) {
         <div className='cio-filter-ranged-slider'>
           <div className='cio-slider-inputs'>
             <span className='cio-slider-input cio-slider-input-min'>
-              <span className='cio-slider-input-prefix'>from </span>
+              <span className='cio-slider-input-prefix'>{translate('from', translations)} </span>
               <input
                 required
                 type='number'
@@ -208,7 +211,7 @@ export default function FilterRangeSlider(props: FilterRangeSliderProps) {
               />
             </span>
             <div className='cio-slider-input cio-slider-input-max'>
-              <span className='cio-slider-input-prefix'>to </span>
+              <span className='cio-slider-input-prefix'>{translate('to', translations)} </span>
               <input
                 required
                 type='number'

src/components/ProductCard/ProductCard.tsx

@@ -8,6 +8,7 @@ import {
   getProductCardCnstrcDataAttributes,
   getConversionButtonCnstrcDataAttributes,
 } from '../../utils';
+import { translate } from '../../utils/helpers';
 import RenderPropsWrapper from '../RenderPropsWrapper/RenderPropsWrapper';
 import { ProductCardProps } from '../../types';
 import { EMITTED_EVENTS } from '../../constants';
@@ -44,6 +45,7 @@ export default function ProductCard(props: ProductCardProps) {
   const onAddToCart = useOnAddToCart(client, state.callbacks.onAddToCart);
   const { formatPrice } = state.formatters;
   const onClick = useOnProductCardClick(client, state.callbacks.onProductCardClick);
+  const { translations } = state;
 
   const cnstrcDataAttrs = getProductCardCnstrcDataAttributes(productInfo, {
     labels: item.labels,
@@ -142,7 +144,7 @@ export default function ProductCard(props: ProductCardProps) {
           onClick={(e) =>
             onAddToCart(e, item, itemPrice, productSwatch?.selectedVariation?.variationId)
           }>
-          Add to Cart
+          {translate('Add to Cart', translations)}
         </button>
       </a>
     </RenderPropsWrapper>

src/constants.ts

@@ -23,11 +23,18 @@ All translation keys are optional - any non-provided translation will fallback t
   "By": "...",
   "Sort": "...",
 
+  // Range Filter
+  "from": "...",
+  "to": "...",
+
   // Groups/Categories
   "Categories": "...",
   "Show All": "...",
   "Show Less": "...",
 
+  // Product Card
+  "Add to Cart": "...",
+
   // Zero Results
   "Sorry, we didn't find:": "...",
   "Sorry, we were unable to find what you were looking for.": "...",

src/stories/components/CioPlp/Translations Code Examples.mdx

@@ -34,11 +34,18 @@ All keys are optional. Here are the translatable strings:
   "By": "By",
   "Sort": "Sort",
 
+  // Range Filter
+  "from": "from",
+  "to": "to",
+
   // Groups/Categories
   "Categories": "Categories",
   "Show All": "Show All",
   "Show Less": "Show Less",
 
+  // Product Card
+  "Add to Cart": "Add to Cart",
+
   // Zero Results
   "Sorry, we didn't find:": "Sorry, we didn't find:",
   "Sorry, we were unable to find what you were looking for.": "Sorry, we were unable to find what you were looking for.",
@@ -71,9 +78,12 @@ export default function MyComponent() {
         'Sort by:': 'Ordenar por:',
         By: 'Por',
         Sort: 'Ordenar',
+        from: 'desde',
+        to: 'hasta',
         Categories: 'Categorias',
         'Show All': 'Mostrar todo',
         'Show Less': 'Mostrar menos',
+        'Add to Cart': 'Agregar al carrito',
         "Sorry, we didn't find:": 'Lo sentimos, no encontramos:',
         'Sorry, we were unable to find what you were looking for.':
           'Lo sentimos, no pudimos encontrar lo que buscabas.',

src/stories/components/CioPlp/Translations.stories.tsx

@@ -51,9 +51,12 @@ function TranslationsStory({ defaultUrl }: any) {
     'Sort by:': 'Ordenar por:',
     By: 'Por',
     Sort: 'Ordenar',
+    from: 'desde',
+    to: 'hasta',
     Categories: 'Categorias',
     'Show All': 'Mostrar todo',
     'Show Less': 'Mostrar menos',
+    'Add to Cart': 'Agregar al carrito',
     "Sorry, we didn't find:": 'Lo sentimos, no encontramos:',
     'Sorry, we were unable to find what you were looking for.':
       'Lo sentimos, no pudimos encontrar lo que buscabas.',

src/types.ts

@@ -80,6 +80,13 @@ export type Translations = {
   'Show All'?: string;
   'Show Less'?: string;
 
+  // Range Filter
+  from?: string;
+  to?: string;
+
+  // Product Card
+  'Add to Cart'?: string;
+
   // Zero Results
   "Sorry, we didn't find:"?: string;
   'Sorry, we were unable to find what you were looking for.'?: string;