muffet 2990
客戶案例介紹
前情提要:
這個案例的特色是,他的 cart 頁面沒有 sku ,所以要先在 product 頁面存到 local 端,到 cart
Ps. 我原本是用另一個方法,用他的 imageUrl 抓一段下來,當他的特殊 string
imageUrl 設定 productId
先設定好整理字串的函數
function getProductId(imageUrl) {
const startIndex = imageUrl.indexOf("/media")
const endIndex = imageUrl.indexOf(".jpeg")
const str = imageUrl.substring(startIndex, endIndex)
const productId = str.substring(50, 70)
return productId
}
抓到 imageUrl 字串,並把字串塞到剛剛整理過的函數,就可以產出一個字串
const { title, price } = template.productPage_getProductInfo(ecName)
const productDetail = JSON.parse(document.querySelector('script[type="application/ld+json"]')?.textContent)
// 重點是下面三行
const imageUrl = productDetail.image
const productId = getProductId(imageUrl)
const sku = `${ecName}:product:${productId}`
// ...省略
const productInfo = {
title,
sku,
storePrice,
price,
description,
imageUrl,
live,
categoryPath,
}
localStorage 存 sku 的做法
先在 product 頁面存入 sku
// 由於購物車並無商品id ,因此在商品頁面儲存,但需要有瀏覽商品或是分類頁加入購物車才能在購物車頁面抓取到id
const storageKeyName = `${title}`
const storeIds = storage.get(storageKeyName, [])
const productSku = product.get('sku')
if (storeIds.includes(productSku)) {
return
}
storeIds.push(productSku)
storage.set(storageKeyName, storeIds, 60 * 60 * 30)
在 cart 頁面把剛剛的 sku 讀出來
const title = item.querySelector(".product-name").textContent.trim()
const getSkuTitle = (title.match(/(.*)-(.*)$/))[1].trim()
const sku = storage.get(`${getSkuTitle}`)[0]
const price = item.querySelector("td:nth-child(3)").textContent.replace(/\D/g, '')
細節講解
我們一開始存進 storage 的是在 product 頁面抓到的 title、sku,我們設定一定要看過產品頁面,也就是進到該產品頁面,才會把產品的 sku 放到 storage 裡面,因此裡面最後存的東西會像這樣子:
> '大成安心購-大成 X 北澤-黑豚壽喜燒丼':dachanfoods:product:7WZY10U31011
既然存進去之後(瀏覽過該產品頁),我們就可以到 cart 頁了,到 cart 頁面我們先抓取產品的 title,因為我們一開始是用 title 對應 sku 存進去的,所以今天我們只要找到 title,就可以找到相對應的 sku。
Ps. 正常來說 cart 的 title 可以直接找到對應的 sku,上面我在還有對他處理過,是因為這間客戶 cart 頁面的產品 title,有多一些字,所以我有在處理過,處理完就可以抓到對應的 sku。