Displaying Shopify Product List in home.php

The CMS Questions
1

I am using the Shopify plugin, and it seems to be connected properly. However, I want to display the product list in home.php, and I’m not sure how to do it. The method I usually use doesn’t work here. Previously, I used the following approach to load the children of a page.

templates/home.php
A

<?php if ($productsPage = page('shopify.products')): ?>
  <ul>
    <?php foreach ($productsPage->children()->products() as $product): ?>
      <li>...</li>
    <?php endforeach ?>
  </ul>
<?php endif ?>

B

<?php if ($productsPage = page('shopify.products')): ?>
  <ul>
    <?php foreach($productsPage->products()->toPages() as $product): ?>
      <li>...</li>
    <?php endforeach ?>
  </ul>
<?php endif ?>

blueprints/pages/shopify.products.yml

title: Products
options:
  delete: false
  changeTemplate: false
  changeStatus: true
sections:
  products:
    headline: Products
    type: pages
    info: "{{ page.handle }}"
    template: shopify.product

blueprints/pages/shopify.product.yml

title: Product
options:
  delete: false
  changeTitle: false
  changeTemplate: false
  changeSlug: false
  changeStatus: false

tabs:
  zeropage:
    label: Shopify
    icon: image
    columns:
      - width: 1/1
        sections:
          shopify:
            type: fields
            fields:
              shopifyTitle:
                label: Title
                type: text
                disabled: true
                width: 2/4
              shopifyID:
                label: ID
                type: text
                disabled: true
                width: 1/4
              shopifyHandle:
                label: Handle
                type: text
                disabled: true
                width: 1/4
              shopifyPrice:
                label: Price
                type: text
                disabled: true
                width: 1/4
              shopifyCompareAtPrice:
                label: Compare At Price
                type: text
                disabled: true
                width: 1/4
              shopifyFeaturedImage:
                label: Featured
                type: structure
                fields:
                  src:
                    label: URL
                    type: url
                disabled: true
                width: 1/2
              shopifyDescriptionHTML:
                label: Description
                type: textarea
                disabled: true
              shopifyImages:
                label: Images
                type: structure
                fields:
                  src:
                    label: URL
                    type: url
                disabled: true
              shopifyVariants:
                label: Variants
                type: structure
                fields:
                  title:
                    label: Title
                    type: text
                  price:
                    label: Price
                    type: text
                  compare_at_price:
                    label: Compare at price
                    type: text
                  inventory_quantity:
                    label: Inventory
                    type: text
                  sku:
                    label: SKU
                    type: text
                disabled: true
              shopifyURL:
                label: URL
                type: url
                disabled: true
              shopifyType:
                label: Type
                type: text
                disabled: true
                width: 1/2
              shopifyVendor:
                label: Vendor
                type: text
                disabled: true
                width: 1/2
              shopifyTags:
                label: Tags
                type: tags
                separator: ,
                disabled: true
  typeface:
    icon: text
    label: Typeface
    columns:
      - width: 1/2
        fields:
          typename:
            label: Typeface Name
            type: text
          typedescription:
            label: Typeface Description
            type: writer
      - width: 1/2
        fields:
          typenamekr:
            label: 글자 이름
            type: text
          typedescriptionkr:
            label: 글자 설명
            type: writer
      - width: 1/1
        fields:
          typeinfo:
            label: Additional information
            type: structure
            width: 1/1
            fields:
              title:
                label: 링크 제목 Link Title
                type: text
              btntype:
                label: 링크 종류 Link Type
                type: radio
                default: onebtn
                options:
                  onebtn: 링크 이동 Link
                  twobtn: 다운로드 파일 Download
              urllink:
                label: 링크 Link
                type: url
                when:
                  btntype: onebtn
              coverthree:
                label: 파일 File
                type: files
                layout: cards
                template: cover
                info: "{{ file.dimensions }}"
                uploads: false
                image:
                  ratio: 5/4
                  cover: true
                multiple: false
                size: small
                when:
                  btntype: twobtn

  designer:
    icon: text
    label: Designer
    columns:
      - width: 1/2
        fields:
          name:
            label: Name
            type: text
          description:
            label: Description
            type: writer
      - width: 1/2
        fields:
          namekr:
            label: 이름
            type: text
          descriptionkr:
            label: 설명
            type: writer
      - width: 1/1
        fields:
          sns:
            label: SNS
            type: structure
            width: 1/1
            fields:
              title:
                label: 링크 제목 Link Title
                type: text
              btntype:
                label: 링크 종류 Link Type
                type: radio
                default: onebtn
                options:
                  onebtn: 링크 이동 Link
                  twobtn: 다운로드 파일 Download
              urllink:
                label: 링크 Link
                type: url
                when:
                  btntype: onebtn
              coverthree:
                label: 파일 File
                type: files
                layout: cards
                template: cover
                info: "{{ file.dimensions }}"
                uploads: false
                image:
                  ratio: 5/4
                  cover: true
                multiple: false
                size: small
                when:
                  btntype: twobtn

  content:
    icon: text
    label: Sample
    fields:
      layout:
        label: Layout
        type: layout
        layouts:
          - "1/1"
          - "1/2, 1/2"
          - "1/3, 1/3, 1/3"
  # https://getkirby.com/docs/guide/blueprints/layout#defining-columns

  twopage:
    label: Files
    icon: file
    columns:
      - width: 1/1
        sections:
          images:
            type: files
            layout: cards
            template: image
            info: "{{ file.dimensions }}"
            image:
              ratio: 5/4
              cover: true
            # min: 1
            size: small
2

B only make sense if the pages are selected in a pages field called products,
A doesn’t make sense at all, because you cannot call a field name on a collection.

so we need more information about your content structure

1 Like
3

Thank you for the quick response. :pray:

I have added the contents of shopify.products.yml and shopify.product.yml to my original text.

Regardless of what is inside the <li>..</li>, the number of <li> elements should match the number of children in shopify.products. I realized it wasn’t working because it wasn’t functioning as expected from this point.

Is there anything else you need aside from what I mentioned above?

4

If anyone is familiar with this issue, please help :smiling_face_with_tear:

5

Should be

<?php if ($productsPage = page('shopify.products')): ?>
  <ul>
    <?php foreach ($productsPage->children() as $product): ?>
      <li>...</li>
    <?php endforeach ?>
  </ul>
<?php endif ?>
1 Like
6

@moonwalk Lifesaver!!! Thank you. The code you provided works perfectly.

<?php if ($productsPage = page('products')): ?>
  <ul>
    <?php foreach ($productsPage->children() as $product): ?>
      <li>...</li>
  <?php endforeach ?>
  </ul>
<?php endif ?>