Download the PHP package mage2kishan/module-custom-options without Composer
On this page you can find all versions of the php package mage2kishan/module-custom-options. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download mage2kishan/module-custom-options
More information about mage2kishan/module-custom-options
Files in mage2kishan/module-custom-options
Package module-custom-options
Short Description Panth Custom Options — beautifully styled product custom options for Hyva-based Magento 2 storefronts. Replaces the default custom options rendering with a modern, accessible UI featuring styled text inputs, textareas, file upload zones, select/radio/checkbox controls, and HTML5 date pickers, all governed by CSS custom properties for easy theming. Requires Panth_Core.
License MIT
Homepage https://kishansavaliya.com
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package module-custom-options
Magento 2 Custom Options
"Panth Custom Options" (module Panth_CustomOptions) replaces the templates that Magento uses to render product customizable options on the product page. The options themselves are still defined per product in the admin under Catalog > Products > Customizable Options; the module only changes the front-end markup and styling: one bordered row per option, the option price shown as a badge next to the title, styled text inputs, textareas and selects, card-style radio and checkbox rows, a drop-zone style file upload area, and native HTML5 date, time and datetime-local inputs in the Hyva template set.
The module ships two template sets, one written for Hyva (Alpine.js and Hyva view models) and one for Luma (Magento's priceOptions widget and RequireJS). It is meant for stores whose products carry customizable options (engraving text, gift messages, uploaded artwork, delivery dates) and that want those fields to match the rest of the theme without rewriting the option templates.
Product page: Custom Product Options for Magento 2 (Hyva + Luma)
Features
- Replaces the
product.info.optionscontainer template and the text, select, file and date option-type templates ofMagento_Catalogon the product page. - Hyva template set: styled option rows, a price badge on each option that Alpine.js keeps in sync with the product final price (including the incl./excl. tax display modes handled by
Hyva\Theme\ViewModel\ProductPrice),data-price-amountanddata-price-typeattributes on every input, nativedate,timeanddatetime-localinputs that fill Magento's hidden day, month, year, hour, minute and day-part fields, and a mobile breakpoint at 640px. - Luma template set: a styled container that initialises Magento's standard
priceOptionswidget, the standardremaining-characterscounter for options with a maximum length, radio and checkbox values wrapped into card rows by the module'scard-options.js, and file, date and time controls rendered by Magento's own option blocks inside the styled wrapper. - Required options are marked with an asterisk; text inputs get a placeholder built from the option title.
- File options display the allowed extensions and the maximum image width and height configured on the option, and show the already uploaded file with a "Change" link (Hyva) or "Change" and "Delete" controls (Luma) when a cart item is edited.
- Colours, border radius and font of the Hyva template set are CSS custom properties (
--custom-options-*). Their defaults ship inetc/theme-config.jsonand are printed into:rooton every frontend page byPanth_Core; a theme can override them in its ownweb/tailwind/theme-config.jsonor in CSS. - One admin setting that switches both template sets on or off; when it is off the active theme's own option templates render.
- No database tables, cron jobs, plugins, observers, controllers, routes or web API endpoints.
Compatibility
| Requirement | Supported |
|---|---|
| Magento Open Source / Adobe Commerce | 2.4.4 to 2.4.8 (as published on the product page) |
| PHP | 8.1, 8.2, 8.3, 8.4 (~8.1.0\|\|~8.2.0\|\|~8.3.0\|\|~8.4.0 in composer.json) |
| Themes | Hyva and Luma (separate template sets, see Usage) |
Composer constraints on Magento packages: magento/framework ^103.0, magento/module-catalog ^104.0, magento/module-config ^101.2, magento/module-store ^101.1.
Requirements
- Magento Open Source or Adobe Commerce 2.4.4 to 2.4.8.
- PHP 8.1, 8.2, 8.3 or 8.4.
mage2kishan/module-core^1.0 (Magento modulePanth_Core), required in composer.json and listed in the module sequence. It provides the "Panth Extensions" configuration tab and thePanth\Core\ViewModel\ThemeConfigview model that turnsetc/theme-config.jsoninto CSS variables.- For the Hyva template set: a Hyva theme, because those templates use
Hyva\Theme\Model\ViewModelRegistry,Hyva\Theme\ViewModel\ProductPriceandHyva\Theme\ViewModel\CustomOption. Hyva is not declared as a Composer dependency. - composer.json has no
suggestsection.
Installation
setup:di:compileis only needed in production mode; in developer mode Magento compiles on demand.setup:static-content:deploy -fis needed because the module shipsview/frontend/web/js/card-options.js,view/frontend/web/js/date-labels.jsandview/frontend/requirejs-config.js, which the Luma template set loads through RequireJS.
Check the result:
Configuration
Admin path: Stores > Configuration > Panth Extensions > Custom Options. The section is available at default, website and store view scope and is protected by the ACL resource Panth_CustomOptions::config.
General Settings
| Setting | Default | What it does |
|---|---|---|
| Enable Custom Options Styling | Yes | Controls whether the module assigns its templates. The layout files set every option template through <action method="setTemplate" ifconfig="panth_customoptions/general/enabled">, so with Yes the Hyva set renders on Hyva themes and the Luma set on Luma, and with No the blocks keep the templates of the active theme (for a Hyva child theme, its Magento_Catalog copies; for Luma, Magento's own). The value is read at store view scope, so website and store view overrides apply. |
Config path: panth_customoptions/general/enabled (default 1 in etc/config.xml).
There is no admin grid, admin form or product-form addition. Visual defaults are not admin settings; they are the keys of etc/theme-config.json:
| Key | Default | CSS variable |
|---|---|---|
| custom-options-primary | #0D9488 | --custom-options-primary |
| custom-options-border | #E5E7EB | --custom-options-border |
| custom-options-border-focus | #0D9488 | --custom-options-border-focus |
| custom-options-bg | #FFFFFF | --custom-options-bg |
| custom-options-input-bg | #F9FAFB | --custom-options-input-bg |
| custom-options-text | #171717 | --custom-options-text |
| custom-options-text-muted | #6B7280 | --custom-options-text-muted |
| custom-options-label | #374151 | --custom-options-label |
| custom-options-price | #0D9488 | --custom-options-price |
| custom-options-required | #EF4444 | --custom-options-required |
| custom-options-radius | 10px | --custom-options-radius |
| custom-options-font | 'DM Sans', sans-serif | --custom-options-font |
These variables are consumed by the Hyva template set. The Luma template set defines its own --pco-* variables inline in luma/options.phtml and does not read theme-config.json.
Usage
Which templates render
Two layout files assign the module templates to the existing Magento_Catalog option blocks, each through an ifconfig action on panth_customoptions/general/enabled. catalog_product_view.xml assigns the Luma set:
| Block | Template |
|---|---|
| product.info.options | Panth_CustomOptions::product/view/options/luma/options.phtml |
| product.info.options.text | Panth_CustomOptions::product/view/options/luma/type/text.phtml |
| product.info.options.select | Panth_CustomOptions::product/view/options/luma/type/select.phtml |
| product.info.options.file | Panth_CustomOptions::product/view/options/luma/type/file.phtml |
| product.info.options.date | Panth_CustomOptions::product/view/options/luma/type/date.phtml |
hyva_catalog_product_view.xml is only loaded on Hyva themes and runs after every catalog_product_view file, including the theme's, so on Hyva it replaces those assignments with the Hyva set (and loads css/hyva-options.css):
| Block | Template |
|---|---|
| product.info.options | Panth_CustomOptions::product/view/options/options.phtml |
| product.info.options.text | Panth_CustomOptions::product/view/options/type/text.phtml |
| product.info.options.select | Panth_CustomOptions::product/view/options/type/select.phtml |
| product.info.options.file | Panth_CustomOptions::product/view/options/type/file.phtml |
| product.info.options.date | Panth_CustomOptions::product/view/options/type/date-html5.phtml |
The Hyva set therefore works on any Hyva theme, not only on themes that ship their own copies of these templates. The options wrapper block keeps the theme's wrapper.phtml.
The templates apply wherever the catalog_product_view layout handle is used, which includes the product page and the page that opens when a cart item is edited. Nothing changes in the cart or checkout; option values are submitted with the same field names Magento expects, so cart and order display are Magento's own.
Option types
| Magento option type | Hyva template set | Luma template set |
|---|---|---|
| Field | Text input with maxlength and a "Maximum N characters" note |
Text input with Magento's remaining-characters counter |
| Area | Textarea, 4 rows, same length note | Textarea, 4 rows, same counter |
| File | Drop-zone style area with an upload icon and "Drag & drop or browse" text; after a file is chosen, a preview row with an image thumbnail (or file icon), the file name and size, and a 44px "Remove file" button that clears the input and returns focus to it; extension and size hints below | Drop-zone style area showing the chosen file name; "Allowed files", "Max width" and "Max height" notes |
| Drop-down, Multiple Select | Rendered by Hyva\Theme\ViewModel\CustomOption::getOptionHtml() inside the styled row |
Magento's getValuesHtml() output; selects get the panth-input class from card-options.js |
| Radio Buttons, Checkbox | Rendered by Hyva\Theme\ViewModel\CustomOption::getOptionHtml() inside a radiogroup or group labelled by the option title; each choice row is at least 44px high |
Each .field.choice is rewrapped into a .panth-choice-card label by card-options.js |
| Date, Date & Time, Time | Native date, datetime-local or time input that fills Magento's hidden date and time fields on change |
Magento's own getDateHtml() and getTimeHtml() output inside a fieldset labelled by the option title; date-labels.js gives each select an accessible name (Month, Day, Year, Hour, Minute, AM/PM) |
Overriding templates
All templates are ordinary .phtml files and can be overridden in a theme under app/design/frontend/<Vendor>/<theme>/Panth_CustomOptions/templates/product/view/options/.
Developer Notes
- Module name:
Panth_CustomOptions. Composer package:mage2kishan/module-custom-options. PHP namespace:Panth\CustomOptions(the module contains no PHP classes besidesregistration.php). - Module sequence:
Magento_Catalog,Panth_Core. etc/frontend/di.xmladdsPanth_CustomOptionsto theregisteredModulesargument ofPanth\Core\ViewModel\ThemeConfig, which is howetc/theme-config.jsonis picked up.view/frontend/web/js/card-options.js(RequireJS modulePanth_CustomOptions/js/card-options, initialised fromluma/type/select.phtmlfor radio and checkbox options) clones each radio or checkbox input into a.panth-choice-cardlabel, moves the text of Magento's.price-noticeelement (the formatted option price, in any currency) into a.panth-choice-pricespan, and adds thepanth-inputclass toselect.product-custom-optionelements. Titles and prices are inserted as text, not HTML.view/frontend/web/js/date-labels.js(RequireJS modulePanth_CustomOptions/js/date-labels, initialised fromluma/type/date.phtml) sets a translatablearia-labelon each date and time select from the last part of its field name (month,day,year,hour,minute,day_part).- CSS hooks:
.panth-custom-options,.panth-opt-row,.panth-opt-label,.panth-opt-price,.panth-choice-row,.panth-file-zone(Hyva set);.panth-options-container,.panth-option-group,.panth-option-label,.panth-price-badge,.panth-choice-card,.panth-file-zone,.panth-input(Luma set). - ACL resource:
Panth_CustomOptions::config("Panth Custom Options") underMagento_Config::config. - Database: no
db_schema.xml, no tables.
Uninstallation
The module creates no tables. A saved value of panth_customoptions/general/enabled remains in core_config_data. Panth_Core (mage2kishan/module-core) is left installed; remove it separately if no other Panth module needs it.
Support
- Product page: Custom Product Options for Magento 2 (Hyva + Luma)
- Contact form: kishansavaliya.com/contact
- Email: [email protected]
- Bug reports: GitHub issues
Documentation
USER_GUIDE.md covers installation, checking that the module is active, the admin setting, the CSS custom properties, the supported option types and a troubleshooting table.
License
Commercial software license. See LICENSE.txt in this repository.
Changelog
See CHANGELOG.md.
Links
- Website: kishansavaliya.com
- All extensions: Magento extensions catalogue
- GitHub: mage2sk/module-custom-options
- Packagist: mage2kishan/module-custom-options
All versions of module-custom-options with dependencies
magento/framework Version ^103.0
magento/module-catalog Version ^104.0
magento/module-config Version ^101.2
magento/module-store Version ^101.1
mage2kishan/module-core Version ^1.0