feat(poc): add helpers

components/carousel.tsx

@@ -1,12 +1,12 @@
 import { getCollectionProducts } from 'lib/shopware';
+import { isSeoUrls } from 'lib/shopware/helpers';
 import Image from 'next/image';
 import Link from 'next/link';
 
 export async function Carousel() {
-  const collectionName =
+  const collectionName = isSeoUrls()
-    `${process.env.SHOPWARE_USE_SEO_URLS}` === 'true'
+    ? 'Summer-BBQ/Hidden-Carousel-Category'
-      ? 'Summer-BBQ/Hidden-Carousel-Category'
+    : 'ff7bf3c59f1342a685844fbf8fdf9dc8';
-      : 'ff7bf3c59f1342a685844fbf8fdf9dc8';
   const { products } = await getCollectionProducts({
     collection: collectionName
   });

components/grid/three-items.tsx

@@ -1,5 +1,6 @@
 import { GridTileImage } from 'components/grid/tile';
 import { getCollectionProducts } from 'lib/shopware';
+import { isSeoUrls } from 'lib/shopware/helpers';
 import type { Product } from 'lib/shopware/types';
 import Link from 'next/link';
 
@@ -37,10 +38,9 @@ function ThreeItemGridItem({
 
 export async function ThreeItemGrid() {
   // Collections that start with `hidden-*` are hidden from the search page.
-  const collectionName =
+  const collectionName = isSeoUrls()
-    `${process.env.SHOPWARE_USE_SEO_URLS}` === 'true'
+    ? 'Summer-BBQ/Hidden-Category'
-      ? 'Summer-BBQ/Hidden-Category'
+    : '4ab73c06d90d4a5cb312209a64480d87';
-      : '4ab73c06d90d4a5cb312209a64480d87';
   const { products: homepageItems } = await getCollectionProducts({
     collection: collectionName
   });

components/layout/navbar/mobile-menu.tsx

@@ -7,7 +7,7 @@ import { Fragment, useEffect, useState } from 'react';
 
 import CloseIcon from 'components/icons/close';
 import MenuIcon from 'components/icons/menu';
-import { Menu } from 'lib/shopify/types';
+import { Menu } from 'lib/shopware/types';
 import Search from './search';
 
 export default function MobileMenu({ menu }: { menu: Menu[] }) {

components/layout/navbar/search.tsx

@@ -14,7 +14,6 @@ export default function Search() {
 
     const val = e.target as HTMLFormElement;
     const search = val.search as HTMLInputElement;
-    console.log(`Search:` + search);
     const newParams = new URLSearchParams(searchParams.toString());
 
     if (search.value) {

lib/shopware/api.ts

@@ -15,14 +15,12 @@ import {
   SeoURLResultSW,
   StoreNavigationTypeSW
 } from './types';
-
+import { getStoreDomainWithApiType, getAccessToken, getApiType } from 'lib/shopware/helpers';
-const domainSW = `https://${process.env.SHOPWARE_STORE_DOMAIN!}/${process.env.SHOPWARE_API_TYPE!}`;
-const accessTokenSW = `${process.env.SHOPWARE_ACCESS_TOKEN}`;
 
 const apiInstance = createAPIClient<extendedOperations, extendedPaths>({
-  baseURL: domainSW,
+  baseURL: getStoreDomainWithApiType(),
-  accessToken: accessTokenSW,
+  accessToken: getAccessToken(),
-  apiType: 'store-api'
+  apiType: getApiType()
 });
 
 // reimport operations return types to use it in application

lib/shopware/helpers.ts

@@ -0,0 +1,25 @@
+export function getAccessToken(): string {
+  return `${process.env.SHOPWARE_ACCESS_TOKEN}`;
+}
+
+export function getStoreDomainWithApiType(): string {
+  return getStoreDomain() + '/' + getApiType();
+}
+
+export function getStoreDomain(protocol: boolean = true): string {
+  return protocol
+    ? `https://${process.env.SHOPWARE_STORE_DOMAIN!}`
+    : `${process.env.SHOPWARE_STORE_DOMAIN!}`;
+}
+
+export function getApiType(): 'store-api' | 'admin-api' {
+  if (`${process.env.SHOPWARE_API_TYPE!}` === 'admin-api') {
+    return 'admin-api';
+  }
+
+  return 'store-api';
+}
+
+export function isSeoUrls(): boolean {
+  return `${process.env.SHOPWARE_USE_SEO_URLS}` === 'true';
+}

lib/shopware/index.ts

@@ -40,7 +40,7 @@ import {
   ProductListingCriteria,
   StoreNavigationTypeSW
 } from './types';
-const useSeoUrls = `${process.env.SHOPWARE_USE_SEO_URLS}` === 'true';
+import { isSeoUrls } from 'lib/shopware/helpers';
 
 export async function getMenu(params?: {
   type?: StoreNavigationTypeSW;
@@ -57,7 +57,7 @@ export async function getPage(handle: string | []): Promise<Page | undefined> {
   let seoUrlElement;
   let pageIdOrHandle = decodeURIComponent(transformHandle(handle)).replace('cms/', '');
 
-  if (useSeoUrls) {
+  if (isSeoUrls()) {
     seoUrlElement = await getFirstSeoUrlElement(pageIdOrHandle);
     if (seoUrlElement) {
       pageIdOrHandle = seoUrlElement.foreignKey;
@@ -103,7 +103,7 @@ export async function getSubCollections(collection: string) {
   const parentCollectionName =
     Array.isArray(collection) && collection[0] ? collection[0] : undefined;
 
-  if (useSeoUrls) {
+  if (isSeoUrls()) {
     const seoUrlElement = await getFirstSeoUrlElement(collectionName);
     if (seoUrlElement) {
       criteria = getDefaultSubCategoriesCriteria(seoUrlElement.foreignKey);
@@ -129,7 +129,7 @@ export async function getSearchCollectionProducts(params?: {
   const searchCriteria = { ...criteria, ...sorting };
 
   const search = await requestSearchCollectionProducts(searchCriteria);
-  if (useSeoUrls && search) {
+  if (isSeoUrls() && search) {
     search.elements = await changeVariantUrlToParentUrl(search);
   }
 
@@ -171,7 +171,7 @@ export async function getCollectionProducts(params?: {
   const collectionName = decodeURIComponent(transformHandle(params?.collection ?? ''));
   const sorting = getSortingCriteria(params?.sortKey, params?.reverse);
 
-  if (useSeoUrls && !category && collectionName !== '') {
+  if (isSeoUrls() && !category && collectionName !== '') {
     const seoUrlElement = await getFirstSeoUrlElement(collectionName);
     if (seoUrlElement) {
       category = seoUrlElement.foreignKey;
@@ -184,8 +184,8 @@ export async function getCollectionProducts(params?: {
     }
   }
 
-  if (!useSeoUrls) {
+  if (!isSeoUrls()) {
-    category = params?.collection ?? undefined;
+    category = collectionName ?? undefined;
   }
 
   if (category) {
@@ -222,7 +222,7 @@ export async function getCollection(handle: string | []) {
   let seoUrlElement;
   let categoryIdOrHandle = decodeURIComponent(transformHandle(handle));
 
-  if (useSeoUrls) {
+  if (isSeoUrls()) {
     seoUrlElement = await getFirstSeoUrlElement(categoryIdOrHandle);
     if (seoUrlElement) {
       categoryIdOrHandle = seoUrlElement.foreignKey;
@@ -261,7 +261,7 @@ export async function getProduct(handle: string | []): Promise<Product | undefin
   const productHandle = decodeURIComponent(transformHandle(handle));
   productId = productHandle; // if we do not use seoUrls the handle should be the product id
 
-  if (useSeoUrls) {
+  if (isSeoUrls()) {
     const seoUrlElement = await getFirstSeoUrlElement(productHandle);
     if (seoUrlElement) {
       productId = seoUrlElement.foreignKey;

lib/shopware/transform.ts

@@ -15,6 +15,7 @@ import {
   ExtendedProductListingResult
 } from './api-extended';
 import { ListItem } from 'components/layout/search/filter';
+import { isSeoUrls } from 'lib/shopware/helpers';
 
 export function transformMenu(res: ExtendedCategory[], type: string) {
   const menu: Menu[] = [];
@@ -25,16 +26,15 @@ export function transformMenu(res: ExtendedCategory[], type: string) {
 }
 
 function transformMenuItem(item: ExtendedCategory, type: string): Menu {
-  const path =
+  const path = isSeoUrls()
-    `${process.env.SHOPWARE_USE_SEO_URLS}` === 'true'
+    ? item.seoUrls && item.seoUrls.length > 0 && item.seoUrls[0] && item.seoUrls[0].seoPathInfo
-      ? item.seoUrls && item.seoUrls.length > 0 && item.seoUrls[0] && item.seoUrls[0].seoPathInfo
+      ? type === 'footer-navigation'
-        ? type === 'footer-navigation'
+        ? '/cms/' + item.seoUrls[0].seoPathInfo
-          ? '/cms/' + item.seoUrls[0].seoPathInfo
+        : '/search/' + item.seoUrls[0].seoPathInfo
-          : '/search/' + item.seoUrls[0].seoPathInfo
+      : ''
-        : ''
+    : type === 'footer-navigation'
-      : type === 'footer-navigation'
+    ? '/cms/' + item.id ?? ''
-      ? '/cms/' + item.id ?? ''
+    : '/search/' + item.id ?? '';
-      : '/search/' + item.id ?? '';
 
   // @ToDo: currently only footer-navigation is used for cms pages, this need to be more dynamic (shoud depending on the item)
   return {
@@ -127,9 +127,7 @@ export function transformSubCollection(
       .filter((item) => item.type !== 'link')
       .map((item) => {
         const handle =
-          item.seoUrls && `${process.env.SHOPWARE_USE_SEO_URLS}` === 'true'
+          isSeoUrls() && item.seoUrls ? findHandle(item.seoUrls, parentCollectionName) : item.id;
-            ? findHandle(item.seoUrls, parentCollectionName)
-            : item.id;
         if (handle) {
           collection.push({
             handle: handle,
@@ -196,12 +194,11 @@ export function transformProducts(res: ExtendedProductListingResult): Product[]
 }
 
 export function transformProduct(item: ExtendedProduct): Product {
-  const useSeoUrls = `${process.env.SHOPWARE_USE_SEO_URLS}` === 'true';
   const productOptions = transformOptions(item);
   const productVariants = transformVariants(item);
 
   let path = item.parentId ?? item.id ?? '';
-  if (useSeoUrls) {
+  if (isSeoUrls()) {
     path =
       item.seoUrls && item.seoUrls.length > 0 && item.seoUrls[0] && item.seoUrls[0].seoPathInfo
         ? item.seoUrls[0].seoPathInfo