# DatoCMS Saleor plugin

:link: A plugin that enhances your product page, allowing you to quickly find Saleor products and variants and link them with DatoCMS.

## Plugin settings
You can search the plugin from the DatoCMS admin dashboard or install it from the [marketplace](https://www.datocms.com/marketplace/plugins/i/datocms-plugin-saleor). 

Once installed, you can configure the endpoint, the channel and the token (if required) of your Saleor enviroment.

<p align="center">
  <img src="https://user-images.githubusercontent.com/38940340/189606098-512a4014-f7b5-48f9-85cd-97025d5615bc.png" width="800" />
</p>


## Plugin usage

Apply Saloer plugin to a single-line text field into your model and select *Saleor Product* from the dropdown menu in the *Presentation* tab.

<p align="center">
  <img src="https://user-images.githubusercontent.com/38940340/189491317-f6cb1cd2-4ea8-4506-b440-3fe28dff1fe4.png" width="800" />
</p>

<p align="center">
  <img src="https://user-images.githubusercontent.com/38940340/189491342-93a1f96a-dc4f-443b-962d-ab263dd543c4.png" width="800" />
</p>

<p align="center">
  <img src="https://user-images.githubusercontent.com/38940340/189491369-60e00b93-e36c-4bba-8fa5-cde74f2176fc.png" width="800" />
</p>

Now you can browse your Saleor products and variants searching them by name or sku.

The results shall be distinguished by specific tag: product or variant.

<p align="center">
  <img src="https://user-images.githubusercontent.com/38940340/189491396-6440fbfd-7e3f-471f-b400-9e88ed566bd7.png" width="800" />
</p>

<p align="center">
  <img src="https://user-images.githubusercontent.com/38940340/189491429-b8c9209a-79ca-4dcb-b13c-deeed9f63341.png" width="800" />
</p>

<p align="center">
  <img src="https://user-images.githubusercontent.com/38940340/189491444-d226737e-b933-4431-ba38-3ebd5f257f76.png" width="800" />
</p>

The selected product o variant will be displayed in the related record.

<p align="center">
  <img src="https://user-images.githubusercontent.com/38940340/189491465-6096c1af-5e28-499d-b4ea-493183dd6ca5.png" width="800" />
</p>

<p align="center">
  <img src="https://user-images.githubusercontent.com/38940340/189491482-a2a0cc38-d834-404a-8c89-2991ff570540.png" width="800" />
</p>

:tada:	And finally you can query your field and get the product or variant id.

<p align="center">
  <img src="https://user-images.githubusercontent.com/38940340/189491552-46eb886b-3e1e-4b41-9450-d12f684ce5e0.png" width="800" />
</p>

## Gotchas
If you want to link more than one product or variant you can use Saloer Product field inside [Modular Content Field](https://www.datocms.com/docs/content-modelling/modular-content)

## Thanks
Thanks for the inspiration to [DatoCMS Commerce Layer Plugin](https://www.datocms.com/marketplace/plugins/i/datocms-plugin-commercelayer)

Enjoy :punch: