diff --git a/components/plp/tabs.tsx b/components/plp/tabs.tsx index 3104456dd..c417ec1d3 100644 --- a/components/plp/tabs.tsx +++ b/components/plp/tabs.tsx @@ -5,6 +5,26 @@ import { getMetaobject } from 'lib/shopify'; import startCase from 'lodash.startcase'; import { Tab, TabGroup, TabList, TabPanel, TabPanels } from './tab-components'; +const keySort: { [key: string]: number } = { + title: 1, + about: 2, + upgrades: 3, + history: 4, + compatability: 5, + remanufactured_transmissions: 6, + remanufactured_engines: 7, + used_transmissions: 8, + used_engines: 9, + core_return_policy: 10, + shipping: 11, + remanufactured_transmission_warranty: 12, + remanufactured_engine_warranty: 13, + used_transmission_warranty: 14, + used_engine_warranty: 15, + faqs: 16, + best_price_guarantee: 17 +}; + const TabContent = async ({ id }: { id?: string }) => { if (!id) { return null; @@ -31,11 +51,20 @@ const Tabs = ({ fields }: { fields: { [key: string]: string } }) => { const isShopifyId = (value?: string) => value?.startsWith('gid://shopify'); + const sortedKeys = keys.sort((a, b) => { + const orderA = keySort[a] ?? Infinity; + const orderB = keySort[b] ?? Infinity; + if (orderA === orderB) { + return a.localeCompare(b); + } + return orderA - orderB; + }); + return (
- {keys.map((key) => ( + {sortedKeys.map((key) => ( { ))} - {keys.map((key) => ( + {sortedKeys.map((key) => ( {isShopifyId(fields[key]) ? (