Using variables in the new {% render %} tag

CharlieCoppinge
Shopify Partner
8 0 4

This question has stemmed from the Shopify Partners Slack group, where myself and Will Christenson are hunting for an answer.

As Will wrote:

I recently read up on include being deprecated in favor of render (https://shopify.dev/docs/themes/liquid/reference/tags/deprecated-tags) - but have discovered a MAJOR issue with render, which is that it doesn’t allow you to include a snippet by using a variable for the snippet name (eg. {% render sizeSvg %} ). This breaks a number of development patterns we’ve used in the past, and is very problematic. Can anyone speak to whether or not Shopify is going to address that bug? Or alternatives?

Here is a link to a screenshot of the full thread:

https://monosnap.com/file/rZa49XgVGyNnJUG8hmeKEq3cB5z0em

Any takes on how to use a variable name inside the render tag?

Replies 9 (9)

diego_ezfy
Shopify Partner
2967 571 900

Hello,

There are three ways of doing it: using assigncapture or simply passing the variable value as an argument.

Here is a simple code for you test it out:

1. Create this snippet called custom-test.liquid.

<p>name: {{name}}</p>
<p>test: {{test}}</p>
<p>age: {{age}}</p>

2. At theme.liquid add this right below the <body>:

  {% assign test = 'llama' %}
  {% capture name %}
      kangaroo
  {% endcapture %}
  {% render 'custom-test', name: name, age: 10, test: test %}


As you can see, you can simply pass the variables you want by separating them with a comma.

Let me know if this solves your issue!

Regards,
Diego 

CharlieCoppinge
Shopify Partner
8 0 4

Thank you very much @diego_ezfy, I think that's the answer we were looking for.

I've posted your reply on the original Slack thread from which this question originated from, and once Will has had the chance to confirm this is the solution I'll go ahead and mark your answer as such.

Much appreciated!

CharlieCoppinge
Shopify Partner
8 0 4

Unfortunately it seems what we're trying to accomplish isn't possible after all; here's the response over on the Slack thread:

https://monosnap.com/file/rPHmaV2TQw0zUHJH7NPY74it8eYDmU

If you're a member of the Shopify Partners Slack Community, you can follow this link to view the thread directly:

https://shopifypartners.slack.com/archives/CD2QPG0LS/p1595026118181300

PaulNewton
Shopify Partner
6339 580 1350

Dynamic variable includes while useful should be avoided and considered for refactoring in legacy code.

I'd consider it an anti-pattern for any theme intended for merchants, since it's confusing to merchants(and developers) as to which snippet is actually being called.

If you need this level of dynamism consider an intermediary snippet that has described parameters used in switch statement to render final snippets.

We'll probably start seeing more of that for media objects , and yes irony of ironies avoiding such switch statements is the exact reason we want to use dynamic variable includes.

 

For a series of snippets ,intended for enumerable object's , use {% render %}'s for parameter in the switch

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


attotasolutions
Shopify Partner
30 0 20

Oh Noooo.

Because of this change (render), I have write to 100 lines instead of 1 line.

It looks like it is not an upgrade, it is an downgrade.

Please work on it asap.

deMenezes
Tourist
8 0 4

You said what I wanted to say

 

"It looks like it is not an upgrade, it is an downgrade."

benhu
Shopify Partner
4 0 3

In year 2023 I am still feeling this is a down grade rather than upgrade. The most serious issue is rendered child snippet won't be able to access variables in the parent liquid. I know you may pass them as argument, however, there are more issues, for example, what if my snippet is more than one layer down the parent liquid? should I pass all the way down? 

We have state management technology in the Javascript world, when comes to components. What is liquid doing here?

Correct me please if I am making any mistake.

deMenezes
Tourist
8 0 4

prop drilling is my passion

PaulNewton
Shopify Partner
6339 580 1350

It's a performance , scope and security upgrade.

It's only a downgrade for the developer experience.

{% include %} is still perfectly usable it's just not supported.

Since it's unsupported using it runs the risk of not working one day if removed from the platform entirely (imo that would be an insane forced migration so I don't see it happening).

 


@benhu wrote:

, what if my snippet is more than one layer down the parent liquid? should I pass all the way down? 


Yes currently message passing through parameters is the pattern.

Minimize the api(parameters) of every snippet used.

For this to ever change submit feature requests or have the merchant do it*

 


@benhu wrote:

We have state management technology in the Javascript world, when comes to components. What is liquid doing here?

Dial back comparisons and expectations.

Liquid is a server side TEMPLATING language intended for merchants on a cloud platform.

 

When developers find ways to do complicated things in liquid we aren't helping merchants simplify their theme, generally what we are doing is adding complexity for the sake of the merchant to try and avoid things like having to use an app, or avoid the cost of creating a flexible self-hosted self-managed ecommerce stack.

 

If javascript features are wanted then use javascript , see the dev docs about custom storefronts using the javascript-buy-sdk's or hydrogen.

 

*We cannot make objects, or hoisted global objects/variables in shopifys liquid such as we can't make a variable inside a snippet to be used by the file calling the snippet later in the calling file ; unless we do {% capture %} parsing tricks decreasing theme performance and complicating theme code.

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org