@total_onion/onion-library 2.0.252 → 2.0.255

package/components/block-single-responsive-image-v3/single-responsive-image-v3.twig

@@ -11,12 +11,9 @@
 		{{sectionStyles}}
 	}
 </style>
-<section
-	{{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{fields.section_class}} {{classNameEntryPoint}} lazy-fade {{block.id}}" data-jsload="false" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{fields.section_class}} {{classNameEntryPoint}} lazy-fade {{block.id}}" data-jsload="false" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
 
-	<!--pattern-replace-start:component/responsive-image -->
 	{{ include('components/responsive-image-v3.twig', { fields, block, blockClassName }, with_context = false) }}
-	<!--pattern-replace-end:component/responsive-image -->
 
 	{% if fields.animations.enable_animations %}
 		{{ include('components/animations-style-v3.twig', { fields, block, blockClassName }, with_context = false) }}

package/components/component-buy-now-button-v3/buy-now-buttons-v3.twig

@@ -0,0 +1,69 @@
+{% set product = post %}
+{% set buyNowOptionSelect = product.meta('buy_now_option_select') %}
+{% if buyNowOptionSelect|ru == 'link' %}
+	{% set productDirectLink = product.meta('direct_link') %}
+	{% set directLinkTarget = '_blank' %}
+	<a href="{{productDirectLink.url}}" class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}}" target="{{directLinkTarget}}" title="{{productDirectLink.title}}">{{productDirectLink.title}}</a>
+{% endif %}
+{% if buyNowOptionSelect|ru == 'ctb' %}
+	{% if cta.cta_buy_now_text is not empty %}
+		{% set productCtbPimid = product.meta('click_to_buy_pim_id') %}
+		<a href="#" class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}}" data-ctbuy data-ctbuy-variant="{{productCtbPimid}}" data-ctbuy-country="" data-ctbuy-lang="" data-ctbuy-default-view="" data-ctbuy-customquerystring="" data-ctbuy-direct-link="" title="{{cta.cta_buy_now_text}}">{{cta.cta_buy_now_text}}</a>
+	{% endif %}
+{% endif %}
+{% if buyNowOptionSelect|ru == "ctb-pricespider" %}
+	{% set enablePricespider = attribute(market_settings['e-shop_settings'], 'enable_pricespider') %}
+	{% set productCtbPriceSpicerSku = product.meta('pricespider_sku_id') %}
+	{% if enablePricespider and productCtbPriceSpicerSku is not empty %}
+		<a class="ps-widget {{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}}" ps-sku="{{productCtbPriceSpicerSku}}"></a>
+	{% endif %}
+{% endif %}
+{% if buyNowOptionSelect|ru == 'wtb' %}
+	{% if cta.cta_buy_now_text is not empty %}
+		{% set productPimDebrainId = product.meta('debrain_pim_id') %}
+		<a href="#" class="dloc-link {{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}}" data-action="where-to-buy" data-filter="{{productPimDebrainId}}">{{cta.cta_buy_now_text}}</a>
+	{% endif %}
+{% endif %}
+{% if buyNowOptionSelect|ru == 'wtb-v2' %}
+	{% set productDebrainSkuId = product.meta('debrain_sku_id') %}
+	{% if productDebrainSkuId is not empty %}
+		<wtb-button sku={{productDebrainSkuId}} class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}}">{{cta.cta_buy_now_text}}</wtb-button>
+	{% endif %}
+{% endif %}
+{% if buyNowOptionSelect|ru == 'mikmak' %}
+	{% set productEANs = product.meta('mikmak_ean_ids') %}
+	{% set relatedProducts = product.meta('related_products') %}
+	{% set drawer_widget_id = attribute(market_settings['e-shop_settings'], 'mikmak_ctb_drawer_widget_id') %}
+
+	{% set relatedProductEANs = '' %}
+	{% for post in relatedProducts %}
+		{% set relatedProduct = get_post(post) %}
+		{% set relatedProductEANs = relatedProductEANs ~ ',' ~ relatedProduct.meta('mikmak_ean_ids')|trim(',') %}
+	{% endfor %}
+	{% set relatedProductEANs = relatedProductEANs|trim(',') %}
+
+	{% if productEANs is not empty and drawer_widget_id is not empty %}
+		{% set totalProductEANs = productEANs ~ (relatedProductEANs is not empty ? ',' ~ relatedProductEANs : '') %}
+		<a href="#" data-mm-wtbid="{{drawer_widget_id}}" data-mm-ids="{{totalProductEANs}}" class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}} mikmak-buy-now">{{cta.cta_buy_now_text}}</a>
+	{% endif %}
+{% endif %}
+{% if buyNowOptionSelect|ru == 'reservebar' %}
+	{% if cta.cta_buy_now_text is not empty %}
+		{% set reserveBarLiquidId = product.meta('reserve_bar_liquid_grouping_id') %}
+		<a href="#" class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}} reservebar-popup-trigger" reservebar-liquid-id="{{reserveBarLiquidId}}">{{cta.cta_buy_now_text}}</a>
+	{% endif %}
+{% endif %}
+{% if buyNowOptionSelect|ru == 'shopify' %}
+	{% if product.shopify_id is not empty %}
+
+
+		<div class="shopify-wrapper shopify-integration has-shop shop-shopify" data-extraclasses="{{style_classes}}" data-pim="{{product.shopify_id}}" data-label="{{product.meta.buy_now_button_text|default("Add to cart")}}" data-cask-name="{{product.cask_name}}" data-vol="{{product.volume}}"></div>
+	{% endif %}
+	{% if product.shopify_id_engraved is not empty %}
+
+		<div class="shopify-wrapper shopify-integration has-shop shop-shopify engraved" data-extraclasses="{{style_classes}}" data-pim="{{product.shopify_id_engraved}}" data-label="{{product.buy_now_button_text_alt|default(" buy engraved")}}" data-cask-name="{{product.cask_name}}" data-vol="{{product.volume}}"></div>
+
+
+	{% endif %}
+
+{% endif %}

