feat: seo canonical link support (#45)

intershop · Jan 8, 2020 · 7e19179 · 7e19179
1 parent 6dd29b1
commit 7e19179
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 7 deletions.
diff --git a/src/app/core/models/seo-attribute/seo-attribute.model.ts b/src/app/core/models/seo-attribute/seo-attribute.model.ts
@@ -2,4 +2,5 @@ export interface SeoAttributes {
   metaDescription?: string;
   metaTitle?: string;
   robots?: string[];
+  canonical?: string;
 }
diff --git a/src/app/core/pipes/product-route.pipe.ts b/src/app/core/pipes/product-route.pipe.ts
@@ -14,7 +14,7 @@ function generateProductSlug(product: Product) {
  * @returns         Product route string
  */
 
-function generateProductRoute(product: Product, category?: Category): string {
+export function generateProductRoute(product: Product, category?: Category): string {
   if (!(product && product.sku)) {
     return '/';
   }

diff --git a/src/app/extensions/seo/store/seo/seo.effects.ts b/src/app/extensions/seo/store/seo/seo.effects.ts
@@ -1,12 +1,15 @@
-import { Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
 import { Actions, Effect, ofType } from '@ngrx/effects';
 import { Store, select } from '@ngrx/store';
 import { MetaService } from '@ngx-meta/core';
 import { TranslateService } from '@ngx-translate/core';
 import { mapToParam, ofRoute } from 'ngrx-router';
-import { debounce, first, map, switchMap, tap } from 'rxjs/operators';
+import { debounce, distinctUntilKeyChanged, first, map, switchMap, tap } from 'rxjs/operators';
 
+import { ProductHelper } from 'ish-core/models/product/product.helper';
 import { SeoAttributes } from 'ish-core/models/seo-attribute/seo-attribute.model';
+import { generateProductRoute } from 'ish-core/pipes/product-route.pipe';
 import { getSelectedContentPage } from 'ish-core/store/content/pages';
 import { CategoriesActionTypes } from 'ish-core/store/shopping/categories';
 import { getSelectedCategory } from 'ish-core/store/shopping/categories/categories.selectors';
@@ -17,12 +20,23 @@ import { SeoActionTypes, SetSeoAttributes } from './seo.actions';
 
 @Injectable()
 export class SeoEffects {
+  canonicalLink: HTMLLinkElement;
+
   constructor(
     private actions$: Actions,
     private store: Store<{}>,
     private meta: MetaService,
-    private translate: TranslateService
-  ) {}
+    private translate: TranslateService,
+    @Inject(DOCUMENT) private doc: Document
+  ) {
+    this.canonicalLink = this.doc.querySelector('link[rel="canonical"]');
+    if (!this.canonicalLink) {
+      this.canonicalLink = this.doc.createElement('link');
+      this.canonicalLink.setAttribute('rel', 'canonical');
+      this.doc.head.appendChild(this.canonicalLink);
+    }
+    this.canonicalLink.setAttribute('href', this.doc.URL);
+  }
 
   @Effect({ dispatch: false })
   setMetaData$ = this.actions$.pipe(
@@ -34,6 +48,7 @@ export class SeoEffects {
         this.meta.setTitle(seoAttributes.metaTitle);
         this.meta.setTag('description', seoAttributes.metaDescription);
         this.meta.setTag('robots', seoAttributes.robots && seoAttributes.robots.join(','));
+        this.canonicalLink.setAttribute('href', seoAttributes.canonical || this.doc.URL);
       }
     })
   );
@@ -45,7 +60,14 @@ export class SeoEffects {
     switchMap(() =>
       this.store.pipe(
         select(getSelectedCategory),
-        mapToProperty('seoAttributes'),
+        map(
+          c =>
+            c &&
+            c.seoAttributes && {
+              canonical: `/category/${c.uniqueId}`,
+              ...c.seoAttributes,
+            }
+        ),
         whenTruthy(),
         first()
       )
@@ -59,7 +81,17 @@ export class SeoEffects {
     switchMap(() =>
       this.store.pipe(
         select(getSelectedProduct),
-        mapToProperty('seoAttributes'),
+        whenTruthy(),
+        map(p => (ProductHelper.isVariationProduct(p) && p.productMaster()) || p),
+        distinctUntilKeyChanged('sku'),
+        map(
+          p =>
+            p &&
+            p.seoAttributes && {
+              canonical: generateProductRoute(p, p.defaultCategory()),
+              ...p.seoAttributes,
+            }
+        ),
         whenTruthy()
       )
     ),