路由和Page_Image液体对象如何帮助您构建更强大的主题?

Shopify的Liquid模板语言是一个不断发展的框架,随着商家需求的变化,Liquid会发布新的附加功能。在某些情况下,像产品媒体这样的新功能将需要一套新的特定Liquid元素。但是,Liquid对象也会迭代引入较小的变化,以提高Shopify店面的可靠性。

这个过程的一个例子是routespage_image全局对象,这是Liquid最近增加的两个对象,使您作为开发人员更容易为客户创建可靠的主题。通过让您的自定义主题与Liquid的新版本保持一致,您可以确保您的客户拥有最强大的主题,并为成功做好准备。

在这篇文章中,我们将探讨为什么要引入 “routes “和 “page_image “对象,并演示如何在您的自定义主题构建中实现它们。我们还将探讨使用这些对象的积极好处,无论是从商家的角度来看,还是从优化你自己作为主题开发者的工作流程来看。

使用routes对象提高链接可靠性

使用硬编码的URL来指定超链接的目的地,这就限制了一个静态URL。因此,如果URL格式或结构发生变化,那么在引用硬编码链接的链接上可能不支持新的特性和功能。

为了允许改变URL的格式或结构,我们引入了新的Liquid全局对象 “routes”,它为Shopify商店的特定路径生成变量,可以用来代替硬编码链接。

在您的自定义主题中使用这个全局对象的直接好处是,它将允许您的客户在他们的商店中支持多种语言。原因是routes对象会根据买家查看店铺的语言或地域输出动态URL。

你可能也喜欢: 如何优化客户的主题来销售数字产品。

例如,如果买家使用法语(fr)语言浏览店铺,{{ routes.cart_url }}属性将被输出为mystore.com/fr/cart。当买家使用主店铺语言查看店铺时,{{ routes.cart_url }}属性将被输出为mystore.com/cart

这里需要注意的是,这些locale与主题的/locale目录下的locale文件是不同的,是由API发布的,以自动创建URL路径。更多信息,请阅读我们的开发者文档,了解如何在主题中支持多语言。

模板图标

学习液体。Shopify Theming入门

获取这本免费指南,学习实用的技巧,窍门和技术,开始修改,开发和构建Shopify主题。

电子邮件

免费获取副本

通过输入您的电子邮件 – 我们也会向您发送与Shopify相关的营销邮件。您可以随时取消订阅。注意:该指南不会被发送到基于角色的电子邮件,如[email protected][email protected]

我们的虚拟齿轮正在转动。

请注意,它可以采取
我们的电子邮件15分钟
以达到您的收件箱。

使用 “routes “对象。

routes对象有14个不同的属性,用于连接Shopify店面的各种页面。这些属性包括routes.root_url,返回商店的基本URL,以及routes.collections_url,返回收藏页面的URL。所有路由属性的完整列表可以在我们的开发者文档中找到。

在Debut主题的购物车部分,我们可以通过一个有用的例子来了解routes对象是如何实现的。在这个购物车部分,我们可以找到三个实例,其中routes对象被用于不同的目的。

实例#1

route对象的第一个功能是在购物车摘要上方创建一个 “继续购物 “的链接,该链接指向目录页,目录页是一个列出商店中所有产品的页面。在下面的例子中我们可以看到,链接的href属性并没有指定URL或路径,而是指定了一个Liquid对象。

这样就会输出到。

如前所述,”Continue Shopping “文本可能会以不同的语言出现,这取决于商店如何管理本地语言。这个例子展示了一个简单的使用案例,在链接元素上使用routesLiquid对象代替硬编码的URL。

实例2

Debut的购物车页面中的第二个 “routes “对象实例是在表单元素中,其中的 “action “属性定义了提交购物车表单数据后的处理URL。这看起来像。

在本例中,action属性指定了一个表单处理器的URL。以前,我们会使用/cart来表示表单中的信息如何被发送和处理,但现在我们可以使用{{ routes.cart_url }}来定义这个路径。

这将输出到。

这说明了routes对象的应用不仅仅是为超链接生成URL。

实例#3

最后,”routes “对象用于创建 “继续购物 “按钮的链接,该按钮在购物车清空时出现。它的结构与我们看到的第一个 “继续购物 “链接类似,但利用不同的属性将买家引导到商店的主页。它的样子是这样的。

这条链接的输出是:

液体对象: 你的购物车与按钮

通过使用不同的 “路由 “属性而不是硬编码链接,您可以对您工作的主题进行未来测试,并确保它们支持对URL格式的任何更改。

你可能也喜欢: 在Shopify上构建表单。如何使用Liquid为Shopify主题构建强大的表单。

