crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-15 05:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(poc): seoUrls yes or no env

Browse Source
This commit is contained in:
Björn Meyer 2023-07-17 15:56:32 +02:00
parent 744243c3d8
commit 46e003196f
6 changed files with 115 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env.example
View File

@ -4,3 +4,4 @@ SITE_NAME="Next.js Commerce with Shopware Composable Frontends"
SHOPWARE_STORE_DOMAIN=""
SHOPWARE_API_TYPE="store-api"
SHOPWARE_ACCESS_TOKEN=""
SHOPWARE_USE_SEO_URLS="false"

6
components/carousel.tsx
View File

@ -3,8 +3,12 @@ import Image from 'next/image';
import Link from 'next/link';
export async function Carousel() {
const collectionName =
`${process.env.SHOPWARE_USE_SEO_URLS}` === 'true'
? 'Summer-BBQ/Hidden-Carousel-Category'
: 'ff7bf3c59f1342a685844fbf8fdf9dc8';
const { products } = await getCollectionProducts({
collection: 'Summer-BBQ/Hidden-Carousel-Category'
collection: collectionName
});
if (!products?.length) return null;

6
components/grid/three-items.tsx
View File

@ -37,8 +37,12 @@ function ThreeItemGridItem({
export async function ThreeItemGrid() {
// Collections that start with `hidden-*` are hidden from the search page.
const collectionName =
`${process.env.SHOPWARE_USE_SEO_URLS}` === 'true'
? 'Summer-BBQ/Hidden-Category'
: '4ab73c06d90d4a5cb312209a64480d87';
const { products: homepageItems } = await getCollectionProducts({
collection: 'Summer-BBQ/Hidden-Category'
collection: collectionName
});
if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;

26
lib/shopware/api.ts
View File

@ -168,15 +168,13 @@ export async function requestSeoUrl(
page: number = 1,
limit: number = 1
): Promise<SeoURLResultSW | undefined> {
console.log(handle);
try {
const FirstCriteria = {
const criteriaSeoUrls = {
page: page,
limit: limit,
filter: [
{
type: 'multi',
// @ts-ignore
operator: 'or',
queries: [
{
@ -194,27 +192,7 @@ export async function requestSeoUrl(
]
};
// @ts-ignore
const firstResult = await apiInstance.invoke('readSeoUrl post /seo-url', FirstCriteria);
if (firstResult.total && firstResult.total > 0) {
return firstResult;
}
const lastPart = handle.split('/').pop() + '';
console.log(lastPart);
const SecondCriteria = {
page: page,
limit: limit,
filter: [
{
type: 'contains',
field: 'seoPathInfo',
value: lastPart
}
]
};
return await apiInstance.invoke('readSeoUrl post /seo-url', SecondCriteria);
return await apiInstance.invoke('readSeoUrl post /seo-url', criteriaSeoUrls);
} catch (error) {
if (error instanceof ApiClientError) {
console.error(error);

73
lib/shopware/index.ts
View File

@ -40,6 +40,7 @@ import {
ProductListingCriteria,
StoreNavigationTypeSW
} from './types';
const useSeoUrls = `${process.env.SHOPWARE_USE_SEO_URLS}` === 'true';
export async function getMenu(params?: {
type?: StoreNavigationTypeSW;
@ -53,21 +54,26 @@ export async function getMenu(params?: {
}
export async function getPage(handle: string | []): Promise<Page | undefined> {
const pageHandle = decodeURIComponent(transformHandle(handle));
const seoUrlElement = await getFirstSeoUrlElement(pageHandle);
let seoUrlElement;
let pageIdOrHandle = decodeURIComponent(transformHandle(handle)).replace('cms/', '');
if (useSeoUrls) {
seoUrlElement = await getFirstSeoUrlElement(pageIdOrHandle);
if (seoUrlElement) {
const category = await getCategory(seoUrlElement);
if (!category) {
console.log('[getPage] Did not found any category with page handle:', pageHandle);
}
return category ? transformPage(seoUrlElement, category) : undefined;
pageIdOrHandle = seoUrlElement.foreignKey;
}
if (!seoUrlElement) {
console.log('[getPage] Did not found any seoUrl element with page handle:', pageHandle);
console.log('[getPage] Did not found any seoUrl element with page handle:', pageIdOrHandle);
}
}
const category = await getCategory(pageIdOrHandle);
if (!category) {
console.log('[getPage] Did not found any category with handle:', pageIdOrHandle);
}
return category ? transformPage(category, seoUrlElement) : undefined;
}
export async function getFirstSeoUrlElement(
@ -91,16 +97,21 @@ export async function getFirstProduct(productId: string): Promise<ExtendedProduc
// ToDo: should be more dynamic (depending on handle), should work with server and not client see generateStaticParams from next.js
export async function getSubCollections(collection: string) {
const collectionName = decodeURIComponent(transformHandle(collection ?? ''));
let criteria = getDefaultSubCategoriesCriteria(collectionName);
let res: CategoryListingResultSW | undefined = undefined;
const parentCollectionName =
Array.isArray(collection) && collection[0] ? collection[0] : undefined;
const collectionName = transformHandle(collection ?? '');
if (useSeoUrls) {
const seoUrlElement = await getFirstSeoUrlElement(collectionName);
if (seoUrlElement) {
const criteria = getDefaultSubCategoriesCriteria(seoUrlElement.foreignKey);
criteria = getDefaultSubCategoriesCriteria(seoUrlElement.foreignKey);
}
}
// @ts-ignore
res = await requestCategoryList(criteria);
}
return res ? transformSubCollection(res, parentCollectionName) : [];
}
@ -160,7 +171,7 @@ export async function getCollectionProducts(params?: {
const collectionName = decodeURIComponent(transformHandle(params?.collection ?? ''));
const sorting = getSortingCriteria(params?.sortKey, params?.reverse);
if (!category && collectionName !== '') {
if (useSeoUrls && !category && collectionName !== '') {
const seoUrlElement = await getFirstSeoUrlElement(collectionName);
if (seoUrlElement) {
category = seoUrlElement.foreignKey;
@ -173,6 +184,10 @@ export async function getCollectionProducts(params?: {
}
}
if (!useSeoUrls) {
category = params?.collection ?? undefined;
}
if (category) {
const criteria = !params?.defaultSearchCriteria
? getDefaultProductsCriteria(params?.page)
@ -194,29 +209,37 @@ export async function getCollectionProducts(params?: {
}
export async function getCategory(
seoUrl: ApiSchemas['SeoUrl'],
categoryId: string,
cms: boolean = false
): Promise<ExtendedCategory | undefined> {
const criteria = cms ? getDefaultCategoryWithCmsCriteria() : getDefaultCategoryCriteria();
return await requestCategory(seoUrl.foreignKey, criteria);
return await requestCategory(categoryId, criteria);
}
// This function is only used for generateMetadata at app/search/(collection)/[...collection]/page.tsx
export async function getCollection(handle: string | []) {
const collectionName = decodeURIComponent(transformHandle(handle));
const seoUrlElement = await getFirstSeoUrlElement(collectionName);
let path;
let seoUrlElement;
let categoryIdOrHandle = decodeURIComponent(transformHandle(handle));
if (useSeoUrls) {
seoUrlElement = await getFirstSeoUrlElement(categoryIdOrHandle);
if (seoUrlElement) {
const category = await getCategory(seoUrlElement);
const path = seoUrlElement.seoPathInfo ?? '';
categoryIdOrHandle = seoUrlElement.foreignKey;
path = seoUrlElement.seoPathInfo ?? '';
}
}
const category = await getCategory(categoryIdOrHandle);
if (category) {
const collection = transformCollection(seoUrlElement, category);
const collection = transformCollection(category, seoUrlElement);
path = path ?? category.id ?? '';
return {
...collection,
path: `/search/${path}`
};
}
}
}
export async function getProductSeoUrls() {
@ -236,15 +259,19 @@ export async function getProduct(handle: string | []): Promise<Product | undefin
let productSW: ExtendedProduct | undefined;
let productId: string | undefined;
const productHandle = decodeURIComponent(transformHandle(handle));
productId = productHandle; // if we do not use seoUrls the handle should be the product id
if (useSeoUrls) {
const seoUrlElement = await getFirstSeoUrlElement(productHandle);
if (seoUrlElement) {
productId = seoUrlElement.foreignKey;
}
}
if (!productId) {
console.log('[getProduct][search] Did not found any product with handle:', productHandle);
console.log('[getProduct][search] Did not found any product with handle:', handle);
}
if (productId) {
const firstProduct = await getFirstProduct(productId);
if (firstProduct) {

65
lib/shopware/transform.ts
View File

@ -25,24 +25,30 @@ export function transformMenu(res: ExtendedCategory[], type: string) {
}
function transformMenuItem(item: ExtendedCategory, type: string): Menu {
const path =
`${process.env.SHOPWARE_USE_SEO_URLS}` === 'true'
? item.seoUrls && item.seoUrls.length > 0 && item.seoUrls[0] && item.seoUrls[0].seoPathInfo
? type === 'footer-navigation'
? '/cms/' + item.seoUrls[0].seoPathInfo
: '/search/' + item.seoUrls[0].seoPathInfo
: ''
: type === 'footer-navigation'
? '/cms/' + 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 {
id: item.id ?? '',
title: item.name,
children: item.children?.map((item) => transformMenuItem(item, type)) ?? [],
path:
item.seoUrls && item.seoUrls.length > 0 && item.seoUrls[0] && item.seoUrls[0].seoPathInfo
? type === 'footer-navigation'
? '/cms/' + item.seoUrls[0].seoPathInfo
: '/search/' + item.seoUrls[0].seoPathInfo
: '',
path: path,
type: item.children && item.children.length > 0 ? 'headline' : 'link'
};
}
export function transformPage(
seoUrlElement: ApiSchemas['SeoUrl'],
category: ExtendedCategory
category: ExtendedCategory,
seoUrlElement?: ApiSchemas['SeoUrl']
): Page {
let plainHtmlContent;
if (category.cmsPage) {
@ -51,20 +57,20 @@ export function transformPage(
}
return {
id: seoUrlElement.id ?? '',
id: seoUrlElement?.id ?? category.id ?? '',
title: category.translated?.metaTitle ?? category.name ?? '',
handle: seoUrlElement.seoPathInfo,
handle: seoUrlElement?.seoPathInfo ?? category.id ?? '',
body: plainHtmlContent ?? category.description ?? '',
bodySummary: category.translated?.metaDescription ?? category.description ?? '',
seo: {
title: category.translated?.metaTitle ?? category.name ?? '',
description: category.translated?.metaDescription ?? category.description ?? ''
},
createdAt: seoUrlElement.createdAt ?? '',
updatedAt: seoUrlElement.updatedAt ?? '',
routeName: seoUrlElement.routeName,
createdAt: seoUrlElement?.createdAt ?? category.createdAt ?? '',
updatedAt: seoUrlElement?.updatedAt ?? category.updatedAt ?? '',
routeName: seoUrlElement?.routeName,
originalCmsPage: category.cmsPage,
foreignKey: seoUrlElement.foreignKey
foreignKey: seoUrlElement?.foreignKey ?? category.id
};
}
@ -89,18 +95,22 @@ export function transformToPlainHtmlContent(cmsPage: ExtendedCmsPage): string {
}
export function transformCollection(
seoUrlElement: ApiSchemas['SeoUrl'],
resCategory: ExtendedCategory
resCategory: ExtendedCategory,
seoUrlElement?: ApiSchemas['SeoUrl']
) {
return {
handle: seoUrlElement.seoPathInfo,
handle: seoUrlElement?.seoPathInfo ?? resCategory.id ?? '',
title: resCategory.translated?.metaTitle ?? resCategory.name ?? '',
description: resCategory.description ?? '',
seo: {
title: resCategory.translated?.metaTitle ?? resCategory.name ?? '',
description: resCategory.translated?.metaDescription ?? resCategory.description ?? ''
},
updatedAt: seoUrlElement.updatedAt ?? seoUrlElement.createdAt ?? ''
updatedAt:
seoUrlElement?.updatedAt ??
seoUrlElement?.createdAt ??
resCategory.updatedAt ??
resCategory.createdAt
};
}
@ -116,7 +126,10 @@ export function transformSubCollection(
.filter((item) => item.visible)
.filter((item) => item.type !== 'link')
.map((item) => {
const handle = item.seoUrls ? findHandle(item.seoUrls, parentCollectionName) : undefined;
const handle =
item.seoUrls && `${process.env.SHOPWARE_USE_SEO_URLS}` === 'true'
? findHandle(item.seoUrls, parentCollectionName)
: item.id;
if (handle) {
collection.push({
handle: handle,
@ -183,15 +196,21 @@ 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);
return {
id: item.id ?? '',
path:
let path = item.id ? item.id : '';
if (useSeoUrls) {
path =
item.seoUrls && item.seoUrls.length > 0 && item.seoUrls[0] && item.seoUrls[0].seoPathInfo
? item.seoUrls[0].seoPathInfo
: '',
: '';
}
return {
id: item.id ?? '',
path: path,
availableForSale: item.available ?? false,
title: item.translated ? item.translated.name ?? '' : item.name,
description: item.translated?.metaDescription