@total_onion/onion-library 2.0.66 → 2.0.70

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/ptfg-posts.twig

@@ -0,0 +1,474 @@
+{% set orderby = 'menu_order' %}
+{% set order = 'DESC' %}
+{% set sorting = sorting|default(fields.sorting) %}
+{% if sorting|ru == 'ascending' or sorting|ru == 'descending' %}
+	{% set orderby = 'title' %}
+{% endif %}
+{% if sorting|ru == 'dateasc' or sorting|ru == 'datedesc' %}
+	{% set orderby = 'date' %}
+{% endif %}
+
+{% if sorting|ru == 'ascending' or sorting|ru  == 'dateasc' %}
+	{% set order = 'ASC' %}
+{% endif %}
+
+{% if sorting|ru == 'postorder' or sorting == 'postorder' %}
+	{% set order = 'ASC' %}
+	{% set orderby = 'menu_order' %}
+{% endif %}
+
+{# when toggle is selected, show only global posts #}
+{% set marketLang = currentMarket == 'all' ? 'en' : currentMarket %}
+{% set isGlobalToggle = currentMarket == 'all' %}
+
+{% set showAllPosts = showAllPosts|default(fields.show_all_posts) %}
+{% if showAllPosts %}
+	{% set postsPerPage = -1 %}
+{% endif %}
+
+{% set initialPostsPerPage = initialPostsPerPage|default(fields.initial_posts_per_page_desktop)  %}
+{% set postsPerPage = desktopPostsPerPage|default(fields.posts_per_page_desktop) %}
+
+{% set defaultCategory = 'all' %}
+
+{% if categories is not empty and categories is not null %}
+	{% set categoryIds = categories %}
+{% endif %}
+
+{% if categoryIds is not empty and categoryIds is not null %}
+	{% if categoryIds is not iterable %}
+		{% set categoryIds = categoryIds|split(',') %}
+	{% endif %}
+	{% if categoryIds is iterable %}
+		{% set defaultCategory = categoryIds %}
+	{% endif %}
+{% endif %}
+
+{% set currentMarket = currentMarket|default(fn('apply_filters', 'wpml_current_language', NULL)) %}
+
+{% if ( pageNum <= 0 ) %}
+
+	{% set allPostsTotal = 0 %}
+	{% set allPostIdArgs = {
+		'post_type': postType,
+		'posts_per_page': -1,
+		'post_status': 'publish',
+		'orderby' : orderby,
+		'order' : order,
+		'lang': currentMarket,
+		'suppress_filters': false,
+	} %}
+
+	{% if postType == 'media' %}
+		{% set allPostIdArgs =  {
+		'post_type': 'attachment',
+		'posts_per_page' : -1,
+		'post_status': 'inherit',
+		'post_mime_type': 'image',
+		'lang': currentMarket,
+		'suppress_filters': false
+	} %}
+	{% endif %}
+
+	{% if isGlobalToggle %}
+		{% set allPostIdArgs = allPostIdArgs|merge({ 'lang': 'en' }) %}
+	{% else %}
+		{% set allPostIdArgs = allPostIdArgs|merge({ 'lang': marketLang }) %}
+	{% endif %}
+
+	{% if limitPostsToSelectedCategories and limitPostsToSelectedCategories != 'false' %}
+		{% if postType in ['product', 'cocktail', 'treat', 'drink'] %}
+			{% set allPostIdArgs = allPostIdArgs|merge({
+				'tax_query': [{
+					'taxonomy': postType ~ '_category',
+					'field': 'term_id',
+					'terms': defaultCategory,
+					'include_children': false,
+					'operator': 'IN'
+				}]
+			}) %}
+		{% else %}
+			{% set allPostIdArgs = allPostIdArgs|merge({
+				'tax_query': [{
+					'taxonomy': 'category',
+					'field': 'term_id',
+					'terms': defaultCategory,
+					'include_children': false,
+					'operator': 'IN'
+				}]
+			}) %}
+		{% endif %}
+	{% endif %}
+
+	{% set allPosts = get_posts(allPostIdArgs|merge( { 'no_found_rows' : true, 'fields' : 'ids' } )) %}
+	{% set allPostsTotal = allPosts|length %}
+
+	{# Get all products anyway when post type is cocktails #}
+	{% if postType in ['cocktail', 'drink'] %}
+		{% set productQuery = {
+			'post_type': 'product',
+			'posts_per_page': -1,
+			'post_status': 'publish',
+			'orderby': orderby,
+			'order': order,
+			'suppress_filters': false,
+			'has_password': false,
+			'fields': 'ids'
+		} %}
+		{% if isGlobalToggle %}
+			{% set productQuery = productQuery|merge({ 'lang': 'en' }) %}
+		{% else %}
+			{% set productQuery = productQuery|merge({ 'lang': marketLang }) %}
+		{% endif %}
+		{% set allProducts = get_posts(productQuery) %}
+	{% endif %}
+{% endif %}
+
+{% set postsArgs = {
+		'post_type': postType,
+	'posts_per_page': -1,
+	'post_status': 'publish',
+	'orderby': orderby,
+	'order': order,
+	'suppress_filters': false,
+	'has_password': false
+} %}
+
+{% if isGlobalToggle %}
+	{% set postsArgs = postsArgs|merge({ 'lang': 'en' }) %}
+{% else %}
+	{% set postsArgs = postsArgs|merge({ 'lang': marketLang }) %}
+{% endif %}
+
+{% if ( pageNum > 0 ) %}
+	{% set offset = initialPostsPerPage + ((pageNum -1)  * postsPerPage )%}
+	{% set postsArgs =  postsArgs|merge({
+		'offset' : offset,
+	}) %}
+	{% if postType == 'media' %}
+		{% set postsArgs =  {
+		'post_type': 'attachment',
+		'posts_per_page' : -1,
+		'offset' : offset,
+		'post_status': 'inherit',
+		'post_mime_type': 'image',
+		'lang': 'en',
+		'suppress_filters': false
+	} %}
+	{% endif %}
+	{% if limitPostsToSelectedCategories and limitPostsToSelectedCategories != 'false' %}
+		{% if postType == 'product' or postType == 'cocktail' or postType == 'treat' or postType == 'drink' %}
+			{% set postsArgs =  postsArgs|merge( {
+					'tax_query' : [{'taxonomy' : postType ~ '_category',
+					'field' : 'term_id', 
+					'terms' : defaultCategory,
+					'include_children' : false,
+					'operator' : 'IN'}],
+				} ) %}
+		{% elseif postType == 'media' %}
+			{% set postsArgs =  {
+				'post_type': 'attachment',
+				'posts_per_page' : -1,
+				'offset' : offset,
+				'post_status': 'inherit',
+				'post_mime_type': 'image',
+				'lang': 'en',
+				'suppress_filters': false
+			} %}
+		{% else %}
+			{% set postsArgs =  postsArgs|merge( {
+					'tax_query' : [{'taxonomy' : 'category',
+					'field' : 'term_id', 
+					'terms' : defaultCategory,
+					'include_children' : false,
+					'operator' : 'IN'}],
+			} ) %}
+		{% endif %}
+	{% endif %}
+	{% set posts = get_posts(postsArgs) %}
+{% else %}
+	{% set postsArgs = postsArgs|merge({
+		'posts_per_page' : initialPostsPerPage,
+		'orderby' : orderby,
+		'order' : order,
+	}) %}
+	{% if postType == 'media' %}
+		{% set postsArgs =  {
+		'post_type': 'attachment',
+		'posts_per_page' : initialPostsPerPage,
+		'post_status': 'inherit',
+		'post_mime_type': 'image',
+		'lang': 'en',
+		'suppress_filters': false
+	} %}
+		{% set testVariable = postsArgs %}
+	{% endif %}
+	{% if limitPostsToSelectedCategories and limitPostsToSelectedCategories != 'false' %}
+		{% if postType == 'product' or postType == 'cocktail' or postType == 'treat' or postType == 'drink' %}
+			{% set postsArgs =  postsArgs|merge( {
+					'tax_query' : [{'taxonomy' : postType ~ '_category',
+					'field' : 'term_id', 
+					'terms' : defaultCategory,
+					'include_children' : false,
+					'operator' : 'IN'}],
+				} ) %}
+		{% else %}
+			{% set postsArgs =  postsArgs|merge( {
+					'tax_query' : [{'taxonomy' : 'category',
+					'field' : 'term_id', 
+					'terms' : defaultCategory,
+					'include_children' : false,
+					'operator' : 'IN'}],
+				} ) %}
+			{% if postType == 'media' %}
+				{% set postsArgs =  postsArgs|merge( {
+							'tax_query' : [{'taxonomy' : 'category',
+							'field' : 'term_id', 
+							'terms' : defaultCategory,
+							'include_children' : false,
+							post_mime_type: 'image',
+							'operator' : 'IN'}],
+						} ) %}
+			{% endif %}
+		{% endif %}
+	{% endif %}
+	{% set posts = get_posts(postsArgs) %}
+{% endif %}
+
+{% set updatedPosts = [] %}
+
+{% if postType == 'media' %}
+	{% for mediaItem in posts %}
+		{% set updatedPost = {} %}
+		{% set post_images = {} %}
+		{% set post_image = get_image(mediaItem) %}
+		{% set post_images = post_images|merge({'post_image_src' : gt_image_mainsrc(post_image)}) %}
+		{% set post_images = post_images|merge({'post_image_srcset' : gt_image_srcset(post_image)}) %}
+		{% set post_images = post_images|merge({'post_image_width' : post_image.width}) %}
+		{% set post_images = post_images|merge({'post_image_height' : post_image.height}) %}
+		{% set post_images = post_images|merge({'post_image_alt_text' : post_image.alt}) %}
+		{% set post_data = {'slug' : post_image.guid, 'post_type' : postType} %}
+		{% set post_images = post_images|merge({'post_image' : post_image}) %}
+		{% set updatedPost = updatedPost|merge({'post_images' : post_images}) %}
+		{% set updatedPost = updatedPost|merge({'post_data' : post_data}) %}
+		{% set updatedPost = updatedPost|merge({'categories' : post_image.terms}) %}
+		{% set updatedPost = updatedPost|merge({'id' : post_image.id}) %}
+		{% set updatedPost = updatedPost|merge({'link' : post_image.link}) %}
+		{% set updatedPosts = updatedPosts|merge([updatedPost]) %}
+	{% endfor %}
+{% endif %}
+
+{% if postType == 'pr_social_media_item' %}
+	{% set pr_social_media_item = get_posts({
+		'post_type' : 'pr_social_media_item',
+		'posts_per_page' : -1,
+		'post_status' : 'publish',
+		'pr_social_account' : fields.social_account,
+		'lang' : currentMarket,
+		'suppress_filters' : false,
+		'has_password' : false})
+	%}
+	{% set posts = [] %}
+	{% for mediaItem in pr_social_media_item %}
+		{% set updatedPost = {} %}
+		{% set post_images = {} %}
+		{% set post_image = get_image(mediaItem.thumbnail) %}
+		{% set post_images = post_images|merge({'post_image_src' : gt_image_mainsrc(post_image)}) %}
+		{% set post_images = post_images|merge({'post_image_srcset' : post_image.srcset}) %}
+		{% set post_images = post_images|merge({'post_image_width' : post_image.width}) %}
+		{% set post_images = post_images|merge({'post_image_height' : post_image.height}) %}
+		{% set post_images = post_images|merge({'post_image_alt_text' : post_image.alt}) %}
+		{% set post_data = {'slug' : post_image.guid, 'post_type' : postType} %}
+		{% set post_images = post_images|merge({'post_image' : post_image}) %}
+		{% set updatedPost = updatedPost|merge({'post_images' : post_images}) %}
+		{% set updatedPost = updatedPost|merge({'post_data' : post_data}) %}
+		{% set updatedPost = updatedPost|merge({'categories' : post_image.terms}) %}
+		{% set updatedPost = updatedPost|merge({'link' : post_image.link}) %}
+		{% set updatedPosts = updatedPosts|merge([updatedPost]) %}
+	{% endfor %}
+{% endif %}
+
+
+{# Post Data Processing #}
+{% if (postType != 'pr_social_media_item') and (postType != 'media')%}
+	{% set updatedPosts = [] %}
+	{% for post in posts %}
+		{% set updatedPost = {} %}
+		{% set post_images = {} %}
+		{% set updatedPost = updatedPost|merge({'post_data' : filter_post_data(post.meta, [
+			'post_info_description',
+			'post_colour',
+			'post_container_background_colour',
+			'post_colour_secondary',
+			'post_text_colour_style',
+			'post_type',
+			'person_email',
+			'person_name',
+			'person_questionaire',
+			'star_rating',
+			'product_bazaarvoice',
+			'product_country',
+			'product_finish',
+			'product_age_statement',
+			'product_history',
+			'product_nose',
+			'c7_slug',
+			'product_taste',
+			'product_name',
+			'product_whisky_type',
+			'buy_now_option_select',
+			'click_to_buy_pim_id',
+			'debrain_pim_id',
+			'reserve_bar_liquid_grouping_id',
+			'direct_link',
+			'debrain_sku_id',
+			'mikmak_ean_ids',
+			'shopify_pim_id',
+			'shopify_engraved_pim_id',
+			'post_text_alternative_style',
+			'post_info_subtitle',
+			])})
+		%}
+		{% set updatedPost = updatedPost|merge({'slug' : post.slug}) %}
+		{% set updatedPost = updatedPost|merge({'post_title' : post.post_title}) %}
+		{% set updatedPost = updatedPost|merge({'product_details' : post.product_details}) %}
+		{% set updatedPost = updatedPost|merge({'post_date' : post.post_date}) %}
+		{% set updatedPost = updatedPost|merge({'id' : post.ID}) %}
+		{% for term in post.terms %}
+			{% if term.taxonomy == 'drink_category' %}
+				{% set updatedPost = updatedPost|merge({'cocktail_category' : term.name}) %}
+			{% endif %}
+		{% endfor %}
+
+		{% set updatedPost = updatedPost|merge({'categories' : post.terms}) %}
+		{% if postType == 'post' or postType == 'page' %}
+			{% set updatedPost = updatedPost|merge({'categories' : post.categories}) %}
+		{% endif %}
+		{% set updatedPost = updatedPost|merge({'tags' : post.tags}) %}
+		{% set updatedPost = updatedPost|merge({'author_display_name' : post.author.display_name}) %}
+		{% set updatedPost = updatedPost|merge({'link' : post.link}) %}
+
+
+		{% if includeReviews == true %}
+			{% set rating = function( 'do_shortcode', '[better-reviews post_id="' ~ post.ID ~ '" display="' ~ reviewDisplayOptions ~ '"]' )|raw %}
+			{% set updatedPost = updatedPost|merge({'rating' : rating}) %}
+		{% endif %}
+		{% set updatedPost = updatedPost|merge({'product_buynow_direct_link' : gt_unserialize_data(post.meta.direct_link)}) %}
+
+		{% set relatedProducts = post.meta('related_products') %}
+		{% set MikMakDrawerWidgetID = attribute(options['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 relatedProductEANs is not empty %}
+			{% set updatedPost = updatedPost|merge({'related_product_eans' : relatedProductEANs}) %}
+		{% endif %}
+		{% set updatedPost = updatedPost|merge({'mikmak_drawer_widget_ID' : MikMakDrawerWidgetID}) %}
+
+
+		{% set post_image =  get_image(post.post_image) %}
+		{% if post_image.id  %}
+			{% set post_images = [] %}
+			{% set post_images = post_images|merge({'post_image' : post_image}) %}
+			{% set post_images = post_images|merge({'post_image_src' : gt_image_mainsrc(post_image)}) %}
+			{% set post_images = post_images|merge({'post_image_srcset' : gt_image_srcset(post_image)}) %}
+			{% set post_images = post_images|merge({'post_image_width' : post_image.width}) %}
+			{% set post_images = post_images|merge({'post_image_height' : post_image.height}) %}
+			{% set post_images = post_images|merge({'post_image_alt_text' : post_image.alt}) %}
+		{% endif %}
+		{% if not post_image.id  %}
+			{% set post_image =  get_image(post.meta[postType ~ '_image']) %}
+			{% set post_images = post_images|merge({'post_image' : post_image}) %}
+			{% set post_images = post_images|merge({'post_image_src' : gt_image_mainsrc(post_image)}) %}
+			{% set post_images = post_images|merge({'post_image_srcset' : gt_image_srcset(post_image)}) %}
+			{% set post_images = post_images|merge({'post_image_width' : post_image.width}) %}
+			{% set post_images = post_images|merge({'post_image_height' : post_image.height}) %}
+			{% set post_images = post_images|merge({'post_image_alt_text' : post_image.alt}) %}
+		{% endif %}
+		{% if not post_image.id  %}
+			{% set post_image =  get_image(post._thumbnail_id) %}
+			{% set post_images = post_images|merge({'post_image' : post_image}) %}
+			{% set post_images = post_images|merge({'post_image_src' : gt_image_mainsrc(post_image)}) %}
+			{% set post_images = post_images|merge({'post_image_srcset' : gt_image_srcset(post_image)}) %}
+			{% set post_images = post_images|merge({'post_image_width' : post_image.width}) %}
+			{% set post_images = post_images|merge({'post_image_height' : post_image.height}) %}
+			{% set post_images = post_images|merge({'post_image_alt_text' : post_image.alt}) %}
+		{% endif %}
+
+		{% set post_image_alt_id =  post.meta['post_image_alt'] %}
+		{% if post_image_alt_id != null %}
+			{% set post_image_alt =  get_image(post.meta['post_image_alt']) %}
+			{% set post_images = post_images|merge({'post_image_alt' : post_image_alt}) %}
+			{% set post_images = post_images|merge({'post_image_alt_src' : gt_image_mainsrc(post_image_alt)}) %}
+			{% set post_images = post_images|merge({'post_image_alt_srcset' : gt_image_srcset(post_image_alt)}) %}
+			{% set post_images = post_images|merge({'post_image_alt_width' : post_image_alt.width}) %}
+			{% set post_images = post_images|merge({'post_image_alt_height' : post_image_alt.height}) %}
+			{% set post_images = post_images|merge({'post_image_alt_alt_text' : post_image_alt.alt}) %}
+		{% endif %}
+
+		{% set post_image_background_id =  post.meta['post_image_background'] %}
+		{% if post_image_background_id != null %}
+			{% set post_image_background =  get_image(post.meta['post_image_background']) %}
+			{% set post_images = post_images|merge({'post_image_background' : post_image_background}) %}
+			{% set post_images = post_images|merge({'post_image_background_src' : gt_image_mainsrc(post_image_background)}) %}
+			{% set post_images = post_images|merge({'post_image_background_srcset' : gt_image_srcset(post_image_background)}) %}
+			{% set post_images = post_images|merge({'post_image_background_width' : post_image_background.width}) %}
+			{% set post_images = post_images|merge({'post_image_background_height' : post_image_background.height}) %}
+			{% set post_images = post_images|merge({'post_image_background_alt_text' : post_image_background.alt}) %}
+		{% endif %}
+
+		{% set post_image_accent_id =  post.meta['post_image_accent'] %}
+		{% if post_image_accent_id != null %}
+			{% set post_image_accent =  get_image(post.meta['post_image_accent']) %}
+			{% set post_images = post_images|merge({'post_image_accent' : post_image_accent}) %}
+			{% set post_images = post_images|merge({'post_image_accent_src' : gt_image_mainsrc(post_image_accent)}) %}
+			{% set post_images = post_images|merge({'post_image_accent_srcset' : gt_image_srcset(post_image_accent)}) %}
+			{% set post_images = post_images|merge({'post_image_accent_width' : post_image_accent.width}) %}
+			{% set post_images = post_images|merge({'post_image_accent_height' : post_image_accent.height}) %}
+			{% set post_images = post_images|merge({'post_image_accent_alt_text' : post_image_accent.alt}) %}
+		{% endif %}
+		{% set updatedPost = updatedPost|merge({'post_images' : post_images}) %}
+
+		{% set post_image_lifestyle_id =  post.meta['post_image_lifestyle'] %}
+		{% if post_image_lifestyle_id != null %}
+			{% set post_image_lifestyle =  get_image(post.meta['post_image_lifestyle']) %}
+			{% set post_images = post_images|merge({'post_image_lifestyle' : post_image_lifestyle}) %}
+			{% set post_images = post_images|merge({'post_image_lifestyle_src' : gt_cf_mainsrc(post_image_lifestyle)}) %}
+			{% set post_images = post_images|merge({'post_image_lifestyle_srcset' : gt_cf_srcset(post_image_lifestyle)}) %}
+			{% set post_images = post_images|merge({'post_image_lifestyle_width' : post_image_lifestyle.width}) %}
+			{% set post_images = post_images|merge({'post_image_lifestyle_height' : post_image_lifestyle.height}) %}
+			{% set post_images = post_images|merge({'post_image_lifestyle_alt_text' : post_image_lifestyle.alt}) %}
+		{% endif %}
+		{% set updatedPost = updatedPost|merge({'post_images' : post_images}) %}
+		{% set updatedPosts = updatedPosts|merge([updatedPost]) %}
+	{% endfor %}
+{% endif %}
+
+{% set returnedPosts = {
+	'testVariable' : media,
+	'postType' : postType,
+	'pageNum' : pageNum,
+	'order' : order,
+	'orderby' : orderby,
+	'offset' : offset,
+	'sorting' : sorting|ru,
+	'postsPerPage' : postsPerPage,
+	'initialPostsPerPage' : initialPostsPerPage,
+	'defaultCategory' : defaultCategory,
+	'limitPostsToSelectedCategories' : limitPostsToSelectedCategories,
+	'categoryIds' : categoryIds,
+	'defaultCategory' : defaultCategory,
+	'categories' : categories,
+	'allPosts' : allPosts,
+	'allProducts' : allProducts|default([]),
+	'categoryId' : categoryId,
+	'total' : allPostsTotal,
+	'posts' : updatedPosts,
+	'taxonomy' : postType ~ '_category',
+	'language': fn('apply_filters', 'wpml_current_language', NULL),
+	'currentMarket': currentMarket
+} %}
+{{ returnedPosts|json_encode() }}

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/ptfg-utils.vue

@@ -0,0 +1,38 @@
+<script>
+export default function (props) { }
+export function gridLayoutElement(props) {
+	const element = props.element;
+	return `
+	--grid-column-start-mobile: ${element.grid_layout_element?.grid_column_start_mobile};
+	--grid-column-span-mobile: ${element.grid_layout_element?.grid_column_span_mobile};
+	--grid-row-start-mobile: ${element.grid_layout_element?.grid_row_start_mobile};
+	--grid-row-span-mobile: ${element.grid_layout_element?.grid_row_span_mobile};
+	--grid-horizontal-placement-mobile: ${element.grid_layout_element?.grid_layout_mobile?.grid_horizontal_placement_mobile?.slice(2) != 'default' ? element.grid_layout_element?.grid_layout_mobile?.grid_horizontal_placement_mobile?.slice(2) : element.grid_layout_element?.grid_horizontal_placement?.slice(2)};
+	--grid-vertical-placement-mobile: ${element.grid_layout_element?.grid_layout_mobile?.grid_vertical_placement_mobile?.slice(2) != 'default' ? element.grid_layout_element?.grid_layout_mobile?.grid_vertical_placement_mobile?.slice(2) : element.grid_layout_element?.grid_vertical_placement?.slice(2)};
+	--grid-column-start-portrait: ${element.grid_layout_element?.grid_column_start_portrait};
+	--grid-column-span-portrait: ${element.grid_layout_element?.grid_column_span_portrait};
+	--grid-row-start-portrait: ${element.grid_layout_element?.grid_row_start_portrait};
+	--grid-row-span-portrait: ${element.grid_layout_element?.grid_row_span_mobile};
+	--grid-horizontal-placement-portrait: ${element.grid_layout_element?.grid_layout_portrait?.grid_horizontal_placement_portrait?.slice(2) != 'default' ? element.grid_layout_element?.grid_layout_portrait?.grid_horizontal_placement_portrait?.slice(2) : element.grid_layout_element?.grid_horizontal_placement?.slice(2)};
+	--grid-vertical-placement-portrait: ${element.grid_layout_element?.grid_layout_portrait?.grid_vertical_placement_portrait?.slice(2) != 'default' ? element.grid_layout_element?.grid_layout_portrait?.grid_vertical_placement_portrait?.slice(2) : element.grid_layout_element?.grid_vertical_placement?.slice(2)};
+	--grid-column-start: ${element.grid_layout_element?.grid_column_start};
+	--grid-column-span: ${element.grid_layout_element?.grid_column_span};
+	--grid-row-start: ${element.grid_layout_element?.grid_row_start};
+	--grid-row-span: ${element.grid_layout_element?.grid_row_span};
+	--grid-horizontal-placement-desktop: ${element.grid_layout_element?.grid_horizontal_placement?.slice(2)};
+	--grid-vertical-placement-desktop: ${element.grid_layout_element?.grid_vertical_placement?.slice(2)};`;
+}
+export function textEditorStyles(props) {
+	const element = props.element;
+	const textColourType = props.element?.text_style?.text_colour?.slice(2);
+	let textColour = textColourType;
+	if (textColourType == 'post_text_colour_style') {
+		textColour = props.post.post_data?.post_text_colour_style?.slice(2);
+	}
+	if (textColourType == 'post_colour') {
+		textColour = props.post.post_data?.post_colour;
+	}
+	return `--text-align: ${element.text_style?.text_align?.slice(2)}; 
+    --text-transform: ${element.text_style?.text_transform?.slice(2)}; --font-weight: ${element.text_style?.text_font_weight?.slice(2)}; --text-colour: ${textColour}`;
+}
+</script>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/shopify-add-to-cart.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+const props = defineProps(["post", "element", "ctaIcons", "blockClassname"]);
+
+const gridLayoutString = gridLayoutElement(props);
+
+const blockClassname = props.blockClassname;
+const ctaIcons = props.ctaIcons;
+const element = props.element;
+const ctaStyle = element.cta_style.replace("__", "");
+
+const post = props.post;
+</script>
+<template>
+	<div
+		:class="`${blockClassname}__shopify shopify-add-to-cart ${blockClassname}__info-item shopify-wrapper shopify-integration has-shop shop-shopify`"
+		:data-label="`${element.shopify_text}`"
+		:data-shopifya2cbtnstyle="`cmpl-cta-style-${element.cta_style}`"
+		:data-pim="post.post_data.shopify_pim_id"
+		:style="`--post-colour: ${postColour}; --post-text-colour-style: ${postTextColourStyle}; ${gridLayoutString}`"
+		v-if="element.product_type.slice(2) == 'standard'"
+	></div>
+	<div
+		:class="`${blockClassname}__shopify shopify-add-to-cart ${blockClassname}__info-item shopify-wrapper shopify-integration has-shop shop-shopify engraved`"
+		:data-label="`${element.shopify_text}`"
+		:data-shopifya2cbtnstyle="`cmpl-cta-style-${element.cta_style}`"
+		:data-pim="post.post_data.shopify_engraved_pim_id"
+		:style="`--post-colour: ${postColour}; --post-text-colour-style: ${postTextColourStyle}; ${gridLayoutString}`"
+		v-if="element.product_type.slice(2) == 'engraved'"
+	></div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/social-media-item.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element", "fields"]);
+const blockClassname = "post-type-filter-grid-v3";
+const imageType = props.element?.image_select?.slice(2);
+const setAsBackgroundImage = props.element?.set_as_background_image;
+let positioningString = '';
+let postImageWidthString = `--post-image-width-mobile: ${props.element.post_image_width}%; --post-image-width-desktop: ${props.element.post_image_width}%;`;
+if (imageType === 'image_accent') {
+    const elementPositioning = props.element?.post_image_positioning.element_positioning;
+    positioningString = `
+--element-rotation-desktop: ${elementPositioning.desktop_positioning.element_rotation_desktop}deg;
+--element-rotation-mobile: ${elementPositioning.desktop_positioning.element_rotation_desktop}deg;
+--element-z-index: ${elementPositioning.element_z_index};
+--element-horizontal-offset-mobile: ${elementPositioning.mobile_positioning.horizontal_offset}%;
+--element-vertical-offset-mobile: ${elementPositioning.mobile_positioning.vertical_offset}%;
+--element-horizontal-offset-desktop: ${elementPositioning.desktop_positioning.horizontal_offset}%;
+--element-vertical-offset-desktop: ${elementPositioning.desktop_positioning.vertical_offset}%;
+--mobile-horizontal-placement: ${elementPositioning.mobile_positioning.horizontal_snap?.slice(2)};
+--mobile-vertical-placement: ${elementPositioning.mobile_positioning.vertical_snap?.slice(2)};
+--desktop-horizontal-placement: ${elementPositioning.desktop_positioning.horizontal_snap?.slice(2)};
+--desktop-vertical-placement: ${elementPositioning.desktop_positioning.vertical_snap?.slice(2)};
+`;
+    postImageWidthString = `--post-image-width-mobile: calc( ${props.element.post_image_width_mobile_px} / var(--mobile-design-reference) * var(--screen-width-mobile)); --post-image-width-desktop: calc(${props.element.post_image_width_desktop_px} / var(--desktop-design-reference) * var(--screen-width-desktop));`;
+}
+
+const styleString = `
+
+--post-image-border-radius: ${props.fields.post_image_border_radius};
+`
+let postType = props.post.post_data.post_type;
+let sizes = "(min-width: 1440px) 50vw, (min-width: 1024px) 50vw, (min-width: 768px) 768px') 100vw";
+
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+
+</script>
+<template>
+    <a :class="`${blockClassname}__post-image-container-link ${blockClassname}__info-item ${blockClassname}__post-image-container--${imageType} ${blockClassname}__post-image-container-link--${props.fields.show_alt_image_on_hover ? 'show-alt-image-on-hover' : 'no-hover'} ${setAsBackgroundImage ? blockClassname + '__post-image-container-link--set-as-background-image' : ''}`"
+        :href="props.post.link" :aria-label="props.post.post_title" :style="`${gridLayoutString}`">
+        <img v-if="props.post.post_images['post_' + imageType + '_src']"
+            :class="`${blockClassname}__post-image ${blockClassname}__post-${imageType} ${blockClassname}__post-image--${imageType}`"
+            loading="lazy" :src="props.post.post_images['post_' + imageType + '_src']"
+            :width="props.post.post_images['post_' + imageType + '_width']"
+            :height="props.post.post_images['post_' + imageType + '_height']"
+            :srcset="props.post.post_images['post_' + imageType + '_srcset']" :sizes=sizes
+            :alt="props.post.post_images['post_' + imageType + '_alt_text']"
+            :style="`${styleString} ${positioningString} ${postImageWidthString}`" />
+        <img v-if="props.fields.show_alt_image_on_hover"
+            :class="`${blockClassname}__post-image--secondary ${blockClassname}__post-${imageType}`" loading="lazy"
+            :src="props.post.post_images['post_' + imageType + '_src']"
+            :width="props.post.post_images['post_' + imageType + '_width']"
+            :height="props.post.post_images['post_' + imageType + '_height']"
+            :srcset="props.post.post_images['post_' + imageType + '_srcset']" :sizes=sizes
+            :alt="props.post.post_images['post_' + imageType + '_alt_text']" :style="`${postImageWidthString}`" />
+    </a>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/spacer-widget.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element", "blockClassname"]);
+const gridLayoutString = gridLayoutElement(props);
+
+const blockClassname = "post-type-filter-grid-v3";
+</script>
+<template>
+    <div :class="`${blockClassname}__post-spacer ${blockClassname}__info-item`"
+        :style="`${gridLayoutString}; --spacer-size-mult:${element.spacer_size}; --spacer-size-mult-portrait:${element.size_portrait}; --spacer-size-mult-mobile:${element.size_mobile}; --spacer-bg-colour:${element.spacer_background}`">
+    </div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/text-search.vue

@@ -0,0 +1,10 @@
+<script setup>
+const props = defineProps(["modelValue", "placeholder"]);
+const model = defineModel();
+const blockClassname = "post-type-filter-grid-v3";
+</script>
+<template>
+	<div :class="`${blockClassname}__search-container`">
+		<input :class="`${blockClassname}__search-input`" v-model="model" :placeholder="props.placeholder" />
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.js

@@ -0,0 +1,14 @@
+import {createApp} from 'vue';
+import posttypefiltergridv3 from './post-type-filter-grid-v3.vue';
+
+export default function posttypefiltergridv3Js(options = {}) {
+	try {
+		const {block} = options;
+		const mountElement = block.children[0];
+		createApp(posttypefiltergridv3, {...mountElement.dataset}).mount(
+			mountElement
+		);
+	} catch (error) {
+		console.error(error);
+	}
+}