@total_onion/onion-library 3.2.0 → 3.2.2

package/components/block-post-info-v3/post-info-v3/bazaarvoice-inline.twig

@@ -0,0 +1,13 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{# {% set textStyle = include('components/text-style.twig', {field, post}) %} #}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+<style>
+	.{{blockClassName}}__bazaarvoice.{{block.id}}{
+		{{elementStyles}}
+	}
+</style>
+<div class="{{blockClassName}}__bazaarvoice {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">
+	{% if post.product_bazaarvoice is defined and post.product_bazaarvoice is not empty %}
+		{{function( 'do_shortcode', '[bazaarvoice bazaarvoice_product_id=' ~ post.product_bazaarvoice ~ ' type="inline_rating"]' )|raw}}
+	{% endif %}
+</div>

package/components/block-post-info-v3/post-info-v3/better-reviews.twig

@@ -0,0 +1,15 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+{% set display_options = field.display_settings.options|join(', ')|replace({'__': ""}) %}
+{% if display_options is empty %}
+	{% set display_options = 'stars' %}
+{% endif %}
+<style>
+	.{{blockClassName}}__better-reviews.{{block.id}}{
+		{{elementStyles}}
+	}
+</style>
+<div class="{{blockClassName}}__better-reviews {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">
+	{{function( 'do_shortcode', '[better-reviews post_id=' ~ post.id ~ ' display="' ~ display_options ~ '"]' )|raw}}
+</div>

package/components/block-post-info-v3/post-info-v3/divider.twig

@@ -0,0 +1,8 @@
+<style>
+	.{{blockClassName}}__divider-container.{{block.id}} {
+		--post-divider-column-start: {{field.post_divider_column_start}}; --post-divider-column-span: {{field.post_divider_column_span}}
+	}
+</style>
+<div class="{{blockClassName}}__divider-container {{blockClassName}}__info-item {{block.id}}">
+	{{ include( 'blocks/divider.twig', {fields : field, block : block, blockClassName : blockClassName}, with_context = false) }}
+</div>

package/components/block-post-info-v3/post-info-v3/drink-description.twig

@@ -0,0 +1,10 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+{% set drink_desc = post.meta('drink_description') %}
+<style>
+	.{{blockClassName}}__drink-description.{{block.id}}{
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__drink-description {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{drink_desc}}</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info-v3/post-info-v3/global-image.twig

@@ -0,0 +1,22 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set imageSelect = field.image_select|ru %}
+{% set globalImageFitStyle = '--global-image-fit-style: ' ~ field.global_image_fit_style|ru ~ ';' %}
+{% set globalImageWidth = '--global-image-width: ' ~ field.global_image_width ~ '%;' %}
+{% set globalImageMaxWidth = '--global-image-max-width: ' ~ field.global_image_max_width|ru ~ ';' %}
+{% set globalImageZindex = '--global-image-zindex: ' ~ field.global_image_zindex ~ ';' %}
+{% set globalImagePosition = '--global-image-position: ' ~ field.global_image_position|ru ~ ';' %}
+{% set styleVars = globalImageWidth ~ globalImageMaxWidth ~ globalImageFitStyle ~ globalImageZindex ~ globalImagePosition %}
+<style>
+	.{{blockClassName}}__global-image-container.{{block.id}}{
+		{{gridLayoutElement}}
+		{{styleVars}}
+	}
+</style>
+<div class="{{blockClassName}}__global-image {{blockClassName}}__global-image-container {{blockClassName}}__info-item {{block.id}}">
+	{% set imageSizes = '(min-width: 768px) 10vw, (min-width: 500px) 10vw, 100vw' %}
+	{% set imageFields = [] %}
+	{% set imageFields = imageFields|merge({'enable_image' : true}) %}
+	{% set imageClassname = 'post-info__global-image' %}
+	{% set imageFields = imageFields|merge({'desktop_image' : options.global_images[imageSelect]['global_image']}) %}
+	{{ include('components/responsive-image.twig', {fields : imageFields, block : block, blockClassName : imageClassname, desktopSizes: imageSizes}, with_context = false) }}
+</div>

package/components/block-post-info-v3/post-info-v3/gradient-layer.twig

@@ -0,0 +1,78 @@
+{% set blockClassName = "gradient-layer-v3" %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { field: field, block: block }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { field: field, block: block, blockClassName, blockClassName }, with_context = false) %}
+{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { field: field, block: block }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { field: field, block: block, is_preview }, with_context = false) %}
+{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { field, block, displaytype, is_preview }, with_context = false) %}
+{% set sectionStyles =  styleEntryPoint %}
+{% set renderDynamic = field.render_dynamic|default(0) %}
+
+{{previewEntryPoint}}
+<style>
+	.{{blockClassName}}.{{block.id}}{
+		{{sectionStyles}}
+	}
+</style>
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-jsload="false" data-renderdynamic="{{renderDynamic}}" data-pattern-gradient-overlay data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
+
+	{% set enableOverlay = field.enable_gradient_overlay %}
+	{% set overlayType = field.overlay_type|ru|default('gradient') %}
+
+	{% if enableOverlay and overlayType == "gradient" %}
+		{% set gradientOriginMap = { top: '0deg', right: '90deg', bottom: '180deg', left: '270deg' } %}
+		{% set gradientSpread = '--gradient-spread:' ~ (field.gradient_overlay_spread|default(0)) ~ '%;' %}
+		{% set gradientAmount = '--gradient-amount:' ~ (field.gradient_overlay_amount|default(0)) ~ '%;' %}
+		{% set gradientOpacity = '--gradient-opacity:' ~ (field.gradient_overlay_opacity|default(0)) ~ ';' %}
+		{% set gradientColour = '--gradient-colour:' ~ (field.gradient_overlay_colour|ru|default('transparent')) ~ ';' %}
+		{% set gradientZIndex = '--gradient-zindex:' ~ (field.gradient_z_index|ru|default(4)) ~ ';' %}
+		{% set gradientGridArea = '--gradient-grid-area:' ~ (field.gradient_grid_area|ru|default('unset')) ~ ';' %}
+
+		{% set gradientTypeKey = field.gradient_overlay_origin|ru %}
+		{% set gradientOrigin = '--gradient-origin-before:' ~ gradientOriginMap[gradientTypeKey] ~ ';' %}
+		{% set enableAfter = "--enable-after: ;" %}
+		{% if gradientTypeKey == 'vertical' %}
+			{% set gradientOrigin = '--gradient-origin-before: 0deg;' %}
+			{% set gradientOriginAfter = '--gradient-origin-after: 180deg;' %}
+			{% set enableAfter = "--enable-after: '';" %}
+		{% endif %}
+		{% if gradientTypeKey == 'horizontal' %}
+			{% set gradientOrigin = '--gradient-origin-before: 90deg;' %}
+			{% set gradientOriginAfter = '--gradient-origin-after: 270deg;' %}
+			{% set enableAfter = "--enable-after: '';" %}
+		{% endif %}
+		{% set gradientStyleString = '' %}
+
+		{% set gradientStyleString = gradientSpread ~ gradientAmount ~ gradientOpacity ~ gradientColour ~ gradientOrigin ~ gradientZIndex ~ gradientGridArea ~ enableAfter ~ gradientOriginAfter %}
+
+		<style>
+			.{{blockClassName}}.{{block.id}}{
+				{{gradientStyleString}}
+			}
+		</style>
+
+		<div class="{{blockClassName}}__gradient-overlay-element"></div>
+
+	{% endif %}
+
+	{% if enableOverlay and overlayType == "blur" %}
+		{% if type == 'style' %}
+			{% set blurColour = '--blur-colour:' ~ (field.blur_overlay_colour|default('')) ~ ';' %}
+			{% set blurValue = '--blur-value:' ~ (field.blur_overlay_value|default(0)) ~ 'px' ~ ';' %}
+			{% set blurZIndex = '--blur-zindex:' ~ (field.blur_z_index|ru|default(5)) ~ ';' %}
+
+			{% set blurStyleString = blurColour ~ blurValue ~ blurZIndex %}
+
+			<style>
+				.{{blockClassName}}.{{block.id}}{
+					{{blurStyleString}}
+				}
+			</style>
+
+		{% endif %}
+
+		<div class="{{blockClassName}}__blur-overlay-element"></div>
+	{% endif %}
+
+
+	{{htmlEntryPoint}}
+</section>

