From 78180e37d4928f88cbc87a4e6244b3b256f468a3 Mon Sep 17 00:00:00 2001 From: golovencoserghei Date: Mon, 25 May 2026 10:27:13 +0300 Subject: [PATCH] feat(woo): add WOOSaleBadge and WOOOutOfStockBadge for product archive - Add WOOSaleBadge and WOOOutOfStockBadge editor components with renderForEdit and renderForView methods - HTML structure (container/span) rendered by editor components; PHP placeholders return plain text only - Register components in ElementTypes enum and index.wp.ts - Add shortcode definitions with icons and keywords for Add Elements panel --- .../WOOOutOfStockBadge/defaultValue.json | 71 ++++++++++++ .../WordPress/WOOOutOfStockBadge/index.jsx | 108 ++++++++++++++++++ .../WordPress/WOOOutOfStockBadge/sidebar.js | 60 ++++++++++ .../WordPress/WOOOutOfStockBadge/styles.ts | 30 +++++ .../WordPress/WOOOutOfStockBadge/toolbar.js | 91 +++++++++++++++ .../WordPress/WOOSaleBadge/defaultValue.json | 71 ++++++++++++ .../WordPress/WOOSaleBadge/index.jsx | 108 ++++++++++++++++++ .../WordPress/WOOSaleBadge/sidebar.js | 60 ++++++++++ .../WordPress/WOOSaleBadge/styles.ts | 30 +++++ .../WordPress/WOOSaleBadge/toolbar.js | 91 +++++++++++++++ .../editor/js/editorComponents/index.wp.ts | 10 ++ .../Config/types/configs/ElementTypes.ts | 2 + .../js/shortcodeComponents/Shortcodes.ts | 8 ++ .../pro/WOOOutOfStockBadge.ts | 20 ++++ .../shortcodeComponents/pro/WOOSaleBadge.ts | 20 ++++ 15 files changed, 780 insertions(+) create mode 100644 public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/defaultValue.json create mode 100644 public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/index.jsx create mode 100644 public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/sidebar.js create mode 100644 public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/styles.ts create mode 100644 public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/toolbar.js create mode 100644 public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/defaultValue.json create mode 100644 public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/index.jsx create mode 100644 public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/sidebar.js create mode 100644 public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/styles.ts create mode 100644 public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/toolbar.js create mode 100644 public/editor-src/editor/js/shortcodeComponents/pro/WOOOutOfStockBadge.ts create mode 100644 public/editor-src/editor/js/shortcodeComponents/pro/WOOSaleBadge.ts diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/defaultValue.json b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/defaultValue.json new file mode 100644 index 000000000..b1d0ba19d --- /dev/null +++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/defaultValue.json @@ -0,0 +1,71 @@ +{ + "style": { + "families": { + "fontFamily": "lato", + "tabletFontFamily": null, + "mobileFontFamily": null + }, + + "customCSS": "", + + "fontStyle": "paragraph", + "fontFamilyType": "google", + "fontSize": 12, + "fontSizeSuffix": "px", + "fontWeight": 700, + "lineHeight": 1.8, + "letterSpacing": 2, + "variableFontWeight": 700, + "fontWidth": 100, + "fontSoftness": 0, + "bold": false, + "italic": false, + "underline": false, + "strike": false, + "uppercase": true, + "lowercase": false, + + "colorHex": "#ffffff", + "colorOpacity": 1, + "colorPalette": "", + + "tempColorOpacity": 1, + "tempColorPalette": "", + + "tabletFontStyle": "", + "tabletFontFamilyType": null, + "tabletFontSize": 11, + "tabletFontSizeSuffix": "px", + "tabletFontWeight": 700, + "tabletLineHeight": 1.8, + "tabletLetterSpacing": 1, + + "mobileFontStyle": "", + "mobileFontFamilyType": null, + "mobileFontSize": 11, + "mobileFontSizeSuffix": "px", + "mobileFontWeight": 700, + "mobileLineHeight": 1.8, + "mobileLetterSpacing": 1, + + "bgColorType": "solid", + "bgColorHex": "#95a5a6", + "bgColorOpacity": 1, + "bgColorPalette": "", + + "tempBgColorOpacity": 1, + "tempBgColorPalette": "", + + "borderRadiusType": "grouped", + "borderRadius": 3, + "borderTopLeftRadius": 3, + "borderTopRightRadius": 3, + "borderBottomRightRadius": 3, + "borderBottomLeftRadius": 3, + "borderRadiusSuffix": "px", + "borderTopLeftRadiusSuffix": "px", + "borderTopRightRadiusSuffix": "px", + "borderBottomRightRadiusSuffix": "px", + "borderBottomLeftRadiusSuffix": "px" + } +} diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/index.jsx b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/index.jsx new file mode 100644 index 000000000..084160fb1 --- /dev/null +++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/index.jsx @@ -0,0 +1,108 @@ +import classnames from "classnames"; +import React from "react"; +import CustomCSS from "visual/component/CustomCSS"; +import Toolbar from "visual/component/Toolbar"; +import EditorComponent from "visual/editorComponents/EditorComponent"; +import { DynamicContentHelper } from "visual/editorComponents/WordPress/common/DynamicContentHelper"; +import { makePlaceholder } from "visual/utils/dynamicContent"; +import { attachRefs } from "visual/utils/react"; +import { Wrapper } from "../../tools/Wrapper"; +import defaultValue from "./defaultValue.json"; +import * as sidebarConfig from "./sidebar"; +import { style } from "./styles"; +import * as toolbarConfig from "./toolbar"; + +export default class WOOOutOfStockBadge extends EditorComponent { + static defaultValue = defaultValue; + + static get componentId() { + return "WOOOutOfStockBadge"; + } + + renderForEdit(v, vs, vd) { + const className = classnames( + "brz-woo-out-of-stock-badge", + v.className, + this.css( + this.getComponentId(), + this.getId(), + style({ + v, + vs, + vd, + store: this.getReduxStore(), + contexts: this.getContexts() + }) + ) + ); + + const placeholder = makePlaceholder({ + content: "{{editor_product_archive_out_of_stock_badge}}" + }); + + return ( + + {({ ref: toolbarRef }) => ( + + {({ ref: cssRef }) => ( + attachRefs(el, [toolbarRef, cssRef]) + })} + > +
+ +
+ + )} + + )} + + ); + } + + renderForView(v, vs, vd) { + const className = classnames( + "brz-woo-out-of-stock-badge", + v.className, + this.css( + this.getComponentId(), + this.getId(), + style({ + v, + vs, + vd, + store: this.getReduxStore(), + contexts: this.getContexts() + }) + ) + ); + + const placeholder = makePlaceholder({ + content: "{{editor_product_archive_out_of_stock_badge}}" + }); + + return ( + + +
+ +
+ + + ); + } +} diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/sidebar.js b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/sidebar.js new file mode 100644 index 000000000..d312ebfd3 --- /dev/null +++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/sidebar.js @@ -0,0 +1,60 @@ +import { t } from "visual/utils/i18n"; + +export const title = () => t("Out of Stock Badge"); + +const getHtml = () => { + return ` +

${t( + "You can use the following selectors to create targeted CSS." + )}

+

+ element {...} +
+ element .child-element {...} +

`; +}; + +export function getItems() { + return [ + { + id: "sidebarTabs", + type: "sidebarTabs", + tabs: [ + { + id: "styles", + title: t("Styling"), + label: t("Styling"), + options: [ + { + id: "settingsTabs", + type: "tabs", + config: { + align: "start" + }, + devices: "desktop", + tabs: [ + { + id: "moreSettingsAdvanced", + label: t("Advanced"), + icon: "nc-cog", + options: [ + { + id: "customCSS", + label: t("Custom CSS"), + type: "codeMirror", + position: 45, + display: "block", + devices: "desktop", + helper: { content: getHtml() }, + placeholder: `element { ${t("CSS goes here")} }` + } + ] + } + ] + } + ] + } + ] + } + ]; +} diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/styles.ts b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/styles.ts new file mode 100644 index 000000000..10bf4ed27 --- /dev/null +++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/styles.ts @@ -0,0 +1,30 @@ +import { ElementModel } from "visual/component/Elements/Types"; +import { DynamicStylesProps } from "visual/types"; +import { renderStyles } from "visual/utils/cssStyle"; + +export function style(data: DynamicStylesProps) { + const styles = { + ".brz && .brz-woo-out-of-stock-badge__container": { + standart: ["cssStyleBorderRadius"] + }, + ".brz &&:hover .brz-woo-out-of-stock-badge__container": { + standart: ["cssStyleBgColor", "cssStyleBgGradient"] + }, + ".brz && .brz-woo-out-of-stock-badge__label": { + standart: [ + "cssStyleTypography2FontFamily", + "cssStyleTypography2FontSize", + "cssStyleTypography2LineHeight", + "cssStyleTypography2FontWeight", + "cssStyleTypography2LetterSpacing", + "cssStyleTypography2FontVariation", + "cssStyleTextTransforms" + ] + }, + ".brz &&:hover .brz-woo-out-of-stock-badge__label": { + standart: ["cssStyleColor"] + } + }; + + return renderStyles({ ...data, styles }); +} diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/toolbar.js b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/toolbar.js new file mode 100644 index 000000000..4243559df --- /dev/null +++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/toolbar.js @@ -0,0 +1,91 @@ +import { getColorToolbar } from "visual/utils/color"; +import { t } from "visual/utils/i18n"; +import { defaultValueValue } from "visual/utils/onChange"; +import { HOVER, NORMAL } from "visual/utils/stateMode"; + +export function getItems({ v, device, state }) { + const dvv = (key) => defaultValueValue({ v, key, device, state }); + + const bgColor = getColorToolbar( + dvv("bgColorPalette"), + dvv("bgColorHex"), + dvv("bgColorOpacity") + ); + + return [ + { + id: "toolbarTypography", + type: "popover", + config: { + icon: "nc-font", + size: device === "desktop" ? "large" : "auto", + title: t("Typography") + }, + roles: ["admin"], + position: 70, + options: [ + { + id: "", + type: "typography", + config: { + fontFamily: device === "desktop" + } + } + ] + }, + { + id: "toolbarColor", + type: "popover", + config: { + size: "medium", + title: t("Colors"), + icon: { + style: { + backgroundColor: bgColor + } + } + }, + roles: ["admin"], + devices: "desktop", + position: 80, + options: [ + { + id: "tabsColor", + type: "tabs", + tabs: [ + { + id: "tabBg", + label: t("Bg"), + options: [ + { + id: "", + type: "backgroundColor", + devices: "desktop", + states: [NORMAL, HOVER] + } + ] + }, + { + id: "tabText", + label: t("Text"), + options: [ + { + id: "color", + type: "colorPicker", + devices: "desktop", + states: [NORMAL, HOVER] + } + ] + } + ] + } + ] + }, + { + id: "advancedSettings", + type: "advancedSettings", + devices: "desktop", + position: 110 + } + ]; +} diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/defaultValue.json b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/defaultValue.json new file mode 100644 index 000000000..186b16e57 --- /dev/null +++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/defaultValue.json @@ -0,0 +1,71 @@ +{ + "style": { + "families": { + "fontFamily": "lato", + "tabletFontFamily": null, + "mobileFontFamily": null + }, + + "customCSS": "", + + "fontStyle": "paragraph", + "fontFamilyType": "google", + "fontSize": 12, + "fontSizeSuffix": "px", + "fontWeight": 700, + "lineHeight": 1.8, + "letterSpacing": 2, + "variableFontWeight": 700, + "fontWidth": 100, + "fontSoftness": 0, + "bold": false, + "italic": false, + "underline": false, + "strike": false, + "uppercase": true, + "lowercase": false, + + "colorHex": "#ffffff", + "colorOpacity": 1, + "colorPalette": "", + + "tempColorOpacity": 1, + "tempColorPalette": "", + + "tabletFontStyle": "", + "tabletFontFamilyType": null, + "tabletFontSize": 11, + "tabletFontSizeSuffix": "px", + "tabletFontWeight": 700, + "tabletLineHeight": 1.8, + "tabletLetterSpacing": 1, + + "mobileFontStyle": "", + "mobileFontFamilyType": null, + "mobileFontSize": 11, + "mobileFontSizeSuffix": "px", + "mobileFontWeight": 700, + "mobileLineHeight": 1.8, + "mobileLetterSpacing": 1, + + "bgColorType": "solid", + "bgColorHex": "#e74c3c", + "bgColorOpacity": 1, + "bgColorPalette": "", + + "tempBgColorOpacity": 1, + "tempBgColorPalette": "", + + "borderRadiusType": "grouped", + "borderRadius": 3, + "borderTopLeftRadius": 3, + "borderTopRightRadius": 3, + "borderBottomRightRadius": 3, + "borderBottomLeftRadius": 3, + "borderRadiusSuffix": "px", + "borderTopLeftRadiusSuffix": "px", + "borderTopRightRadiusSuffix": "px", + "borderBottomRightRadiusSuffix": "px", + "borderBottomLeftRadiusSuffix": "px" + } +} diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/index.jsx b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/index.jsx new file mode 100644 index 000000000..6c393f309 --- /dev/null +++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/index.jsx @@ -0,0 +1,108 @@ +import classnames from "classnames"; +import React from "react"; +import CustomCSS from "visual/component/CustomCSS"; +import Toolbar from "visual/component/Toolbar"; +import EditorComponent from "visual/editorComponents/EditorComponent"; +import { DynamicContentHelper } from "visual/editorComponents/WordPress/common/DynamicContentHelper"; +import { makePlaceholder } from "visual/utils/dynamicContent"; +import { attachRefs } from "visual/utils/react"; +import { Wrapper } from "../../tools/Wrapper"; +import defaultValue from "./defaultValue.json"; +import * as sidebarConfig from "./sidebar"; +import { style } from "./styles"; +import * as toolbarConfig from "./toolbar"; + +export default class WOOSaleBadge extends EditorComponent { + static defaultValue = defaultValue; + + static get componentId() { + return "WOOSaleBadge"; + } + + renderForEdit(v, vs, vd) { + const className = classnames( + "brz-woo-sale-badge", + v.className, + this.css( + this.getComponentId(), + this.getId(), + style({ + v, + vs, + vd, + store: this.getReduxStore(), + contexts: this.getContexts() + }) + ) + ); + + const placeholder = makePlaceholder({ + content: "{{editor_product_archive_sale_badge}}" + }); + + return ( + + {({ ref: toolbarRef }) => ( + + {({ ref: cssRef }) => ( + attachRefs(el, [toolbarRef, cssRef]) + })} + > +
+ +
+ + )} + + )} + + ); + } + + renderForView(v, vs, vd) { + const className = classnames( + "brz-woo-sale-badge", + v.className, + this.css( + this.getComponentId(), + this.getId(), + style({ + v, + vs, + vd, + store: this.getReduxStore(), + contexts: this.getContexts() + }) + ) + ); + + const placeholder = makePlaceholder({ + content: "{{editor_product_archive_sale_badge}}" + }); + + return ( + + +
+ +
+ + + ); + } +} diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/sidebar.js b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/sidebar.js new file mode 100644 index 000000000..d60b65187 --- /dev/null +++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/sidebar.js @@ -0,0 +1,60 @@ +import { t } from "visual/utils/i18n"; + +export const title = () => t("Sale Badge"); + +const getHtml = () => { + return ` +

${t( + "You can use the following selectors to create targeted CSS." + )}

+

+ element {...} +
+ element .child-element {...} +

`; +}; + +export function getItems() { + return [ + { + id: "sidebarTabs", + type: "sidebarTabs", + tabs: [ + { + id: "styles", + title: t("Styling"), + label: t("Styling"), + options: [ + { + id: "settingsTabs", + type: "tabs", + config: { + align: "start" + }, + devices: "desktop", + tabs: [ + { + id: "moreSettingsAdvanced", + label: t("Advanced"), + icon: "nc-cog", + options: [ + { + id: "customCSS", + label: t("Custom CSS"), + type: "codeMirror", + position: 45, + display: "block", + devices: "desktop", + helper: { content: getHtml() }, + placeholder: `element { ${t("CSS goes here")} }` + } + ] + } + ] + } + ] + } + ] + } + ]; +} diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/styles.ts b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/styles.ts new file mode 100644 index 000000000..b0d8d4525 --- /dev/null +++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/styles.ts @@ -0,0 +1,30 @@ +import { ElementModel } from "visual/component/Elements/Types"; +import { DynamicStylesProps } from "visual/types"; +import { renderStyles } from "visual/utils/cssStyle"; + +export function style(data: DynamicStylesProps) { + const styles = { + ".brz && .brz-woo-sale-badge__container": { + standart: ["cssStyleBorderRadius"] + }, + ".brz &&:hover .brz-woo-sale-badge__container": { + standart: ["cssStyleBgColor", "cssStyleBgGradient"] + }, + ".brz && .brz-woo-sale-badge__sale": { + standart: [ + "cssStyleTypography2FontFamily", + "cssStyleTypography2FontSize", + "cssStyleTypography2LineHeight", + "cssStyleTypography2FontWeight", + "cssStyleTypography2LetterSpacing", + "cssStyleTypography2FontVariation", + "cssStyleTextTransforms" + ] + }, + ".brz &&:hover .brz-woo-sale-badge__sale": { + standart: ["cssStyleColor"] + } + }; + + return renderStyles({ ...data, styles }); +} diff --git a/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/toolbar.js b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/toolbar.js new file mode 100644 index 000000000..4243559df --- /dev/null +++ b/public/editor-src/editor/js/editorComponents/WordPress/WOOSaleBadge/toolbar.js @@ -0,0 +1,91 @@ +import { getColorToolbar } from "visual/utils/color"; +import { t } from "visual/utils/i18n"; +import { defaultValueValue } from "visual/utils/onChange"; +import { HOVER, NORMAL } from "visual/utils/stateMode"; + +export function getItems({ v, device, state }) { + const dvv = (key) => defaultValueValue({ v, key, device, state }); + + const bgColor = getColorToolbar( + dvv("bgColorPalette"), + dvv("bgColorHex"), + dvv("bgColorOpacity") + ); + + return [ + { + id: "toolbarTypography", + type: "popover", + config: { + icon: "nc-font", + size: device === "desktop" ? "large" : "auto", + title: t("Typography") + }, + roles: ["admin"], + position: 70, + options: [ + { + id: "", + type: "typography", + config: { + fontFamily: device === "desktop" + } + } + ] + }, + { + id: "toolbarColor", + type: "popover", + config: { + size: "medium", + title: t("Colors"), + icon: { + style: { + backgroundColor: bgColor + } + } + }, + roles: ["admin"], + devices: "desktop", + position: 80, + options: [ + { + id: "tabsColor", + type: "tabs", + tabs: [ + { + id: "tabBg", + label: t("Bg"), + options: [ + { + id: "", + type: "backgroundColor", + devices: "desktop", + states: [NORMAL, HOVER] + } + ] + }, + { + id: "tabText", + label: t("Text"), + options: [ + { + id: "color", + type: "colorPicker", + devices: "desktop", + states: [NORMAL, HOVER] + } + ] + } + ] + } + ] + }, + { + id: "advancedSettings", + type: "advancedSettings", + devices: "desktop", + position: 110 + } + ]; +} diff --git a/public/editor-src/editor/js/editorComponents/index.wp.ts b/public/editor-src/editor/js/editorComponents/index.wp.ts index e89af6cda..62eab4e6d 100644 --- a/public/editor-src/editor/js/editorComponents/index.wp.ts +++ b/public/editor-src/editor/js/editorComponents/index.wp.ts @@ -110,6 +110,8 @@ import WOOAddToCart from "./WordPress/WOOAddToCart"; import WOOAttributes from "./WordPress/WOOAttributes"; import WOOCart from "./WordPress/WOOCart"; import WOOCategories from "./WordPress/WOOCategories"; +import WOOOutOfStockBadge from "./WordPress/WOOOutOfStockBadge"; +import WOOSaleBadge from "./WordPress/WOOSaleBadge"; import WOOExcerpt from "./WordPress/WOOExcerpt"; import WOOGallery from "./WordPress/WOOGallery"; import WOOPages from "./WordPress/WOOPages"; @@ -664,6 +666,14 @@ function getShortcodes(config: ConfigCommon) { WOORating: { id: ElementTypes.WOORating, component: WOORating + }, + WOOSaleBadge: { + id: ElementTypes.WOOSaleBadge, + component: WOOSaleBadge + }, + WOOOutOfStockBadge: { + id: ElementTypes.WOOOutOfStockBadge, + component: WOOOutOfStockBadge } } : {}) diff --git a/public/editor-src/editor/js/global/Config/types/configs/ElementTypes.ts b/public/editor-src/editor/js/global/Config/types/configs/ElementTypes.ts index b17ccac90..704535fe9 100644 --- a/public/editor-src/editor/js/global/Config/types/configs/ElementTypes.ts +++ b/public/editor-src/editor/js/global/Config/types/configs/ElementTypes.ts @@ -88,6 +88,8 @@ export enum ElementTypes { WOOCategories = "WOOCategories", WOOPages = "WOOPages", WOOCart = "WOOCart", + WOOSaleBadge = "WOOSaleBadge", + WOOOutOfStockBadge = "WOOOutOfStockBadge", WPPostContent = "WPPostContent", WPPostInfo = "WPPostInfo", WPBreadcrumbs = "WPBreadcrumbs", diff --git a/public/editor-src/editor/js/shortcodeComponents/Shortcodes.ts b/public/editor-src/editor/js/shortcodeComponents/Shortcodes.ts index bf70f6720..61feb8661 100644 --- a/public/editor-src/editor/js/shortcodeComponents/Shortcodes.ts +++ b/public/editor-src/editor/js/shortcodeComponents/Shortcodes.ts @@ -134,6 +134,8 @@ import getWOOProductContent from "./pro/WOOProductContent"; import getWOOProductMeta from "./pro/WOOProductMeta"; import getWOOProductTitle from "./pro/WOOProductTitle"; import getWOORating from "./pro/WOORating"; +import getWOOSaleBadge from "./pro/WOOSaleBadge"; +import getWOOOutOfStockBadge from "./pro/WOOOutOfStockBadge"; import getWOOSku from "./pro/WOOSku"; import getWOOStock from "./pro/WOOStock"; import getWOOUpsell from "./pro/WOOUpsell"; @@ -313,6 +315,8 @@ export function getProShortCodes( WOOSku: true, WOOProductMeta: true, WOORating: true, + WOOSaleBadge: true, + WOOOutOfStockBadge: true, WOOAttributes: true, WOOUpsell: true, WOOBreadcrumbs: true, @@ -481,6 +485,8 @@ export const ShortCodesKeywords: Record = { WOOSku: "product SKU, stock keeping unit, identifier", WOOProductMeta: "product meta data, additional information, details", WOORating: "product rating, reviews, feedback", + WOOSaleBadge: "sale badge, discount, on sale", + WOOOutOfStockBadge: "out of stock badge, unavailable, sold out", WOOAttributes: "product attributes, variations, options", WOOUpsell: "upsell, related products, recommendations", WOOBreadcrumbs: "product breadcrumbs, navigation, path", @@ -639,6 +645,8 @@ export function getSampleShortCodes(config: ConfigCommon) { WOOProductMeta: getWOOProductMeta(), WOOProductTitle: getWOOProductTitle(), WOORating: getWOORating(), + WOOSaleBadge: getWOOSaleBadge(), + WOOOutOfStockBadge: getWOOOutOfStockBadge(), WOOSku: getWOOSku(), WOOStock: getWOOStock(), WOOUpsell: getWOOUpsell(), diff --git a/public/editor-src/editor/js/shortcodeComponents/pro/WOOOutOfStockBadge.ts b/public/editor-src/editor/js/shortcodeComponents/pro/WOOOutOfStockBadge.ts new file mode 100644 index 000000000..bf0a7eafc --- /dev/null +++ b/public/editor-src/editor/js/shortcodeComponents/pro/WOOOutOfStockBadge.ts @@ -0,0 +1,20 @@ +import { t } from "visual/utils/i18n"; + +export default function () { + return { + id: "WOOOutOfStockBadge", + title: t("Out of Stock Badge"), + icon: "nc-woo-out-of-stock-badge", + resolve: { + type: "Wrapper", + value: { + _styles: ["wrapper", "wrapper--WOOOutOfStockBadge"], + items: [ + { + type: "WOOOutOfStockBadge" + } + ] + } + } + }; +} diff --git a/public/editor-src/editor/js/shortcodeComponents/pro/WOOSaleBadge.ts b/public/editor-src/editor/js/shortcodeComponents/pro/WOOSaleBadge.ts new file mode 100644 index 000000000..f1c951e3a --- /dev/null +++ b/public/editor-src/editor/js/shortcodeComponents/pro/WOOSaleBadge.ts @@ -0,0 +1,20 @@ +import { t } from "visual/utils/i18n"; + +export default function () { + return { + id: "WOOSaleBadge", + title: t("Sale Badge"), + icon: "nc-woo-sale-badge", + resolve: { + type: "Wrapper", + value: { + _styles: ["wrapper", "wrapper--WOOSaleBadge"], + items: [ + { + type: "WOOSaleBadge" + } + ] + } + } + }; +}