Master branch | Develop branch
--- | --- | ---
|
Note: this element is still in progress, watch it to follow the progress. This is like Agile and stuff
#UseThePlatform! The magento
element is used to integrate Magento 2 through its RESTful APIs directly into a Polymer app or website.
The magento-collect
element is an extension for Polymer and handles the collection of Magento 2 data through its REST API.
$ bower install --save bobvanluijt/magento-collect
Setup within Magento:
- Enable the API: In case you setup Magento via the UI: webapi -> security -> allow insecure = true
- Enable the API: in MySql:
REPLACE INTO core_config_data (path, value) VALUES("webapi/webapisecurity/allow_insecure", 1);
- Enable CORS on your webserver. Nginx CORS, Apache 2 CORS
You need to define these global settings:
<script>
Polymer({
ready: function() {
window.MageConfig = {
RESTurl = 'https://someurl.com/rest/V1', // current domain by default
immutableStore = true // true by default
};
}
});
</script>
Magento 2 has a RESTful API.
The API follows the plural nouns RESTful approach. Example: /products/{id}
for a single product and /products
for a list of products.
The magento-collect
element follows this pattern by using plural and singular nouns. Based on Swagger document: http://devdocs.magento.com/swagger/index_20.html
Element | Resource |
---|---|
magento-collect-products |
catalogProductRepositoryV1 - GET /V1/products |
magento-collect-product |
catalogProductRepositoryV1 - GET /V1/products/{id} |
magento-collect-categories |
catalogCategoryManagementV1 - GET /V1/categories |
magento-collect-category |
catalogCategoryRepositoryV1 - GET /V1/categories/{id} |
The collector
attribute defines which {id}
should be collected.
The object returned is available through the <magento-item key="{objectKey}">
element.
A complete example:
<magento-collect-product collector="24-UB02">
<h1><magento-item key="name"></magento-item></h1>
<h3><magento-item key="created_at"></magento-item></h3>
</magento-collect-product>
Immutable storage is inspired by Netflix's Falcor. If you collect data, you can store it locally during a session. When a user goes back to a previously visited page, it will first travel the local object to find the information needed rather than going to the API directly.
Overview:
- magento-collect-product
- magento-collect-products
- magento-collect-item
- ...soon more to follow...
<magento-collect-product collector=""></magento-collect-product>
The complete product becomes available with by binding it within the tags.
<magento-collect-product collector="24-MB01">
<!-- More information -->
</magento-collect-product>
You can also combine data bindings with conditionals.
<magento-collect-product collector="24-MB01">
<template is="dom-repeat" items="{{ MAGE.product.media_gallery_entries.item }}">
<iron-image is="dom-if" src="{{ file }}"></iron-image>
</template>
</magento-collect-product>
You can also collect products using filters, for example all products that start with a certain name. This might also be use to collect multiple products.
You can define multiple filters by using a semicolon as seperator.
<magento-collect-products></magento-collect-products>
The complete product becomes available with double curly braces. The filtering work as follows:
- Add
filter=""
tag and add
<magento-collect-products filter="name['Leggings']&condition_type=['like'];name['Parachute']&condition_type=['like'];">
<template is="dom-repeat" items="{{ collection }}">
<iron-image is="dom-if" src="{{ name }}"></iron-image>
</template>
</magento-collect-products>
The filters and criteria are based on the Magento 2 WebAPI Search Criteria.
The Magento 2 Object is saved following the GET endpoint responses.
For example:
When an element has the following bindings: {{ MAGE.product.name}}
and {{ MAGE.product.weigth}}
it will result in the request: [RESTURL]/products/24-MB01?fields=name,weigth
. It will locally create the following MAGE object:
{
"MAGE": {
"/products/24-MB01": {
"name": "Joust Duffle Bag",
"weight": 0
}
}
}
If a new call is done to the Magento 2 API it will first check the collected information in the MAGE
object. If it is not available in the object it will collect it from the Magento API setting the filter for this specific values.
In the above example, requesting: {{ MAGE.product.name }}
and {{ MAGE.product.type_id }}
will result in the request: [RESTURL]/products/24-MB01?fields=type_id
This feature can be disabled (see (Installation)[#Installation] )
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Bob van Luijt (@bobvanluijt)
See license.md file.