Stockist Grid Block with Metaobject List

stockist-grid-block.liquid

{% doc %}
  @prompt
    Create a block with a setting for `metaobject_list` with   "metaobject_type": "stockists" — for every metaobject selected, render a div with the following content — 
    
    1. A title with a link tag that pulls the link from the metafield 'stockists.website' and the title of the link is 'stockists.company'
    
    2. a link tag for the address, with the link href going to the metafield `stockists.google_maps_link` (note this might not always exist) — and the title of the link being `stockists.address` metafield
    
    add a css class for ".paragraph" to the parent div — it also should be rendering each metaobject in a grid layout 
    
    by default has 2 columns, on small-ish screens 3, on medium screens 4, large screens 5, and xl screens 6 columns
    
    Use the equivalent CSS of the following Radix CSS classes for the grid wrapper: "rt-Grid rt-r-gtc-1 xs:rt-r-gtc-2 sm:rt-r-gtc-3 md:rt-r-gtc-4 lg:rt-r-gtc-5 xl:rt-r-gtc-6 rt-r-gap-4 sm:rt-r-gap-8 rt-r-pb-8"
    
    Use the equivalent CSS of the following Radix CSS classes for each grid item: "rt-Flex rt-r-fd-column rt-r-gap-2"
    
    All text will have the "paragraph" CSS class., Links should not have any underline.

{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}

{% style %}
  .ai-stockists-grid-{{ ai_gen_id }} {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 32px;
  }

  @media (min-width: 480px) {
    .ai-stockists-grid-{{ ai_gen_id }} {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 640px) {
    .ai-stockists-grid-{{ ai_gen_id }} {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 32px;
    }
  }

  @media (min-width: 768px) {
    .ai-stockists-grid-{{ ai_gen_id }} {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .ai-stockists-grid-{{ ai_gen_id }} {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  @media (min-width: 1280px) {
    .ai-stockists-grid-{{ ai_gen_id }} {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  .ai-stockist-item-{{ ai_gen_id }} {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ai-stockist-item-{{ ai_gen_id }} .paragraph {
    margin: 0;
  }

  .ai-stockist-item-{{ ai_gen_id }} a {
    color: inherit;
    text-decoration: none;
  }

  .ai-stockist-item-{{ ai_gen_id }} a:hover {
    text-decoration: none;
  }
{% endstyle %}

<div class="ai-stockists-grid-{{ ai_gen_id }}" {{ block.shopify_attributes }}>
  {% for stockist in block.settings.stockists %}
    <div class="ai-stockist-item-{{ ai_gen_id }} paragraph">
      {% if stockist.company and stockist.website %}
        <a href="{{ stockist.website }}" target="_blank" rel="noopener noreferrer" class="paragraph">
          {{ stockist.company }}
        </a>
      {% elsif stockist.company %}
        <span class="paragraph">{{ stockist.company }}</span>
      {% endif %}

      {% if stockist.address %}
        {% if stockist.google_maps_link %}
          <a href="{{ stockist.google_maps_link }}" target="_blank" rel="noopener noreferrer" class="paragraph">
            {{ stockist.address }}
          </a>
        {% else %}
          <span class="paragraph">{{ stockist.address }}</span>
        {% endif %}
      {% endif %}
    </div>
  {% endfor %}
</div>

{% schema %}
{
  "name": "Stockists",
  "settings": [
    {
      "type": "metaobject_list",
      "id": "stockists",
      "label": "Stockists",
      "metaobject_type": "stockists"
    }
  ],
  "presets": [
    {
      "name": "Stockists"
    }
  ],
  "tag": null
}
{% endschema %}