{"id":39487474,"url":"https://github.com/vtex-apps/product-comparison","last_synced_at":"2026-01-18T05:28:31.704Z","repository":{"id":37853141,"uuid":"282786729","full_name":"vtex-apps/product-comparison","owner":"vtex-apps","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-22T11:52:21.000Z","size":408,"stargazers_count":9,"open_issues_count":13,"forks_count":18,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-08-22T13:37:58.147Z","etag":null,"topics":["b2b","ct-b2b"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vtex-apps.png","metadata":{"files":{"readme":"docs/README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-07-27T03:39:17.000Z","updated_at":"2025-04-11T20:13:29.000Z","dependencies_parsed_at":"2024-04-19T14:01:29.800Z","dependency_job_id":"63c4dc47-c5fc-41cc-b891-de11b72e5617","html_url":"https://github.com/vtex-apps/product-comparison","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/product-comparison","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-comparison","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-comparison/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-comparison/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-comparison/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/product-comparison/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-comparison/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["b2b","ct-b2b"],"created_at":"2026-01-18T05:28:31.601Z","updated_at":"2026-01-18T05:28:31.665Z","avatar_url":"https://github.com/vtex-apps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"📢 Use this project, [contribute](https://github.com/vtex-apps/product-comparison) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).\n\n# Product Comparison\n\n\u003c!-- DOCS-IGNORE:start --\u003e\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\u003c!-- DOCS-IGNORE:end --\u003e\n\nThe Product Comparison app compares specifications of pre-selected SKUs, allowing customers to better understand their needs when shopping.\n\nThe app exports several blocks, which you can leverage to display a Product Comparison drawer on your store's search results page and a new Product Comparison page.\n\n![Comparison drawer](https://user-images.githubusercontent.com/2637457/90900569-43a41a00-e3e7-11ea-9aa9-9a12bbec8c5e.png)\n\n*Product Comparison drawer on the store's search results page*\n\n![image](https://user-images.githubusercontent.com/2637457/90900828-a1386680-e3e7-11ea-96d1-e9ba2022aa7d.png)\n\n*Product Comparison page*\n\n## Configuration\n\n### Step 1 - Adding the Product Comparison app to your theme's dependencies\n\nIn your theme's `manifest.json` file, add the `Product Comparison` app as a dependency:\n\n```diff\n \"dependencies\": {\n+  \"vtex.product-comparison\": \"0.x\"\n }\n```\n\nNow, you can use all the blocks exported by the Product Comparison app. Check out the full list below:\n\n| Block name   | Description                |\n| :--------:   | :------------------------: |\n| `product-comparison-drawer` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Main block that renders the drawer from the Product Comparison component in which the items will be compared. |\n| `list-context.comparison-product-summary-slider` | Extends the `list-context` block to build the Product Comparison component using the [Slider Layout](https://vtex.io/docs/components/layout-blocks/vtex.slider-layout/.) |\n| `product-summary.shelf.product-comparison` | Extends the default `product-summary.shelf` block (from the [Product Summary app](https://vtex.io/docs/components/all/vtex.product-summary/)) for the Product Comparison component's features. |\n| `product-comparison-block` | Logical block that, once extended (see blocks listed below), renders the Product Comparison component's features. |\n| `product-comparison-block.selector` | Renders the selector checkbox on the Product Comparison component. |\n| `product-comparison-block.close-button` | Renders the close button on the Product Comparison component. |\n| `product-comparison-block.product-summary-row` | Renders the first row to list and compare products on the Product Comparison component. |\n| `list-context.comparison-row` | Extends the `list-context` block to build a row in the Product Comparison page using the [Slider Layout](https://vtex.io/docs/components/layout-blocks/vtex.slider-layout/.) |\n| `product-comparison-block.grouped-product-specifications` | Renders the section for product specification groups. |\n| `product-comparison-block.product-specifications` | Renders the section for product specifications. |\n| `product-comparison-block.sku-specifications` | Renders the section for SKU specifications. |\n\n### Step 2 - Adding extended interfaces\n\nIn the theme's `interfaces.json` file, add the following extended interfaces:\n\n```diff\n+{\n+  \"store.search.product-comparison\": {\n+    \"around\": [\"comparison-context-wrapper\"]\n+  },\n+  \"search-result-layout.desktop.product-comparison\": {\n+    \"allowed\": [\"product-comparison-drawer\"]\n+  },\n  \"store.product.product-comparison\": {\n    \"around\": [\"comparison-context-wrapper\"],\n    \"allowed\": [\"product-comparison-drawer\"]\n  }\n+}\n```\n\n### Step 3 - Wrapping the search blocks with Product Comparison context\n\n1. In the theme's `search.jsonc` file, replace the default `store.search` blocks with the `store.search.product-comparison` blocks, as shown in the example below:\n\n```diff\n{\n  ...\n- \"store.search\": {\n+ \"store.search.product-comparison\": {\n    ...\n  },\n- \"store.search#brand\": {\n+ \"store.search.product-comparison#brand\": {\n    ...\n  },\n- \"store.search#department\": {\n+ \"store.search.product-comparison#department\": {\n    ...\n  }\n- \"store.search#category\": {\n+ \"store.search.product-comparison#category\": {\n    ...\n  }\n- \"store.search#subcategory\": {\n+ \"store.search.product-comparison#subcategory\": {\n    ...\n  }\n  ...\n```\n\n\u003e ℹ️ The `store.search.product-comparison` blocks wrap the `store.search` block with comparison context. The replacement is needed to synchronously display the selected products in the Product Comparison drawer.\n\n2. Replace the `search-result-layout.desktop` blocks with the `search-result-layout.desktop.product-comparison` blocks, as shown below:\n\n```diff\n{\n  ...\n\"search-result-layout\": {\n  \"blocks\": [\n-   \"search-result-layout.desktop#search\"\n+   \"search-result-layout.desktop.product-comparison#search\",\n    \"search-result-layout.mobile\",\n    \"search-not-found-layout\"\n  ]\n},\n```\n\n3. Replace the `product-summary.shelf`, child of the `gallery` block, with the `product-summary.shelf.product-comparison`:\n\n```diff\n\"gallery\": {\n-  \"blocks\": [\"product-summary.shelf\"]\n+  \"blocks\": [\"product-summary.shelf.product-comparison#search\"]\n}\n...\n```\n\n### Step 4 - Adding the Product Comparison to the product detail Page\n\n1. In the theme's `product.json` file, replace the default `store.product` blocks with the `store.product.product-comparison` blocks, as shown in the example below:\n\n```diff\n\n- \"store.product\": {\n+ \"store.product.product-comparison\": {\n    ...\n  }\n```\n\n2. Add `product-comparison-drawer` to the `store.product.product-comparison` children, as shown in the example below:\n\n```diff\n\"store.product.product-comparison\": {\n  children:[\n    ...\n+    \"product-comparison-drawer\"\n  ]\n  ...\n}\n```\n\n3. Add `product-comparison-block.selector#pdp` to the `store.product.product-comparison` block, as shown in the example below:\n\n```diff\n \"store.product.product-comparison\": {\n   ...\n  children:[\n    ...\n+    \"product-comparison-block.selector#pdp\"\n  ]\n  ...\n }\n ```\n### Step 5 - Building the Product Comparison component\n\nIn any desired template, such as `store.search`, add the `product-comparison-drawer` block, as shown below:\n\n```json\n- \"search-result-layout.desktop#search\": {\n+ \"search-result-layout.desktop.product-comparison#search\": {\n  \"children\": [\n    \"flex-layout.row#did-you-mean\",\n    \"flex-layout.row#suggestion\",\n    \"flex-layout.row#banner-one\",\n    \"flex-layout.row#searchbread\",\n    \"flex-layout.row#searchtitle\",\n    \"flex-layout.row#result\",\n+   \"product-comparison-drawer\"\n  ],\n  \"props\": {\n    \"pagination\": \"show-more\",\n    \"preventRouteChange\": false,\n    \"mobileLayout\": {\n      \"mode1\": \"small\",\n      \"mode2\": \"normal\"\n    }\n  }\n}\n...\n```\n\nBy adding the `product-comparison-drawer` block as shown above, you will declare the following structure behind the scenes:\n\n```json\n\"product-comparison-drawer\": {\n  \"blocks\": [\"list-context.comparison-product-summary-slider#drawer\"]\n},\n\"list-context.comparison-product-summary-slider#drawer\": {\n  \"blocks\": [\"product-summary.shelf.product-comparison#drawer\"],\n  \"children\": [\"slider-layout#comparison-drawer\"]\n},\n\"slider-layout#comparison-drawer\": {\n  \"props\": {\n    \"blockClass\": \"comparison-drawer\",\n    \"itemsPerPage\": {\n      \"desktop\": 4,\n      \"tablet\": 3,\n      \"phone\": 1\n    },\n    \"showPaginationDots\": \"never\",\n    \"infinite\": true,\n    \"fullWidth\": true\n  }\n},\n\"product-summary.shelf.product-comparison#drawer\": {\n  \"children\": [\n    \"product-summary-column#drawer-col2\",\n    \"product-comparison-block.close-button\"\n  ],\n  \"props\": {\n    \"blockClass\": \"drawer-summary\"\n  }\n},\n\"product-summary-column#drawer-col2\": {\n  \"children\": [\"product-summary-name\", \"product-summary-price#comparison\"],\n  \"props\": {\n    \"blockClass\": \"drawer-summary-col2\"\n  }\n},\n\"product-summary-price#comparison\": {\n  \"props\": {\n    \"showListPrice\": false,\n    \"showSellingPriceRange\": false,\n    \"showLabels\": false,\n    \"showInstallments\": false,\n    \"showDiscountValue\": false\n  }\n}\n```\n\n\u003e ℹ️ *The code above is a default implementation of the Product Comparison component. To make any changes, declare the code above in your theme and perform the needed updates according to the available blocks.*\n\n### Step 6 - Building the Product Comparison page\n\n1. In the `/store/blocks` folder, create a new file called `product-comparison.json` and include the following JSON:\n\n```json\n\"store.custom#product-comparison-list\": {\n  \"blocks\": [\"comparison-page\"]\n},\n\n\"comparison-page\": {\n  \"children\": [\"slider-layout-group#comparison-page\"]\n},\n\n\"slider-layout-group#comparison-page\": {\n  \"children\": [\n    \"product-comparison-block.product-summary-row\",\n    \"product-comparison-block.grouped-product-specifications\"\n  ]\n},\n\"product-comparison-block.product-summary-row\": {\n  \"blocks\": [\"list-context.comparison-product-summary-slider#comparison-page\"]\n},\n\"list-context.comparison-product-summary-slider#comparison-page\": {\n  \"blocks\": [\"product-summary.shelf.product-comparison#comparison-page\"],\n  \"children\": [\"slider-layout#comparison-page-product-summary\"]\n},\n\"product-summary.shelf.product-comparison#comparison-page\": {\n  \"children\": [\n    \"flex-layout.row\",\n    \"product-summary-image#comparison-page\",\n    \"product-summary-name\",\n    \"product-summary-space\",\n    \"product-summary-price#comparison\",\n    \"product-summary-buy-button\"\n  ],\n  \"props\": {\n    \"blockClass\": \"comparison-page-summary\"\n  }\n},\n\"flex-layout.row\": {\n  \"children\": [\"product-comparison-block.close-button\"],\n  \"props\": {\n    \"blockClass\": \"close\",\n    \"horizontalAlign\": \"right\"\n  }\n},\n\"product-summary-image#comparison-page\": {\n  \"props\": {\n    \"width\": 200,\n    \"heightProp\": 200\n  }\n},\n\"product-comparison-block.grouped-product-specifications\": {\n  \"blocks\": [\"list-context.comparison-row#comparison-page-row\"]\n},\n\"list-context.comparison-row#comparison-page-row\": {\n  \"children\": [\"slider-layout#comparison-no-arrows\"]\n},\n\"slider-layout#comparison-page-product-summary\": {\n  \"props\": {\n    \"blockClass\": \"comparison-page\",\n    \"itemsPerPage\": {\n      \"desktop\": 4,\n      \"tablet\": 3,\n      \"phone\": 1\n    },\n    \"showPaginationDots\": \"never\",\n    \"infinite\": true,\n    \"fullWidth\": true\n  }\n},\n\"slider-layout#comparison-no-arrows\": {\n  \"props\": {\n    \"itemsPerPage\": {\n      \"desktop\": 4,\n      \"tablet\": 3,\n      \"phone\": 1\n    },\n    \"showPaginationDots\": \"never\",\n    \"infinite\": true,\n    \"fullWidth\": true,\n    \"blockClass\": \"comparison-page\",\n    \"showNavigationArrows\": \"never\"\n  }\n}\n```\n\n2. In the theme's `routes.json` file, add a new route for the Product Comparison page:\n\n```diff\n+{\n+  \"store.custom#product-comparison-list\": {\n+    \"path\": \"/product-comparison\"\n+  }\n+}\n```\n\n#### `product-comparison-block.grouped-product-specifications` props\n\n| Prop name      | Type          | Description                    | Default value |\n| :------------: | :-----------: | :----------------------------: | :-----------: |\n| `productSpecificationsToHide` | `[string]` | List of product fields that should be hidden in the Product Comparison page. The desired product fields must be separated by a comma. | `undefined` |\n| `productSpecificationGroupsToHide` | `[string]` | List of product specification groups that should be hidden on the Product Comparison page. The desired product specification groups must be separated by a comma. | `undefined` |\n\n#### `product-comparison-block.product-specifications` props\n\n| Prop name      | Type          | Description                    | Default value |\n| :------------: | :-----------: | :----------------------------: | :--------:    |\n| `productSpecificationsToHide` | `[string]` | List of product fields that should be hidden in the Product Comparison page. The desired product fields must be separated by a comma. | `undefined` |\n\n#### `product-comparison-block.sku-specifications` props\n\n| Prop name      | Type          | Description                    | Default value |\n| :------------: | :-----------: | :----------------------------: | :--------:    |\n| `skuSpecificationsToHide` | `[string]` | List of SKU specification fields that should be hidden on the Product Comparison page. The desired SKU specification fields must be separated by a comma. | `undefined` |\n\n#### `product-comparison-block.product-summary-row` props\n\n| Prop name      | Type          | Description                    | Default value |\n| :------------: | :-----------: | :----------------------------: | :--------:    |\n| `isShowDifferenceDefault` | `boolean` | Set the \"show only differences\" checkbox to true as the default value on the comparison page. | `false` |\n=======\n\n### Step 7 - Change the comparison bucket size\n\nThis is an optional configuration, so you can set a fixed number in the app configuration to change the maximum number of items in the comparison bucket.\nThe default value is 10 items; if you exceed the maximum limit, you will receive a notification.\n\n#### Instructions\n\n1. Go to `/admin/apps`, then find the `Product Comparison` app under `Installed` apps.\n2. Click Settings. \n3. Enter the maximum comparison bucket size for your application.\n\n## Customization\n\nTo apply CSS customizations in this and other blocks, follow the instructions in [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).\n\n| CSS Handles                  |\n| :--------------------------: |\n| `closeButton`                |\n| `closeButtonContainer`       |\n| `compareProductsButton`      |\n| `comparisonButtons`          |\n| `comparisonCol`              |\n| `drawer`                     |\n| `drawerContainer`            |\n| `expandCollapseButton`       |\n| `fieldNameCol`               |\n| `fieldNameCol`               |\n| `productFieldValue`          |\n| `productSelectorContainer`   |\n| `productSpecificationValue`  |\n| `productSpecificationValues` |\n| `productSummaryRowContainer` |\n| `rowContainer`               |\n| `showDifferencesContainer`   |\n| `skuFieldValue`              |\n| `skuSpecificationValue`      |\n| `skuSpecificationValues`     |\n| `title`                      |\n| `removeAllItemsButtonWrapper`|\n| `compareProductButtonWrapper`|\n| `removeAllWrapper`           |\n| `drawerTitleOuterContainer`  |\n| `drawerTitleInnerContainer`  |\n| `drawerOpened`               |\n| `drawerClosed`               |\n\n\u003c!-- DOCS-IGNORE:start --\u003e\n\n## Contributors ✨\n\nThanks goes to these wonderful people:\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!\n\n\u003c!-- DOCS-IGNORE:end --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fproduct-comparison","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Fproduct-comparison","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fproduct-comparison/lists"}