Kirby 3 Shopify plugin - shopify.products not found

Hi there / @tristantbg,

I just installed the Shopify plugin https://github.com/tristantbg/kirby-shopify

But I am getting “The page “shopify.products” cannot be found” in the panel.

I went through the setup again (on Kirby and Shopify API settings) a few times but can’t find the problem. Any idea?

(I need to integrate a Shopify catalogue on a client site, I guess this plugin is the best option since I want collections of products to be shown - the simple Shopify button should not work here - if there are other options I might missed, please let me know)

Thanks!
Alex

I could probably help, ive used that plugin on on a couple of sites successfully.

do you have the following PHP templates in site/templates and matching blueprints (the blueprints are in the plugin, so you dont necesarily need them in site/blueprints)?

shopify.collection.php
shopify.collections.php
shopify.product.php
shopify.products.php
shopify.collection.yml
shopify.collections.yml
shopify.product.yml
shopify.products.yml

have you got 'cache.api' => true in your config? The pages are virtual, pulled from Shopify via webhooks. You need the cache enabled for it to create the page data.

You need an .env file in the plugins folder with the following in it…

SHOP_URL="yourstore.myshopify.com"
API_KEY="XXX"
API_PASSWORD="XXXX"
SHOPIFY_APP_SECRET="XXXX"

Lastly, manually create a content file for the products and collections in /content/collections and /content/products. Just a title key in both is enough, since the content is virtual…

title: Products
title: Collections

If it helps, heres my cart JS…

let App = function(productId = null, productPrice = null) {

  // Launch the shopify library
  if (window.ShopifyBuy && window.ShopifyBuy.UI) {
    ShopifyBuyInit();
  }

  // Initialize the buy button
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'store.yourdomain.com',
      storefrontAccessToken: 'XXXX',
    });

    // Set up the button
    ShopifyBuy.UI.onReady(client).then(function(ui) {

      // Configurations
      var Config = {

        // Product button
        "product": {
          "iframe": false,
          "variantId": "all",
          "width": "auto",
          "contents": {
            "img": false,
            "imgWithCarousel": false,
            "title": false,
            "variantTitle": false,
            "price": true,
            "description": false,
            "buttonWithQuantity": false,
            "quantity": false
          },
          "text": {
            button: 'Add to Cart',
            outOfStock: 'Out of stock',
            unavailable: 'Unavailable',
          },
        },

        // Cart Config
        "cart": {
          "iframe": false,
          "popup": false,
          "contents": {
            "button": true,
            "img": true
          },
          "text": {
            "title": 'Cart',
            "empty": 'Your cart is empty.',
            "button": 'Checkout',
            "total": 'Total',
            "notice": 'Shipping and discount codes are added at checkout.',
            "noteDescription": 'Special instructions for seller',
          }
        },

        // Cart toggle button
        "toggle": {

          // Don't use iframes
          "iframe": false,

          // What items do we need?
          "order": [
            'icon',
          ],
        },

        // Cart Product config
        "lineItem": {
          "contents": {
            "image": true
          },
        },
      };

      // set the button price

      if (productId != null) {

        // Instantiate the components
        ui.createComponent('product', {

          id: [productId],
          node: document.getElementById('buy'),
          moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',

          // Components Options
          options: {
            "product": Config.product,
            "cart": Config.cart,
            "lineItem": Config.lineItem,
            "toggle": Config.toggle
          }
        });
      }
    });
  }
};

Just feed it product id and price on a product page after including that script…

<script src="https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js"></script>
<script>App('<?= $productID ?>', '<?= $productprice ?>');</script>

And ensure this element is on the page, since this will open the cart and add the product to it…

<div class="product-buy-btn" id="buy"></div>

My money is on you not having the cache api turned on in the config, since that doesnt seem to be in the readme :slight_smile:

Hi @jimbobrjames

Thanks for helping out and by following your points at least I get no error anymore in the panel. Hope you don’t get annoyed by my questions :wink:

  1. But I don’t get the productID thing. Do I need to keep all products(IDs) in Kirby in parallel too?
  2. I the products are synced from Shopify to the panel or are there even representation of product in the panel (since it’s virtual pages)
  3. Do you have an example of a whole product template php?
  4. What I was initially looking for is a collection of products (for example by Shopify tags) on a page. Is that even possible?

Thanks!

This will answer question 1 and 3. You dont need a whole template, just these:

<?php
$producttitle = $page->shopifyTitle();
$producttext = $page->shopifyDescriptionHTML();
$productimage = $page->shopifyFeaturedImage();
$productID = $page->shopifyID();
$productprice = $page->shopifyPrice();
$productbuttontext = 'Buy Now';
$productimagealt = $producttitle;
?>

