README

Hyva 主题兼容基础模块

本模块 base 的 override/thêm mới điểm

• block header.customer 的模板被 override 到 Bss_HyvaCompatBase::header/customer-menu.phtml
• block product_list_item 的模板被 override 到 Bss_HyvaCompatBase::product/list/item.phtml
• 为 fetch API 添加 responseSerialize
• 为 AlpineJS 添加 component.js 插件

详情

1. block header.customer 的模板被 override

   • 目的是将客户链接拆分成单独的 block，实现时只需引用 block customer.logged-menu 或 customer.not-login-menu 然后定义一个新的链接
   • 原因是目前 Hyva 将所有链接都写在一个 block 和一个 template 中。
   • 链接的 base 类是 Bss\HyvaCompatBase\Block\Customer\Menu\CustomerMenuLink，模板是 Bss_HyvaCompatBase::header/customer-menu/link-default.phtml
   • 开发者可以查看更多详细信息。

2. 为 AlpineJS 添加 component.js 插件

   • 此功能的主要目的是在 AlpineJS 的组件之间进行通信。

   • 目前当创建一个新的 block 时，如果为 block 声明了 x-data，则无法使用 parent 或其他范围外的 x-data 的数据。

   • 例如：在 购物车页面，Hyva 定义了一个 initCart，我在其中创建了一个 block，定义了自己的 x-data，但我想使用 initCart（parent）的数据或修改 initCart 的数据，却无法做到（或者可能是我知识不足，不知道如何使用）。因此，我在 google 上找到了这个专门为 AlpineJS 定制的插件，可以获取和修改其他 x-data 的数据。

   • 注意:

     我已经修改了部分代码，以便在组件没有定义 id 而只有 functionName 的情况下使用。代码是 document.querySelector('[x-data="'+a+'()"], [x-data][x-id="'+a+'"]，其中添加了 '[x-data="'+a+'()"], 。

   • 使用方法 在需要使用的布局中，声明 module base 中定义的 handle。例如

     // checkout_cart_index.xml
     <page ..... >
         <update handle="alpinejs_plugins_component"/>
     </page>
     

     继续在部分 html 中使用

     <form 
         name="a_form"
         id="submit_form" x-on:submit.prevent="handleSubmitForm($component('componentName'))">
     <!-- Other code -->
     </form>

     或者在 JS 部分使用

     // Other code
     this?.$parent?.cartData &&
     this.$parent.cartData.custom_data = customData;
     
     this?.$component(componentName) &&
     this.$component(componentName).componentTrigger();
     // Other code

     componentName 可以是组件需要通过 x-data 或者在 parent 中声明的 js function 的名称，或者是包含 x-data 的标签的 id（在上面的例子中是 submit_form），或者是 x-id 的值

3. 添加 Splide Js 库

   • 该库用于制作幻灯片
   • 不会影响 LCP 和 CLS