I need to add some additional information in product options. I have already added a new field:
And also have already created plugin for changing option type select.php.
How can I get the value of this field and add it to select option and radio input as class or data-attribute? This is what I want to get as a result:
<select name="" id="select_17" class=" required product-custom-option admin__control-select" title="" data-selector="" aria-required="true">
<option value="29" price="0" data-field="test">Value 1 </option>
<option value="29" price="0" data-field="other">Value 2 </option>
</select>
and
<div class="control">
<div class="options-list nested" id="options-16-list">
<div class="field choice admin__field admin__field-option required">
<input data-field="test" class="radio admin__control-radio test required product-custom-option" name="options[16]" id="options_16_2" value="28" data-selector="options[16]" price="2" aria-required="true" type="radio"><label class="label admin__field-label" for="options_16_2"><span>Value</span> <span class="price-notice">+ <span class="price-container tax weee"><span data-price-amount="2" data-price-type="" class="price-wrapper ">$2.00</span></span></span></label>
</div>
</div><span id="options-16-container"></span>
</div>
All necessary code:
di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions" type="AGS\OptionField\Ui\DataProvider\Product\Form\Modifier\CustomOptions" />
<type name="Magento\Catalog\Block\Product\View\Options\Type\Select">
<plugin name="Ags_CategoryCustomAttribute_select" sortOrder="10" type="AGS\OptionField\Block\Magento\Catalog\Product\View\Options\Type\Select" />
</type>
</config>
CustomOptions.php
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace AGS\OptionField\Ui\DataProvider\Product\Form\Modifier;
use Magento\Catalog\Model\Locator\LocatorInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Catalog\Model\ProductOptions\ConfigInterface;
use Magento\Catalog\Model\Config\Source\Product\Options\Price as ProductOptionsPrice;
use Magento\Framework\UrlInterface;
use Magento\Framework\Stdlib\ArrayManager;
use Magento\Ui\Component\Modal;
use Magento\Ui\Component\Container;
use Magento\Ui\Component\DynamicRows;
use Magento\Ui\Component\Form\Fieldset;
use Magento\Ui\Component\Form\Field;
use Magento\Ui\Component\Form\Element\Input;
use Magento\Ui\Component\Form\Element\Select;
use Magento\Ui\Component\Form\Element\Checkbox;
use Magento\Ui\Component\Form\Element\ActionDelete;
use Magento\Ui\Component\Form\Element\DataType\Text;
use Magento\Ui\Component\Form\Element\DataType\Number;
use Magento\Framework\Locale\CurrencyInterface;
class CustomOptions extends \Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions
{
/**#@+
* Field values
*
*/
const FIELD_LINK_NAME = 'link';
/**
* Get config for grid for "select" types
*
* @param int $sortOrder
* @return array
*/
protected function getSelectTypeGridConfig($sortOrder)
{
return [
'arguments' => [
'data' => [
'config' => [
'addButtonLabel' => __('Add Value'),
'componentType' => DynamicRows::NAME,
'component' => 'Magento_Ui/js/dynamic-rows/dynamic-rows',
'additionalClasses' => 'admin__field-wide',
'deleteProperty' => static::FIELD_IS_DELETE,
'deleteValue' => '1',
'renderDefaultRecord' => false,
'sortOrder' => $sortOrder,
],
],
],
'children' => [
'record' => [
'arguments' => [
'data' => [
'config' => [
'componentType' => Container::NAME,
'component' => 'Magento_Ui/js/dynamic-rows/record',
'positionProvider' => static::FIELD_SORT_ORDER_NAME,
'isTemplate' => true,
'is_collection' => true,
],
],
],
'children' => [
static::FIELD_TITLE_NAME => $this->getTitleFieldConfig(10),
static::FIELD_PRICE_NAME => $this->getPriceFieldConfig(20),
static::FIELD_PRICE_TYPE_NAME => $this->getPriceTypeFieldConfig(30, ['fit' => true]),
static::FIELD_SKU_NAME => $this->getSkuFieldConfig(40),
static::FIELD_SORT_ORDER_NAME => $this->getPositionFieldConfig(50),
static::FIELD_LINK_NAME => $this->getLinkFieldConfig(55),
static::FIELD_IS_DELETE => $this->getIsDeleteFieldConfig(60)
]
]
]
];
}
/**
* Get config for "Inventory" fields
*
* @param $sortOrder
* @param array $options
* @return array
*/
protected function getLinkFieldConfig($sortOrder, array $options = [])
{
return array_replace_recursive(
[
'arguments' => [
'data' => [
'config' => [
'label' => __('Link'),
'componentType' => Field::NAME,
'formElement' => Input::NAME,
'dataScope' => static::FIELD_LINK_NAME,
'dataType' => Text::NAME,
'sortOrder' => $sortOrder,
'validation' => [
'required-entry' => true
],
],
],
],
],
$options
);
}
}
Select.php
<?php
namespace AGS\OptionField\Block\Magento\Catalog\Product\View\Options\Type;
class Select extends \Magento\Catalog\Block\Product\View\Options\AbstractOptions
{
/**
* Return html for control element
*
* @return string
* @SuppressWarnings(PHPMD.CyclomaticComplexity)
* @SuppressWarnings(PHPMD.NPathComplexity)
* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
*/
public function afterGetValuesHtml(\Magento\Catalog\Block\Product\View\Options\Type\Select $subject)
{
$_option = $subject->getOption();
$configValue = $subject->getProduct()->getPreconfiguredValues()->getData('options/' . $_option->getId());
$store = $subject->getProduct()->getStore();
$subject->setSkipJsReloadPrice(1);
// Remove inline prototype onclick and onchange events
if ($_option->getType() == \Magento\Catalog\Model\Product\Option::OPTION_TYPE_DROP_DOWN ||
$_option->getType() == \Magento\Catalog\Model\Product\Option::OPTION_TYPE_MULTIPLE
) {
$require = $_option->getIsRequire() ? ' required' : '';
$extraParams = '';
$select = $subject->getLayout()->createBlock(
'Magento\Framework\View\Element\Html\Select'
)->setData(
[
'id' => 'select_' . $_option->getId(),
'class' => $require . ' product-custom-option admin__control-select'
]
);
if ($_option->getType() == \Magento\Catalog\Model\Product\Option::OPTION_TYPE_DROP_DOWN) {
// $select->setName('options[' . $_option->getid() . ']')->addOption('', __('-- Please Select --'));
} else {
$select->setName('options[' . $_option->getid() . '][]');
$select->setClass('multiselect admin__control-multiselect' . $require . ' product-custom-option');
}
foreach ($_option->getValues() as $_value) {
$priceStr = $subject->_formatPrice(
[
'is_percent' => $_value->getPriceType() == 'percent',
'pricing_value' => $_value->getPrice($_value->getPriceType() == 'percent'),
],
false
);
$select->addOption(
$_value->getOptionTypeId(),
$_value->getTitle() . ' ' . strip_tags($priceStr) . '',
['price' => $subject->pricingHelper->currencyByStore($_value->getPrice(true), $store, false)]
);
}
if ($_option->getType() == \Magento\Catalog\Model\Product\Option::OPTION_TYPE_MULTIPLE) {
$extraParams = ' multiple="multiple"';
}
if (!$subject->getSkipJsReloadPrice()) {
$extraParams .= ' onchange="opConfig.reloadPrice()"';
}
$extraParams .= ' data-selector="' . $select->getName() . '"';
$select->setExtraParams($extraParams);
if ($configValue) {
$select->setValue($configValue);
}
return $select->getHtml();
}
if ($_option->getType() == \Magento\Catalog\Model\Product\Option::OPTION_TYPE_RADIO ||
$_option->getType() == \Magento\Catalog\Model\Product\Option::OPTION_TYPE_CHECKBOX
) {
$selectHtml = '<div class="options-list nested" id="options-' . $_option->getId() . '-list">';
$require = $_option->getIsRequire() ? ' required' : '';
$arraySign = '';
switch ($_option->getType()) {
case \Magento\Catalog\Model\Product\Option::OPTION_TYPE_RADIO:
$type = 'radio';
$class = 'radio admin__control-radio test';
if (!$_option->getIsRequire()) {
$selectHtml .= '<div class="field choice admin__field admin__field-option">' .
'<input type="radio" id="test_options_' .
$_option->getId() .
'" class="' .
$class .
' product-custom-option" name="options[' .
$_option->getId() .
']"' .
' data-selector="options[' . $_option->getId() . ']"' .
($subject->getSkipJsReloadPrice() ? '' : ' onclick="opConfig.reloadPrice()"') .
' value="" checked="checked" /><label class="label admin__field-label" for="options_' .
$_option->getId() .
'"><span>' .
__('None') . '</span></label></div>';
}
break;
case \Magento\Catalog\Model\Product\Option::OPTION_TYPE_CHECKBOX:
$type = 'checkbox';
$class = 'checkbox admin__control-checkbox';
$arraySign = '[]';
break;
}
$count = 1;
foreach ($_option->getValues() as $_value) {
$count++;
$priceStr = $subject->_formatPrice(
[
'is_percent' => $_value->getPriceType() == 'percent',
'pricing_value' => $_value->getPrice($_value->getPriceType() == 'percent'),
]
);
$htmlValue = $_value->getOptionTypeId();
if ($arraySign) {
$checked = is_array($configValue) && in_array($htmlValue, $configValue) ? 'checked' : '';
} else {
$checked = $configValue == $htmlValue ? 'checked' : '';
}
$dataSelector = 'options[' . $_option->getId() . ']';
if ($arraySign) {
$dataSelector .= '[' . $htmlValue . ']';
}
$dataLink = 'data-link="' . $_value->getLink() . '"';
$selectHtml .= '<div class="field choice admin__field admin__field-option' .
$require .
'">' .
'<input data-link="' .
$dataLink .
'" type="' .
$type .
'" class="' .
$class .
' ' .
$require .
' product-custom-option"' .
($subject->getSkipJsReloadPrice() ? '' : ' onclick="opConfig.reloadPrice()"') .
' name="options[' .
$_option->getId() .
']' .
$arraySign .
'" id="options_' .
$_option->getId() .
'_' .
$count .
'" value="' .
$htmlValue .
'" ' .
$checked .
' data-selector="' . $dataSelector . '"' .
' price="' .
$subject->pricingHelper->currencyByStore($_value->getPrice(true), $store, false) .
'" />' .
'<label class="label admin__field-label" for="options_' .
$_option->getId() .
'_' .
$count .
'"><span>' .
$_value->getTitle() .
'</span> ' .
$priceStr .
'</label>';
$selectHtml .= '</div>';
}
$selectHtml .= '</div>';
return $selectHtml;
}
}
}
Thanks a lot for any help!
UPD
Ok, I have found how to get info from this field and paste for options with type radio and checkbox.
My new question is, how can I check if the field is empty and hide data-link=""? And also, can I put Radio Checkbox for product options for choosing checked options on the product page?
