Build a Headless Ecommerce Product Filter with Angular and Cosmic

<p><em>* This article will assume some basic knowledge of Angular so it can focus on the specific task at hand. Feel free to ask me about any specifics on the implementation you may find unclear</em></p><h3 id="tldr"><strong>TL; DR</strong></h3><p><a href="https://cosmicjs.com/apps/ecommerce-personalization" rel="noopener noreferrer" target="_blank">Angular Ecommerce Personalization</a></p><p><a href="https://github.com/cosmicjs/angular-ecommerce-personalization" rel="noopener noreferrer" target="_blank">Download the codebase</a><br><br></p><h2 id="whatarewegoingtobuild">What are we going to build?</h2><p>This site will be a very simplistic representation of an ecommerce website and its purpose is to show how we can offer a customized experience for everyone. Our data will be stored and served by Cosmic and we will use Angular for our Front-End.<br><br></p><p><img src="https://cosmic-s3.imgix.net/bef19600-6ad6-11e9-85d0-9fa707d6dd21-Screenshot-2019-04-30-at-01.24.05.png" data-name="Screenshot 2019-04-30 at 01.24.05.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3 id="howwillitwork">How will it work?</h3><p>Our storefront will be just a product listing page, showing all products stored in Cosmic, randomly sorted. The products will belong to a number of categories, and each product will show 3 buttons to mock the following behaviors:</p><ul><li>view -&gt; value: 1</li><li>add to cart -&gt; value: 2</li><li>buy -&gt; value: 3</li></ul><p>These will represent the different degrees of interest.</p><p>The user will interact with the site and its interests will be stored in its profile, increasing the corresponding value of each product&#39;s categories.</p><p>A full interaction would be something like: the user clicks on &quot;buy&quot; a &quot;swimwear&quot; product, increasing its profile score for products belonging to &quot;swimwear&quot;. The page then will sort the page showing more prominently the products
belonging to &quot;swimwear&quot;.</p><h2 id="preparingourbucket">Preparing our bucket</h2><p>The first thing we&#39;ll do is prepare our Cosmic bucket. We have to create an empty bucket and three object types:</p><ul><li>Categories</li><li>Products</li><li>Users</li></ul><p>Each <code>user</code> will store a <code>sessionID</code> and a JSON object for <code>interests</code>. Each <code>product</code> will have a <code>price</code>, a collection of <code>categories</code> and an <code>image</code>. Categories won&#39;t need any metadata, we will just use its <code>title</code>.</p><p>If you are as lazy as I am, you can always <strong>replicate the demo bucket</strong> by <a href="https://cosmicjs.com/apps/xxxxx">installing the app</a>.</p><h2 id="preparingthesite">Preparing the site</h2><p>The first thing we need to do is create a new Angular site (I always recommend using the CLI for that). Now, let&#39;s create a HTTP interceptor that will handle the authentication against the Cosmic API, so we don&#39;t need to add this in every call. It will append the <code>read_key</code> parameter for the GET requests and the <code>write_key</code> for everything else.</p><div class="fr-embedly                      " data-original-embed="<a href='' class='embedly-card'></a>"><a href="" class="embedly-card"></a></div><div class="fr-embedly                      " data-original-embed="<a href='https://gist.github.com/imaka/82ebbb069db57c568799f51dd93c2764.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/82ebbb069db57c568799f51dd93c2764.js" class="embedly-card"></a></div><p>The product listing will be our only page, so after creating the component, our routes should look like this:</p><div class="fr-embedly                     " data-original-embed="<a href='https://gist.github.com/imaka/9785260c7b98268cd13f64f3de6bb63c.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/9785260c7b98268cd13f64f3de6bb63c.js" class="embedly-card"></a></div><h2 id="theproductlistingpage">The product listing page</h2><p>We need to show the products, so let&#39;s define our model:</p><div class="fr-embedly                    " data-original-embed="<a href='https://gist.github.com/imaka/f0de7f1d98c4329786db164fd0fac4a7.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/f0de7f1d98c4329786db164fd0fac4a7.js" class="embedly-card"></a></div><p><em>*We&#39;ll talk about the Category there later.</em></p><p>Now let&#39;s begin populating our service with methods. First of all, we need a <code>getProducts()</code> method:</p><div class="fr-embedly                  " data-original-embed="<a href='https://gist.github.com/imaka/0abbde6eb81803f55666737e2491e176.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/0abbde6eb81803f55666737e2491e176.js" class="embedly-card"></a></div><p><em>*We are caching the response, our products won&#39;t change that often and we are going to call this method A LOT...</em></p><p>The component itself will be quite simple. For now, it will only have the call two calls to our service:</p><div class="fr-embedly                 " data-original-embed="<a href='https://gist.github.com/imaka/d9ad7bf1590a7ce650ff07525a40a4f4.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/d9ad7bf1590a7ce650ff07525a40a4f4.js" class="embedly-card"></a></div><p>And this is the HTML:</p><div class="fr-embedly                " data-original-embed="<a href='https://gist.github.com/imaka/9f14e4559b88d8cc10be621c1d92655e.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/9f14e4559b88d8cc10be621c1d92655e.js" class="embedly-card"></a></div><p>Have you noticed that <code>app-actions</code> component? It will take care of the actions the user will perform over each product. But let&#39;s talk about the <code>user</code> before that...</p><h2 id="everythingabouttheuser">Everything about the user</h2><p>Our user model will be the most &quot;complex&quot; of all. As we will be creating users from the site and retrieving them from Cosmic, we need a more flexible constructor. We also added methods to build a payload object for posting to Cosmic and
another one for managing the interests.</p><div class="fr-embedly               " data-original-embed="<a href='https://gist.github.com/imaka/67210e14e71a6e1699c7c4b129a248a3.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/67210e14e71a6e1699c7c4b129a248a3.js" class="embedly-card"></a></div><p>We won&#39;t build a proper authentication journey for our example. Each user will have a sessionID on the browser&#39;s local storage, and we will use that to create and identify users. We&#39;ll keep the user instance on session storage for convenience. In order to keep things tidy, let&#39;s create a <code>user</code> service:</p><div class="fr-embedly              " data-original-embed="<a href='https://gist.github.com/imaka/25d9fb7f051696c6ff7947305542753e.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/25d9fb7f051696c6ff7947305542753e.js" class="embedly-card"></a></div><p>The <code>init()</code> method will be used on our <code>app.component.ts</code>:</p><div class="fr-embedly             " data-original-embed="<a href='https://gist.github.com/imaka/44e6d2744a99ff61d07b60d053243fd4.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/44e6d2744a99ff61d07b60d053243fd4.js" class="embedly-card"></a></div><p>We will also need a way of setting and getting the user, let&#39;s extend our <code>cosmic.service</code> with the following methods:</p><div class="fr-embedly            " data-original-embed="<a href='https://gist.github.com/imaka/59a741b6d34ecb38cfff728bbeab6b25.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/59a741b6d34ecb38cfff728bbeab6b25.js" class="embedly-card"></a></div><p>Also note that we created an observable <code>user$</code> that emits every time we set (or update) the user in session, you already saw the subscription on the product listing. More on this at the end of the article.</p><p>Back to the <code>actions.component</code>. It is a set of three buttons, as follows:</p><div class="fr-embedly           " data-original-embed="<a href='https://gist.github.com/imaka/2ee807540c097c5fc752706663173d4a.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/2ee807540c097c5fc752706663173d4a.js" class="embedly-card"></a></div><p>And the methods look like this:</p><div class="fr-embedly          " data-original-embed="<a href='https://gist.github.com/imaka/0bab64783ffa9add128a1ba5e4be6559.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/0bab64783ffa9add128a1ba5e4be6559.js" class="embedly-card"></a></div><p>When updating the interests, we also refresh the user in session and we also update the user in Cosmic, we never know when or how the user will leave the site! Let&#39;s go back to our <code>cosmic.service</code> and add this method:</p><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/imaka/b2b38a5127b65291782141db2b338666.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/b2b38a5127b65291782141db2b338666.js" class="embedly-card"></a></div><h2 id="wrappingeverythingup">Wrapping everything up</h2><p>We have now a way to show products, create users and their interests, update them and store them. That&#39;s it... almost. How does the product listing page change based on all this? There is one last thing we haven&#39;t go through yet: the customSort pipe on <code>product-listing.component</code>. Here is how it looks like:</p><div class="fr-embedly        " data-original-embed="<a href='https://gist.github.com/imaka/618bfee2810c46320bc9887b148b7c30.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/618bfee2810c46320bc9887b148b7c30.js" class="embedly-card"></a></div><p>This pipe will take the product list and order it by weight, based on the user&#39;s interests provided via arguments...</p><p>... And that&#39;s the magic: the product listing page is subscribed to the changes in the session user, so every time the user performs an action, the user changes and the sorting re-executes with the changes.</p><p>That&#39;s all, I hope this would have demonstrated how to offer a customized experience for your users with the help of Angular and Cosmic.</p>

