Integrating with e-commerce (Magento)

In this tutorial, you will learn how you can easily integrate Kentico Kontent with an e-commerce solution to build a content-rich e-shop by providing content editors a custom product selector for the e-commerce platform of your choice.

Premium feature

Custom elements require a Professional plan or higher.

Table of contents

    This tutorial shows a specific example tailored to the Magento platform, but the same principles can be applied to integration with many more e-commerce solutions which provide an API to get a list of products.

    The Magento product selector in action.

    What is Magento?

    Magento is a complete and powerful e-commerce platform you can use to easily manage your e-shop. You can manage all necessary product data and orders in Magento. For more details, see the Magento website.

    Content management and Magento

    In this tutorial, we will cover a simple yet powerful case where the combination of a content management system with e-commerce provides the perfect blend of content marketing and a traditional e-shop.

    Our scenario:

    • You own an e-shop powered by Magento.
    • You want to extend its reach using content marketing.
    • The plan is to write a series of articles to promote some of the key products in your e-shop.

    Magento has some basic content capabilities and some extensions available for blogging, but using a headless CMS such as Kentico Kontent for your content gives you more control over content collaboration and greater ability to manage content for multiple channels.

    To keep things simple, assume that both the Magento-powered e-shop and your Kentico Kontent blogging platform with articles already exist and you just need to connect the two to achieve your goal.

    Within this integration, you will:

    • Register an integration within Magento.
    • Register a proxy function to protect access token within API calls from the product selector.
    • Add a custom element with a Magento product selector to your content type.
    • Link articles to specific products.
    • Add a call to action (CTA) for the product purchase to the article page.

    Step 1: Register an integration within Magento

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

    For the purpose of this tutorial, we will be using the #5 Magedirect Demo which already contains some products. More specifically, we will be selling watches on the premise that it is important to precisely measure time when preparing coffee.

    Demo availability

    Note that the mentioned demo environment automatically resets after several hours. Therefore, if you try this demo, you may need to re-register the integration and update the access tokens. Use your own Magento instance for any long-term implementations or demos for your clients.

    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.

    1. In Integration info, enter the following. Do not click save yet.

    • Name – Kentico Cloud Magento Product selector
    • Your password – Enter the password for the demo environment: demo123

    How your settings might look for your new integrations.

    2. Select the API tab and configure the following:

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

    Setting up permissions for an integration.

    The way you will set up the API calls does not require specific access, but for security reasons, it is always better to keep the necessary permissions to a minimum.

    3. Choose the Save & Activate option from the Save button.

    Getting access token for an activated integration.

    4. Copy the access token to your clipboard, as you will need it in the next step.

    At this point, the Magento API for products can be queried for products provided that the call includes the API token.

    Step 2: Define a secure proxy for the API endpoint

    Because Magento doesn't provide enough permission granularity to provide an access token as read-only access, you can't simply enter the access token into a custom element configuration. A user could retrieve the access token via browser Debug console and gain management access this way.

    You need to employ some server-side code that will store the authorization token in its configuration, and provide it to the API call when needed.

    Deploy an AWS Lamba Function or a similar server-side code (as shown in Working with sensitive data in custom elements) with the following environment variables:

    • HOSTYour Magento host (domain), in our case: demo1-m2.mage.direct
    • PATH/index.php/rest/V1/products
    • BEARER_TOKENYour access token from Step 1
    • ACCESS_CONTROL_ALLOW_HEADERS – * (all headers)
    • ACCESS_CONTROL_ALLOW_ORIGIN – * (all origins)

    The proxy function ensures that the access token is added to the Magento request and also adds CORS headers that Magento doesn't provide by default. For simplicity, we used all variables, but you can omit some if needed.

    When you successfully register the proxy function, you can find its API endpoint URL under Details.

    Details of AWS Lambda Function with API endpoint URL.

    Step 3: Add a Magento product selector to a Kentico Kontent content type

    In this step, we'll extend the Article content type in our Sample App to include a product selector.

    1. In Kentico Kontent, choose Content models from the app menu.
    2. Open the Article content type.
    3. Add a Custom element.
      • Name it Promo for Magento product.
      • For the Hosted code URL, enter https://kentico.github.io/custom-element-samples/Magento/product-selector.html.
      • For Parameters, you need to enter the URL of the endpoint capable of serving the product list – the proxy endpoint from Step 2.

    To connect your store, add the following JSON configuration to Parameters:

    • Replace <PRODUCTS ENDPOINT URL> with your proxy function endpoint URL from Step 2.
    • Replace <YOUR MAGENTO HOST> with the domain of your Magento website.
    • If your Magento website uses an attribute for the URL key other than the default, provide the correct one.
    • JSON
    { "magentoHost": "<PRODUCTS ENDPOINT URL>", "mediaRootUrl": "https://<YOUR MAGENTO HOST>/pub/media/catalog/product", "urlKeyAttribute": "url_key" }
    { "magentoHost": "<PRODUCTS ENDPOINT URL>", "mediaRootUrl": "https://<YOUR MAGENTO HOST>/pub/media/catalog/product", "urlKeyAttribute": "url_key" }

    4. Save the content type.

    How the Article content type might look when you've added a product selector.

    Step 4: Link articles to specific products

    With the content type set up, you can try out how the selector works and assign individual articles to promoted products from Magento.

    1. In Kentico Kontent, choose Content & Assets from the app menu.
    2. Filter the list by content type to see only items of the Article type.
    3. Open a content item for editing.
    4. Use the product selector to find and select a promoted product.
    5. Publish the content item to make sure the data is available on your live website.
    6. Repeat steps 3–5 for other Article items.

    The Magento product selector in action.

    Selector value format and customization

    Note that the product selector used in the previous steps is a demo to demonstrate the possibilities. Feel free to adjust it to your needs and visual requirements or build your own.

    You can find the product selector source code in its GitHub repository.

    The compiled version used in the above example is in the Custom Element Samples repository.

    The selector stores the following value format in JSON, which it also uses to display the selected product on the first load:

    • JSON
    { "id": 37, "title": "Endurance Watch", "previewUrl": "https://demo1-m2.mage.direct/pub/media/catalog/product/m/g/mg01-bk-0.jpg", "sku": "24-MG01", "urlKey": "endurance-watch" }
    { "id": 37, "title": "Endurance Watch", "previewUrl": "https://demo1-m2.mage.direct/pub/media/catalog/product/m/g/mg01-bk-0.jpg", "sku": "24-MG01", "urlKey": "endurance-watch" }

    The fields are:

    • id – The internal ID of the product in Magento; can be used for further API calls to get product data.
    • title – The name of the product.
    • previewUrl – The primary (featured) image for the product.
    • sku – The SKU for the product; taken from the first product variant.
    • urlKey– A similar value to a URL Slug in Kentico Kontent; it's used within the product URL.

    You can use any of those values for both admin UI and your site. Should you need to make more fields available, you can do so by customizing the custom element code.

    The selector also currently supports only a single selection. If you need to link multiple products, you can update the code, wrap the output value in an array and adjust the rendering code accordingly.

    Step 5: Present the content on the live site

    With new values in our data model and an understanding of their structure, you can start to actually display a CTA below the article to navigate to the actual product.

    This step varies based on the technology you're using to display your content, so let's just briefly summarize what needs to be done.

    First, update your front-end model for the Article content type to include the new custom element.

    Because the value from the selector is provided as a structured object serialized to JSON, you need to parse the value from JSON at some point. You might most typically do that within the conversion of the source data model to the view model that you pass to your rendering code.

    In your rendering code, generate the URL using the handle field from the element value and your shop name. The URL to the product's Storefront has the following pattern:

    https://<MAGENTO HOST>/<URL KEY>.html

    In the demo case, that would be:

    https://demo1-m2.mage.direct/endurance-watch.html

    After generating the URL, provide the user with a link to the product as part of the product promotion in the article.

    How the link to the product might look within an article.

    The See more details button is simply a link to the shop URL of the given product.

    In our GitHub sample project, you can find the complete sample code for displaying a selected Magento product on your website.

    You would take similar steps for a mobile app or other publishing channels.

    Other e-commerce integration options

    As mentioned earlier, Shopify was only an example of how you could integrate one specific scenario with a product selector. Depending on the e-commerce system you use and its capabilities, many more scenarios may make sense.

    Here are some more notable scenarios which we identified as a good fit for a combination of headless CMS and E-commerce and their typical setups.

    Product data synchronization

    Shopify is a complete and powerful e-commerce platform you can use to easily manage your e-shop. You can manage all necessary product data and orders in Shopify. For more details, see the Shopify documentation.

    Enriching product data

    If your chosen e-commerce solution doesn't provide rich enough capabilities for presenting the product across various channels but otherwise is fully fledged (such as CommerceTools), you can manage your rich product content (such as product descriptions, images, and media) in Kentico Kontent. In this case, you link it similarly as in the previous example and display part of the product page from your e-commerce system and part from Kentico Kontent.

    commercetools logo

    Shopping cart integration

    If your chosen e-commerce solution only provides order management and a shopping cart but no content management capabilities (such as Snipcart), you can keep your product catalog together with all your rich marketing information in Kentico Kontent while letting the external e-commerce system handle just the order management heavy lifting.

    What's next?

    You learned how to easily link products to content in order to boost your content marketing outcomes.

    The custom product selector sample provides a baseline you can use and further adjust to fit your needs. Other e-commerce solutions may have different endpoints and contracts, but the selector code is easy enough to update for other systems.

    There are countless e-commerce integration options you can achieve with all of the mentioned features Kentico Kontent offers, so go ahead and start your e-commerce integration now.