PHPackages                             bsscommerce/hyva-compat-base - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. bsscommerce/hyva-compat-base

ActiveMagento2-module

bsscommerce/hyva-compat-base
============================

Base module for Hyvä Compat Modules

1.0.2(2y ago)070.1k—2.4%1OSL-3.0HTML

Since Jun 1Pushed 2y ago1 watchersCompare

[ Source](https://github.com/Joshua29LK/hyva-compat-base)[ Packagist](https://packagist.org/packages/bsscommerce/hyva-compat-base)[ RSS](/packages/bsscommerce-hyva-compat-base/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (2)Versions (4)Used By (0)

Bss Commerce
============

[](#bss-commerce)

*Hyva Theme Compatible Base Module*
-----------------------------------

[](#hyva-theme-compatible-base-module)

Những điểm override/thêm mới trong module base này
--------------------------------------------------

[](#những-điểm-overridethêm-mới-trong-module-base-này)

- Template của block `header.customer` được override sang `Bss_HyvaCompatBase::header/customer-menu.phtml`
- Template của block `product_list_item` được override sang `Bss_HyvaCompatBase::product/list/item.phtml`
- Thêm `responseSerialize` cho fetch API.
- Thêm plugin `component.js` cho AlpineJS.

Chi Tiết
--------

[](#chi-tiết)

1. ### Template của block `header.customer` được override

    [](#template-của-block-headercustomer-được-override)

    - Mục đích là để tách nhỏ các link của customer thành từng block, khi implement thì chỉ cần reference vào block `customer.logged-menu` hoặc `customer.not-login-menu` rồi định nghĩa 1 link mới
    - Lý do bởi vì hiện tại Hyva đang viết tất cả các link vào trong cùng 1 block và cùng 1 template.
    - Base class của link là `Bss\HyvaCompatBase\Block\Customer\Menu\CustomerMenuLink` cùng với template là `Bss_HyvaCompatBase::header/customer-menu/link-default.phtml`
    - Chi tiết hơn thì Dev có thể check thêm.
2. ### Thêm plugin `component.js` cho AlpineJS.

    [](#thêm-plugin-componentjs-cho-alpinejs)

    - Mục đích của cái này đó chính là để giao tiếp giữa các component của alpineJS.
    - Hiện tại khi mình tạo 1 block mới, khai báo **x-data** cho block đó thì lại không thể sử dụng được data của **parent** hoặc là của 1 **x-data** khác nằm ngoài phạm vi.
    - **Ví dụ**: Tại **cart page**, Hyva có định nghĩa 1 cái là `initCart`, mình tạo block bên trong nó, định nghĩa x-data của mình, nhưng mình muốn sử dụng data của `initCart` (**parrent**) hoặc chỉnh sửa data của `initCart` thì không được (Hoặc có thể do mình kiến thức không đủ nên chưa biết cách thức sử dụng). Nên tìm kiếm trên google thì bắt được cái plugin này dành cho AlpineJS để có thể lấy, sửa được data của các **x-data** khác.
    - ***Note***:

        > Plugin đã được mình sửa 1 chỗ phần tìm kiếm theo tên của component để có thể sử dụng được cho các trường hợp component không được định nghĩa id mà chỉ có functionName. `document.querySelector('[x-data="'+a+'()"], [x-data][x-id="'+a+'"]`, trong đó phần được thêm là `'[x-data="'+a+'()"], `.
    - **Cách sử dụng**Tại layout cần sử dụng, khai báo handle đã được định nghĩa trong module base. Ví dụ

        ```
        // checkout_cart_index.xml

        ```

        Tiếp Theo tại phần html có thể sử dụng như dạng

        ```

        ```

        hoặc trong phần JS

        ```
        // Other code
        this?.$parent?.cartData &&
        this.$parent.cartData.custom_data = customData;

        this?.$component(componentName) &&
        this.$component(componentName).componentTrigger();
        // Other code
        ```

        `componentName` có thể là tên function js mà **component** cần giao tiếp khai báo trogn **x-data** hoặc là id của thẻ chứa x-data (ở trên là `submit_form`), hoặc là giá trị `x-id`
3. ### Thêm thư viện Splide Js

    [](#thêm-thư-viện-splide-js)

    - Thư viện được sử dụng để làm slide
    - Không ảnh hưởng tới LCP và CLS

###  Health Score

31

—

LowBetter than 68% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity31

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 75% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~245 days

Total

3

Last Release

958d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/9c9ceaaceb22b1edaf54bed2dbcc949bdb19befe88b48feead1b3cba29841aa4?d=identicon)[bsscommerce](/maintainers/bsscommerce)

---

Top Contributors

[![vadu01](https://avatars.githubusercontent.com/u/146798659?v=4)](https://github.com/vadu01 "vadu01 (12 commits)")[![Andu165](https://avatars.githubusercontent.com/u/116781576?v=4)](https://github.com/Andu165 "Andu165 (2 commits)")[![linhnq-bss](https://avatars.githubusercontent.com/u/234730426?v=4)](https://github.com/linhnq-bss "linhnq-bss (2 commits)")

### Embed Badge

![Health badge](/badges/bsscommerce-hyva-compat-base/health.svg)

```
[![Health](https://phpackages.com/badges/bsscommerce-hyva-compat-base/health.svg)](https://phpackages.com/packages/bsscommerce-hyva-compat-base)
```

###  Alternatives

[fastly/magento2

Fastly CDN Module for Magento 2.4.x

1564.2M1](/packages/fastly-magento2)[mage-os/module-automatic-translation

Automatic AI content translation for Mage-OS.

277.1k](/packages/mage-os-module-automatic-translation)[zepgram/module-rest

Technical module to industrialize API REST call with dependency injection pattern using Guzzle library

1326.2k](/packages/zepgram-module-rest)[graycore/magento2-graphql-introspection-cache

1015.2k](/packages/graycore-magento2-graphql-introspection-cache)[mage-os/mageos-common-async-events

Send REST requests to external endpoints asynchronously. This module implements the most common events like order creation and customer change.

147.7k2](/packages/mage-os-mageos-common-async-events)[graycore/magento2-graphql-logger

106.6k](/packages/graycore-magento2-graphql-logger)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)