Build an Ecommerce App with Personalization using Angular and Cosmic

<p style="text-align: center;"><em><span>* This article will assume some basic knowledge of Angular so it can focus on the specific task of requesting and showing data from Cosmic</span></em></p><p data-empty="true"><br></p><h3><strong><span>TL; DR</span></strong></h3><p data-empty="true"><span>Take a look at <a href="https://github.com/cosmicjs/angular-company-website" rel="noopener noreferrer" target="_blank">the repository</a> and&nbsp;</span><a href="https://cosmicjs.com/apps/angular-company-website" rel="noopener noreferrer" target="_blank"><span>install the app</span></a></p><p data-empty="true"><br></p><p><strong><span>What is this app about?</span></strong></p><p><span>A typical company website is just a set of pages structured in a more or less simple navigation. We want to create a website that allows the user to create any number of pages and decide the structure for the navigation, without the need to wait for a code release. For that, we are going to rely on Cosmic and create the structure to hold this project. On this example, our bucket will have the following object types:</span></p><ul><li><span>Pages. This is a simple object, with no additional metafields.</span></li><li><span>Navigation. It will hold a collection of Pages.</span></li><li><span>Presets. This is a configuration object with a list of attributes that will help us start our app. It will hold the value for the homepage and the main navigation that we will use for the menu of our site.</span></li></ul><p data-empty="true"><span><br></span></p><p data-empty="true"><span><strong>Using the API</strong></span></p><p data-empty="true"><span>Now that we defined the structure of our data, we need to create our Angular app (I recommend using the Angular CLI) and create a service to make our calls to the Cosmic API. See how simple is to request a single page object from Cosmic:</span></p><div class="fr-embedly  " data-original-embed="<a href='https://gist.github.com/imaka/09edb1299113847357ae49c39f6bcdfa.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/09edb1299113847357ae49c39f6bcdfa.js" class="embedly-card"></a></div><div class="fr-embedly  " data-original-embed="<a href='' class='embedly-card'></a>"><a href="" class="embedly-card"></a></div><p data-empty="true" style="text-align: center;"><span class="fr-img-caption fr-fic fr-dib fr-draggable" contenteditable="false" draggable="false"><span class="fr-img-wrap" style="width: 716px;"><span class="fr-inner" contenteditable="true"><em>get a single page and save it to the stream to keep it cached for the session</em><br><br></span></span></span></p><p data-empty="true"><span>Note that, for nested objects, Cosmic will not return the full tree, so sometimes you will need to concatenate calls to make the most of our service, e.g.: When fetching the main presets, you would probably want to include the navigation pages.</span></p><div class="fr-embedly  " data-original-embed="<a href='https://gist.github.com/imaka/ac2a762263a12c343569bc34c112ea06.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/ac2a762263a12c343569bc34c112ea06.js" class="embedly-card"></a></div><p data-empty="true" style="text-align: center;"><span class="fr-img-caption fr-fic fr-dib fr-draggable" contenteditable="false" draggable="false"><span class="fr-img-wrap" style="width: 723px;"><span class="fr-inner" contenteditable="true"><em>this call will combine the result of getNavigation into the result of getPreset</em><br><br></span></span></span></p><p data-empty="true"><span>Our api calls need to be authenticated with a read key, we can include that on each method, but the easiest may be to create an interceptor. This will intercept all http requests, so we check if it&#39;s a Cosmic request and append the read key where necessary.</span></p><div class="fr-embedly  " data-original-embed="<a href='https://gist.github.com/imaka/4dce204bc23d5e06744d7c8f03e4cc80.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/4dce204bc23d5e06744d7c8f03e4cc80.js" class="embedly-card"></a></div><p data-empty="true" style="text-align: center;"><span class="fr-img-caption fr-fic fr-dib fr-draggable" contenteditable="false" draggable="false"><span class="fr-img-wrap" style="width: 731px;"><span class="fr-inner" contenteditable="true"><em>intercept and append the read or write parameters</em></span></span></span></p><p data-empty="true"><br></p><p data-empty="true"><strong><span>Routing to the pages</span></strong></p><p data-empty="true"><span>At this point, our website does nothing, the first thing it needs to do is to know how to load its first page. We need to create a routed module for the Pages, and set it to load on the root. Once inside the module, on its own routing, we will set a route for the parameter :slug to load the Page Component. And what happens when there is no route specified? This will be our most common scenario, for that, we set an empty route with a Guard.</span></p><div class="fr-embedly  " data-original-embed="<a href='https://gist.github.com/imaka/4af1a706075298f39dc594245b499eed.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/4af1a706075298f39dc594245b499eed.js" class="embedly-card"></a></div><p data-empty="true" style="text-align: center;"><br></p><p data-empty="true"><span>A guard will be executing when matching a route and before loading the component, so we will use it to fetch the main presets from Cosmic, and redirect the app to the homepage we stablished.</span></p><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/ebc77ad81df26cf06a7d29adc8fda5fb.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/ebc77ad81df26cf06a7d29adc8fda5fb.js" class="embedly-card"></a></div><p data-empty="true" style="text-align: center;"><span class="fr-img-caption fr-fic fr-dib fr-draggable" contenteditable="false" draggable="false"><span class="fr-img-wrap" style="width: 731px;"><span class="fr-inner" contenteditable="true"><em>from Angular 7.1, canActivate can return either a boolean or an UrlTree</em></span></span></span></p><p data-empty="true"><br></p><p data-empty="true"><span><strong>Components</strong></span></p><p data-empty="true"><span>Now we have a route configuration that will load the Page component, and this is the way to load a page using the slug from the parameter list:</span></p><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/f63d7cb3b0696d2903ea164c532a4a6a.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/f63d7cb3b0696d2903ea164c532a4a6a.js" class="embedly-card"></a></div><p data-empty="true" style="text-align: center;"><span><span class="fr-img-caption fr-fic fr-dib fr-draggable" contenteditable="false" draggable="false"><span class="fr-img-wrap" style="width: 732px;"><span class="fr-inner" contenteditable="true"><em>now we can use the page object on our template</em></span></span></span></span></p><p data-empty="true"><br></p><p data-empty="true"><span>With this, we have a way to navigate via url, but we should also load a menu so the user can see the pages available. For that, we will add a menu component on the core module, as it will be shared throughout the app. Our menu will be composed of a navigation
list, a logo and the company name; all of this is defined on the presets, so the menu will have a call like this:</span></p><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/328fc693b2e5f31e9a85c8d35beb25c8.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/328fc693b2e5f31e9a85c8d35beb25c8.js" class="embedly-card"></a></div><p data-empty="true" style="text-align: center;"><span><span class="fr-img-caption fr-fic fr-dib fr-draggable" contenteditable="false" draggable="false"><span class="fr-img-wrap" style="width: 739px;"><span class="fr-inner" contenteditable="true"><em>note that we specifically ask to include the navigation by adding &quot;true&quot; as a parameter to the method</em></span></span></span><br></span></p><p data-empty="true"><span>All of this would allow you to quickly create a website using Angular and Cosmic, all that is left to do is to create the templates and extend the configuration to meet your needs.</span></p><p data-empty="true"><br></p>

Blogs by Diego Perez

Start building today