最近WooCommerce開(kāi)發(fā)團(tuán)隊(duì)正在開(kāi)發(fā)和測(cè)試基于古騰堡塊的WooCommerce購(gòu)物車(chē)和結(jié)帳，如果你也對(duì)WooCommerce比較感興趣，可以一起來(lái)看看這些酷斃的功能。
以下內(nèi)容轉(zhuǎn)載自 WooCommerce開(kāi)發(fā)博客，由WordPress大學(xué)翻譯整理。
在2019年，我們首先通過(guò)WooCommerce Blocks插件啟動(dòng)了許多新的WooCommerce Blocks，然后通過(guò)WooCommerce本身取代了WooCommerce使用的大量舊的短代碼。
作為這項(xiàng)工作的一部分，要替換的兩個(gè)短代碼是WooCommerce中購(gòu)物車(chē)和結(jié)賬頁(yè)面使用的短代碼。我們不僅借此機(jī)會(huì)用相同的設(shè)計(jì)替換了它們，而且還借此機(jī)會(huì)重新設(shè)計(jì)了購(gòu)物車(chē)和結(jié)賬功能。
將購(gòu)物車(chē)和結(jié)賬轉(zhuǎn)換為區(qū)塊是一個(gè)復(fù)雜且具有挑戰(zhàn)性的過(guò)程，但是到目前為止，我們已經(jīng)通過(guò)WooCommerce Blocks功能插件使新的購(gòu)物車(chē)和結(jié)賬可用于預(yù)覽。如果您想測(cè)試它們，請(qǐng)花一些時(shí)間閱讀以下要求。
測(cè)試新的購(gòu)物車(chē)和結(jié)賬區(qū)塊
店鋪要求
由于這是我們用于測(cè)試和反饋的初始版本-我們確實(shí)對(duì)能夠測(cè)試新購(gòu)物車(chē)和結(jié)賬塊的初始版本的商店類(lèi)型有一些限制-為了對(duì)其進(jìn)行測(cè)試，商店需要：
- 使用WooCommerce Blocks 2.6.0
- 使用WP 5.3+和WooCommerce 4.0+
- 使用以下任何一種付款方式：Stripe 付款請(qǐng)求（ApplePay，ChromePay），Stripe CC付款方式，貝寶標(biāo)準(zhǔn)或支票。
請(qǐng)注意：
- cart和checkout塊當(dāng)前不支持與常規(guī)cart和checkout短代碼集成的第三方插件。在將來(lái)的版本中將支持?jǐn)U展。
- 您可能會(huì)在主題和新塊之間遇到一些樣式問(wèn)題，因?yàn)椴⒎撬兄黝}都一定會(huì)為現(xiàn)成的新塊提供支持。我們正在努力提供更大的默認(rèn)主題/塊樣式支持。
- 當(dāng)前，這些區(qū)塊尚未與Stripe支持的任何其他付款方式集成。我們正在努力在將來(lái)的版本中添加更多內(nèi)容。
反饋可以直接通過(guò)模塊本身的內(nèi)置反饋部分提交，也可以提交到Github中。
設(shè)置新塊
當(dāng)前，有兩種方法可以測(cè)試新塊–您可以：
- 通過(guò)塊插入器插入新的塊并保存頁(yè)面，將商店的購(gòu)物車(chē)和結(jié)賬頁(yè)面中的現(xiàn)有短代碼替換為新的塊，或者
- 您可以在舊的支持短代碼的購(gòu)物車(chē)和結(jié)帳頁(yè)面旁邊創(chuàng)建新頁(yè)面-只需記住更改用于購(gòu)物車(chē)和結(jié)賬的頁(yè)面即可?
WooCommerce -> 設(shè)置 -> 高級(jí)
有什么新功能？
新的購(gòu)物車(chē)和結(jié)賬處引入了全新的設(shè)計(jì)。在某些區(qū)域，我們進(jìn)行了漸進(jìn)式改進(jìn)（例如購(gòu)物車(chē)），而結(jié)賬時(shí)看到的變化更大。除了這些設(shè)計(jì)更改外，我們還開(kāi)始了核心購(gòu)物車(chē)和結(jié)賬設(shè)置的初始“遷移”，以進(jìn)行塊設(shè)置，并且在塊設(shè)置中還包括了一些新功能，使商戶可以更“直接”地控制商店的結(jié)賬體驗(yàn)。
以下是基于塊的購(gòu)物車(chē)和結(jié)賬中的一些新內(nèi)容的簡(jiǎn)要概述。
完整購(gòu)物車(chē)
現(xiàn)在，“完整購(gòu)物車(chē)”狀態(tài)包括一系列新功能和功能塊設(shè)置：
- 特征：
- 購(gòu)物車(chē)在預(yù)覽時(shí)會(huì)自動(dòng)加載演示產(chǎn)品。
- 如果商品中有3種或更少的商品，購(gòu)物者將看到庫(kù)存不足的通知。
- 現(xiàn)在，如果刪除了項(xiàng)目或更改了數(shù)量，則購(gòu)物車(chē)會(huì)自動(dòng)更新總計(jì)。
- 商家可以預(yù)覽/在完整購(gòu)物車(chē)狀態(tài)和空白購(gòu)物車(chē)狀態(tài)之間切換。
- 塊設(shè)置：
- 物流計(jì)算器可以顯示或隱藏在購(gòu)物車(chē)中
- 在輸入地址之前，可以隱藏物流費(fèi)用
空白購(gòu)物車(chē)
對(duì)于新塊，我們還引入了一些基本選項(xiàng)，可以控制空購(gòu)物車(chē)。商家將能夠：
- 顯示/隱藏圖標(biāo)并更改其大小或?qū)⑵涮鎿Q為自定義圖像/圖形
- 編輯標(biāo)題文本和“繼續(xù)購(gòu)物”文本并鏈接
- 編輯/更改顯示的默認(rèn)
新產(chǎn)品塊 - 添加任何其他塊
結(jié)賬
結(jié)賬過(guò)程已將此項(xiàng)工作進(jìn)行了重大的重新設(shè)計(jì)，目的是解決客戶的痛點(diǎn)并實(shí)施一些“最佳實(shí)踐”，其中包括：
- 特征：
- 結(jié)賬還加載了演示產(chǎn)品-允許商家預(yù)覽其wp-admin中的結(jié)賬外觀
- 如果商店安裝了支持快速結(jié)賬的付款網(wǎng)關(guān)，則會(huì)顯示“快速結(jié)賬”部分（當(dāng)前僅限于Apple Pay，但在將來(lái)的版本中將包括更多的快速結(jié)賬選項(xiàng)）
- 新的內(nèi)聯(lián)字段驗(yàn)證與舊的錯(cuò)誤通知堆棧
- 默認(rèn)情況下，顯示字段是必填字段，可選字段顯示/標(biāo)記為可選
- 現(xiàn)在，結(jié)賬流程會(huì)先捕獲送貨地址，并將其用作默認(rèn)地址
- 簽出交互相對(duì)于現(xiàn)有簡(jiǎn)碼簽出的左/右體驗(yàn)保留在左欄中
- 如果商家在WooCommerce設(shè)置中禁用了優(yōu)惠券使用，則該字段將在結(jié)賬頁(yè)面上隱藏
- 塊設(shè)置：
- 商家可以控制顯示哪些字段（住址，公司名稱(chēng)，電話號(hào)碼），并選擇是否需要/可選字段
- 商家可以使用送貨地址作為開(kāi)單地址來(lái)啟用/禁用。默認(rèn)情況下，使用送貨地址作為賬單地址
- 服務(wù)條款，隱私權(quán)政策和退款政策得到簡(jiǎn)化，可以在結(jié)賬區(qū)域的底部鏈接
我們?yōu)槭裁匆鲞@些塊？
隨著這些模塊的開(kāi)發(fā)和發(fā)布，我們正在為一些目標(biāo)而努力，而此初始預(yù)覽版是朝著這些目標(biāo)邁出的第一步：
使商家更容易自定義商店的購(gòu)物車(chē)和結(jié)賬體驗(yàn)。
我們希望為商家提供一流的工具，以在商店中改進(jìn)這些重要流程的同時(shí)，促進(jìn)行業(yè)的良好標(biāo)準(zhǔn)。
這包括以下內(nèi)容：
- 能夠?yàn)檫@些流程配置設(shè)置并查看更改如何立即影響視圖是有關(guān)塊的一大優(yōu)點(diǎn)。
- 不必投入自定義特定主題模板來(lái)調(diào)整購(gòu)物車(chē)或結(jié)賬中可用的內(nèi)容。
- 有一個(gè)默認(rèn)說(shuō)：“只是工作”，并運(yùn)行良好開(kāi)箱對(duì)于只是想建立自己的商店，并開(kāi)始銷(xiāo)售的商家。
最初的預(yù)覽使我們成為其中的一部分，但是我們還有很多事情要做，因此我們期待著反饋（并且知道我們還有很多計(jì)劃）。
通過(guò)當(dāng)前的短代碼實(shí)現(xiàn)的購(gòu)物車(chē)和結(jié)帳，提高商店的轉(zhuǎn)化率。
當(dāng)前的默認(rèn)布局和設(shè)計(jì)是從我們?cè)谠擃I(lǐng)域的研究中借鑒并提供的，我們希望向我們的商家介紹該研究的好處。
我們將從收集的商家中收集匯總數(shù)據(jù)，以幫助評(píng)估這些轉(zhuǎn)化率，是的，當(dāng)我們知道結(jié)果后，我們將發(fā)布它們！
這積極地滿足了我們的愿望，即希望所有使用WooCommerce的商家都擁有業(yè)內(nèi)最佳的轉(zhuǎn)換率，并且知道他們得到了致力于成功的團(tuán)隊(duì)的支持。
為擴(kuò)展開(kāi)發(fā)人員提供與新塊集成的合理途徑。
“自以為是”意味著我們?nèi)匀幌Ｍㄟ^(guò)提供給第三方擴(kuò)展的選項(xiàng)和可擴(kuò)展性來(lái)提供一定的靈活性，以擴(kuò)展購(gòu)物車(chē)和結(jié)賬流程的功能，同時(shí)還保護(hù)流程的完整性，以保護(hù)商家商店的購(gòu)物者。
實(shí)際上，這意味著可能會(huì)有更多定義的API與擴(kuò)展開(kāi)發(fā)人員所鉤掛的模塊集成以添加其他功能，而不是短代碼具有一般的“一切”可擴(kuò)展性。
在此初始預(yù)覽中，我們首先提供了一些用于集成付款方式的可擴(kuò)展性點(diǎn)，您可以在此處開(kāi)始的一些文檔中閱讀更多內(nèi)容。
注意：在此預(yù)覽期間，當(dāng)前的可擴(kuò)展性接口可能會(huì)發(fā)生變化，因此我們鼓勵(lì)開(kāi)發(fā)人員開(kāi)始嘗試使用它們，如果您在生產(chǎn)中使用了其中的任何一種，您將需要主動(dòng)監(jiān)視各個(gè)發(fā)行版中API的更改，直到它們發(fā)布，并標(biāo)記為穩(wěn)定為止。
我們?cè)诳蓴U(kuò)展性方面仍有許多工作要做，我們希望此預(yù)覽將有助于指導(dǎo)我們優(yōu)先考慮添加可擴(kuò)展性的方面，因此，如果您是擴(kuò)展開(kāi)發(fā)人員，歡迎您提供反饋。
