Skip to content

Latest commit

 

History

History
101 lines (68 loc) · 2.4 KB

README.md

File metadata and controls

101 lines (68 loc) · 2.4 KB

element119 | Hyvä Canvas

github release github release date license packagist downloads


hyva-canvas

📝 Features

✔️ Adds an AlpineJS-powered canvas component to Hyvä themes

✔️ Allows customers to draw, reset, and submit canvas data

✔️ Responsive design to suit mobile and desktop devices

✔️ Supports multiple canvas components per page


🔌 Installation

Run the following command to install this module:

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

⏫ Updating

Run the following command to update this module:

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

❌ Uninstallation

Run the following command to uninstall this module:

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

📚 User Guide

Adding the Canvas Component

To add the canvas component to a page, simply use layout XML to create a new block using the Element119_HyvaCanvas::canvas.phtml template.

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

Obtaining the Canvas Value

A custom JavaScript event is fired whenever the user submits their canvas data. This event name is customer-canvas-submitted and the canvas data can be accessed via its detail object:

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

canvas-demo



paypal

For those that want to support this project.