package/components/block-post-info-v3/post-info-v3/gradient-overlay.twig

@@ -0,0 +1,10 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set gradientVars =  include('components/gradient-overlay.twig', {fields: field}, with_context="false")  %}
+
+<style>
+	.{{blockClassName}}__gradient-overlay.{{block.id}}{
+		{{elementStyles}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__info-item {{blockClassName}}__gradient-overlay {{block.id}}"></div>

package/components/block-post-info-v3/post-info-v3/post-author.twig

@@ -0,0 +1,17 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+
+<style>
+	.{{blockClassName}}__post-title.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{block.id}} {{blockClassName}}__info-item">
+	<span class="{{blockClassName}}__post-author-label">{{field.label_text}}</span>
+	<{{elementType|default('p')}} data-pattern-post-info="author.name" class="{{blockClassName}}__post-author {{textEditorElementClasses}} {{block.id}}">{{post.author.name}}</{{elementType|default('p')}}>
+</div>

package/components/block-post-info-v3/post-info-v3/post-buy-now.twig

@@ -0,0 +1,116 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set postColour = '--post-colour: ' ~ post.post_colour|ru ~ ';' %}
+{% set postTextColourStyle = '--post-text-colour-style: ' ~ post.post_text_colour_style|ru ~ ';' %}
+{% set ctaStyle = field.cta_style|ru %}
+
+{% if field.cta_style_select|ru == 'post-colour' %}
+	{% set ctaStyle = 'post-colour' %}
+{% endif %}
+
+{% if field.cta_style_select|ru == 'post-text-colour-style' %}
+	{% set ctaStyle = 'post-text-colour-style' %}
+{% endif %}
+
+{% if field.cta_style|ru matches '/^\\d+$/' %}
+	{% set ctaData = attribute(cta_styles['theme_cta_styles'], field.cta_style|ru - 1) %}
+	{% set enableCtaAnimation = ctaData.cta_settings.enable_cta_animation %}
+	{% set enableCtaIcon = ctaData.cta_settings.include_cta_icon %}
+{% endif %}
+
+{% set widgetStyles = gridLayoutElement ~ postColour ~ postTextColourStyle %}
+{% set ctaAnimationStyle = ctaData.cta_settings.cta_animation_style %}
+
+{% set buyNowOptionSelect = post.meta('buy_now_option_select') %}
+
+<style>
+	.{{blockClassName}}__post-link.{{block.id}}{
+		{{widgetStyles}}
+	}
+</style>
+<div class="{{blockClassName}}__post-link-container {{blockClassName}}__post-link {{blockClassName}}__info-item {{block.id}}">
+	{% if buyNowOptionSelect|ru == 'none' %}
+		<style>
+			.{{blockClassName}}__product-buy-now.{{block.id}}{
+				{{widgetStyles}}
+			}
+		</style>
+		<a href="#" class="{{blockClassName}}__product-buy-now {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} {{enableCtaAnimation ? 'cmpl-cta-animation-style-' ~ ctaAnimationStyle : ''}} {{block.id}}">
+			<span class="{{blockClassName}}__cta-span">{{field.post_link_text}}</span>
+			{{icon ? '<span class="' ~ blockClassName ~ '__icon-link"><img class="style-svg" src="' ~ options.theme_cta_icons.cta_link_icon ~ '"></span>' : ""}}
+		</a>
+	{% endif %}
+	{% if buyNowOptionSelect|ru == 'link' %}
+		{% set productDirectLink = post.meta('direct_link') %}
+		{% set directLinkTarget = '_self' %}
+		{% if productDirectLink.target is not empty %}
+			{% set directLinkTarget = '_self' %}
+		{% endif %}
+		<style>
+			.{{blockClassName}}__product-buy-now {
+				{{widgetStyles}}
+			}
+		</style>
+		<a href="{{productDirectLink.url}}" class="{{blockClassName}}__product-buy-now link {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} {{enableCtaAnimation ? 'cmpl-cta-animation-style-' ~ ctaAnimationStyle : ''}} {{block.id}}" target="{{directLinkTarget}}">
+			<span class="{{blockClassName}}__cta-span">{{field.post_link_text}}</span>
+			{{icon ? '<span class="' ~ blockClassName ~ '__icon-link"><img class="style-svg" src="' ~ options.theme_cta_icons.cta_link_icon ~ '"></span>' : ""}}
+		</a>
+	{% endif %}
+	{% if buyNowOptionSelect|ru == 'ctb' %}
+		{% set productCtbPimid = post.meta('click_to_buy_pim_id') %}
+		<style>
+			.{{blockClassName}}__product-buy-now {
+				{{widgetStyles}}
+			}
+		</style>
+			[clicktobuy class="{{blockClassName}}__product-buy-now ctb {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} {{enableCtaAnimation ? 'cmpl-cta-animation-style-' ~ ctaAnimationStyle : ''}} {{block.id}}
+			cmpl-cta-animation-style-{{enableCtaAnimation ? ctaAnimationStyle : '1'}}
+			has-shop shop-ctb" lang="{{ postObject.meta('click_to_buy_language') }}" variant="{{productCtbPimid}}" defaultView="links" country="" customQueryString=""]
+			<span class="cmpl-cta-span">{{ field.post_link_text }}</span>
+			[/clicktobuy]
+	{% endif %}
+	{% if buyNowOptionSelect|ru == 'wtb' %}
+		{% set productPimDebrainId = post.meta('debrain_pim_id') %}
+		<style>
+			.{{blockClassName}}__product-buy-now {
+				{{widgetStyles}}
+			}
+		</style>
+		<a href="#" class="dloc-link {{blockClassName}}__product-buy-now wtb {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} {{enableCtaAnimation ? 'cmpl-cta-animation-style-' ~ ctaAnimationStyle : ''}} {{block.id}}" data-action="where-to-buy" data-filter="{{productPimDebrainId}}" title="{{field.post_link_text}}">
+			<span class="{{blockClassName}}__cta-span">{{field.post_link_text}}</span>
+			{{icon ? '<span class="' ~ blockClassName ~ '__icon-link"><img class="style-svg" src="' ~ options.theme_cta_icons.cta_link_icon ~ '"></span>' : ""}}
+		</a>
+	{% endif %}
+	{% if buyNowOptionSelect|ru == 'wtb-v2' %}
+		{% set productDebrainSkuId = post.meta('debrain_sku_id') %}
+		<wtb-button sku={{productDebrainSkuId}}></wtb-button>
+	{% endif %}
+	{% if buyNowOptionSelect|ru == 'mikmak' %}
+		{% set productEANs = post.meta('mikmak_ean_ids') %}
+		{% set relatedProducts = post.meta('related_products') %}
+		{% set drawer_widget_id = attribute(market_settings['e-shop_settings'], 'mikmak_ctb_drawer_widget_id') %}
+		{% set relatedProductEANs = '' %}
+		{% for relatedPost in relatedProducts %}
+			{% set relatedProduct = get_post(relatedPost) %}
+			{% 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 %} #}
+		{% if productEANs is not empty %}
+			{% set totalProductEANs = productEANs ~ (relatedProductEANs is not empty ? ',' ~ relatedProductEANs : '') %}
+			<a href="#" data-mm-wtbid="{{drawer_widget_id}}" data-mm-ids="{{totalProductEANs}}" data-mm-default-id="{{productEANs}}" class="{{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} {{enableCtaAnimation ? 'cmpl-cta-animation-style-' ~ ctaAnimationStyle : ''}} {{block.id}} mikmak-buy-now">{{field.post_link_text}}</a>
+		{% endif %}
+	{% endif %}
+	{% if buyNowOptionSelect|ru == 'reservebar' %}
+		{% set reserveBarLiquidId = post.meta('reserve_bar_liquid_grouping_id') %}
+		<style>
+			.{{blockClassName}}__product-buy-now {
+				{{widgetStyles}}
+			}
+		</style>
+		<a href="#" class="{{blockClassName}}__product-buy-now reservebar {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} {{enableCtaAnimation ? 'cmpl-cta-animation-style-' ~ ctaAnimationStyle : ''}} {{block.id}} reservebar-popup-trigger" title="{{field.post_link_text}}" reservebar-liquid-id="{{reserveBarLiquidId}}">
+			<span class="{{blockClassName}}__cta-span">{{field.post_link_text}}</span>
+			{{icon ? '<span class="' ~ blockClassName ~ '__icon-link"><img class="style-svg" src="' ~ options.theme_cta_icons.cta_link_icon ~ '"></span>' : ""}}
+		</a>
+	{% endif %}
+
+</div>

package/components/block-post-info-v3/post-info-v3/post-categories.twig

@@ -0,0 +1,15 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+
+<style>
+	.{{blockClassName}}__post-categories.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{blockClassName}}__post-categories {{blockClassName}}__info-item {{textEditorContainerClasses}} {{block.id}}">
+	<{{elementType|default('p')}} class="{{blockClassName}}__post-categories {{textEditorElementClasses}} {{block.id}}" data-pattern-post-info="post.categories.0.name">{{post.categories.0.name}}</{{elementType|default('p')}}>
+</div>

