Creating a NopCommerce plugin with .Net Core and Angular - Part I
Tags: nopcommerce, angular, dotnet, csharp
Published: 2019-10-18 02:55:14

<!-- wp:heading {"level":4,"align":"left"} -->
<h4 style="text-align:left"><strong>Objective:</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p> We will create a plugin for nopcommerce taking advantage of the power of aspnet core and the angular fluids for the frontend. We will create a plugin that will import the products from an external service.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 id="how-to-write-a-plugin-for-nopcommerce-390-and-previous-versions"><strong>You have to understand how to:</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> <strong>Create a plugin for nopCommerce?</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The add-ons are specialized modules which maximize the functionality of nopcommerce such as payment processors, shipping provider, etc. Currently you can take advantage of their official documentation by entering this <a href="https://dev.to/diogenespolanco/how-to-develop-a-plugin-for-nopcommerce-46ho"><strong>link</strong></a><strong>.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Develop a webapp with AspNet Core?</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The applications with asp net core are very easy to develop these days and when I say easy it is because I remember how it was a bit complex to develop with aspnet in the previous versions. but in another article I will talk about the differences between .Net vs .Net Core. So for the purposes you must also have basic knowledge of aspnet core and can start with this<strong> </strong><a href="https://docs.microsoft.com/en-us/aspnet/core/getting-started/?view=aspnetcore-3.0&amp;tabs=linux"><strong>link</strong></a><strong>.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4><strong>Project Architecture</strong></h4>
<!-- /wp:heading -->

<!-- wp:image {"id":301} -->
<figure class="wp-block-image"><img src="https://diogenespolanco.com/wp-content/uploads/2019/10/Screenshot-from-2019-10-17-20.21.40.jpeg" alt="" class="wp-image-301"/><figcaption> 
<!-- wp:paragraph -->
<p>  The product importer plugin is responsible for extracting the products from the ODataProducts service and rules configured in the plugin to upload them to the nopcommerce catalog.    </p>
<!-- /wp:paragraph -->
</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4><strong>Source code</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This plugin only has one component that is responsible for importing the products of the external service so we will only have to develop a class that has the functionality to synchronize the products of the service against the nopcommerce catalog for that we will use C#.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You have to create a console test project in which we will do the service.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's execute the following commands:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>~/ProductsImport$ dotnet  new console </code></pre>
<!-- /wp:code -->

<!-- wp:code -->
<pre class="wp-block-code"><code>~/ProductsImport$ dotnet add package Newtonsoft.Json</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>We will create the following classes:</p>
<!-- /wp:paragraph -->


{% gist   https://gist.github.com/DiogenesPolanco/19d011e2eb160f7f4f36a85498138d99.js %}
{% gist https://gist.github.com/DiogenesPolanco/448ecbbe348b3193cd5c9e11ce18b59a.js %}
{% gist https://gist.github.com/DiogenesPolanco/b7f01d164e09f9dd0b835e410a6e0616.js %}
{% gist https://gist.github.com/DiogenesPolanco/e9d777ae31d976710b626c757d2aaf42.js %}


<!-- wp:heading {"level":4} -->
<h4><strong>The result of the console:</strong></h4>
<!-- /wp:heading -->

<!-- wp:image {"id":311} -->
<figure class="wp-block-image"><img src="https://diogenespolanco.com/wp-content/uploads/2019/10/Screenshot-from-2019-10-17-22.12.56.jpeg" alt="" class="wp-image-311"/></figure>
<!-- /wp:image -->