From there you can chain most the usual Kirby field methods on them, since these are virtual fields. If you have the webhooks properly set up, they will push any changes to products and collections made in Shopify control through to your website automatically. Youll need about six hooks setup for collection & product update/delete/create etc.

For questions 2, you should be able to visit the collections page in the panel and see them. Personally i made a pages field in mine so i could set the order of the collections displayed on the page manually since by defualt they come in alphabetically.

Questions 4 - yes that is totally possible, not sure what you mean by tags though. Do you mean the name of the collection? The collections are actually child pages of the collections page, so you can simply loop through them as you would normal kirby pages.

Thank you for helping @jimbobrjames.

For questions 2, you should be able to visit the collections page in the panel and see them. Personally i made a pages field in mine so i could set the order of the collections displayed on the page manually since by defualt they come in alphabetically.

Good idea, in deed I need to change all my query code and do it in GraphQL in order to have the right manual sorting… Will do it in v2.

Guys, I am sorry but it still does not work, I don’t get any products shown in the kirby panel and no error message too and I have gone through the steps a few times. I am concentrating only on the panel to show the products. If the products show up in I will check the frontend part.

That’s my steps:

  1. using kirby installation from https://getkirby.com/try (left all example pages untouched)
  2. moved whole plugin folder to site/plugins with folder name “kirby-shopify”
  3. shop domain is https since webhook require it
  4. included .env file in plugin folder:
SHOP_URL="yourstore.myshopify.com"
API_KEY="XXX"
API_PASSWORD="XXXX"
SHOPIFY_APP_SECRET="XXXX"
  1. added three webhooks for each products and collections (“Product create”, “Product update”, “Product delete”, “Collection create”, “Collection update”, “Collection delete”)

https://your-kirby.com/kirby-shopify/api/cache/products/clear
https://your-kirby.com/kirby-shopify/api/cache/collections/clear

  1. added manually under content:

collections/shopify.collections.txt with title: Collections
products/shopify.products.txt with title: Products
7 added to config:
return [ 'debug' => true, 'cache.api' => true ];

  1. added four php templates to site/templates (blueprints does not necessarily need to be in site/blueprints as I understood):

shopify.collection.php
shopify.collections.php
shopify.product.php
shopify.products.php

Not sure if it makes alot of difference, but try setting the shopify API for the webhooks to 2019-07. I think i had trouble with other versions.

Also try clearing out the site/cache folder. If it cached data from shopify before you set products up and the webhooks are not working properly, then it will end up being blank.

Hi @jimbobrjames, I tried the webhooks 2019-07 and also clearing site/cache but still no products. I am wondering why there are is no error or any messages at all.

Hmm. Tricky, sounds like you have everything set. What channells are the products available in? Have you turned on the buy button as a channel in shopify against the products you want to show in Kirby?

  1. The products are available in Online Store, the private app (kirby-site) and Buy Button (yes Buy button is on as channel, below image).
  2. Are there any other requirement for the products?
  3. And what if you have wrong credentials, is there any error message?
  4. And just to be sure to have the right information in the .env file:
    SHOP_URL="aft-shop.myshopify.com" -> no http necessary, right?
    SHOPIFY_APP_SECRET -> actually called Shared Secret in Shopify right?

SHOPIFY_APP_SECRET should be the number that is under the webhooks in the control panel.

Where it says…

All your webhooks will be signed with xxx so you can verify their integrity.

Also the collections and products page does not show up in the panel, not even empty.

Did you turn on the Storefront API?

you can also try doing some cUrl requests from terminal against your shop. This will tell you Shopify set up right, and the problem is something on the Kirby side of the fence.

  1. yes Storefront API is turned on
  2. and the requests (GraphQL) to my shop returning the products just fine (below)

Looks like it’s something with the Kirby setup. I also recently noticed the new folder in site/cache/<shop_url> and after clearing it, it doesn’t get created anymore.

It works! At least the products and collections sync with Shopify (shopping cart implementation is next).

What did I do?

  1. Definitely one issue was the Kirby default installation site’s blueprint. It’s set to only allow about, home and default templates, that’s why the collections and products template did not show up (@tristantbg maybe add this to the manual)
  2. other than that I deleted the .env file and created a new one
  3. also the subfolder in site/cache was appearing again after the .env file was recreated

Thanks for the support @jimbobrjames

Ahhh nice one. Yeah, that will do it. Didnt realise you were on the Starterkit. I always start out with Plainkit.

It is because I meant to create it manually in the content folder by adding shopify.products.txt and shopify.collections.txt files like shown here :

Hi @tristantbg
I created them manually but they weren’t shown in the panel because of the site blueprint from the starterkit.

Alright, I see… I will add a note. Thanks !