package/components/block-post-info-v3/post-info-v3/post-headline.twig

@@ -0,0 +1,15 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-headline.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="headline" class="{{blockClassName}}__product-headline {{textEditorElementClasses}} {{block.id}}">{{field.headline_text}}</{{elementType|default('p')}}>
+</div>

package/components/block-post-info-v3/post-info-v3/post-image.twig

@@ -0,0 +1,47 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set imageSelect = field.image_select|ru %}
+{% if imageSelect == 'image_accent' %}
+	{% set positionVars = include('components/element-positioning-v3.twig', {fields : field.post_image_positioning, block : block, blockClassName : imageClassname}, with_context = false) %}
+{% endif %}
+
+{% set imageWidthPercentMobile = '--post-image-width-mobile: ' ~ field.post_image_width ~ '%;' %}
+{% set imageWidthPercentDesktop = '--post-image-width-desktop: ' ~ field.post_image_width ~ '%;' %}
+{% if imageSelect == 'image_accent' %}
+	{% set imageWidthPercentMobile = '--post-image-width-mobile: calc(' ~ field.post_image_width_mobile_px ~ ' / var(--mobile-design-reference) * var(--screen-width-mobile));' %}
+	{% set imageWidthPercentDesktop = '--post-image-width-desktop: calc(' ~ field.post_image_width_desktop_px ~ ' / var(--desktop-design-reference) * var(--screen-width-desktop));' %}
+{% endif %}
+{% set imageAspectRatioDesktop = '--image-aspect-ratio-desktop:' ~ field.image_aspect_ratio_desktop ~ ';' %}
+{% set imageAspectRatioPortrait = '--image-aspect-ratio-portrait:' ~ field.image_aspect_ratio_portrait ~ ';' %}
+{% set imageAspectRatioMobile = '--image-aspect-ratio-mobile:' ~ field.image_aspect_ratio_mobile ~ ';' %}
+{% set imageFitStyle = '--image-fit-style:' ~ (field.image_fit_style|ru|default('contain')) ~ ';' %}
+{% set linkToAssociatedPost = field.link_to_associated_post %}
+
+{% set styleVars = imageWidthPercentDesktop ~ imageWidthPercentMobile ~ imageWidthPercentMobilePx ~ imageWidthPercentDesktopPx ~ imageAspectRatioDesktop ~ imageAspectRatioPortrait ~ imageAspectRatioMobile ~ imageFitStyle %}
+<style>
+	.{{blockClassName}}__post-image-container.{{block.id}}{
+		{{styleVars}}
+		{{gridLayoutElement}}
+		{{positionVars}}
+	}
+</style>
+<a aria-label="{{post.title}}" href="{{linkToAssociatedPost ? get_post(post.associated_post).link : post.link}}" data-pattern-post-info="link" data-image-select="{{ imageSelect }}" class="{{blockClassName}}__post-image-container {{blockClassName}}__info-item {{blockClassName}}__info-item--{{postType}} {{blockClassName}}__post-image-container--{{imageSelect|replace({'_':'-'})}} {{block.id}}">
+
+	{% set imageSizes = imageSizes|default('(min-width: 1440px) 50vw, (min-width: 768px) 50vw, (min-width: 500px) 50vw, 100vw') %}
+	{% set imageFields = [] %}
+	{% set imageFields = imageFields|merge({'enable_image' : true}) %}
+
+	{% set imageClassname = 'post-info-v3__post' %}
+	{% if attribute(post, 'post_' ~ imageSelect) %}
+		{% set imageFields = imageFields|merge({'image' : attribute(post, 'post_' ~ imageSelect)}) %}
+	{% elseif attribute(post, 'post_image') %}
+		{% set imageFields = imageFields|merge({'image' : attribute(post, 'post_image')}) %}
+	{% endif %}
+	{% set imageFields = imageFields|merge({'enable_image' : true}) %}
+	{% set imageFields = imageFields|merge({'desktop_image' : imageFields.image}) %}
+	{{ include('components/responsive-image-v3.twig', {
+		fields: imageFields,
+		block: block,
+		blockClassName: imageClassname,
+		imageSizes: imageSizes
+	}, with_context = false) }}
+</a>

