Add support for passing nested arguments to Bookshop tags

[silveltman]

I have a component in a collection loop with a button that needs to have the collection-item's url as href. I want to have the frontmatter for this button as an object (it is actually a bit more deeply nested, but I simplified for this post):

button:
  text: 
  url: 

component.eleventy.liquid:

<div>
  <h2>{{ title }}</h2>
  <p>{{ description }}</p>
  <div>
    <a href="{{ button.url }}">
      {{ button.text }}
    </a>
  </div>
</div>

Component.bookshop.toml:

[component]
structures = []
label = "cards-big"
description = ""
icon = ""
tags = []

[props]
title = "Mijn titel"
description = "Mijn omschrijving"

[props.button]
text = "Primary"
url = "#"

What I want:

---
_card_buttons:
  primary:
    text: Huren
    url: /huren
  secondary:
    text: + Meer info
    url: #
---

{% for item in collections.sloepen %}
   {% bookshop "card/big" bind: item.data button.url: {{ item.fileSlug }} button.text: "huren" %}
{% endfor %}

However, I can't pass a multi-level/nested argument this way (button.url & button.text).

Any suggestions?

[bglw]

This is a common frustration with Liquid, since it doesn't provide the ability to build objects on the fly. The two ways I usually tackle this are:

1. Flatten the props to button_text and button_url, or
2. Write a plugin that can do fancy object stuff. I don't have one on hand for Eleventy, though.

I can keep this issue open though and consider adding a way to do this specifically for the bookshop tag

[silveltman]

Yeah, I think I should go for option 1 right now. Get's a bit messy when having object with multiple levels, but I can live with that :) Diving into the plugin thing would be to dive in later.

Thanks!