利用page_image对象优化社交分享

当你考虑到商店流量可能来自Facebook,Twitter,Instagram和其他社交媒体网站时,确保在商家分享他们的商店页面时出现最合适的图像是至关重要的。这就是为什么我们给商家提供了更好的选择,以决定当他们的Shopify商店页面在社交媒体上分享时出现哪张图片。

我们已经实现了一个新的功能,用于添加社交分享图片预览,它与主题的设置脱钩,允许商家定义他们希望在发布的链接中出现哪张图片。图片可以在店铺管理中定义,在 在线店铺 > 偏好

液体对象:社交分享图片预览

一旦图片被上传到这里,它的路径名就会在主题中使用新的page_image全局对象输出。这个 “page_image “对象可以用来指定 “og:image “在你的自定义主题的元标签中,它被社交媒体网站识别为应该显示的图片。

如何在你的自定义主题上使用page_image对象。

在推出基于管理员的社交分享图片功能之前,通常的做法是创建一个带有图片选择器的主题设置,以定义社交分享图片。一旦商家通过这个主题设置上传了图片,它就可以在主题的元属性中作为一个设置变量被引用,并被社交媒体网站识别为og:image

然而,如果商家更换主题,他们就有可能失去他们的社会化分享图片,因为它是直接与主题绑定的。一个更可靠的方法是将社交分享图片存储为与商店相关联的资源,并使用page_image全局Liquid对象进行访问。

在自定义主题上实现这种方法需要编辑主题的og:image元属性,以确保内容属性指定page_image对象。这将允许你自动输出一个存储在admin上的图片路径,并将其定义为og:image属性。下面是需要遵循的步骤。

1. 确定主题的社会元标签的位置

第一步是确定主题的社会元标签的位置。社会元标签通常包含在一个snippet文件中,在你的主题中搜索 “og:image “就可以找到你需要更新主题的地方。

如果你的自定义主题使用主题设置的方法来定义 “og:image”,很可能你会看到一个元属性,为 “og:image “指定一个settings对象。

<meta property="og:image" content="http:{{ settings.share_image | img_url: '1200x1200' }}">

2. 拔出一张与商店相关的图片代替

这里的 “settings.share_image “指的是一个ID为 “share_image “的设置,在主题的 “settings_schema.json “文件中可以找到。如果要提取与商店相关联的图片,我们可以简单地用page_image替换settings.share_image

<meta property="og:image" content="http:{{ page_image | img_url: '1200x1200' }}">

现在,当一张图片被上传到商店管理员的社交分享图片区域时,元属性元素将输出为类似的内容。

<meta property="og:image" content="https://cdn.shopify.com/s/files/1/0416/1054/3253/files/liams-logo.png?v=1594876636" />

3. 删除以前的主题设置

最后,之前允许商家选择社交分享图片的主题设置可以从settings_schema.json文件中删除,以避免您的客户看到这个多余的设置时产生任何混淆。

测试你的og:image

一旦你添加了page_image对象到你的自定义主题,你可以使用Facebook共享调试器测试og:image是否在社交媒体网站上正确注册。这个工具允许你输入一个URL,并检查必要的metatags和og标签是否正确设置,以及预览链接将如何出现在Facebook上。

要测试你的主题的新og:image配置,你可以导航到 在线商店 > 首选项 > 社交分享图片 并上传图片。

Liquid objects: social sharing image with theme

保存后,您可以将商店的 URL 输入 Facebook 调试工具,以刮取您的商店的元数据。一个报告将返回任何缺少的必要属性的信息和警告。如果page_image对象设置正确,你会看到你上传的图片出现在预览中。

液体对象:刮开后输出

你可能也喜欢: 前端开发者的20个最佳Visual Studio代码扩展。

如何跟踪Liquid对象的更新?

随着Shopify商家的新功能的出现,Liquid也会有新的更新,让您可以为客户提供服务,并改善您的主题定制构建。您可以通过订阅我们的开发者变更日志和我们为合作伙伴提供的最新资讯来跟踪Liquid的这些新功能。

通过使用Liquid对象来实现这些更新,您的客户可以放心地使用任何新功能,而您作为开发者的一般工作流程也得到了优化,使之尽可能地简单。

为Shopify商家构建应用程序

无论您是想为Shopify应用商店构建应用程序,提供定制的应用程序开发服务,还是正在寻找增长用户群的方法,Shopify合作伙伴计划都会让您获得成功。免费加入并获得教育资源、开发者预览环境和经常性收入分享机会。

注册

发表评论 0

Your email address will not be published. Required fields are marked *