Shopify 部分中的变量范围

Posted 2023-02-15

【中文标题】Shopify 部分中的变量范围

【英文标题】：Variable scope in Shopify Sections

【发布时间】：2018-11-24 01:47:16

【问题描述】：

我试图在我的部分文件中使用一个变量，但它似乎不是从它的父模板继承的。

例如：

index.liquid

% assign foo = "bar" %
% section 'example' %

sections/example.liquid

<h1> foo </h1>

% schema %

    "name": "Example",
    "settings": [
       ...
    ]

% endschema %

它不会输出 foo 的值，而是我只得到：<h1></h1>，就好像从未定义过变量一样。

我认为部分会像 sn-ps 一样工作，其中父模板中定义的任何内容都将在包含的 sn-p 的范围内：

index.liquid

% assign foo = "bar" %
% include 'example' %

sn-ps/example.liquid

<h1> foo </h1>

渲染时我会在哪里得到<h1>bar</h1>。

这是错误还是预期行为？ 有没有一种方法可以包含一个部分并使用某种形式的外部作用域中的变量？

谢谢！

【参考方案1】：

如果这是预期的行为，我设法找到解决方法，并认为我会发布我的不完美但可行的解决方案：

sections/example.liquid

<h1><!-- foo --></h1>

您可以使用捕获，将部分的内容作为字符串获取，并在捕获的标记上使用字符串过滤器：

index.liquid

% assign foo = "bar" %
% capture section %% section 'example' %% endcapture %
 section | replace: '<!-- foo -->', foo 

您当然可以用您的变量替换任何字符串。但我发现 html cmets 运行良好，因为如果您忘记运行替换，或者不需要 - 什么都不会呈现。

如果你想做一些更复杂的事情，比如从部分中删除一些标记，你可以：

sections/example.liquid

<div>

    <!-- REMOVE_TITLE? -->
    <h1> section.settings.title </h1>
    <!-- REMOVE_TITLE? -->

    <ul>
        % for block in section.blocks %
            <li> block.settings.image | img_url: '300x' | img_tag </li>
        % endfor %
    </ul>
</div>

然后你可以这样做：

% capture section %% section 'example' %% endcapture %
% assign parts = section | split: '<!-- REMOVE_TITLE? -->' %
% for part in parts %
    % assign mod = forloop.index | modulo: 2 %
    % if mod > 0 % part % endif %
% endfor %

【讨论】：

这可能是我在 Shopify 和 Liquid 上见过的最脏的东西之一，太棒了！

我以为我已经看到了一切......绝对是 Shopify 上最肮脏的把戏之一！非常感谢！

用js做会不会更方便？

你也可以用'param WITH'发送它

@FabricioG 在这个特定的例子中，是的，JS 会产生更简洁的代码。但是我的实际实现会导致很多多余的 HTML，出于 SEO 的原因我不想复制这些 HTML。在使用部分时，“with”参数对我不起作用，仅适用于包含。

【参考方案2】：

我会在一个 sn-p 中分配你所有的变量，并在你需要在其中使用变量的任何范围内包含这个相同的 sn-p。

这是一种相当干燥的方法。

config/settings_schema.json 中定义的任何内容都具有全局范围，但最终用户可以在主题设置中为其赋予新值。