Shopify - 将新的自定义标签添加到产品详细信息页面

时间:2017-01-18 15:07:49

标签: php html shopify liquid

我有一个基于Shopify的网站。在我的产品详细信息页面上,我有3个选项卡,一个显示产品描述,另一个显示网站发货信息,第三个显示产品的客户评论。但是,我需要添加一个名为“care”的新列,然后我需要在Shopify管理员中创建/编辑产品时能够输入每种产品独有的产品唯一护理信息。

我找到了本教程,但它对如何向产品添加新内容没有帮助 {{3}}

任何可以帮助我的建议教程?我很满意html甚至php我只是不知道要编辑哪些文件。该站点已经安装了jquery和bootstrap。

感谢

1 个答案:

答案 0 :(得分:1)

这是在Shopify中开发主题最令人沮丧的事情之一 - 向产品和页面添加自定义内容并不容易。尽管支持所有内容类型(博客,文章,页面和产品)的元字段,但无法在Shopify编辑视图中创建或编辑这些字段及其内容。有关元数据的文档,更多信息和教程可以在这里找到:https://www.shopify.com/partners/blog/110057030-using-metafields-in-your-shopify-theme

如果您在问题中提到的教程不符合您的需要,可能会有以下选项之一,但两者都需要熟练使用Liquid。

<强> 1。使用元字段编辑器应用

在自定义元字段中存储并显示第4个标签的内容,遗憾的是,在编辑产品视图中无法显示该字段。

我使用Shopify FD(http://shopifyfd.com/)或他们的微升版Shopify Custom Fields获得了最好的运气,尽管两者都要求您安装Chrome扩展程序以便在应用程序之外使用它。如果您要为客户构建网站,这可能不是管理内容最友好的方式,但可以完成工作。按照上面链接中的安装说明开始使用。

一旦您能够创建和编辑元数据域,您将需要更新product.liquid模板以使用相应的键来渲染元数据。

{{ product.metafields.care_instructions }}

<强> 2。将内容放在说明中并使用Liquid提取它

此解决方案并不理想,但执行起来很简单。基本思想是描述字段将包含产品描述以及由唯一字符串分隔的保养说明。使用唯一字符串将描述拆分为数组。然后,数组中的第一项将是描述,第二项是护理说明。

    {% comment %}
        First create and capture the description into variables if the delimiter string is found.
    {% endcomment %}

    {% if product.description contains "<!-- #care_instructions -->" %}

        {% assign content =  product.description | split: "<!-- #care_instructions -->" %}
        {% assign description = content[0] %}
        {% assign care_instructions = content[1] %}

    {% else %}
        {% assign description = product.description %}
        {% assign care_instructions = false %}
    {% endif %}

    {% comment %}
        description will always exist as the product description content regardless if the delimiter is found
    {% endcomment %}

    {{ description }}

    {% comment %}
        if care_instructions is not false display it
    {% endcomment %}
    {% unless care_instructions == false %}
        {{ care_instructions }}
    {% endunless %}

您需要将上面的内容包装在Bootstrap选项卡标记中以便正确显示,并且当care_instructions设置为false时,可能需要添加条件以限制选项卡导航元素的显示,以避免用户单击空选项卡。