@total_onion/onion-library 1.0.0

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

@@ -0,0 +1,313 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
+{% set gridLayoutElement = include('components/grid-layout-element.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}}
+		}
+	</style>
+	<div class="{{blockClassName|default('default-class')}}__cta-selection-container {{block.id}}" style="{{elementStyles}}" 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(options['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 == 'c7club' %}
+				{% set clubName = cta.c7_club_information.commerce_7_club_name %}
+				{% set club_pickup = cta.c7_club_information.commerce_7_club_pickup_slug %}
+				{% set club_ship_champagne = cta.c7_club_information.commerce_7_club_ship_champagne_slug %}
+				{% set club_no_ship_campagne = cta.c7_club_information.commerce_7_club_ship_no_champagne_slug %}
+				<div class="c7-club-join-button hidden" data-club-slug="{{club_pickup}}" data-club-name="{{clubName}}" data-shipping-type="pickup"></div>
+				<div class="c7-club-join-button hidden" data-club-slug="{{club_ship_champagne}}" data-club-name="{{clubName}}" data-shipping-type="ship-champagne"></div>
+				<div class="c7-club-join-button hidden" data-club-slug="{{club_no_ship_campagne}}" data-club-name="{{clubName}}" data-shipping-type="no-champagne"></div>
+				<div class="c7-club-join-button-replaced" data-club-name="{{clubName}}">
+					<a class="join-club-button c7-btn c7-btn--primary">
+						<span>Select option
+						</span>
+					</a>
+				</div>
+			{% endif %}
+
+			{% if cta.cta_type|ru == 'tock' %}
+				<div class="tock reservation_cta_button_replacement">
+					<a class="{{blockClassName|default('cbl')}}__cta {{blockClassName|default('cbl')}}__cta--{{cta.cta_style|ru}} cta-style-{{cta.cta_style|ru}}">
+
+						<span>BOOK NOW</span>
+
+						<svg class="processing" fill="#fff" width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+							<style>
+								.spinner_ajPY {
+									transform-origin: center;
+									animation: spinner_AtaB 0.75s infinite linear
+								}
+								@keyframes spinner_AtaB {
+									100% {
+										transform: rotate(360deg)
+									}
+								}
+							</style>
+							<path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/>
+							<path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_ajPY"/>
+						</svg>
+					</a>
+				</div>
+				<div class="tock reservation_cta_button no-touch" id="Tock_widget_container" data-tock-display-mode="Button" data-tock-color-mode="Blue" data-tock-locale="en-us" data-tock-timezone="America/Los_Angeles"></div>
+
+			{% endif %}
+			{% if cta.cta_type|ru == 'c7addtocart' %}
+				{% set product = get_post(cta.commerce_7_product) %}
+				<button class="add-to-cart" data-sku="{{product.sku}}" data-product-slug="{{product.c7_slug}}" data-variant="{{product.variant_title}}" data-name="{{product.title}}" data-price="{{product.price|number_format(2)}}" data-c7-name="{{product.c7_name}}">ADD TO CART</button>
+				<div class="c7-buy-product c7-buy-variant" data-product-slug="{{product.c7_slug}}"></div>
+			{% 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 %}