52 lines
2.8 KiB
JavaScript
52 lines
2.8 KiB
JavaScript
/*
|
||
* Gutenberg Block: Yoone Bundle Selector
|
||
* 在产品页插入混装产品选择与加购表单。
|
||
*/
|
||
(function(wp){
|
||
const { registerBlockType } = wp.blocks;
|
||
const { __ } = wp.i18n;
|
||
const { InspectorControls } = wp.blockEditor || wp.editor;
|
||
const { PanelBody, ToggleControl, TextControl } = wp.components;
|
||
|
||
registerBlockType('yoone/bundle-selector', {
|
||
title: __('Yoone Bundle Selector', 'yoone-product-bundles'),
|
||
icon: 'cart',
|
||
category: 'widgets',
|
||
attributes: {
|
||
useCurrentProduct: { type: 'boolean', default: true },
|
||
productId: { type: 'number', default: 0 },
|
||
},
|
||
description: __('在产品页显示“混装产品列表与加购”表单；可选择当前产品或指定产品ID。', 'yoone-product-bundles'),
|
||
edit: (props) => {
|
||
const { attributes, setAttributes } = props;
|
||
const { useCurrentProduct, productId } = attributes;
|
||
return (
|
||
wp.element.createElement('div', { className: 'yoone-pb-block-editor' },
|
||
wp.element.createElement(InspectorControls, null,
|
||
wp.element.createElement(PanelBody, { title: __('设置', 'yoone-product-bundles'), initialOpen: true },
|
||
wp.element.createElement(ToggleControl, {
|
||
label: __('使用当前产品页面', 'yoone-product-bundles'),
|
||
checked: !!useCurrentProduct,
|
||
onChange: (val) => setAttributes({ useCurrentProduct: !!val })
|
||
}),
|
||
!useCurrentProduct && wp.element.createElement(TextControl, {
|
||
label: __('指定产品ID（Mix and Match 类型）', 'yoone-product-bundles'),
|
||
type: 'number',
|
||
value: productId || 0,
|
||
onChange: (val) => setAttributes({ productId: parseInt(val || '0', 10) || 0 })
|
||
})
|
||
)
|
||
),
|
||
wp.element.createElement('div', { className: 'yoone-pb-block-preview' },
|
||
wp.element.createElement('p', null, __('Yoone Bundle Selector（编辑器预览）', 'yoone-product-bundles')),
|
||
wp.element.createElement('p', null, useCurrentProduct
|
||
? __('将渲染当前产品的混装选择表单（需为 Mix and Match 类型）。', 'yoone-product-bundles')
|
||
: __('将渲染指定产品ID的混装选择表单。', 'yoone-product-bundles')
|
||
)
|
||
)
|
||
)
|
||
);
|
||
},
|
||
save: () => null, // 由后端动态渲染
|
||
});
|
||
})(window.wp); |