eCommerce Field-Type Plugin
Get access to the eCommerce integrations
Currently, the eCommerce integration plugin is only available for our enterprise customers, but you can get in touch with us to request access.
Section titled Setting Up the eCommerce Field-Type Plugin Setting Up the eCommerce Field-Type Plugin
After you install the plugin, select it in your editor under custom type on any field that has the field-type Plugin. To get to the settings, just click the little settings icon next to the field {1} inside any component like the Product Slider.
)
First set the Custom Type in the field-type plugin we just installed. Then enter information in the API endpoint and token {2} fields. Finally, enter information in the limit field (to limit the number of elements to select) and the selectOnly field (to define whether you want to select only products or categories).
| setting | value | description |
|---|---|---|
| endpoint | string (required) | url to your endpoint |
| token | string (required) | secret access token from your eCommerce API |
| limit | integer (optional) | this limits the amount of items to select |
| selectOnly | ‘product’ or ‘category’ (optional) | this limits the selection to either products or categories |
)
Section titled Configuring the Field-Type Plugin in Storyblok Configuring the Field-Type Plugin in Storyblok
After you get your API endpoints and credentials you can configure the field-type. In the previous tutorial we already set up a Storefront structure in Storyblok. Now open the Home entry and let's start configuring our plugins.
Section titled Getting Your API endpoints Getting Your API endpoints
If you don't have your API endpoints yet, check the tutorial for your eCommerce provider.
| eCommerce Provider | Tutorial Link |
|---|---|
| BigCommerce | BigCommerce Tutorial |
| Shopify | Shopify Tutorial |
| Shopware | Shopware Tutorial |
| Commercetools | Commercetools Tutorial |
| Sylius | Sylius Tutorial |
Section titled Adding Products Adding Products
If we click on Define schema for our product field-type on one of our components, for example on the Product Feature Component, we need to enter the endpoint and token depending on the eCommerce API you're using {1}. With selectOnly = product, we limit the selection to products (no categories). With limit = 1 we allow only one product to be selected in this field.
)
)
After setting up your endpoints, click the select products button to see all of the products that were fetched from your eCommerce provider.
)
)
Section titled Adding Categories Adding Categories
When we click on Define schema for the field-type plugin in our Product Grid Component we created earlier, we must enter the endpoint and token depending on the eCommerce API you're using {1}. With selectOnly = category, we limit the selection to categories. If we don't define a limit, we can select as many categories as we want in this field.
)
)
After setting up the plugin correctly and clicking the button to select categories, we can see a selection of categories and add the ones we need.
)
If you're working with the storefront we set up in the storefront tutorial, you should be able to select products and categories for the different components we created. Go through the different components with the plugin field-type, set up the field-type with the endpoints, and select some products and categories. The result of selecting products should be similar to the image below {1}.
)