{"id":31882832,"url":"https://github.com/divanteltd/storefront-integration-sdk","last_synced_at":"2025-10-13T02:58:28.915Z","repository":{"id":36007294,"uuid":"139719451","full_name":"DivanteLtd/storefront-integration-sdk","owner":"DivanteLtd","description":"If You like to integrate Vue Storefront - PWA for eCommerce with 3rd party platform, use this SDK","archived":false,"fork":false,"pushed_at":"2023-01-07T09:34:53.000Z","size":8602,"stargazers_count":135,"open_issues_count":14,"forks_count":54,"subscribers_count":9,"default_branch":"tutorial","last_synced_at":"2025-10-10T21:32:40.615Z","etag":null,"topics":["ecommerce","ecommerce-platform","integration","pwa","vue-storefront"],"latest_commit_sha":null,"homepage":"https://vuestorefront.io","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/DivanteLtd.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":"2018-07-04T12:31:17.000Z","updated_at":"2025-09-09T18:53:54.000Z","dependencies_parsed_at":"2023-01-16T11:45:57.762Z","dependency_job_id":null,"html_url":"https://github.com/DivanteLtd/storefront-integration-sdk","commit_stats":null,"previous_names":["divanteltd/vue-storefront-integration-boilerplate"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DivanteLtd/storefront-integration-sdk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DivanteLtd%2Fstorefront-integration-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DivanteLtd%2Fstorefront-integration-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DivanteLtd%2Fstorefront-integration-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DivanteLtd%2Fstorefront-integration-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DivanteLtd","download_url":"https://codeload.github.com/DivanteLtd/storefront-integration-sdk/tar.gz/refs/heads/tutorial","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DivanteLtd%2Fstorefront-integration-sdk/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279014025,"owners_count":26085348,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"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":["ecommerce","ecommerce-platform","integration","pwa","vue-storefront"],"created_at":"2025-10-13T02:57:54.721Z","updated_at":"2025-10-13T02:58:28.815Z","avatar_url":"https://github.com/DivanteLtd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Storefront Custom Integration Tutorial\n\nVue Storefront is platform agnostic which means it can be connected to virtually any eCommerce backend and CMS. This repository is created to make the integration with any 3rd party backend platform as easy as possible.\n\n**Note:** This tutorial shows how to build a **Generic** integration for any custom backend API. This is the recommended approach giving you most of the Vue Storefront features  of the box. [Check the other options...](Vue%20Storefront%20Integration%20Architecture.pdf)\n\n## Three steps for the integration\n\n- **Step One** Vue Storefront uses Elastic Search as backend for all catalog operations. We do have **three** default types of entities that must be supported: `product`, `category`, `attribute` and **three optional entities** `taxrule`, `cms_block` and `cms_page` in the ES. You may find some sample-data json [files in `sample-data` subdirectory](sample-data).\n\n- **Step Two** The second step is to support the **dynamic calls** that are used to synchronize shopping carts, promotion rules, user accounts, and so on. To have this step accomplished you'll need to implement the actuall endpoints business logic. Check the [boilerplate API implementation in Express.js](sample-api-js)\n\n- **Step Three** Is to configure `vue-storefront` to use the right set of endpoints from Step Two.\n\n\n## Tutorial\n\nNow, we're to go through all three steps to integrate Vue Storefront with custom or 3rd party eCommerce platform.\n\nFirst, make sure you've got the [vue-storefront and vue-storefront-api installed](https://docs.vuestorefront.io/guide/installation/linux-mac.html#installing-the-vue-storefront-api-locally) on your local machine, up and running. Opening the [http://localhost:3000](http://localhost:3000) should display default Vue Storefront theme with demo products.\n\n**Note:** As we'll be using extensively Elastic Search for the next steps in this tutorial, make sure you've got the right tooling to browse the ES indexes. I'm using [es-head](https://chrome.google.com/webstore/detail/elasticsearch-head/ffmkiejjmecolpfloofpjologoblkegm). Pretty easy to use and simple tool, provided as a Google Chrome plugin.\n\n\n### **Empty the `vue_storefront_catalog` index**.  \nThis is the default Vue Storefront index which is configured in both `vue-storefront` and `vue-storefront-api` projects - in the `config/local.json`, `elasticsearch.indices` section. We'll be using \"default\".\n\nFirst, please go to `vue-storefront-api` directory with the following command:\n\n```bash\n$ cd ./vue-storefront-api\n```\n\nThen you can empty the default index:\n\n```bash\n$ yarn db new\nyarn run v1.17.3\n$ node scripts/db.js new\nElasticsearch INFO: 2019-09-06T19:32:23Z\n  Adding iconnection to http://localhost:9200/\n\n** Hello! I am going to create s cNEW ES index\nElasticsearch DEBUG: 2019-09-06T19:32:23Z\n  starting request {\n    \"method\": \"DELETE\",\n    \"path\": \"/*/_alias/vue_storefront_catalog\",\n    \"query\": {}\n  }\n  \n...\n```\n\n**Note:** Please make sure your local Elastic instance is up and running. After you've got the `vue-storefront` plus `vue-storefront-api` installed, you can ensure it by just running `docker-compose up -d` in the `vue-storefront-api` directory.\n\n### **Import data**.\nIn your custom integration, you'll probably be pumping the data directly to ElasticSearch as it changed in the platform admin panel.\n\nThis is exactly how other Vue Storefront integrations work. \nYou might want to get inspired by:\n- [`magento2-vsbridge-indexer`](https://github.com/DivanteLtd/magento2-vsbridge-indexer) - the PHP based integration for Magento2,\n- [`shopware2vuestorefront`](https://github.com/DivanteLtd/shopware2vuestorefront/tree/master/vsf-shopware-indexer) - which is using a NodeJS app to pull the data from Shopware API and push it to Elastic,\n- [`spree2vuestorefront`](https://github.com/spark-solutions/spree2vuestorefront/) - which is putting thte data to Elastic directly from Ruby code, from Spree Commerce database,\n- [See other integrations ...](https://github.com/frqnck/awesome-vue-storefront#github-repos)\n\nIn our example, we'll push the static JSON files from `sample-data` directly to the ElasticSearch index. Then I'll explain these data formats in details to let you prepare such an automatic exporter on your own.\n\nTo push the data into ElasticSearch we'll be using a simple NodeJS tool [located in the sample-data folder](https://github.com/DivanteLtd/vue-storefront-integration-boilerplate/blob/tutorial/sample-data/import.js).\n\nNow we can import the data:\n\n```bash\n$ cd ./vue-storefront-integration-boilerplate/sample-data/\n$ yarn install Or npm install\n$ node import.js products.json product vue_storefront_catalog\nImporting product { id: 1769,\n  name: 'Chloe Compete Tank',\n  image: '/w/t/wt06-blue_main.jpg',\n  sku: 'WT06',\n  url_key: 'chloe-compete-tank',\n  url_path:\n   'women/tops-women/tanks-women/bras-and-tanks-26/chloe-compete-tank-1769.html',\n  type_id: 'configurable',\n  price: 39,\n  special_price: 0,\n  price_incl_tax: null,\n  special_price_incl_tax: null,\n  special_to_date: null,\n  special_from_date: null,\n  status: 1,\n  size: null,\n  color: null,\n  size_options: [ 167, 168, 169, 170, 171 ],\n  color_options: [ 50, 58, 60 ],\n  category_ids: [ '26' ],\n  media_gallery:\n  ...\n{ _index: 'vue_storefront_catalog',\n  _type: 'product',\n  _id: '1433',\n  _version: 2,\n  result: 'updated',\n  _shards: { total: 2, successful: 1, failed: 0 },\n  created: false }\n{ _index: 'vue_storefront_catalog',\n  _type: 'product',\n  _id: '1529',\n  _version: 2,\n  result: 'updated',\n  _shards: { total: 2, successful: 1, failed: 0 },\n  created: false }\n```\n\nThen please do execute the same import scripts for `atttribute` and `category` entities:\n\n```bash\n$ node import.js attributes.json attribute vue_storefront_catalog\n$ node import.js categories.json category vue_storefront_catalog\n```\n\nAfter importing the data, we need to make sure the Vue Storefront Elastic index schema has been properly applied. To ensure this, we'll use the [Database tool](https://docs.vuestorefront.io/guide/data/database-tool.html) used previously to clear out the index - once again:\n\n```bash\n$ yarn db rebuild\nyarn run v1.17.3\n$ node scripts/db.js rebuild\nElasticsearch INFO: 2019-09-06T20:13:28Z\n  Adding connection to http://localhost:9200/\n\n** Hello! I am going to rebuild EXISTING ES index to fix the schema\n** Creating temporary index vue_storefront_catalog_1567800809\nElasticsearch DEBUG: 2019-09-06T20:13:28Z\n  starting request {\n    \"method\": \"DELETE\",\n    \"path\": \"/*/_alias/vue_storefront_catalog_1567800809\",\n    \"query\": {}\n  }\n```\n\nAfter data has been imported you can check if it works by opening `http://localhost:3000` and using the Search feature:\n\n![Search Feature](https://github.com/DivanteLtd/vue-storefront-integration-boilerplate/blob/tutorial/screens/screen_0_products.png \"Search Feature\")\n\n\n**Congratulations!** Now it's a good moment to take a deep breath and study the data formats we'd just imported to create your own mapper from the custom platform of your choice to Vue Storefront format.\n\n**Note:** please make sure that you use non-zero IDs in the following entities to avoid unexpected behavior.\n\n### Product entity\n\nYou might have seen that our data formats are pretty much similar to Magento formats. We've simplified them and aggregated. **Some parts are denormalized** on purpose. We're trying to avoid the relations known from the standard databases and rather use the [DTO](https://en.wikipedia.org/wiki/Data_transfer_object) concept. For example, Product is a DTO containing all information necessary to display the PDP (Product Details Page): including `media_gallery`, `configurable_children` and other features. It's then fairly easy to cache the data for the Offline mode and performance.\n\n[Read the full Product entity specification](Format-product.md)\n\n### Attribute entity\n\nVue Storefront uses the attributes meta data dictionaries saved in the `attribute` entities. They're related to the `product`. The `attribute.attribute_code` represents the `product[attribute_code]` proeprty - when defined. When not, the `product[attribute_code]` is being used as a plain tetxt.\n\n[Read more on why Attributes are important](Format-attribute.md)\n\n### Category entity\n\nCategories are being used mostly for building tree navigation. Vue Storefront uses the [dynamic-catetgories-prefetching](https://docs.vuestorefront.io/guide/basics/configuration.html#dynamic-categories-prefetching). Please make sure that **all the categories** are indexed on the main level - even if they exist as a `category.children_data` assigned to any other category.\n\n[Read the Category format specification](Format-category.md)\n\n\n### TaxRate entity\n\n**Note:** TaxRates are skipped from `sample-data` as they're not crucial to display the products and categories in Vue Storefront (as long as the taxes are calculated before product pricing is imported to Elastic)\n\nHere is the data format:\n\n```json\n{\n  \"id\": 2,\n  \"code\": \"Poland\",\n  \"priority\": 0,\n  \"position\": 0,\n  \"customer_tax_class_ids\": [3],\n  \"product_tax_class_ids\": [2],\n  \"tax_rate_ids\": [4],\n  \"calculate_subtotal\": false,\n  \"rates\": [\n    {\n      \"id\": 4,\n      \"tax_country_id\": \"PL\",\n      \"tax_region_id\": 0,\n      \"tax_postcode\": \"*\",\n      \"rate\": 23,\n      \"code\": \"VAT23%\",\n      \"titles\": []\n    }\n  ]\n}\n```\n\nTo read more on how tax rates are processed when `config.tax.calculateServerSide=false`, please read the [Prices how to](Prices%20how-to.md) and then [study the taxCalc.ts](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/modules/catalog/helpers/taxCalc.ts).\n\n\n### Write your API adapter for dynamic requests\n\nVue Storefront doesn't store any user data, order or payment information. Even shopping carts are only stored locally in the browser and then synced with the server (`cart/merge` Vuex action). \n\nWhenever a product is added to the cart, or user authorization is performed, there is an API request executed.\n\n[Read more on the required API endpoints you must provide to have Vue Storefront synchronized](Dynamic%20API%20specification.md)\n\n**Note:** If you're to use Vue Storefront just for catalog browsing purposes you can probably skip this step. In that case please make sure your `vue-storefront` instance is properly configured with the `config.cart.synchronize=false` and `config.cart.synchronize_totals=false`.\n\n\n### Configure vue-storefront\n\nAll You need to do is to set the proper dynamic API endpoints in the `config/local.json`. [Here you have the details](How%20to%20configure%20Vue%20Storefront.md).\n\n\n# Support\n\nThis is a project under MIT license so it's just AS IS :) However, if you're planning to add the new platform to the Vue Storefront ecosystem and publish it freely as an open-source - we'll do our best to support you! \n\nPlease feel free to contact the core team at [Vue Storefront Forum](https://forum.vuestorefront.io/c/development/integrations), on [Slack channel](http://slack.vuestorefront.io) or via contributors@vuestorefront.io\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivanteltd%2Fstorefront-integration-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdivanteltd%2Fstorefront-integration-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivanteltd%2Fstorefront-integration-sdk/lists"}