{"id":26781689,"url":"https://github.com/pixelunion/bc-compare","last_synced_at":"2025-03-29T08:17:32.695Z","repository":{"id":44314839,"uuid":"132649879","full_name":"pixelunion/bc-compare","owner":"pixelunion","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-04T10:30:20.000Z","size":862,"stargazers_count":1,"open_issues_count":7,"forks_count":2,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-03-26T12:58:29.996Z","etag":null,"topics":["library"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pixelunion.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-08T18:37:20.000Z","updated_at":"2023-11-06T08:10:58.000Z","dependencies_parsed_at":"2023-01-22T20:45:15.226Z","dependency_job_id":null,"html_url":"https://github.com/pixelunion/bc-compare","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelunion%2Fbc-compare","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelunion%2Fbc-compare/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelunion%2Fbc-compare/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelunion%2Fbc-compare/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelunion","download_url":"https://codeload.github.com/pixelunion/bc-compare/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246156411,"owners_count":20732397,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["library"],"created_at":"2025-03-29T08:17:31.826Z","updated_at":"2025-03-29T08:17:32.687Z","avatar_url":"https://github.com/pixelunion.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bigcommerce Product Compare Module\n\nSession-based product compare widget\n\n## Installation\n\n```\nnpm i --save github:pixelunion/bc-compare\n```\n\n## Usage\n\n### Templates\n\nThis module is made up of 2 template components. The compare checkbox and the compare widget. The templates rely on `data` attributes as hooks for the JS, so they need to be included, but the structure is completely up to you.\n\n#### Checkbox\n\nAdd a checkbox to your product grid items with the appropriate `data` attributes. No form necessary!\n\n```\n\u003cinput\n  type=\"checkbox\"\n  data-compare-checkbox\n  data-compare-id=\"{{id}}\"\n  data-compare-title=\"{{name}}\"\n  data-compare-url=\"{{url}}\"\n  data-compare-price=\"{{price}}\"\n  data-compare-thumbnail=\"{{getImage image 'thumb' (cdn default_image)}}\"\u003e\n```\n\nIdeally the thumb that you are using will be the same size as the one that has already been loaded into the page.\n\n#### Scope\n\nScope / container of items to compare: `[data-product-compare]`\n\n#### Widget\n\nContainer that the compare items will be injected into.\n\n```\n\u003cdiv data-compare-widget\u003e\n  \u003cspan class=\"compare-title\"\u003e{{lang 'compare.title' num=0}}\u003c/span\u003e\n  \u003ca href=\"{{urls.compare}}\" data-compare-link=\"{{urls.compare}}\"\u003e{{lang 'core.product.compare'}}\u003c/a\u003e\n  \u003cdiv data-compare-items\u003e\n\t\u003c!-- Compare items injected here --\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### JavaScript\n\nImport the compare class in your theme JS (Category / ProductListing or Global).\n\n```\nimport ProductCompare from 'bc-compare';\n```\n\nBelow is an example of instantiation and event handlers. Note that once Compare is instantiated, you have access to the `compareList` Map, meaning you can directly access the compare item data in your event handlers. This is useful for things like counting the number of items in the compare list, retrieving the name of the most recently added product, etc.\n\n```\nloaded(next) {\n  if ($('.compare-enabled').length) {\n    this._initCompare();\n  }\n\n  next();\n}\n\n_initCompare() {\n  const compare = new ProductCompare({\n    maxItems: 3,\n  });\n\n  compare.on('beforeadd', (id) =\u003e {\n    console.log('compare before add');\n  });\n\n  compare.on('afteradd', (id) =\u003e {\n    console.log('compare after add');\n    console.log(`${compare.compareList.get(id).title} added to compare`);\n  });\n\n  compare.on('beforeremove', (id) =\u003e {\n    console.log('compare before remove');\n  });\n\n  compare.on('afterremove', (id) =\u003e {\n    console.log('compare after remove');\n  });\n\n  compare.on('updated', () =\u003e {\n    console.log('compare updated');\n    const compareMessage = this.context.compareTitle.replace('*num*', compare.compareList.size);\n    $('.compare-title').text(compareMessage);\n\n    if (compare.compareList.size \u003e 0) {\n      $('[data-compare-widget]').show();\n    } else {\n      $('[data-compare-widget]').hide();\n    }\n  }, true);\n\n  $('.compare-remove-all').on('click', () =\u003e {\n    compare.removeAll();\n  });\n}\n\n```\n\n## Options \u0026 Defaults\n\n##### `scope`\n\ndefault: `'[data-product-compare]'`\n\n**Important: the scope selector must be added into your markup for the module to function**\n\nThe container of the product list items - should be set to wrap the faceted search / dynamic content area.\n\nFor example:\n`\u003csection class=\"product-list\" data-facet-content {{#if category.show_compare}}data-product-compare{{/if}}\u003e`\n\n##### `maxItems`\n\ndefault: `4`\n\nYou can set the `maxItems`, which will remove the oldest compare item from the list, when it's value is exceeded.\n\n##### `itemTemplate`\n\ndefault:\n\n```\n_.template(`\n  \u003cdiv class=\"compare-item\" data-compare-item\u003e\n    \u003ca href=\"\u003c%= url %\u003e\"\u003e\n      \u003cimg class=\"compare-item-thumbnail\" src=\"\u003c%= thumbnail %\u003e\"/\u003e\n      \u003cdiv class=\"compare-item-price\"\u003e\u003c%= price %\u003e\u003c/div\u003e\n      \u003cdiv class=\"compare-item-title\"\u003e\u003c%= title %\u003e\u003c/div\u003e\n    \u003c/a\u003e\n    \u003cbutton class=\"compare-item-remove\" data-compare-item-remove=\"\u003c%= id %\u003e\"\u003e\u0026times;\u003c/button\u003e\n  \u003c/div\u003e\n`)\n```\n\nCustom lodash `itemTemplate`. The properties of `url, thumbnail, title, id, price` are available.\n\n## Events\n\nSee the _JavaScript_ section above for a list of events that are available.\nNote that all the add/remove events have the `id` available as an argument in the callback.\n\n## Classes\n\n- The compare widget has the `is-enabled` class added to it when there are items in the compare list.\n- The compare link has the `is-disabled` class added to it when there are less than 2 items in the compare list.\n\n## Methods\n\n##### `on`\n\nThis is an extension of EventEmitter's `on` method. The only difference is that it accepts a third parameter, which allows the event to be fired immediately after binding it. This is primarily useful with the `enabled` and `updated` events so that the state of the widget is correct when loaded from `sessionStorage`.\n\n##### `removeAll`\n\nRemoves all items from the compare list.\n\n##### `updateCheckboxes`\n\nUpdates any checkboxes on the page to the correct \"checked\" state. Useful if products are loaded dynamically and the widget is already initialized.\n\n## Further Development\n\nInstall:\n\n```\nnpm install\n\n```\n\nBuild out compiled script (for use with webpack - /dist/js/ProductCompare.js) :\n\n```\ngulp bundle\n```\n\nDemo:\n\n```\nwebpack --watch\n\nnpm run serve\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelunion%2Fbc-compare","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelunion%2Fbc-compare","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelunion%2Fbc-compare/lists"}