@total_onion/onion-library 3.2.0 → 3.2.2

package/components/component-core-group-container-styles-v3/core-group-container-styles-v3.scss

@@ -0,0 +1,48 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../component-grid-layout-element-v3/grid-layout-element-v3';
+@use '../component-grid-layout-container-v3/grid-layout-container-v3';
+@use '../component-flex-layout-container-v3/flex-layout-container-v3';
+@use '../../breakpoints';
+
+@mixin coreGroupContainerStylesV3() {
+	@layer base-styles {
+		.cmpl-core-group-container-styles {
+			display: grid;
+			grid-template: 'main' / 1fr;
+			place-items: center;
+			&__grid-container {
+				grid-area: main;
+				place-self: stretch;
+				&.flex-layout-container {
+					@include flex-layout-container-v3.flexLayoutContainer();
+				}
+				&.grid-layout-container {
+					@include grid-layout-container-v3.gridLayoutContainer();
+				}
+			}
+			&__block-container {
+				pointer-events: none;
+				position: relative;
+				&.grid-layout-container {
+					@include grid-layout-element-v3.gridLayoutElement();
+				}
+				&:has(
+						.video-content-v3__video-container.video-playing.video-playing--high-z-index
+					) {
+					z-index: 50;
+				}
+			}
+			&__block-number {
+				z-index: 99;
+				position: absolute;
+				font-size: 40px;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				color: white;
+				text-shadow: 1px 1px 1px blue;
+			}
+		}
+	}
+}

package/components/component-core-head-v3/core-head-v3.twig