package/components/component-responsive-image-v3/responsive-image-v3.twig

@@ -1,17 +1,18 @@
 {% if fields.enable_image|default(fields.image_enabled) %}
-	{% set renderDynamic = fields.child_patterns.render_dynamic|default(0) %}
-	{% set suffix = fields.child_patterns.suffix %}
-
-	{% set desktopType = fields.desktop_image_aspect_ratio|ru|default('original') %}
-	{% set tabletType = fields.tablet_image_aspect_ratio|ru|default('original') %}
-	{% set mobileType = fields.mobile_image_aspect_ratio|ru|default('original') %}
 
 	{% set desktopImage = get_image(fields.desktop_image) %}
 	{% set tabletImage = get_image(fields.tablet_image)|default(desktopImage) %}
 	{% set mobileImage = get_image(fields.mobile_image) %}
 
+	{% set renderDynamic = fields.child_patterns.render_dynamic|default(0) %}
+	{% set suffix = fields.child_patterns.suffix %}
+
+	{% set selectedAspectRatioDesktop = fields.desktop_custom_aspect_ratio|default(desktopImage.width ~ '/' ~ desktopImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+	{% set selectedAspectRatioTablet = fields.tablet_custom_aspect_ratio|default(desktopImage.width ~ '/' ~ desktopImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+	{% set selectedAspectRatioMobile = fields.mobile_custom_aspect_ratio|default(desktopImage.width ~ '/' ~ desktopImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+
 	{% set imageSizes = fields.custom_image_sizes %}
-	{% set sizes = imageSizes|default('(min-width: 1440px) 100vw, (min-width: 1024px) 1024px, (min-width: 768px) 768px, (min-width: 500px) 100vw, 250px') %}
+	{% set sizes = imageSizes|default('auto, (min-width: 1440px) 100vw, (min-width: 1024px) 1024px, (min-width: 768px) 768px, (min-width: 500px) 100vw, 250px') %}
 
 	{% set imageFitStyle = '--image-fit-style:' ~ (fields.image_fit_style|ru|default('cover')) ~ ';' %}
 	{% set imageObjectPositionAlign = '--image-object-position-align:' ~ (fields.image_object_position_align|ru) ~ ';' %}
@@ -23,9 +24,6 @@
 	{% set imagePosition = '--image-position:' ~ fields.image_position|ru ~ ';' %}
 	{% set imageGridArea = '--image-grid-area:' ~ fields.image_grid_area|ru|default('main') ~ ';' %}
 	{% set imageBorderRadius = '--image-border-radius:' ~ fields.image_border_radius ~ ';' %}
-	{% set imageAspectRatioDesktop = '--image-aspect-ratio-desktop:' ~ fields.image_aspect_ratio_desktop ~ ';' %}
-	{% set imageAspectRatioPortrait = '--image-aspect-ratio-portrait:' ~ fields.image_aspect_ratio_portrait ~ ';' %}
-	{% set imageAspectRatioMobile = '--image-aspect-ratio-mobile:' ~ fields.image_aspect_ratio_mobile ~ ';' %}
 	{% set imageOffsetVert = '--image-offset-vert:' ~ fields.image_offset_vertical ~ '%;' %}
 	{% set imageOffsetHoriz = '--image-offset-horiz:' ~ fields.image_offset_horizontal ~ '%;' %}
 	{% set enableImageBorder = fields.enable_image_border %}
@@ -41,98 +39,33 @@
 	{% set pictureStylesString = imageFitStyle ~ imageObjectPositionAlign ~ imageWidth ~ imageWidthMobile ~ imageWidthPortrait ~ imageOpacity ~ imageAspectRatioDesktop ~ imageAspectRatioPortrait ~ imageAspectRatioMobile ~ imageOffsetVert ~ imageOffsetHoriz ~ imageBorderRadius ~ imagePosition ~ imageGridArea ~ imageMinHeightMobile ~ imageMinHeightDesktop ~ subtractHeaderHeight ~ imageZIndex %}
 	{% set enableEagerLoading = fields.enable_eager_image_loading ? 'loading="eager" fetchpriority="high"' : 'loading="lazy"' %}
 
-	{% set selectedAspectRatioDesktop = fields.desktop_image_aspect_ratio|ru %}
-	{% set selectedAspectRatioTablet = fields.tablet_image_aspect_ratio|ru %}
-	{% set selectedAspectRatioMobile = fields.mobile_image_aspect_ratio|ru %}
-
-	{% if selectedAspectRatioDesktop == 'original' %}
-		{% set isSVG = desktopImage.post_mime_type == 'image/svg+xml' %}
-		{% set selectedAspectRatioDesktop = null %}
-		{% set mainImageSrc = isSVG ? desktopImage.src : gt_image_mainsrc(desktopImage) %}
-		{% set desktopSrcset = isSVG ? desktopImage.src : gt_image_srcset(desktopImage) %}
-	{% elseif selectedAspectRatioDesktop == 'custom_aspect_ratio' %}
-		{% set isSVG = desktopImage.post_mime_type == 'image/svg+xml' %}
-		{% set customAspectRatio = fields.desktop_custom_aspect_ratio %}
-		{% set mainImageSrc = isSVG ? desktopImage.src : gt_image_mainsrc(desktopImage, {"aspect_ratio": customAspectRatio|replace({'/' : 'x', ':' : 'x'})}) %}
-		{% set desktopSrcset = isSVG ? desktopImage.src : gt_image_srcset(desktopImage, {"aspect_ratio": customAspectRatio|replace({'/' : 'x', ':' : 'x'})}) %}
-	{% else %}
-		{% set isSVG = desktopImage.post_mime_type == 'image/svg+xml' %}
-		{% set mainImageSrc = isSVG ? desktopImage.src : gt_image_mainsrc(desktopImage, {"aspect_ratio" : selectedAspectRatioDesktop}) %}
-		{% set desktopSrcset = isSVG ? desktopImage.src : gt_image_srcset(desktopImage, {"aspect_ratio" : selectedAspectRatioDesktop}) %}
-	{% endif %}
-
-	{% if selectedAspectRatioTablet == 'original' %}
-		{% set isSVG = tabletImage.post_mime_type == 'image/svg+xml' %}
-		{% set selectedAspectRatioTablet = null %}
-		{% set tabletSrcset =  isSVG ? tabletImage.src : gt_image_srcset(tabletImage)%}
-	{% elseif selectedAspectRatioTablet == 'custom_aspect_ratio' %}
-		{% set isSVG = tabletImage.post_mime_type == 'image/svg+xml' %}
-		{% set customAspectRatio = fields.tablet_custom_aspect_ratio %}
-		{% set mainImageSrc = isSVG ? tabletImage.src : gt_image_mainsrc(tabletImage, {"aspect_ratio": customAspectRatio|replace({'/' : 'x', ':' : 'x'})}) %}
-		{% set tabletSrcset = isSVG ? tabletImage.src : gt_image_srcset(tabletImage, {"aspect_ratio": customAspectRatio|replace({'/' : 'x', ':' : 'x'})}) %}
-	{% else %}
-		{% set isSVG = tabletImage.post_mime_type == 'image/svg+xml' %}
-		{% set tabletSrcset =  isSVG ? tabletImage.src : gt_image_srcset(tabletImage, {"aspect_ratio" : selectedAspectRatioTablet})%}
-	{% endif %}
-
-	{% if selectedAspectRatioMobile == 'original' %}
-		{% set isSVG = mobileImage.post_mime_type == 'image/svg+xml' %}
-		{% set selectedAspectRatioMobile = null %}
-		{% set mobileSrcset =  isSVG ? mobileImage.src : gt_image_srcset(mobileImage) %}
-	{% elseif selectedAspectRatioMobile == 'custom_aspect_ratio' %}
-		{% set isSVG = mobileImage.post_mime_type == 'image/svg+xml' %}
-		{% set customAspectRatio = fields.mobile_custom_aspect_ratio %}
-		{% set mainImageSrc = isSVG ? mobileImage.src : gt_image_mainsrc(mobileImage, {"aspect_ratio": customAspectRatio|replace({'/' : 'x', ':' : 'x'})}) %}
-		{% set mobileSrcset = isSVG ? mobileImage.src : gt_image_srcset(mobileImage, {"aspect_ratio": customAspectRatio|replace({'/' : 'x', ':' : 'x'})}) %}
-	{% else %}
-		{% set isSVG = mobileImage.post_mime_type == 'image/svg+xml' %}
-		{% set mobileSrcset =  isSVG ? mobileImage.src : gt_image_srcset(mobileImage, {"aspect_ratio" : selectedAspectRatioMobile})%}
-	{% endif %}
 	{% set parallaxEnabled = fields.parallax_enabled %}
 	{% if parallaxEnabled %}
 		{% set parallaxDepth = 'data-depth=' ~ fields.parallax_depth ~ " " %}
 		{% set parallaxOffsetY = 'data-y-offset=' ~ fields.parallax_offset_y ~ " " %}
 	{% endif %}
+	{% set picture_id = block.id %}
 
 	<style>
-		.{{blockClassName|default('cbl-image')}}__picture.{{block.id}}{
+		.single-responsive-image-v3__picture.{{picture_id|default(block.id)}}{
 			{{pictureStylesString}}
 			{{imageBorderString}}
-			{% if selectedAspectRatioDesktop == 'custom_aspect_ratio' %}
-				--image-aspect-ratio-desktop: {{fields.desktop_custom_aspect_ratio}}
-				;
-			{% elseif selectedAspectRatioDesktop %}
-				--image-aspect-ratio-desktop: {{selectedAspectRatioDesktop|replace({'x': '/'})}}
-				;
-			{% endif %}
-
-			{% if selectedAspectRatioTablet == 'custom_aspect_ratio' %}
-				--image-aspect-ratio-portrait: {{fields.tablet_custom_aspect_ratio}}
-				;
-			{% elseif selectedAspectRatioTablet %}
-				--image-aspect-ratio-portrait: {{selectedAspectRatioTablet|replace({'x': '/'})}}
-				;
-			{% endif %}
-
-			{% if selectedAspectRatioMobile == 'custom_aspect_ratio' %}
-				--image-aspect-ratio-mobile: {{fields.mobile_custom_aspect_ratio}}
-				;
-			{% elseif selectedAspectRatioMobile %}
-				--image-aspect-ratio-mobile: {{selectedAspectRatioMobile|replace({'x': '/'})}}
-				;
-			{% endif %}
+			--image-aspect-ratio-desktop: {{selectedAspectRatioDesktop|replace({'x': '/'})}}
+			;
+			--image-aspect-ratio-portrait: {{selectedAspectRatioTablet|replace({'x': '/'})}}
+			;
+			--image-aspect-ratio-mobile: {{selectedAspectRatioMobile|replace({'x': '/'})}}
+			;
 		}
 	</style>
-	<picture class="{{ blockClassName|default('cbl-image') }}__picture {{block.id}}" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" data-assetkey="responsive-image" data-enableparallax="{{ parallaxEnabled }}">
-		{% if desktopImage %}
-			<source data-type="srcSetDesktop" data-pattern-suffix="{{suffix}}" media="(min-width: 1024px)" class="{{ blockClassName|default('cbl-image') }}__source {{ blockClassName|default('cbl-image') }}--desktop" width="{{ desktopImage.width }}" height="{{ desktopImage.height }}" sizes="{{ sizes }}" srcset="{{desktopSrcset}}"/>
-		{% endif %}
-		{% if tabletImage %}
-			<source data-type="srcSetTablet" data-pattern-suffix="{{suffix}}" media="(min-width: 768px)" width="{{ tabletImage.width }}" height="{{ tabletImage.height }}" class="{{ blockClassName|default('cbl-image') }}__source {{ blockClassName|default('cbl-image') }}--tablet" sizes="{{ sizes }}" srcset="{{ tabletSrcset }}"/>
-		{% endif %}
-		{% if mobileImage %}
-			<source data-type="srcSetMobile" data-pattern-suffix="{{suffix}}" class="{{ blockClassName|default('cbl-image') }}__source {{ blockClassName|default('cbl-image') }}__source--mobile" width="{{ mobileImage.width }}" height="{{ mobileImage.height }}" sizes="{{ sizes }}" srcset="{{ mobileSrcset }}"/>
-		{% endif %}
-		<img data-type="srcGeneral" data-elementname="main-image" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" {{ enableEagerLoading }} class="{{ blockClassName|default('cbl-image') }}__image" src="{{mainImageSrc}}" alt="{{ desktopImage.alt }}" {{ parallaxDepth }} {{ parallaxOffsetY }}/>
-	</picture>
+
+	<!--pattern-replace-var:selectedAspectRatioDesktop={{selectedAspectRatioDesktop}}-->
+	<!--pattern-replace-var:selectedAspectRatioTablet={{selectedAspectRatioTablet}}-->
+	<!--pattern-replace-var:selectedAspectRatioMobile={{selectedAspectRatioMobile}}-->
+	<!--pattern-replace-var:sizes={{sizes}}-->
+	<!--pattern-replace-var:picture_id={{picture_id}}-->
+
+	<!--pattern-include-start:components/responsive-picture-element-v3-->
+{{ include('components/responsive-picture-element-v3.twig') }}
+	<!--pattern-include-end:components/responsive-picture-element-v3-->
 {% endif %}

package/components/component-responsive-picture-element-v3/responsive-picture-element-v3.twig

@@ -0,0 +1,35 @@
+{% set desktopImage = get_image(fields.image_desktop|default(fields.desktop_image)) %}
+{% set tabletImage = get_image(fields.image_portrait|default(fields.tablet_image))|default(desktopImage) %}
+
+{% set mobileImage = get_image(fields.image_mobile|default(fields.mobile_image)) %}
+
+
+{% set isSVG = desktopImage.post_mime_type == 'image/svg+xml' %}
+{% set customAspectRatioDesktop = selectedAspectRatioDesktop %}
+{% set aspectRatioParamDesktop = {"aspect_ratio": customAspectRatioDesktop} %}
+{% set mainImageSrc = isSVG ? desktopImage.src : gt_image_mainsrc(desktopImage, aspectRatioParamDesktop) %}
+{% set desktopSrcset = isSVG ? desktopImage.src : gt_image_srcset(desktopImage, aspectRatioParamDesktop) %}
+
+{% set isSVG = tabletImage.post_mime_type == 'image/svg+xml' %}
+{% set customAspectRatioTablet = selectedAspectRatioTablet|default(tabletImage.width ~ '/' ~ tabletImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+
+{% set aspectRatioParamTablet = {"aspect_ratio": customAspectRatioTablet} %}
+{% set tabletSrcset = isSVG ? tabletImage.src : gt_image_srcset(tabletImage, aspectRatioParamTablet) %}
+
+{% set isSVG = mobileImage.post_mime_type == 'image/svg+xml' %}
+{% set customAspectRatioMobile = selectedAspectRatioMobile|default(mobileImage.width ~ '/' ~ mobileImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+{% set aspectRatioParamMobile = {"aspect_ratio": customAspectRatioMobile} %}
+{% set mobileSrcset = isSVG ? mobileImage.src : gt_image_srcset(mobileImage, aspectRatioParamMobile) %}
+
+<picture class="single-responsive-image-v3__picture {{picture_id|default(block.id)}}" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" data-assetkey="responsive-image" data-enableparallax="{{ parallaxEnabled }}">
+	{% if desktopImage %}
+		<source data-type="srcSetDesktop" data-pattern-suffix="{{suffix}}" media="(min-width: 1024px)" class="single-responsive-image-v3__source single-responsive-image-v3--desktop" width="{{ desktopImage.width }}" height="{{ desktopImage.height }}" srcset="{{desktopSrcset}}"/>
+	{% endif %}
+	{% if tabletImage %}
+		<source data-type="srcSetTablet" data-pattern-suffix="{{suffix}}" media="(min-width: 768px)" width="{{ tabletImage.width }}" height="{{ tabletImage.height }}" class="single-responsive-image-v3__source single-responsive-image-v3--tablet" srcset="{{ tabletSrcset }}"/>
+	{% endif %}
+	{% if mobileImage %}
+		<source data-type="srcSetMobile" data-pattern-suffix="{{suffix}}" class="single-responsive-image-v3__source single-responsive-image-v3__source--mobile" width="{{ mobileImage.width }}" height="{{ mobileImage.height }}" srcset="{{ mobileSrcset }}"/>
+	{% endif %}
+	<img data-type="srcGeneral" data-elementname="main-image" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" {{ enableEagerLoading }} sizes="{{ sizes }}" class="single-responsive-image-v3__image" src="{{mainImageSrc}}" alt="{{ desktopImage.alt }}" {{ parallaxDepth }} {{ parallaxOffsetY }}/>
+</picture>

package/components/fields-cocktail-info-v3/group_64c29b7f188ca.json

@@ -83,9 +83,10 @@
                     },
                     "wpml_cf_preferences": 3,
                     "choices": [
-                        "sour cream",
-                        "coca cola",
-                        "arrroow"
+                        "Chivas Regal 18",
+                        "Lillet Blanc",
+                        "Yuzu Dry Curacao",
+                        "Verjus"
                     ],
                     "default_value": "placeholder1",
                     "return_format": "value",
@@ -290,10 +291,7 @@
                         "id": ""
                     },
                     "wpml_cf_preferences": 3,
-                    "choices": [
-                        "glass",
-                        "shaker"
-                    ],
+                    "choices": [],
                     "default_value": "placeholder1",
                     "return_format": "value",
                     "multiple": 0,
@@ -415,7 +413,7 @@
                         "class": "",
                         "id": ""
                     },
-                    "wpml_cf_preferences": 0,
+                    "wpml_cf_preferences": 2,
                     "default_value": "",
                     "maxlength": "",
                     "allow_in_bindings": 0,
@@ -479,7 +477,7 @@
             "required": 0,
             "conditional_logic": 0,
             "wrapper": {
-                "width": "33",
+                "width": "50",
                 "class": "",
                 "id": ""
             },
@@ -500,7 +498,6 @@
                 "acfe_bidirectional_enabled": "0"
             },
             "allow_null": 0,
-            "allow_in_bindings": 0,
             "bidirectional": 0,
             "ui": 1,
             "bidirectional_target": [],
@@ -517,7 +514,7 @@
             "required": 0,
             "conditional_logic": 0,
             "wrapper": {
-                "width": "33",
+                "width": "50",
                 "class": "",
                 "id": ""
             },
@@ -534,19 +531,16 @@
             "prepend": "",
             "append": "",
             "allow_null": 0,
-            "allow_in_bindings": 0,
             "ui": 0,
             "ajax": 0,
             "placeholder": "",
-            "create_options": 0,
-            "save_options": 0,
             "allow_custom": 0,
             "search_placeholder": "",
             "min": ""
         },
         {
             "key": "field_6952b66d4a602",
-            "label": "Time to make (minutes)",
+            "label": "Time to make (Minutes)",
             "name": "time_to_make",
             "aria-label": "",
             "type": "range",
@@ -554,7 +548,7 @@
             "required": 0,
             "conditional_logic": 0,
             "wrapper": {
-                "width": "33",
+                "width": "50",
                 "class": "",
                 "id": ""
             },
@@ -562,10 +556,107 @@
             "default_value": "",
             "min": 0,
             "max": 30,
-            "allow_in_bindings": 0,
             "step": "",
             "prepend": "",
             "append": ""
+        },
+        {
+            "key": "field_695e8f508dfba",
+            "label": "Time to make (Units)",
+            "name": "time_to_make_units",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "50",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 2,
+            "default_value": "",
+            "maxlength": "",
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_698dc876365a3",
+            "label": "Recomendation",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "placement": "top",
+            "endpoint": 0,
+            "no_preference": 0,
+            "selected": 0
+        },
+        {
+            "key": "field_698dc88c365a4",
+            "label": "Bartender’s recommentation Title",
+            "name": "bartender_recommentation_title",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 2,
+            "default_value": "",
+            "maxlength": "",
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_698dc8ad365a5",
+            "label": "Bartender’s recommentation",
+            "name": "bartender_recommentation",
+            "aria-label": "",
+            "type": "wysiwyg",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 2,
+            "default_value": "",
+            "acfe_wysiwyg_auto_init": 0,
+            "acfe_wysiwyg_height": 300,
+            "acfe_wysiwyg_max_height": "",
+            "acfe_wysiwyg_valid_elements": "",
+            "acfe_wysiwyg_custom_style": "",
+            "acfe_wysiwyg_disable_wp_style": 0,
+            "acfe_wysiwyg_autoresize": 0,
+            "acfe_wysiwyg_disable_resize": 0,
+            "acfe_wysiwyg_remove_path": 0,
+            "acfe_wysiwyg_menubar": 0,
+            "acfe_wysiwyg_transparent": 0,
+            "acfe_wysiwyg_merge_toolbar": 0,
+            "acfe_wysiwyg_custom_toolbar": 0,
+            "tabs": "visual",
+            "toolbar": "basic",
+            "media_upload": 0,
+            "delay": 0,
+            "acfe_wysiwyg_min_height": 300,
+            "acfe_wysiwyg_toolbar_buttons": []
         }
     ],
     "location": [
@@ -586,7 +677,6 @@
     "active": true,
     "description": "Library version - Do not modify in this project as any changes will be overwritten by future updates.",
     "show_in_rest": 0,
-    "display_title": "",
     "acfe_autosync": [
         "json"
     ],
@@ -595,5 +685,5 @@
     "acfe_display_title": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1767372238
+    "modified": 1771865819
 }

package/components/webc-counter-display/counter-display.css

@@ -0,0 +1,2 @@
+counter-display {
+}

package/components/webc-counter-display/counter-display.html

@@ -0,0 +1,5 @@
+<counter-display
+	id="display-module"
+	data-count=""
+	class="counter-display"
+></counter-display>

package/components/webc-counter-display/counter-display.js

@@ -0,0 +1,30 @@
+export default function counterDisplayJs(options = {}) {
+	try {
+		if (!customElements.get('counter-display')) {
+			customElements.define(
+				'counter-display',
+				class extends HTMLElement {
+					static observedAttributes = ['data-count'];
+					constructor() {
+						super();
+					}
+					connectedCallback() {
+						console.log('Display module added to page.');
+						this.classList.add('loaded');
+					}
+					attributeChangedCallback(name, oldValue, newValue) {
+						console.log(
+							'🚀 ~ attributeChangedCallback ~ name:',
+							name
+						);
+						console.log('count', this.dataset.count);
+
+						this.innerText = `${this.dataset.countertext} ${this.dataset.count}`;
+					}
+				}
+			);
+		}
+	} catch (error) {
+		console.error(error);
+	}
+}

package/components/webc-counter-display/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="../../public/publicBundleBase.css" />
+		<link rel="stylesheet" href="./counter-display.css" />
+		<title>PTFG</title>
+		<style>
+			body {
+				background-color: #e7b8b8;
+			}
+			main {
+				max-width: 600px;
+				margin-inline: auto;
+				padding: 50px;
+			}
+		</style>
+	</head>
+	<body>
+		<main class="main-container"></main>
+		<script async type="module">
+			const template = await fetch("./counter-display.html");
+			const html = await template.text();
+			document.querySelector(".main-container").innerHTML = html;
+			import blockjs from "./counter-display.js";
+			blockjs();
+		</script>
+	</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "2.0.252",
+	"version": "2.0.255",
 	"description": "Component library",
 	"main": "index.js",
 	"scripts": {
@@ -20,7 +20,7 @@
 	"dependencies": {
 		"@total_onion/onion-modalcontroller": "^1.0.5",
 		"@total_onion/onion-utils": "^1.0.10",
-		"@total_onion/onion-videocontroller": "^1.1.7",
+		"@total_onion/onion-videocontroller": "^1.1.8",
 		"autoprefixer": "^10.4.21",
 		"compressing": "^2.0.0",
 		"cpy": "^9.0.1",