Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add customization guide for next.js app router #7316

Merged
merged 13 commits into from
Nov 15, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
docs: add custom field guide for app router
  • Loading branch information
mateuszo committed Nov 14, 2024
commit 78f2ea329e6ce86f6a89208ceb35875f71f043ab
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
---
title: Adding custom fields
layout: default
navigation:
icon: tabler:number-3-small
---

# Adding custom fields to the Unified Data Model / Implementing "Available for pickup" feature

It's a common case to enrich the default data models with custom fields.

In this chapter, you will learn:

::list{type="success"}
- how to add a custom field to the unified product data model in the middleware
- how to utilize that field in the storefront
::

By adding a "pickup availability" feature.

![Available for pickup](./images/available-for-pickup.webp)

1. Open `apps/storefront-middleware/integrations/sapcc/extensions/unified.ts` file and modify the code accordingly:

```diff [apps/storefront-middleware/integrations/sapcc/extensions/unified.ts]
export const unifiedApiExtension = createUnifiedExtension({
normalizers: {
addCustomFields: [
+ {
+ normalizeProduct(context, input) {
+ return {
+ availableForPickup: input.availableForPickup,
+ };
+ },
+ },
],
},
```

Within `addCustomFields`, we extend the normalizer functions. We take the raw input (coming from eCommerce) and have to
return a set of custom fields.

::info
Read more about normalizers and custom fields here: https://docs.alokai.com/storefront/unified-data-layer/normalizers
::

2. Now, `availableForPickup` field should be available in the front end, so let's use it. Replace the hardcoded placeholder
in the `PurchaseCard` component:


```diff [apps/storefront-unified-nextjs/components/purchase-card.tsx]
- {t.rich('additionalInfo.pickup', {
- link: (chunks) => (
- <SfLink href="#" variant="secondary">
- {chunks}
- </SfLink>
- ),
- })}
+ <p>Pickup {product.$custom?.availableForPickup ? '' : 'not'} available</p>
```

And that's it. You can find a complete project example in this repository: <https://github.com/vsf-customer/extensibility-demo-v2>
If you want to get access to it, contact our [sales team](https://docs.alokai.com/enterprise).


::card{title="Next: Change product slug" icon="tabler:number-4-small" }

#description
Learn how to override normalizers.

#cta
:::docs-button{to="/guides/customization/app-router/changing-product-slug"}
Next
:::
::