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. [Utility & Helpers](/categories/utility)
4. /
5. bsscommerce/hyva-compat-base

ActiveMagento2-module[Utility & Helpers](/categories/utility)

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

Base module for Hyvä Compat Modules

1.0.2(2y ago)075.8k↓46.6%OSL-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 2d 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 66% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity30

Limited adoption so far

Community10

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

1004d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/98451194?v=4)[bsscommerce](/maintainers/bsscommerce)[@BSSCommerce](https://github.com/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

[nosto/module-nostotagging

Increase your conversion rate and average order value by delivering your customers personalized product recommendations throughout their shopping journey.

27703.7k4](/packages/nosto-module-nostotagging)[tig/postnl-magento2

TIG Magento 2 PostNL extension

59570.5k5](/packages/tig-postnl-magento2)[myparcelnl/magento

A Magento 2 module that creates MyParcel labels

1860.2k](/packages/myparcelnl-magento)[loki/magento2-components

Core module for defining Alpine.js components with advanced AJAX features

1011.8k26](/packages/loki-magento2-components)[jajuma/awesomehyva

This Magento 2 extension allows using Font Awesome 5 icons with Hyvä Themes

1354.7k](/packages/jajuma-awesomehyva)[zwernemann/module-withdrawal

Magento 2 EU Withdrawal Button Module - Adds a withdrawal/revocation button for orders in compliance with EU Directive (EU) 2023/2673

244.9k2](/packages/zwernemann-module-withdrawal)

PHPackages © 2026

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