element119/module-hyva-canvas

一个为Hyvä主题添加AlpineJS驱动的HTML画布组件的Magento 2模块。

维护者

详细信息

github.com/pykettk/module-hyva-canvas

源代码

问题

安装: 781

依赖: 0

建议: 0

安全: 0

星标: 3

关注者: 0

分支: 0

开放问题: 1

语言:HTML

类型:magento2-module

1.0.1 2022-10-31 19:49 UTC

Requires

  • hyva-themes/magento2-default-theme: ^1.1.0

OSL-3.0 a4a20d4c5909c507b22a67ded382b70f666e9a71

  • Kiel Pykett <pykettk.woop@gmail.com>

This package is auto-updated.

Last update: 2024-08-29 05:44:40 UTC

README

element119 | Hyvä Canvas

github release github release date license packagist downloads

hyva-canvas

📝 功能

✔️ 为Hyvä主题添加AlpineJS驱动的画布组件

✔️ 允许客户绘制、重置并提交画布数据

✔️ 响应式设计，适用于移动和桌面设备

✔️ 每页支持多个画布组件


🔌 安装

运行以下命令以 安装 此模块

composer require element119/module-hyva-canvas
php bin/magento setup:upgrade

⏫ 更新

运行以下命令以 更新 此模块

composer update element119/module-hyva-canvas
php bin/magento setup:upgrade

❌ 卸载

运行以下命令以 卸载 此模块

composer remove element119/module-hyva-canvas
php bin/magento setup:upgrade

📚 用户指南

添加画布组件

要将画布组件添加到页面，只需使用布局XML创建一个新的块，使用Element119_HyvaCanvas::canvas.phtml模板。

<block name="my.canvas.component" template="Element119_HyvaCanvas::canvas.phtml"/>

获取画布值

每当用户提交画布数据时，都会触发一个自定义JavaScript事件。此事件名称为customer-canvas-submitted，画布数据可以通过其detail对象访问。

{
    ...
    detail: {
        canvasBlockName: "my_canvas_component",
        canvasImage: "data:image/png;base64,iVBORw0...",
    },
    ...
}

canvas-demo


paypal

对于想要支持此项目的贡献者。