Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Core integration Gallery

Last modified Issues Contributors Forks MIT License

Stack Overflow GitHub Discussions

kontent logo magento logo

FeaturesDemoDeploySetupSaved valueContributorsLicenseResources

This repository contains the source code of Magento product selector custom element for Kentico Kontent.

It also includes a node.js proxy function (see Netlify functions) that routes requests from the element to your Magento instance while adding required authentication.

Features

This custom element allows the user to search and link products from their Magento e-commerce instance into Kentico Kontent Headless CMS.

  • Editors can
    • Search for products in Magento commerce
    • Select a single product (or one of it's variants)

Demo

Demo Animation

Quick Deploy

Netlify has made this easy. If you click the deploy button below, it will guide you through the process of deploying it to Netlify and leave you with a copy of the repository in your account as well.

Deploy to Netlify

Setup

  1. Create a new Integration inside of your Magento Instance

If you don't have a Magento account, you can leverage the public Magento demo available at mageplaza.com.

  • Navigate to the Magento admin and select System from the main menu. Our custom product selector will run outside of Magento so you need to register it as an integration.
  • Select Integrations from the sub-menu and create a new integration.
  • Fill out the Integratino info as you see fit

Magento setup 01

  • Select the API tab and configure the following:
    • From the Resource access dropdown, select Custom.
    • Select the following options: Catalog > Inventory > Products.

Magento setup 02

WARNING: The extension does not require any special permissions but to read your product data. Keep in mind it is always better to keep the necessary permissions to a minimum for security reasons.

  • Choose the Save & Activate option from the Save button.
  • Copy the access token as you will need it in the next step.

At this point, the Magento Product API can be queried for products provided that the call includes the access token you just created.

  1. Netlify/server setup

    Since you don't want to store the API secret inside of the custom element config, we are using Netlify function to act as a proxy between your custom element and the Magento Product API. In order to make the function work, you'll need to provide it with the Secret you obtained in the previous step. For that, we'll use Netlify's Build enrionment variable. The only issue with these variables are that they are being loaded on build, so whenever you change the variables, you'll need to manually trigger a rebuild.

    The expected variable name for the function is MAGENTO_TOKEN.

    How this all can be done is described in our Kontent-Netlify example repository, or can be observed on the animation below (a different API example was used in the animation).

Netlify variable setup

  1. Configure the Custom Element

    After your function is setup, you'll need to create and configure your Magento custom element. The process of adding a custom element into your project is descripbed in Kontent's official documentation.

    The custom element has to be also configured. The neccessary configuration values are as follows:

{
    "storeUrl": "<YOUR MAGENTO DOMAIN>",
    "urlKeyAttribute": "url_key"
}

Note that urlKeyAttribute is optional, if not provided, it will be automatically generated with the value shown above.

The url of the Netlify function should be equal to your custom element's Hosted URL with /.netlify/functions/magento-client added to it (if you are using the provided quick deploy). If not, you'll have to update the code of the custom element.

What is Saved

The element will contain a json object describing your selected Magento product. See example below:

{
  "id": 37,
  "title": "Endurance Watch",
  "previewUrl": "https://my-store/pub/media/catalog/product/37.jpg",
  "sku": "37-MG01",
  "urlKey": "endurance-watch"
}

Contributors

We have collected notes on how to contribute to this project in [CONTRIBUTING.md](CONTRIBUTING.md).

License

MIT

Additional Resources