@@ -0,0 +1,62 @@
+{# noscript #}
+<noscript>
+	<style>
+		.lazy-fade {
+			opacity: 1 !important;
+		}
+		.js-enabled-hide {
+			display: block !important;
+		}
+	</style>
+</noscript>
+{# noscript end #}
+
+
+{# Global Preload #}
+{% for item in options.global_preload_options.dns_prefetch_items %}
+	{% if item.url is not empty %}
+		<link rel="dns-prefetch" href="{{item.url}}" crossorigin/>
+	{% endif %}
+{% endfor %}
+
+{% for item in options.global_preload_options.preconnect_items %}
+	{% if item.url is not empty %}
+		<link rel="preconnect" href="{{item.url}}"/>
+	{% endif %}
+{% endfor %}
+
+{% for item in options.global_preload_options.preload_items %}
+	{% if item.url is not empty %}
+		{% set type = item.type|ru %}
+		<link rel="preload" href="{{item.url}}" as={{type}} {{type == 'font' or type == 'fetch' ? 'crossorigin' : null}}/>
+	{% endif %}
+{% endfor %}
+{# Global Preload end #}
+
+{# speculation api #}
+{% set navLinksString = '' %}
+{% for item in nav_menus.primary_menu.items %}
+	{% set navLinksString = navLinksString ~ '"' ~ item.url ~ '",' %}
+{% endfor %}
+{% set navLinksString = navLinksString|trim(',') %}
+
+<script type="speculationrules">
+	{
+									"prefetch": [
+										{
+											"where": { "href_matches": ["/"] },
+											"eagerness": "eager"
+										}
+									]
+									}
+</script>
+{# speculation api end #}
+
+{# core design settings #}
+{{function('core_design_settings_v3', options).0}}
+{{function('core_post_overrides_v3', options).0}}
+{{function('core_font_modifiers_v3', options).0}}
+{{function('core_critical_css_v3').0}}
+{{function('core_typography_v3', options).0}}
+{{function('core_themes_v3', options).0}}
+{# core design settings end #}

package/components/component-cta-selection-v3/cta-selection-v3.twig

@@ -0,0 +1,256 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields, block }, with_context = false) %}
+{% set elementStyles = gridLayoutElement %}
+{% if fields.enable_cta %}
+	{% set ctaContainerDisplay = fields.display_type|ru %}
+	{% set gridColumnsMobile = fields.grid_columns_mobile %}
+	{% set gridColumnsPortrait = fields.grid_columns_portrait %}
+	{% set gridColumnsDesktop = fields.grid_columns_desktop %}
+	{% set ctaAlignment = fields.cta_alignment|ru %}
+	{% set ctaAlignmentPortrait = fields.cta_alignment_portrait|ru %}
+	{% set ctaAlignmentMobile = fields.cta_alignment_mobile|ru %}
+	{% set ctaFlexDirection = fields.cta_flex_direction|ru %}
+	{% set ctaGapDesktop = fields.cta_spacing_gap|ru %}
+	{% set ctaGapMobile = fields.cta_spacing_gap_mobile|ru %}
+	<style>
+		.{{blockClassName|default('default-class')}}__cta-selection-container.{{block.id}}{
+			--cta-container-display: {{ctaContainerDisplay}}
+			;
+			--grid-columns-mobile: {{gridColumnsMobile}}
+			;
+			--grid-columns-portrait: {{gridColumnsPortrait}}
+			;
+			--grid-columns-desktop: {{gridColumnsDesktop}}
+			;
+			--cta-alignment: {{ctaAlignment}}
+			;
+			--cta-alignment-portrait: {{ctaAlignmentPortrait}}
+			;
+			--cta-alignment-mobile: {{ctaAlignmentMobile}}
+			;
+			--cta-flex-direction: {{ctaFlexDirection}}
+			;
+			--cta-spacing-gap-desktop: {{ctaGapDesktop}}
+			;
+			--cta-spacing-gap-mobile: {{ctaGapMobile}}
+			;
+			{{elementStyles}}
+		}
+	</style>
+	<div class="{{blockClassName|default('default-class')}}__cta-selection-container {{block.id}}" data-pattern-cta-selection>
+		{% for cta in fields.add_cta %}
+			{% if cta.cta_style|ru matches '/^\\d+$/' %}
+				{% set ctaData = attribute(cta_styles['theme_cta_styles'], cta.cta_style|ru - 1) %}
+				{% set enableCtaAnimation = ctaData.cta_settings.enable_cta_animation %}
+				{% set enableCtaIcon = ctaData.cta_settings.include_cta_icon %}
+			{% endif %}
+
+			{% set ctaAnimationStyle = ctaData.cta_settings.cta_animation_style %}
+			{% if cta.cta_type|ru == 'link' %}
+				{% if cta.cta_link.title is not empty %}
+					<a href="{{cta.cta_link.url}}" aria-label="{{cta.aria_label|default(cta.cta_link.title)}}" target="{{cta.cta_link.target}}" class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}} {{blockClassName|default('default-class')}}-cta-animation-style-{{enableCtaAnimation ? ctaAnimationStyle : ''}} cmpl-cta-animation-style-{{enableCtaAnimation ? ctaAnimationStyle : ''}}">
+						<span class="cmpl-cta-span">{{cta.cta_link.title}}</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|default('default-class') ~ '__icon-link ' ~ blockClassName|default('default-class') ~ '__cta-icon cmpl-cta-icon'}}">
+								{{ isSVG ? get_raw_svg(iconImage.id) : '<img class="" src="' ~ iconImage.src ~ '">'}}
+							</span>
+						{% endif %}
+					</a>
+				{% endif %}
+			{% endif %}
+			{% if cta.cta_type|ru == 'anchor' %}
+				{% if cta.anchor_id is not empty %}
+					{% if cta.cta_style|ru matches '/^\\d+$/' %}
+						{% set ctaData = attribute(options['theme_cta_styles'], cta.cta_style|ru - 1) %}
+						{% set enableCtaAnimation = ctaData.cta_settings.enable_cta_animation %}
+						{% set enableCtaIcon = ctaData.cta_settings.include_cta_icon %}
+					{% endif %}
+
+					<a href="{{cta.anchor_id}}" aria-label="{{cta.aria_label|default(cta.cta_text)}}" class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}}">
+
+						<span class="{{blockClassName|default('default-class')}}__cta-span cmpl-cta-span">{{cta.cta_text}}</span>
+						{% set icon = enableCtaIcon %}
+						{% if icon %}
+							{% set iconType = cta_styles.theme_cta_icons.cta_link_icon %}
+							{% set iconImage = get_image(iconType) %}
+							{% set isSVG = iconImage.post_mime_type == 'image/svg+xml' %}
+							<span class="{{ blockClassName|default('default-class') ~ '__icon-link ' ~ blockClassName|default('default-class') ~ '__cta-icon cmpl-cta-icon'}}">
+								{{ isSVG ? get_raw_svg(iconImage.id) : '<img class="" src="' ~ iconImage.src ~ '">'}}
+							</span>
+						{% endif %}
+					</a>
+				{% endif %}
+			{% endif %}
+
+			{% if cta.cta_type|ru == 'buy_now' %}
+				{% set product = get_post(cta.select_product) %}
+				{% 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 %}
+			{% endif %}
+			{% if cta.cta_type|ru == 'share' %}
+				{% if cta.cta_style|ru matches '/^\\d+$/' %}
+					{% set ctaData = attribute(options['theme_cta_styles'], cta.cta_style|ru - 1) %}
+					{% set enableCtaAnimation = ctaData.cta_settings.enable_cta_animation %}
+					{% set enableCtaIcon = ctaData.cta_settings.include_cta_icon %}
+				{% endif %}
+
+
+				<a class="{{blockClassName|default('default-class')}}__share-icon {{blockClassName|default('default-class')}}__share-icon--{{cta.cta_style|ru}} cmpl-cta-style-{{cta.cta_style|ru}} modal__trigger cmpl-cta-animation-style-{{enableCtaAnimation ? ctaAnimationStyle : ''}}" data-modal-name=" share" data-share-url=" {{ fn('get_permalink',fields.ID) }} ">
+					<span class="{{blockClassName|default('default-class')}}__cta-span cmpl-cta-span"></span>
+
+					{% set icon = enableCtaIcon %}
+					{% if icon %}
+						{% set iconType = cta_styles.theme_cta_icons.cta_share_icon %}
+						{% set iconImage = get_image(iconType) %}
+						{% set isSVG = iconImage.post_mime_type == 'image/svg+xml' %}
+						<span class="{{ blockClassName|default('default-class') ~ '__icon-share ' ~ blockClassName|default('default-class') ~ '__cta-icon cmpl-cta-icon'}}">
+							{{ isSVG ? get_raw_svg(iconImage.id) : '<img class="" src="' ~ iconImage.src ~ '">'}}
+						</span>
+					{% endif %}
+				</a>
+			{% endif %}
+			{% if cta.cta_type|ru == 'shopify' %}
+
+				{% if cta.cta_style|ru matches '/^\\d+$/' %}
+					{% set ctaData = attribute(options['theme_cta_styles'], cta.cta_style|ru - 1) %}
+					{% set enableCtaAnimation = ctaData.cta_settings.enable_cta_animation %}
+					{% set enableCtaIcon = ctaData.cta_settings.include_cta_icon %}
+				{% endif %}
+
+				{% set shopify_product = get_post(cta.shopify_product) %}
+				{% if cta.shopify_cta_text is not empty %}
+					<div class="{{blockClassName|default('default-class')}} shopify-add-to-cart shopify-wrapper shopify-integration has-shop shop-shopify" data-pim="{{ shopify_product.shopify_pim_id }}" data-label="{{cta.shopify_cta_text}}" data-shopifya2cbtnstyle="cmpl-cta-style-{{cta.cta_style|ru|default('1')}}">
+						{% set icon = enableCtaIcon %}
+						{% if icon %}
+							{% set iconType = options.theme_cta_icons.cta_shopify_icon %}
+							{% set iconImage = get_image(iconType) %}
+							{% set isSVG = iconImage.post_mime_type == 'image/svg+xml' %}
+							<span class="{{ blockClassName|default('default-class') ~ '__icon-shopify-add-to-cart ' ~ blockClassName|default('default-class') ~ '__cta-icon cmpl-cta-icon'}}">
+								{{ isSVG ? get_raw_svg(iconImage.id) : '<img class="" src="' ~ iconImage.src ~ '">'}}
+							</span>
+						{% endif %}
+					</div>
+				{% endif %}
+
+			{% endif %}
+			{% if cta.cta_type|ru == 'shopify_engraved' %}
+				{% set shopify_product = get_post(cta.shopify_product) %}
+				{% if cta.shopify_engraved_cta_text is not empty %}
+					<div class="{{blockClassName|default('default-class')}} shopify-add-to-cart shopify-wrapper shopify-integration has-shop shop-shopify engraved" data-pim="{{ shopify_product.shopify_engraved_pim_id }}" data-label="{{cta.shopify_engraved_cta_text}}" data-shopifya2cbtnstyle="cmpl-cta-style-{{cta.cta_style|ru|default('1')}}"></div>
+				{% endif %}
+			{% endif %}
+			{% if cta.cta_type|ru == 'download' %}
+				{% if cta.cta_style|ru matches '/^\\d+$/' %}
+					{% set ctaData = attribute(options['theme_cta_styles'], cta.cta_style|ru - 1) %}
+					{% set enableCtaAnimation = ctaData.cta_settings.enable_cta_animation %}
+					{% set enableCtaIcon = ctaData.cta_settings.include_cta_icon %}
+				{% endif %}
+
+				{% set icon = enableCtaIcon %}
+
+				<a href="{{cta.cta_link.url}}" class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}} cta-style-{{cta.cta_style|ru}}" download>
+					<span class="{{blockClassName|default('default-class')}}__cta-download">{{cta.cta_link.title}}</span>
+					{% if icon %}
+						{% set iconType = options.theme_cta_icons.cta_download_icon %}
+						{% set iconImage = get_image(iconType) %}
+						{% set isSVG = iconImage.post_mime_type == 'image/svg+xml' %}
+						<span class="{{ blockClassName|default('default-class') ~ '__icon-download ' ~ blockClassName|default('default-class') ~ '__cta-icon cmpl-cta-icon'}}">
+							{{ isSVG ? get_raw_svg(iconImage.id) : '<img class="" src="' ~ iconImage.src ~ '">'}}
+						</span>
+					{% endif %}
+				</a>
+			{% endif %}
+			{% if cta.cta_type|ru == 'email' %}
+				{% if cta.cta_style|ru matches '/^\\d+$/' %}
+					{% set ctaData = attribute(options['theme_cta_styles'], cta.cta_style|ru - 1) %}
+					{% set enableCtaAnimation = ctaData.cta_settings.enable_cta_animation %}
+					{% set enableCtaIcon = ctaData.cta_settings.include_cta_icon %}
+				{% endif %}
+				{% set icon = enableCtaIcon %}
+				{% set email = cta.email_address %}
+				<a href="mailto:{{email}}" class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}}">{{cta.cta_text}}
+					{% if icon %}
+						{% set iconType = options.theme_cta_icons.cta_email_icon %}
+						{% set iconImage = get_image(iconType) %}
+						{% set isSVG = iconImage.post_mime_type == 'image/svg+xml' %}
+						<span class="{{ blockClassName|default('default-class') ~ '__icon-email ' ~ blockClassName|default('default-class') ~ '__cta-icon cmpl-cta-icon'}}">
+							{{ isSVG ? get_raw_svg(iconImage.id) : '<img class="" src="' ~ iconImage.src ~ '">'}}
+						</span>
+					{% endif %}
+				</a>
+			{% endif %}
+			{% if cta.cta_type|ru == 'shopify_cart' %}
+				<a class="shopify__cart">
+					{% set icon = true %}
+					{% if icon %}
+						{% set iconType = options.theme_cta_icons.cta_shopify_cart_icon %}
+
+						{% set iconImage = get_image(iconType) %}
+						{% set isSVG = iconImage.post_mime_type == 'image/svg+xml' %}
+						<span class="{{ blockClassName|default('default-class') ~ '__icon-shopify-add-to-cart shopify__cart-icon' ~ blockClassName|default('default-class') ~ '__cta-icon cmpl-cta-icon'}}">
+
+							{{ isSVG ? get_raw_svg(iconImage.id) : '<img class="" src="' ~ iconImage.src ~ '">'}}
+						</span>
+						<span class="shopify__cart-count"></span>
+					{% endif %}
+				</a>
+			{% endif %}
+		{% endfor %}
+	</div>
+{% endif %}