Add trackingId prop to the shelf

vtex-apps · Feb 21, 2020 · bd4d565 · bd4d565
1 parent 56d0bac
commit bd4d565
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- `trackingId` to the Shelf.
 
 ## [1.35.4] - 2020-02-10
 ### Removed

diff --git a/messages/context.json b/messages/context.json
@@ -36,6 +36,9 @@
   "admin/editor.shelf.orderType.relevance": "admin/editor.shelf.orderType.relevance",
   "admin/editor.shelf.scrollType.byPage": "admin/editor.shelf.scrollType.byPage",
   "admin/editor.shelf.scrollType.oneByOne": "admin/editor.shelf.scrollType.oneByOne",
+  "admin/editor.shelf.advanced-properties.title": "Advanced Configurations",
+  "admin/editor.shelf.advanced-properties.tracking-id.title": "GTM Shelf name",
+  "admin/editor.shelf.advanced-properties.tracking-id.description": "Name to show in the Google Analytics. If you don't pass anything it will show the name of the block instead",
   "admin/editor.relatedProducts.title": "admin/editor.relatedProducts.title",
   "admin/editor.relatedProducts.description": "admin/editor.relatedProducts.description",
   "admin/editor.relatedProducts.recommendation": "admin/editor.relatedProducts.recommendation",

diff --git a/messages/en.json b/messages/en.json
@@ -36,6 +36,9 @@
   "admin/editor.shelf.orderType.relevance": "Relevance",
   "admin/editor.shelf.scrollType.byPage": "By Page",
   "admin/editor.shelf.scrollType.oneByOne": "One by One",
+  "admin/editor.shelf.advanced-properties.title": "Advanced Configurations",
+  "admin/editor.shelf.advanced-properties.tracking-id.title": "GTM Shelf name",
+  "admin/editor.shelf.advanced-properties.tracking-id.description": "Name to show in the Google Analytics. If nothing is passed it will use the name of the block instead",
   "admin/editor.relatedProducts.title": "Related Products",
   "admin/editor.relatedProducts.description": "A related products shelf to show view recommendations",
   "admin/editor.relatedProducts.recommendation": "Recommendations",

diff --git a/messages/es.json b/messages/es.json
@@ -36,6 +36,9 @@
   "admin/editor.shelf.orderType.relevance": "Relevancia",
   "admin/editor.shelf.scrollType.byPage": "Por Página",
   "admin/editor.shelf.scrollType.oneByOne": "Uno a Uno",
+  "admin/editor.shelf.advanced-properties.title": "Configuraciones avanzadas",
+  "admin/editor.shelf.advanced-properties.tracking-id.title": "Nombre del estante en el GTM",
+  "admin/editor.shelf.advanced-properties.tracking-id.description": "Nombre para mostrar en Google Analytics. Se no se agrega nada, se utilizará el nombre del bloque del estante",
   "admin/editor.relatedProducts.title": "Productos Relacionados",
   "admin/editor.relatedProducts.description": "Una vitrina de productos relacionados para mostrar recomendaciones de vista",
   "admin/editor.relatedProducts.recommendation": "Recomendaciones",

diff --git a/messages/pt.json b/messages/pt.json
@@ -36,6 +36,9 @@
   "admin/editor.shelf.orderType.relevance": "Relevância",
   "admin/editor.shelf.scrollType.byPage": "Por Página",
   "admin/editor.shelf.scrollType.oneByOne": "Um por Um",
+  "admin/editor.shelf.advanced-properties.title": "Configurações avançadas",
+  "admin/editor.shelf.advanced-properties.tracking-id.title": "Nome da vitrine no GTM",
+  "admin/editor.shelf.advanced-properties.tracking-id.description": "Nome a ser exibido no Google Analytics. Se nada for adicionado o nome do bloco da vitrine será usado.",
   "admin/editor.relatedProducts.title": "Produtos Relacionados",
   "admin/editor.relatedProducts.description": "Uma vitrine de produtos recomendados para ver",
   "admin/editor.relatedProducts.recommendation": "Recomendações",

diff --git a/react/Shelf.js b/react/Shelf.js
@@ -4,10 +4,10 @@ import { graphql } from 'react-apollo'
 import { Loading } from 'vtex.render-runtime'
 import { useDevice } from 'vtex.device-detector'
 import { useCssHandles } from 'vtex.css-handles'
+import { useTreePath } from 'vtex.render-runtime'
 import { ProductListContext } from 'vtex.product-list-context'
 
 import OrdenationTypes, {
-  getOrdenationNames,
   getOrdenationValues,
 } from './utils/OrdenationTypes'
 import ProductList from './components/ProductList'
@@ -31,9 +31,15 @@ const Shelf = props => {
     paginationDotsVisibility = 'visible',
     productList = ProductList.defaultProps,
   } = props
+  let { trackingId } = props
+  const treePath = useTreePath()
   const handles = useCssHandles(CSS_HANDLES)
   const { isMobile } = useDevice()
   const { loading, error, products } = data || {}
+  if (!trackingId) {
+    const treePathList = (typeof treePath === 'string' && treePath.split()) || []
+    trackingId = treePathList[treePathList.length - 1] || 'Shelf'
+  }
 
   const filteredProducts = useMemo(() => {
     return products && products.map(normalizeBuyable).filter(Boolean)
@@ -57,7 +63,7 @@ const Shelf = props => {
 
   return (
     <div className={`${handles.container} pv4 pb9`}>
-      <ProductListProvider>
+      <ProductListProvider listName={trackingId}>
         <ProductList {...productListProps} />
       </ProductListProvider>
     </div>

diff --git a/store/contentSchemas.json b/store/contentSchemas.json
@@ -4,6 +4,24 @@
       "title": "admin/editor.shelf.title",
       "description": "admin/editor.shelf.description",
       "type": "object",
+      "dependencies": {
+        "advancedProperties": {
+          "oneOf": [
+            {
+              "properties": {
+                "advancedProperties": {
+                  "enum": [true]
+                },
+                "trackingId": {
+                  "title": "admin/editor.shelf.advanced-properties.tracking-id.title",
+                  "description": "admin/editor.shelf.advanced-properties.tracking-id.description",
+                  "type": "string"
+                }
+              }
+            }
+          ]
+        }
+      },
       "properties": {
         "category": {
           "title": "admin/editor.shelf.category.title",
@@ -60,6 +78,11 @@
             "admin/editor.shelf.skusFilter.none",
             "admin/editor.shelf.skusFilter.first-available"
           ]
+        },
+        "advancedProperties": {
+          "title": "admin/editor.shelf.advanced-properties.title",
+          "type": "boolean",
+          "default": false
         }
       }
     },