{"id":21835831,"url":"https://github.com/vtex/front.portal-plugins","last_synced_at":"2026-03-10T04:33:35.103Z","repository":{"id":8630197,"uuid":"10275879","full_name":"vtex/front.portal-plugins","owner":"vtex","description":"Portal front end plugins","archived":false,"fork":false,"pushed_at":"2020-07-03T15:29:27.000Z","size":1135,"stargazers_count":33,"open_issues_count":3,"forks_count":14,"subscribers_count":209,"default_branch":"master","last_synced_at":"2025-04-14T09:19:17.730Z","etag":null,"topics":["srv-store-framework","xp-developer"],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","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/vtex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-05-24T22:02:03.000Z","updated_at":"2024-01-05T20:11:45.000Z","dependencies_parsed_at":"2022-09-13T15:20:35.809Z","dependency_job_id":null,"html_url":"https://github.com/vtex/front.portal-plugins","commit_stats":null,"previous_names":[],"tags_count":272,"template":false,"template_full_name":null,"purl":"pkg:github/vtex/front.portal-plugins","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Ffront.portal-plugins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Ffront.portal-plugins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Ffront.portal-plugins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Ffront.portal-plugins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex","download_url":"https://codeload.github.com/vtex/front.portal-plugins/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Ffront.portal-plugins/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30324443,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T01:36:58.598Z","status":"online","status_checked_at":"2026-03-10T02:00:06.579Z","response_time":106,"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":["srv-store-framework","xp-developer"],"created_at":"2024-11-27T20:25:13.201Z","updated_at":"2026-03-10T04:33:35.076Z","avatar_url":"https://github.com/vtex.png","language":"CoffeeScript","readme":"### Table of contents\n\n- Plugins\n    - [Sku Selector](#sku-selector)\n    - [Quantity Selector](#quantity-selector)\n    - [Accessories Selector](#accessories-selector)\n    - [Price](#price)\n    - [ShippingCalculator](#shipping-calculator)\n    - [Buy Button](#buy-button)\n    - [Notify Me](#notify-me)\n    - [Minicart](#minicart)\n    - [Expiration](#expiration)\n\n- [Notes](#notas)\n\n\n---\n\nSee also in [Portuguese](https://github.com/vtex/front.portal-plugins/blob/master/README.pt-BR.md).\n\n---\n\n# Sku Selector\n\n## Usage\n\nCall the plugin in an empty `div`:\n\n    $('.sku-selector-container').skuSelector(data, options);\n\n- \u003cb\u003e`data`\u003c/b\u003e must be a JSON with API standard SKUs.\n\n- \u003cb\u003e`options`\u003c/b\u003e  (optional) is an object that may have the following properties:\n    - \u003cb\u003e`selectOnOpening`\u003c/b\u003e\n        default: `false`. If `true`, at initialization the plugin selects the first available SKU (the first one that comes in the array).\n\n    - \u003cb\u003e`modalLayout`\u003c/b\u003e\n        default: `false`. If `true`, it uses the modal template.\n\n    - \u003cb\u003e`warnUnavailable`\u003c/b\u003e\n        default: `false`. If `true`, it shows \"notify me\" form when an unavailable SKU is selected.\n\n    - \u003cb\u003e`showPriceRange`\u003c/b\u003e\n        default: `false`. If `true`, it shows the minimum and maximum price among the selectable SKUs with the dimensions already selected.\n\n    - \u003cb\u003e`forceInputType`\u003c/b\u003e\n        default: `null`. If not falsy, it forces the inputType of all dimensions to be that.\n\n## Events\n\nTriggers the following events:\n\n- \u003cb\u003e`skuReady.vtex []`\u003c/b\u003e when the SKU Selector is rendered.\n- \u003cb\u003e`skuDimensionChanged.vtex [productId, name, value]`\u003c/b\u003e when a dimension is selected.\n- \u003cb\u003e`skuSelected.vtex [productId, sku]`\u003c/b\u003e when an SKU is defined.\n- \u003cb\u003e`skuUnselected.vtex [productId, selectableSkus]`\u003c/b\u003e when the SKU becomes undefined.\n\n\n---\n\n# Quantity Selector\n\n## Usage\n\nCall the plugin in an empty `div`:\n\n    $('.quantity-selector-container').quantitySelector(productId, options);\n\n- \u003cb\u003e`productId`\u003c/b\u003e the product ID.\n\n- \u003cb\u003e`options`\u003c/b\u003e (optional) is an object that may have the following properties:\n\n    - \u003cb\u003e`unitBased`\u003c/b\u003e\n        default: `false`. Defines whether to use bulk selector (quantity calculator).\n\n    - \u003cb\u003e`unitVariations`\u003c/b\u003e\n        default: `[]`. If `unitBased == true`, specifies the unit options for each SKU. It is a collection of `{skuId: Number, measurementUnit: String, unitMultiplier: Number}`.\n\n    - \u003cb\u003e`max`\u003c/b\u003e\n        default: `10`. Defines the maximum amount that can be selected.\n\n    - \u003cb\u003e`initialQuantity`\u003c/b\u003e\n        default: `1`. Sets the quantity initially selected.\n\n    - \u003cb\u003e`decimalPlaces`\u003c/b\u003e\n        default: `2`. Sets the number of decimal places for the units input. It should not exceed 12.\n\n\n## Events\n\nTriggers the following events:\n\n- \u003cb\u003e`quantityReady.vtex [productId, quantity]`\u003c/b\u003e when the Quantity Selector is rendered.\n- \u003cb\u003e`quantityChanged.vtex [productId, quantity]`\u003c/b\u003e when quantity is changed.\n\nIt listens for the following events:\n\n- \u003cb\u003e`quantityChanged.vtex [productId, quantity]`\u003c/b\u003e The quantity can be changed through external scripts and the plugin will be updated.\n\n\n---\n\n# Accessories Selector\n\n## Usage\n\nCall the plugin in an empty `div`:\n\n    $('.acc-selector-container').accessoriesSelector(productId, data, options);\n\n- \u003cb\u003e`productId`\u003c/b\u003e the product ID which is the accessories’ parent.\n\n- \u003cb\u003e`data`\u003c/b\u003e must be a JSON with API standard accessories.\n\n- \u003cb\u003e`options`\u003c/b\u003e (none currently.)\n\n## Events\n\nTriggers the following events:\n\n- \u003cb\u003e`accessoriesUpdated.vtex [productId, accessories]`\u003c/b\u003e when an accessory is changed. The `accessories` array contains the accessories of a particular product, with properties like `sku` and `quantity`.\n\n\n---\n\n# Price\n\nListens for changes in the selected SKU and updates the price labels.\n\nUses standard price information when there is no SKU selected.\n\n## Usage\n\nCall the plugin in an empty `div`. If it contains some HTML, it will be used when a Sku is not defined.\n\n    $('.productPrice').price(productId, options);\n\n- \u003cb\u003e`productId`\u003c/b\u003e the product ID.\n\n- \u003cb\u003e`options`\u003c/b\u003e (optional) is an object that can have the following properties\n\n    - \u003cb\u003e`originalSku`\u003c/b\u003e\n        default: `null`. Must be set if the above option is `true`.\n\n    - \u003cb\u003e`modalLayout`\u003c/b\u003e\n        default: `false`. If `true`, it uses the modal template.\n\n## Events\n\nListens for the following events:\n\n- \u003cb\u003e`skuSelected.vtex [productId, sku]`\u003c/b\u003e\n- \u003cb\u003e`skuUnselected.vtex [productId, selectableSkus]`\u003c/b\u003e\n\n\n---\n\n# Shipping Calculator\n\nOffers a form for calculating shipping, plus a button to show it.\n\n## Usage\n\nCall the plugin in an empty `div`.\n\n    $('.shipping-calc-ref').shippingCalculator(productId, options);\n\n- \u003cb\u003e`productId`\u003c/b\u003e the product ID.\n\n- \u003cb\u003e`options`\u003c/b\u003e (optional) is an object that can have the following properties:\n\n    - \u003cb\u003e`strings`\u003c/b\u003e\n        Sets the messages to be displayed.\n        \n        Default:\n        ```\n        {\n            \"calculateShipping\": 'Calcule o valor do frete e prazo de entrega para a sua região:',\n            \"enterPostalCode\": 'Calcular o valor do frete e verificar disponibilidade:',\n            \"requiredPostalCode\": 'O CEP deve ser informado.',\n            \"invalidPostalCode\": 'CEP inválido.',\n            \"requiredQuantity\": 'É necessário informar a quantidade do mesmo Produto.',\n            \"siteName\": 'Vtex.Commerce.Web.CommerceContext.Current.WebSite.Name',\n            \"close\": 'Fechar'\n        }\n        ```\n        \n        Suggested english version:\n        ```\n        {\n            \"calculateShipping\": 'Calculate the shipping value and delivery deadline for your region:',\n            \"enterPostalCode\": 'Calculate the shipping value and check availability:',\n            'requiredPostalCode': 'The ZIP code must be informed.',\n            'invalidPostalCode': 'Invalid ZIP code.',\n            'requiredQuantity': 'You must enter the quantity of the same Product.',\n            \"siteName\": 'Vtex.Commerce.Web.CommerceContext.Current.WebSite.Name',\n            \"close\": 'Close'\n        }\n        ```\n\n## Events\n\nListens for the following events:\n\n- \u003cb\u003e`skuSelected.vtex [productId, sku]`\u003c/b\u003e\n- \u003cb\u003e`skuUnselected.vtex [productId, selectableSkus]`\u003c/b\u003e\n- \u003cb\u003e`quantityReady.vtex [productId, quantity]`\u003c/b\u003e\n- \u003cb\u003e`quantityChanged.vtex [productId, quantity]`\u003c/b\u003e\n\n\n---\n\n# Buy Button\n\n## Usage\n\nCall the plugin on the `a` that acts as a buy button:\n\n    $('.buy-button').buyButton(productId, data, options);\n\n- \u003cb\u003e`productId`\u003c/b\u003e the product ID. It may be an array of product IDs - in such case, it will be a button that enables buying all products at the same time.\n\n- \u003cb\u003e`data`\u003c/b\u003e (optional) is an object that can have the `sku`, `quantity`, `seller` and `salesChannel` properties.\n\n- \u003cb\u003e`options`\u003c/b\u003e (optional) is an object that may have the following properties.\n\n    - \u003cb\u003e`errorMessage`\u003c/b\u003e\n        Error message to be triggered if the user clicks the button without having chosen an SKU. This message will appear in the parameters of the `vtex.buyButton.failedAttempt` event.\n        Default: *\"Please select the desired template.\"*\n\n    - \u003cb\u003e`alertOnError`\u003c/b\u003e\n        default: `true`. Determines whether to display an alert with the `errorMessage`.\n\n    - \u003cb\u003e`redirect`\u003c/b\u003e\n        default: `true`. Sets the `Redirect` property in the querystring. \u003cb\u003eMust be `true` for product page, and `false` for modal.\u003c/b\u003e\n\n    - \u003cb\u003e`instaBuy`\u003c/b\u003e\n        default: `false`. If `true`, when an available SKU is selected, the button is clicked.\n\n    - \u003cb\u003e`hideUnselected`\u003c/b\u003e\n        default: `false`. If `true`, it is hidden when there is no SKU selected.\n\n    - \u003cb\u003e`hideUnavailable`\u003c/b\u003e\n        default: `false`. If `true`, it is hidden when the selected SKU is unavailable.\n\n    - \u003cb\u003e`target`\u003c/b\u003e\n        default: `null`. Sets the `target` query parameter. A valid value is `\"orderform\"`.\n\n    - \u003cb\u003e`requireAllSkus`\u003c/b\u003e\n        default: `false`. If `productId` is an array, this option determines whether all product IDs must have an SKU selected, or whether partial purchases are accepted (only for those selected).\n\n## Events\n\nTriggers the following events:\n\n- \u003cb\u003e`modalHide.vtex []`\u003c/b\u003e  when `redirect=false` and the button is clicked.\n- \u003cb\u003e`cartProductAdded.vtex []`\u003c/b\u003e when `redirect=false`, the button is clicked and the AJAX response is returned.\n- \u003cb\u003e`buyButtonFailedAttempt.vtex [errorMessage]`\u003c/b\u003e when the button is clicked but there’s no valid SKU.\n- \u003cb\u003e`buyButtonThrough.vtex [url]`\u003c/b\u003e when the button is clicked and there is a valid SKU.\n\nListens for the following events:\n\n- \u003cb\u003e`skuSelected.vtex [productId, sku]`\u003c/b\u003e\n- \u003cb\u003e`skuUnselected.vtex [productId, selectableSkus]`\u003c/b\u003e\n- \u003cb\u003e`quantityChanged.vtex [productId, quantity]`\u003c/b\u003e\n- \u003cb\u003e`accessorySelected.vtex [productId, accessory]`\u003c/b\u003e\n\n\n---\n\n# Notify Me\n\n## Usage\n\nCall the plugin in an empty `div`:\n\n    $('.portal-notify-me-ref').notifyMe(productId, options);\n\n- \u003cb\u003e`productId`\u003c/b\u003e the product ID.\n\n- \u003cb\u003e`options`\u003c/b\u003e (opcional) is an object that may have the following properties.\n\n    - \u003cb\u003e`ajax`\u003c/b\u003e\n        default: `true`. Defines whether the form submit should be done with AJAX.\n\n    - \u003cb\u003e`sku`\u003c/b\u003e\n        default: `null`. Sets the SKU to be used. If it exists, it ignores SKU selection events.\n\n    - \u003cb\u003e`strings`\u003c/b\u003e\n        Sets the messages to be displayed.\n        \n        Default:\n        ```\n        {\n            \"title\": \"\",\n            \"explanation\": \"Para ser avisado da disponibilidade deste Produto, basta preencher os campos abaixo.\",\n            \"namePlaceholder\": \"Digite seu nome...\",\n            \"emailPlaceholder\": \"Digite seu e-mail...\",\n            \"loading\": \"Carregando...\",\n            \"success\": \"Cadastrado com sucesso. Assim que o produto for disponibilizado você receberá um email avisando.\",\n            \"error\": \"Não foi possível cadastrar. Tente mais tarde.\"\n        }\n        ```\n        \n        Suggested english version:\n        ```\n        {\n            \"title\": \"\",\n            \"explanation\": \"To be notified of the availability of this Product, just fill in the fields below.\",\n            \"namePlaceholder\": \"Enter your name...\",\n            \"emailPlaceholder\": \"Enter your email...\",\n            \"loading\": \"Loading...\",\n            \"success\": \"Successfully registered. As soon as the product is made available you will receive an email notifying you.\",\n            \"error\": \"Registration failed, please try again later.\"\n        }\n        ```\n\n## Events\n\nTriggers the following events:\n\n- \u003cb\u003e`notifyMeSubmitted.vtex [productId, sku, promise]`\u003c/b\u003e: when the form is sent.\n\nListens for the following events:\n\n- \u003cb\u003e`skuSelected.vtex [productId, sku]`\u003c/b\u003e\n- \u003cb\u003e`skuUnselected.vtex [productId, selectableSkus]`\u003c/b\u003e\n\n\n---\n\n# Minicart\n\n## Usage\n\nCall the plugin in an empty `div`:\n\n    $('.portal-minicart-ref').minicart(options);\n\n- \u003cb\u003e`options`\u003c/b\u003e (optional) is an object that may have the following properties\n\n    - \u003cb\u003e`valuePrefix`\u003c/b\u003e\n        default: `\"R$ \"`. Sets the text to be displayed before the value.\n\n    - \u003cb\u003e`valueSufix`\u003c/b\u003e\n        default: `\"\"`. Sets the text to be displayed after the value.\n\n    - \u003cb\u003e`availabilityMessages`\u003c/b\u003e\n        Sets the messages displayed for each API availability code.\n        \n        Default:\n        ```\n        {\n            \"available\": \"\",\n            \"unavailableItemFulfillment\": \"Este item não está disponível no momento.\",\n            \"withoutStock\": \"Este item não está disponível no momento.\",\n            \"cannotBeDelivered\": \"Este item não está disponível no momento.\",\n            \"withoutPrice\": \"Este item não está disponível no momento.\",\n            \"withoutPriceRnB\": \"Este item não está disponível no momento.\",\n            \"nullPrice\": \"Este item não está disponível no momento.\"\n        }\n        ```\n        Suggested english version:\n        ```\n        {\n            \"available\": \"\",\n            \"unavailableItemFulfillment\": \"This item is currently unavailable.\",\n            \"withoutStock\": \"This item is currently unavailable.\",\n            \"cannotBeDelivered\": \"This item is currently unavailable.\",\n            \"withoutPrice\": \"This item is currently unavailable.\",\n            \"withoutPriceRnB\": \"This item is currently unavailable.\",\n            \"nullPrice\": \"This item is currently unavailable.\"\n        }\n        ```\n\n    - \u003cb\u003e`showMinicart`\u003c/b\u003e\n        default: `true`. Defines whether the minicart should be displayed.\n\n    - \u003cb\u003e`showTotalizers`\u003c/b\u003e\n        default: `true`. Defines whether the totalizers should be displayed.\n\n## Events\n\nTriggers the following events:\n\n- \u003cb\u003e`cartProductRemoved.vtex []`\u003c/b\u003e when an item is removed by the minicart.\n- \u003cb\u003e`minicartMouseOver.vtex  []`\u003c/b\u003e\n- \u003cb\u003e`minicartMouseOut.vtex  []`\u003c/b\u003e\n- \u003cb\u003e`minicartUpdated.vtex  []`\u003c/b\u003e\n\nListens for the following events:\n\n- \u003cb\u003e`cartProductAdded.vtex  []`\u003c/b\u003e the Minicart is updated.\n- \u003cb\u003e`cartProductRemoved.vtex  []`\u003c/b\u003e the Minicart is updated.\n\n\n---\n\n# Expiration\n\n## session-expiration.js\n\nUtilitary expiration timer, reset by events. When time expires, the user session is cleaned up (cookies are cleared) and the user is redirected to a URL.\n\n### Public functions\n\n#### vtex.portal.startExpiration(url, millis, events)\n\nStart expiration timer.\n\nParameters and defaults:\n\n- url = '/'\n- millis = 10 * 60 * 1000 (10 minutes)\n- events = [\"mousemove\", \"keyup\", \"click\", \"scroll\"]\n\n#### vtex.portal.stopExpiration()\n\nStops current expiration timer.\n\n\n---\n\n# Notes\n\n## General notes\n\nThe options can be passed in three ways. They are, in order of priority:\n\n1. Through JavaScript, in the plugin request.\n2. With `data-` attributes in the elements..\n3. Changing the default options (object `$.fn.nomeDoPlugin.default`).\n\nAfter a plugin is initialized, the target element will contain, in its `data` object (access via `$().data())`, a reference to its plugin instance.\n\n## Dependências\n\n|        Plugin        | [jQuery][] | [front.utils][] | [Dust (core)][]| Catalog SDK |\n| :------------------- | --- | --- | --- | --- |\n| Sku Selector         |  ✔  |  ✔  |  ✔  |  ✗  |\n| Quantity Selector    |  ✔  |  ✗  |  ✔  |  ✗  |\n| Accessories Selector |  ✔  |  ✔  |  ✔  |  ✗  |\n| Price                |  ✔  |  ✔  |  ✔  |  ✗  |\n| Shipping Calculator  |  ✔  |  ✗  |  ✔  |  ✔  |\n| Buy Button           |  ✔  |  ✗  |  ✗  |  ✔  |\n| Notify Me            |  ✔  |  ✗  |  ✔  |  ✔  |\n| Minicart             |  ✔  |  ✔  |  ✔  |  ✗  |\n| Expiration           |  ✔  |  ✗  |  ✗  |  ✗  |\n\n\n  [jQuery]: http://www.jquery.com\n  [front.utils]: https://github.com/vtex/front.utils\n  [Dust (core)]: http://linkedin.github.io/dustjs/\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex%2Ffront.portal-plugins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex%2Ffront.portal-plugins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex%2Ffront.portal-plugins/lists"}