How to migrate collections and pages using Linklist to Dawn theme?

Store Design
,
1

I’m currently trying to migrate from a Vintage Shopify theme to Shopify 2.0’s Dawn theme.

I’m trying to recreate something I was able to accomplish with the Vintage theme, but I’m hitching up on one bit. This is what it currently looks like: https://shop.march1studios.com/pages/ttrpg

Each of those blocks is either a page of collections, or a collection. The pages take the first collection in their own linklist and use that as the image on this page, and look like the straight collections except they have a count on how many designs are on those pages.

I’m almost able to do this with the code below, but I don’t know how to grab the image from the first collection, and pass it to the ‘card_collection’ render.

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}

  {% assign collections = linklists[page.handle].links %}
  {% assign collections = collections | reverse %}

  

    {% for link in collections %}
      {% if link.type == 'collection_link' %}
        {% assign collection = link.object %}
        - {% render 'card-collection',
              card_collection: collection,
              media_aspect_ratio: section.settings.image_ratio,
              columns: 3
            %}
        

      {% elsif link.type == 'page_link' %}
 
    // use title and url from page 
    // get first collection image from that pages linklist 
    // pass to'card-collection' as collection object

        - {% render 'card-collection',
              card_collection: collection,
              media_aspect_ratio: section.settings.image_ratio,
              columns: 3
            %}
        
      {% endif -%}
      "
    {% endfor %}
  

{% schema %}
{
  "name": "Category Collections",
  "class": "section",
  "settings": [
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.main-list-collections.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.main-list-collections.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.main-list-collections.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.main-list-collections.settings.image_ratio.label",
      "info": "t:sections.main-list-collections.settings.image_ratio.info"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 3,
      "label": "t:sections.main-list-collections.settings.columns_desktop.label"
    },
     {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.main-list-collections.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.main-list-collections.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "2",
      "label": "t:sections.main-list-collections.settings.columns_mobile.label"
    }
  ],
  "presets": [
    {"name": "Category Collection List"}
  ]
}
{% endschema %}
2

I know this is wrong because it’s not working, but I think it’s something like this?


      {% elsif link.type == 'page_link' %}
        {% assign collection_page = link.object %}
        {% for link in linklist[collection_page.handle].links limit: 1 %}
          {% assign collection_image = link.object %}
          {% capture collection_array %}
            "title": "{{- collection_page.title -}}", "url": "{{- collection_page.url -}}", "featured_image": "{{- collection_image.featured_image -}}"
          {% endcapture %}
          {% assign collection = collection_array | split: ',' %}
          - {% render 'card-collection',
                card_collection: collection,
                media_aspect_ratio: section.settings.image_ratio,
                columns: 3
              %}
3

I figured it out.

I did this:

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}

  {% assign collections = linklists[page.handle].links %}
  {% assign collections = collections | reverse %}

  

    {% for link in collections %}
      {% if link.type == 'collection_link' %}
        {% assign collection = link.object %}
        - {% render 'card-collection',
              card_collection: collection,
              media_aspect_ratio: section.settings.image_ratio,
              columns: 3
            %}
        

      {% elsif link.type == 'page_link' %}
        {% assign collection_page = link.object %}
        - {% render 'card-page-collection',
              card_collection: collection_page,
              media_aspect_ratio: section.settings.image_ratio,
              columns: 3
            %}
        
      {% endif -%}
    {% endfor %}
  

{% schema %}
{
  "name": "Category Collections",
  "class": "section",
  "settings": [
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.main-list-collections.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.main-list-collections.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.main-list-collections.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.main-list-collections.settings.image_ratio.label",
      "info": "t:sections.main-list-collections.settings.image_ratio.info"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 3,
      "label": "t:sections.main-list-collections.settings.columns_desktop.label"
    },
     {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.main-list-collections.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.main-list-collections.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "2",
      "label": "t:sections.main-list-collections.settings.columns_mobile.label"
    }
  ],
  "presets": [
    {"name": "Category Collection List"}
  ]
}
{% endschema %}

I duplicated the card_collection snippet into card_page_collection snippet, and did this:

{% comment %}
  Renders a collection card from a page

  Accepts:
  - card_collection: {Object} Page Liquid object
  - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
  - columns: {Number}
  - extend_height: {Boolean} Card height extends to available container space. Default: false (optional)
  - wrapper_class: {String} Wrapper class for card (optional)

  Usage:
  {% render 'card-page-collection' %}
{% endcomment %}

{% for link in linklists[card_collection.handle].links limit: 1 %}
  {% assign card_collection_image = link.object %}
{% endfor %}

{%- liquid
  assign ratio = 1
  if card_collection_image.featured_image and media_aspect_ratio == 'portrait'
    assign ratio = 0.8
  elsif card_collection_image.featured_image and media_aspect_ratio == 'adapt'
    assign ratio = card_collection_image.featured_image.aspect_ratio
  endif
  if ratio == 0 or ratio == null
    assign ratio = 1
  endif
  assign card_color_scheme = settings.card_color_scheme
  assign card_style = settings.card_style
  if wrapper_class == null or wrapper_class == 'none'
    assign card_color_scheme = settings.collection_card_color_scheme
    assign card_style = settings.collection_card_style
  endif
-%}

  

    

      {%- if card_collection_image.featured_image -%}
        

          

            
          

        

      {%- endif -%}
      
        

          ### 
            
              {%- if card_collection.title != blank -%}
                {{- card_collection.title | escape -}}
              {%- else -%}
                {{ 'onboarding.collection_title' | t }}
              {%- endif -%}
              {%- if card_collection.description == blank -%}
                {% render 'icon-arrow' %}
              {%- endif %}
            
          
          {%- if card_collection.description != blank -%}
            

              {{- card_collection.description | strip_html | truncatewords: 12 -}}
               {% render 'icon-arrow' %}
            

          {%- endif -%}
        

      

    

    {% if card_style == 'card' or card_collection_image.featured_image %}
      
        

          ### 
            
              {%- if card_collection.title != blank -%}
                {{- card_collection.title | escape -}}
              {%- else -%}
                {{ 'onboarding.collection_title' | t }}
              {%- endif -%}
              {%- if card_collection_image.featured_image or card_collection.description == blank -%}
                
                  {%- render 'icon-arrow' -%}
                
              {%- endif %}
            
          
          {%- if card_collection_image.featured_image == null and card_collection.description != blank -%}
            

              {{- card_collection.description | strip_html | truncatewords: 12 -}}
               {% render 'icon-arrow' %}
            

          {%- endif -%}
        

      

    {% endif %}