Shopify: Umbraco CMS Integration

This integration adds a backoffice product picker that can be added as a property editor for content, with a value converter providing a strongly typed model for rendering.

The package support two authentication methods and uses the read_products scope for retrieving products:

• API Access Token

• OAuth

If you prefer not to use an API key, an authentication workflow using OAuth is also available.

To use this, simply ensure you don't have an API key in your configuration file.

Backoffice usage

To use the products picker, a new data type should be created based on the Shopify Products Picker property editor. The settings in `Web.config` will be checked and a message prompted indicating whether the authentication flow is valid.

If OAuth is used, the Connect button will be enabled, which will trigger the Shopify authorization window. The retrieved access token will be saved into the database and used for future requests.

Revoke action will remove the access token from the database and the authorization process will have to be repeated.

Front-end rendering

A strongly typed model will be generated by the property value converter, and an HTML helper is available to easily render the products on the front-end.

Ensure your template has a reference to the following using statement:

@using Umbraco.Cms.Integrations.Commerce.Shopify.Helpers;

And render the form using (assuming a property based on the created data type with alias shopifyProductPicker has been created):

@Html.RenderProductsList(Model.ShopifyProductPicker)

You can use the default rendering view and style it using the existing CSS classes, or use it as inspiration for your own views. The path to your custom view will be then passed as parameter to the HTML helper method.

Changes

1.2.0 (February 6th 2024)

• Products pagination

1.0.4 (November 22nd 2022)

• Package icon

1.0.3 (November 4th 2022)

• Marketplace updates and tags
• Telemetry elements

1.0.2 (August 8th 2022)

• Return product id and update async call in value converter

1.0.1 (May 26th 2022)

• Rendering component with default or custom views