diff --git a/src/components/editor/ConfigPanel.tsx b/src/components/editor/ConfigPanel.tsx index b7da117..e60f67a 100644 --- a/src/components/editor/ConfigPanel.tsx +++ b/src/components/editor/ConfigPanel.tsx @@ -757,6 +757,43 @@ export const ConfigPanel: React.FC = ({ )} + {/* Poloha cenovky: pod / vedľa */} +
+ Poloha cenovky +
+ + +
+
+ {/* Rýchle ovládanie veľkosti (Width), zarovnania a paddingu */}
{/* Šírka */} @@ -1343,6 +1380,45 @@ export const ConfigPanel: React.FC = ({
)} + {/* Poloha cenovky: pod / vedľa */} + {p.badgeCustomTemplate && ( +
+ Poloha cenovky +
+ + +
+
+ )} + {/* Rýchle ovládanie veľkosti (Width), zarovnania a paddingu pre vernostnú cenovku */} {p.badgeCustomTemplate && (
diff --git a/src/lib/emailRenderer.ts b/src/lib/emailRenderer.ts index 55b3fd4..8de3557 100644 --- a/src/lib/emailRenderer.ts +++ b/src/lib/emailRenderer.ts @@ -637,6 +637,97 @@ function renderExactProductCard( ${p.stores?.tempo ? `
Tempo
` : ''} `; + const badgeLayout = p.badgeLayout || 'below'; + + // Pomocná funkcia na render samotnej cenovky (bez obalového ) + const renderBadgeContent = (bWidth: number, bAlign: string, padTop: number, padBottom: number, marginStyle: string) => { + if (p.badgeCustomTemplate) { + return ` + + + + +
+ ${renderCleanBadgeSvg(p.badgeCustomTemplate, p, bWidth)} +
`; + } + if (p.customBadgePngUrl) { + return ` + + + + +
+ ${escapeHtml(p.title || 'Cenovka')} +
`; + } + const mainFontSize = Math.max(28, Math.round(bWidth * 0.54)); + const subFontSize = Math.max(14, Math.round(bWidth * 0.27)); + return ` + + + + +
+ + ${badgeCustomTxt ? ` + + + ` : (p.discountText ? ` + + + ` : '')} + + + +
+ ${escapeHtml(badgeCustomTxt)} +
+ ${escapeHtml(p.badgeText || 'zľava')} + ${escapeHtml(p.discountText)} +
+ ${escapeHtml(p.priceMain)}${escapeHtml(p.priceSub)} +
+
`; + }; + + if (badgeLayout === 'side') { + // Rozloženie: obrázok vľavo | cenovka vpravo + const bWidth = p.badgeWidth || (p.badgeCustomTemplate ? (p.badgeCustomTemplate.width || 110) : 95); + const bAlign = 'center'; + const padTop = p.badgePaddingTop ?? (p.badgeCustomTemplate?.paddingTop ?? 0); + const padBottom = p.badgePaddingBottom ?? (p.badgeCustomTemplate?.paddingBottom ?? 0); + const marginStyle = 'margin: 0 auto;'; + return ` + + + + + + + + + + + + `; + } + + // Predvolené rozloženie: cenovka pod obrázkom return ` @@ -666,68 +757,13 @@ function renderExactProductCard( const bAlign = p.badgeAlign || (p.badgeCustomTemplate ? (p.badgeCustomTemplate.align || 'center') : 'center'); const padTop = p.badgePaddingTop ?? (p.badgeCustomTemplate?.paddingTop ?? 0); const padBottom = p.badgePaddingBottom ?? (p.badgeCustomTemplate?.paddingBottom ?? 0); - let marginStyle = 'margin: 0 auto;'; if (bAlign === 'left') { marginStyle = 'margin: 0 auto 0 0; margin-right: auto; margin-left: 0;'; } else if (bAlign === 'right') { marginStyle = 'margin: 0 0 0 auto; margin-left: auto; margin-right: 0;'; } - - // 1. Ak produkt má vlastnú dynamickú šablónu cenovky (čistý SVG vektor bez editovacích prvkov a so živou cenou) - if (p.badgeCustomTemplate) { - return ` - - - - -
- ${renderCleanBadgeSvg(p.badgeCustomTemplate, p, bWidth)} -
`; - } - - // 2. Ak je nahraná statická PNG cenovka - if (p.customBadgePngUrl) { - return ` - - - - -
- ${escapeHtml(p.title || 'Cenovka')} -
`; - } - - // 3. Predvolená COOP cenovka s plnou podporou šírky, zarovnania a odsadenia - const mainFontSize = Math.max(28, Math.round(bWidth * 0.54)); - const subFontSize = Math.max(14, Math.round(bWidth * 0.27)); - - return ` - - - - -
- - ${badgeCustomTxt ? ` - - - ` : (p.discountText ? ` - - - ` : '')} - - - -
- ${escapeHtml(badgeCustomTxt)} -
- ${escapeHtml(p.badgeText || 'zľava')} - ${escapeHtml(p.discountText)} -
- ${escapeHtml(p.priceMain)}${escapeHtml(p.priceSub)} -
-
`; + return renderBadgeContent(bWidth, bAlign, padTop, padBottom, marginStyle); })()} diff --git a/src/types/newsletter.ts b/src/types/newsletter.ts index 79c50e1..c9b6e14 100644 --- a/src/types/newsletter.ts +++ b/src/types/newsletter.ts @@ -40,6 +40,7 @@ export interface ProductItem { cardBgColor?: string; // HEX napr. "#feeaea" (fantasticky), "#fef0c7" (domace), "#dcb085" (grill) showSlovakFlag?: boolean; customBadgePngUrl?: string; // Voliteľná statická PNG cenovka + badgeLayout?: 'below' | 'side'; // Poloha cenovky: 'below' = pod obrázkom (default), 'side' = vedľa obrázka } export interface AnnouncementModuleData {