package/components/block-post-info-v3/post-info-v3/post-info-description.twig

@@ -0,0 +1,15 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__post-info-description.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{block.id}} {{blockClassName}}__info-item">
+	<{{elementType|default('p')}} data-pattern-post-info="post_info_description" class="{{blockClassName}}__post-info-description {{textEditorElementClasses}} {{block.id}}">
+		{{post.post_info_description}}</{{elementType|default('p')}}>
+</div>

package/components/block-post-info-v3/post-info-v3/post-info-subtitle.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__post-info-subtitle.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{block.id}} {{blockClassName}}__info-item">
+	<{{elementType|default('p')}} class="{{blockClassName}}__post-info-subtitle {{field.text_style.typography_style|ru}} {{block.id}}">{{post.post_info_subtitle}}</{{elementType|default('p')}}>
+</div>

package/components/block-post-info-v3/post-info-v3/post-link.twig

@@ -0,0 +1,42 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set postColour = '--post-colour: ' ~ post.post_colour|ru ~ ';' %}
+{% set postTextColourStyle = '--post-text-colour-style: ' ~ post.post_text_colour_style|ru ~ ';' %}
+{% set ctaStyle = field.cta_style|ru %}
+
+{% if field.cta_style_select|ru == 'post-colour' %}
+	{% set ctaStyle = 'post-colour' %}
+{% endif %}
+
+{% if field.cta_style_select|ru == 'post-text-colour-style' %}
+	{% set ctaStyle = 'post-text-colour-style' %}
+{% endif %}
+
+{% if field.cta_style|ru matches '/^\\d+$/' %}
+	{% set ctaData = attribute(cta_styles['theme_cta_styles'], field.cta_style|ru - 1) %}
+	{% set enableCtaAnimation = ctaData.cta_settings.enable_cta_animation %}
+	{% set enableCtaIcon = ctaData.cta_settings.include_cta_icon %}
+{% endif %}
+
+{% set widgetStyles = gridLayoutElement ~ postColour ~ postTextColourStyle %}
+{% set ctaAnimationStyle = ctaData.cta_settings.cta_animation_style %}
+
+<style>
+	.{{blockClassName}}__post-link.{{block.id}}{
+		{{widgetStyles}}
+	}
+</style>
+<div class="{{blockClassName}}__post-link-container {{blockClassName}}__post-link {{blockClassName}}__info-item {{block.id}}">
+
+	<a href="{{post.link}}" data-pattern-post-info="link" class=" {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} {{enableCtaAnimation ? 'cmpl-cta-animation-style-' ~ ctaAnimationStyle : ''}} {{block.id}}">
+		<span class="{{blockClassName}}__cta-span">{{field.post_link_text}}</span>
+		{% set icon = enableCtaIcon %}
+		{% if icon %}
+			{% set iconType = cta.cta_link.target == '_blank' ? options.theme_cta_icons.cta_external_link_icon : options.theme_cta_icons.cta_link_icon %}
+			{% set iconImage = get_image(iconType) %}
+			{% set isSVG = iconImage.post_mime_type == 'image/svg+xml' %}
+			<span class="{{ blockClassName ~ '__icon-link ' ~ blockClassName ~ '__cta-icon cmpl-cta-icon'}}">
+				{{ isSVG ? get_raw_svg(iconImage.id) : '<img class="" src="' ~ iconImage.src ~ '">'}}
+			</span>
+		{% endif %}
+	</a>
+</div>

