Astra主题提供WooCommerce Product Gallery,即产品页的产品轮播图体验不令人满意,问题很明显,没有设计成Carousel,缩略图多了断行,切换不平滑,是个半吊子实现,对于这样一个业内如此为人熟知的主题,实在是不应该的,如果要深究原因,恐怕和我在好的定制与坏的定制里说的,Astra面对WooCommerce深度定制的巨大城墙前选择了退守,这是可以理解的。

但该实现的东西总得实现,没有店长愿意给客户半吊子体验,尤其是产品详情页,上面的每个交互用例都影响转化率,客户不是傻子,没吃过猪肉也见过猪跑,他们会下意识地和自己曾经访问过的某个电商站(它很可能是amazon)的体验来比对,如果你的实现让他觉做出的情感判断是Low的,那么下单这回事有可能就没戏了。

如何完成这个定制?

Product Gallery Slider for WooCommerce

这个插件的描述看,他应该是我们需要的:把产品轮播区域Carousel化。大致看过免费版的介绍以后,我们决定直接去它的付费版主页,因为Mouse Dragging Option是我们不愿放弃的,尤其是移动端,视频支持、细粒度的LightBox控制也很nice,Elementor兼容性意味着客户在需要的时候可以无技术人员干预下换配,这很不错。

原来它的付费版叫Twist,这是一个让人云里雾里的名字,wp.org页上开发者上传的截图,隐隐让我感到作者可能不是Designer出身,因为第一张截图展示的是一种粗糙的Design Value … 但话说回来,“现在”这些东西都无伤大雅,也许我自己换配能让它优雅起来,只要它能解决我的根本问题,如果它能让我(和客户)未来永远不为这个功能写一行代码,那么29美金是绝对值得的。

很不幸,我购买的上面的第一个插件,对,就是29美金的那个,在我们部署到生产站一个多月以后的某天,主题完成某个主要版本升级后,出现了严重兼容性问题:我们的PHP错误日志里居然监测到了不少Memory Exhausted的致命错误,而错误的源头就来自这个插件的某个文件,这让我们措手不及。

我不得不再次对这个插件的代码进行重新评估,和我的第一印象一样,插件虽然把承诺的功能实现得不错,但它的PHP代码难以令人尊重。虽然作者承诺会解决问题,因为我们的Support并没有过期,只不过他回邮件的间隔平均是3天以上,在强烈的直觉指引下,我还是决定换掉它,一个不够好的插件可以改进,一个不够好的程序员却是项目的风险因素,他不会有第二次机会。

WooThumbs

IconicWP的WooThumbs被展示的方式显然让人更有信心,我喜欢在插件主页看到客户评价里有“Polished”字样,只不过如果这个4.73的平均分是TrustPilot的更好,但没有什么是完美的。价格是79美金每年,14天试用期,30天内无理由退款,这很好,Testmonial里有WooCommerce业内人士的评语,如果businessbloomer的作者说这是一个有质量的插件,那么它大概是的。

我们的目标仍然是实现一个完整的、优质的Product Gallery体验。移动设备优化、视频支持、款式多图支持、缩放、全屏、响应速度配置 …. 而且考虑了Accessibility,这一点让我彻底放下了疑虑。

它在我几个客户的网站上工作得很好,我们和开发者的合作很顺畅,客户也很满意这笔投资,因为在不到一个小时培训之后,他们可以完全控制这个插件的行为,不必央求不解风情的程序员的干预,他居然还要按小时收服务费,过分!

调动Elementor,釜底抽薪

有时候设计师比客户跟难满足,这不,她这次改版决定彻底重制产品详情页,100%宽度的鱼眼风Carousel最近是她的最爱,她已经给我看了设计稿,不可否认,看到新设计第一眼起,我就有点击欲望,图片显示区域大了整整30%,桌面上3图同显让缩略图行不再必要,一切都一目了然,产品给人的观感无疑更加活泼、自信且附有个性了。

很显然我们需要Theme Builder,用它来制作Single Product的Template,这没有问题,但如何实现这个自信的鱼眼风?任何市场上的Elementor WooCommerce Widget都爱莫能助,前面提到的插件也无能为力,它们的能力仅限于做出一个漂亮的Carousel,但它们的作者可从来没考虑过有人会要鱼眼效果 — 其实这是设计师同学喜欢用的表述,这不失贴切,其实也可以叫Coverflow。

只要对着Elementor主页多祈祷几次,或者在WooCommerce Support页装乖乖孩,问题就能在梦中解决:

add_shortcode('custom_coverflow_product_gallery', function ($atts) {
	global $product;
	
	$attachment_ids = $product->get_gallery_attachment_ids();
	$slides = [];

	foreach( $attachment_ids as $attachment_id ) 
	{	
		$slides[] = [
			'image' => [
				'url' => wp_get_attachment_image_src( $attachment_id, 'medium' )[0],
				'id' => '',
			],
			'type' => 'image',
			'image_link_to_type' => '', 
			'image_link_to' => '',
		];
	}

	
	$media_carousel = \Elementor\Plugin::instance()->elements_manager->create_element_instance(
		[
			'elType' => 'widget',
			'widgetType' => 'media-carousel',
			'settings' => [
				'skin' => 'coverflow',
				'slides' => $slides,
			],
		],
		[]
	);
	
	$media_carousel->print_element();
	
});

如果没有人托梦相助,你也可以在Elementor(及Elementor Pro)的源码文件夹里找到蛛丝马迹。如果需求把我们逼到代码这个墙角,也就只有置之死地而后生了。

哦对了,这一切,你的Shopify都做不到 ^^

我想写上一段基于WooCommerce的templates/single-product定制的炫技结尾,但和WC源码拼刺刀并不是我们用WC的目的,我以前也写过,这不仅缺乏品位,而且危险,打住吧。

发现错别字麻烦选中按Ctrl+Enter

文章更新时给我发邮件

类似文章

0 Comments
内联反馈
查看所有评论