上一篇拆了 TikTok Shop 商品页的数据结构这篇换Ozon毛子电商。同样是做要读懂的东西一个商品页里有哪些结构化数据、按什么方式组织、怎么解析成一份干净 JSON。Ozon 的前端架构和 TikTok 很不一样值得单独说说。只摆事实和结果文末附真实解析产物。一、数据在哪不在 HTML 里Ozon 的商品页是NuxtVue SSR widget 架构。这带来一个反直觉的点你抓到的页面 HTML里面没有商品数据。document.content()抓下来的 HTML只有一层layout 骨架——一堆{component:webProductHeading,stateId:...}这样的布局占位声明这里有个标题 widget、那里有个价格 widget但每个 widget 的实际内容state不在 HTML 里。window.__NUXT__里也只有 CDN、菜单这些外壳。商品数据要单独从一个接口取composer-api.bx/page/json/v2?url商品路径它返回的widgetStates才是真货按 widget 名索引webProductHeading(标题) /webPrice(价) /webShortCharacteristics(规格) /webGallery(图) /webAspects(变体)。一个容易卡住的点如果传给这个接口的商品 URL 无效比如 id 拼错Ozon 会把它匹配到另一个商品一个带errorwidget 的降级页此时widgetStates里只有 header/footer 外壳、没有商品内容。排查半天会以为接口用法错了——其实只要换成有效的商品 URL就返回完整数据。所以用真实存在的商品链接。二、数据怎么组织变体是独立商品解析widgetStates后字段都很规整。这里说一个和 TikTok完全相反的设计TikTok一个商品内含上百个 SKU颜色×机型都在同一个商品对象里Ozon每个颜色 / 尺码是一个独立商品兄弟关系各有自己的sku、URL 和价格。webAspects里列出的是这些兄弟变体。实测一件男士 T 恤webAspects有两个维度颜色 38 个 × 尺码 2 个每个变体带独立的商品链接和价格。做选品时这反而更方便——每个变体本来就是一条能单独取价的商品。三、取价读懂三档价的字段语义Ozon 的价格有三个字段做成本核算前得分清price—— 实际售价cardPrice—— Ozon 卡支付价更低originalPrice—— 划线原价关键在originalPrice它是个划线展示价注水很凶。实测一条耳机划线18 900 ₽而实际售价才2 846 ₽。如果把originalPrice当商品价来算成本会严重偏离。成本核算只能用price或cardPrice。这不是玄学就是读懂字段语义划线价是营销展示值price才是真实成交价。四、结果一个真实商品页一条 Air Pro 3 耳机5074 条评价右侧价格2 592 ₽(卡价) /2 846 ₽(实售) /18 900 ₽(划线)。左边 О товаре 是规格。解析成结构化 JSON截取{ title: Наушники беспроводные c шумоподавлением Air Pro 3, product_id: 3577720626, price: { price: 2 846 ₽, card_price: 2 592 ₽, original_price: 18 900 ₽ }, characteristics: [ { name: Тип, values: [Наушники] }, { name: Шумоподавление, values: [Активное] }, … ], images: [ …5 张 ozone.ru CDN 高清图… ], aspects: [] // 单款无变体 }带变体的男士 T 恤{ title: Футболка SADIQ набор футболок мужских 3 шт, price: { price: 1 075 ₽, card_price: 968 ₽, original_price: 4 999 ₽ }, aspects: [ { name: Цвет, variants: [ /* 38 个, 每个带 sku/价/独立链接/库存 */ ] }, { name: Размер, variants: [ {text:48 RU / 48,price:968 ₽}, {text:56 RU / 56,price:1 041 ₽} ] } ] }单款耳机 多变体T 恤 38 色 × 2 码两类都能稳定解析。一个下游要注意的点字段值是俄文做匹配前要么翻译要么直接用图ozone.ru的 CDN 图可用。小结Ozon 是 Nuxt widget 架构商品数据不在 HTML在composer-api的widgetStates里。用有效商品 URL取无效 URL 会被匹配到降级页、只返外壳。变体是独立商品各有 sku/url/价和 TikTok 的内部 SKU相反。取价读懂字段语义originalPrice是划线展示价price/cardPrice才是真实价。对比 TikTok两家数据组织方式差很多但划线价/起步价 vs 真实价的字段语义问题是共性——做成本核算都得挑对字段。交流 各种电商数据微信NarraData Ozon 商品页数据结构解析 —— widget 架构与 composer-api
上一篇拆了 TikTok Shop 商品页的数据结构这篇换Ozon毛子电商。同样是做要读懂的东西一个商品页里有哪些结构化数据、按什么方式组织、怎么解析成一份干净 JSON。Ozon 的前端架构和 TikTok 很不一样值得单独说说。只摆事实和结果文末附真实解析产物。一、数据在哪不在 HTML 里Ozon 的商品页是NuxtVue SSR widget 架构。这带来一个反直觉的点你抓到的页面 HTML里面没有商品数据。document.content()抓下来的 HTML只有一层layout 骨架——一堆{component:webProductHeading,stateId:...}这样的布局占位声明这里有个标题 widget、那里有个价格 widget但每个 widget 的实际内容state不在 HTML 里。window.__NUXT__里也只有 CDN、菜单这些外壳。商品数据要单独从一个接口取composer-api.bx/page/json/v2?url商品路径它返回的widgetStates才是真货按 widget 名索引webProductHeading(标题) /webPrice(价) /webShortCharacteristics(规格) /webGallery(图) /webAspects(变体)。一个容易卡住的点如果传给这个接口的商品 URL 无效比如 id 拼错Ozon 会把它匹配到另一个商品一个带errorwidget 的降级页此时widgetStates里只有 header/footer 外壳、没有商品内容。排查半天会以为接口用法错了——其实只要换成有效的商品 URL就返回完整数据。所以用真实存在的商品链接。二、数据怎么组织变体是独立商品解析widgetStates后字段都很规整。这里说一个和 TikTok完全相反的设计TikTok一个商品内含上百个 SKU颜色×机型都在同一个商品对象里Ozon每个颜色 / 尺码是一个独立商品兄弟关系各有自己的sku、URL 和价格。webAspects里列出的是这些兄弟变体。实测一件男士 T 恤webAspects有两个维度颜色 38 个 × 尺码 2 个每个变体带独立的商品链接和价格。做选品时这反而更方便——每个变体本来就是一条能单独取价的商品。三、取价读懂三档价的字段语义Ozon 的价格有三个字段做成本核算前得分清price—— 实际售价cardPrice—— Ozon 卡支付价更低originalPrice—— 划线原价关键在originalPrice它是个划线展示价注水很凶。实测一条耳机划线18 900 ₽而实际售价才2 846 ₽。如果把originalPrice当商品价来算成本会严重偏离。成本核算只能用price或cardPrice。这不是玄学就是读懂字段语义划线价是营销展示值price才是真实成交价。四、结果一个真实商品页一条 Air Pro 3 耳机5074 条评价右侧价格2 592 ₽(卡价) /2 846 ₽(实售) /18 900 ₽(划线)。左边 О товаре 是规格。解析成结构化 JSON截取{ title: Наушники беспроводные c шумоподавлением Air Pro 3, product_id: 3577720626, price: { price: 2 846 ₽, card_price: 2 592 ₽, original_price: 18 900 ₽ }, characteristics: [ { name: Тип, values: [Наушники] }, { name: Шумоподавление, values: [Активное] }, … ], images: [ …5 张 ozone.ru CDN 高清图… ], aspects: [] // 单款无变体 }带变体的男士 T 恤{ title: Футболка SADIQ набор футболок мужских 3 шт, price: { price: 1 075 ₽, card_price: 968 ₽, original_price: 4 999 ₽ }, aspects: [ { name: Цвет, variants: [ /* 38 个, 每个带 sku/价/独立链接/库存 */ ] }, { name: Размер, variants: [ {text:48 RU / 48,price:968 ₽}, {text:56 RU / 56,price:1 041 ₽} ] } ] }单款耳机 多变体T 恤 38 色 × 2 码两类都能稳定解析。一个下游要注意的点字段值是俄文做匹配前要么翻译要么直接用图ozone.ru的 CDN 图可用。小结Ozon 是 Nuxt widget 架构商品数据不在 HTML在composer-api的widgetStates里。用有效商品 URL取无效 URL 会被匹配到降级页、只返外壳。变体是独立商品各有 sku/url/价和 TikTok 的内部 SKU相反。取价读懂字段语义originalPrice是划线展示价price/cardPrice才是真实价。对比 TikTok两家数据组织方式差很多但划线价/起步价 vs 真实价的字段语义问题是共性——做成本核算都得挑对字段。交流 各种电商数据微信NarraData