前情提要:
這個案例的特色是,他的 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。