package/components/block-post-info-v3/post-info-v3/post-name.twig

@@ -0,0 +1,12 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__post-name.{{block.id}}{
+		{{elementStyles}}
+		{{gridLayoutElement}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__post-name {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}" pattern-post_name>{{post.post_name}}</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info-v3/post-info-v3/post-publish-date.twig

@@ -0,0 +1,12 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+<style>
+	.{{blockClassName}}__post-publish-date.{{block.id}}{
+		{{elementStyles}}
+		{{gridLayoutElement}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__post-publish-date {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{field.enable_label ? '<span class="post-publish-date-label">' ~ field.label ~ '</span>' : ''}}
+	<span class="{{blockClassName}}__post-publish-date-span" data-pattern-post-info="date">{{post.date}}</span>
+</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info-v3/post-info-v3/post-tags.twig

@@ -0,0 +1,24 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+{% if field.number_of_tags %}
+	{% set numberOfTags = field.number_of_tags %}
+{% endif %}
+
+<style>
+	.{{blockClassName}}__post-tags.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__post-tags {{blockClassName}}__info-item {{block.id}}">
+	<div class="{{blockClassName}}__cta cmpl-cta-style-{{field.cta_style}}">
+
+		{% for tag in post.tags|slice(0, numberOfTags) %}
+			{{ tag.name }}
+		{% endfor %}
+
+	</div>
+</div>

package/components/block-post-info-v3/post-info-v3/post-text-alternative-style.twig

@@ -0,0 +1,16 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+
+<style>
+	.{{blockClassName}}__post_text_alternative_style.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{blockClassName}}__post_text_alternative_style {{textEditorContainerClasses}} {{block.id}} {{blockClassName}}__info-item">
+
+	<{{elementType|default('p')}} data-pattern-post-info="post_text_alternative_style" class=" {{block.id}}">{{post.post_text_alternative_style}}</{{elementType|default('p')}}>
+</div>

package/components/block-post-info-v3/post-info-v3/post-title.twig

@@ -0,0 +1,15 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+
+<style>
+	.{{blockClassName}}__post-title.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{block.id}} {{blockClassName}}__info-item">
+	<{{elementType|default('p')}} data-pattern-post-info="post_title" class="{{blockClassName}}__post-title {{textEditorElementClasses}} {{block.id}}">{{post.name}}</{{elementType|default('p')}}>
+</div>

package/components/block-post-info-v3/post-info-v3/post-video.twig

@@ -0,0 +1,27 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+
+{% set imageAspectRatioDesktop = '--image-aspect-ratio-desktop:' ~ field.image_aspect_ratio_desktop ~ ';' %}
+{% set imageAspectRatioPortrait = '--image-aspect-ratio-portrait:' ~ field.image_aspect_ratio_portrait ~ ';' %}
+{% set imageAspectRatioMobile = '--image-aspect-ratio-mobile:' ~ field.image_aspect_ratio_mobile ~ ';' %}
+
+{% set styleVars = imageAspectRatioDesktop ~ imageAspectRatioPortrait ~ imageAspectRatioMobile %}
+
+<style>
+	.{{blockClassName}}__post-video-container.{{block.id}}{
+		{{gridLayoutElement}}
+		{{styleVars}}
+	}
+</style>
+{% set videoSelect = field.video_select|ru %}
+{% set videoDesktop = attribute(post, videoSelect) %}
+
+<div class="{{blockClassName}}__post-video-container {{blockClassName}}__info-item {{block.id}}" data-pattern-post-info="post_video" data-video-select={{videoSelect}}>
+	{# <video class="{{blockClassName}}__post-video {{block.id}}" playsinline width="{{videoDesktop.width}}" height="{{videoDesktop.height}}" autoplay loop muted>
+		<source src="{{gt_video_mainsrc(videoDesktop['url'])}}" type="video/mp4">
+	</video> #}
+	{# {% set videoDesktop = gt_video_mainsrc(videoDesktop['url']) %} #}
+
+	{% set videoData = { enable_video : true, video_type : 'upload', video_desktop : gt_video_mainsrc(videoDesktop['url']), autoplay : true,  } %}
+
+	{{ include('components/video-component-v3.twig', { fields: videoData, block: block }, with_context = false) }}
+</div>

package/components/block-post-info-v3/post-info-v3/reservebar-add-to-cart.twig

@@ -0,0 +1,32 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+{% if field.rb_grouping_id is defined and field.rb_grouping_id is not empty %}
+	<style>
+		.{{blockClassName}}__rb-add-to-cart.{{block.id}}{
+			{{elementStyles}}
+			{{gridLayoutElement}}
+		}
+	</style>
+	<div class="{{blockClassName}}__rb-add-to-cart rb-add-to-cart {{block.id}}">
+		<h4>{{__('Enter your address to check online availability', 'Global Theme')}}</h4>
+		<div class="rb-add-to-cart-wrapper">
+			<div liquid-address-typeahead></div>
+			<div liquid-id="GROUPING-{{field.rb_grouping_id}}">
+				<div liquid-fulfillment-method-selector></div>
+				<div class="rb-add-to-cart-ctas">
+					<div liquid-qty-selector>
+						<select disabled class="liquid-cart-qty-selector">
+							<option value="1">1</option>
+						</select>
+					</div>
+					<div liquid-atc onclick="liquidSDK.cart.toggle();">
+						<button disabled class="liquid-cart-atc">Add to Cart</button>
+					</div>
+				</div>
+				{# <a href="#storelocator" title="{{__('Find Jefferson’s Reserve nearby', 'Jefferson Theme')}}" class="wtb-cta">{{__('Find Jefferson’s Reserve nearby', 'Jefferson Theme')}}</a> #}
+			</div>
+		</div>
+	</div>
+{% endif %}