Kirby Shopify Plugin

Is anyone willing to help me create the first Kirby Shopify plugin ?
It would be great to use Kirby as a flexible content and extend the frontend possibilities that Shopify doesn’t allow.
One way of doing that is referencing/linking Kirby to the Shopify API to have product pages automatically.

I stumbled apon this :


Which basically have most of the GraphQL connect features we need.

We could either create a product model or just a field that allow to select a product in a dropdown list ?

Looking forward to know your thoughts.

Best,
T

3 Likes

Damn, I wish I had the time to help you. This sounds like an excellent idea!

1 Like

This is the starting point :


Will let you know when it will have the first features.

(If you want to help me clean the code, or make it error 500 proof, feel free !)

1 Like

Did you have any luck? I was wondering if I should get into this since I have found some trending products -and would like to start selling it with shopify Kirby

You could probably use Shopify Light in the mean time until the plugin is at a useable point.

+1 for @jimbobrjames idea of using Shopify Light.
Used it here and works great

I didn’t had much time to get more into it lately but will continue soon.

If you want to start selling right away I suggest also that you use Shopify Storefront API or the BuyButton JS library.
You can also try this plugin https://merx.wagnerwagner.de/ (no Shopify)

The plugin I want to build will only be useful to create a sync between a Kirby back-end and Shopify data using special fields or by creating models directly.

@manuelmoreale : Nice one. How do you create your product page ? Do you have to add manually product pages in your Kirby with each product id ? Or do you manage to do it through a route ?

Yes it’s manually controlled and we just paste in the product id.
I didn’t want to automate it because I like the idea of keeping the two platforms separated.
It’s a shop with a low number of products so it’s not a big deal to handle things manually.

1 Like

I just made a small update to test with the virtual pages and Kirby cache.api and it works quite well !
I am now wondering how to have both fields data from the content folder and from the API data through the virtual pages. Maybe that’s not possible ?

Feel free to try, enhance and give feedbacks !

Update: I found a way by reading the .txt file from the “content” folder.

1 Like

@tristantbg Just trying your plugin out on a small store - whats the intended way to add a buy button?

An easy way would be to use Shopify Buy Button on top of Kirby to take care of the cart.
You can either display everything with it or choose to use Kirby to display the element more customly.

Shop JS script:

const Shop = {
  scriptURL: 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js',
  options: {
    "product": {
        iframe: false,
        variantId: "all",
        events: {
            afterRender: _ => {}
        },
        text: {
            button: 'Add to cart'
        },
        "contents": {
            "img": true,
            "title": true,
            "imgWithCarousel": false,
            "variantTitle": false,
            "description": true,
            "buttonWithQuantity": false,
            "quantity": false
        }
    },
    "cart": {
        iframe: true,
        popup: true,
        "contents": {
            "button": true
        }
    },
    "lineItem": {},
    "toggle": {
        iframe: false,
        "contents": {
            "title": true,
            "icon": false
        },
        "text": {
            title: "Cart"
        },
    },
    "modalProduct": {
        "contents": {
            "img": false,
            "imgWithCarousel": true,
            "variantTitle": false,
            "buttonWithQuantity": true,
            "button": false,
            "quantity": false
        },
    },
    "productSet": {}
},
  init: _ => {
    if (window.ShopifyBuy) {
      if (window.ShopifyBuy.UI) {
        Shop.ShopifyBuyInit();
      } else {
        loadScript();
      }
    } else {
      loadScript();
    }

    function loadScript() {
      var script = document.createElement('script');
      script.async = true;
      script.src = Shop.scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = Shop.ShopifyBuyInit;
    }
  },
  ShopifyBuyInit: _ => {
    Shop.client = ShopifyBuy.buildClient({
      domain: 'xxx.myshopify.com',
      storefrontAccessToken: 'xxxxxxx',
      appId: '6',
    });
    const items = document.querySelectorAll('[data-product]')
    items.forEach(el => {
      Shop.createButton(el.dataset.product)
    })
  },
  createButton: id => {
    const node = document.getElementById('product-component-' + id)
    ShopifyBuy.UI.onReady(Shop.client).then(function(ui) {
      ui.createComponent('product', {
        id: [id],
        node: node,
        moneyFormat: '{{amount_with_comma_separator}} €',
        options: Shop.options
      });
    });
  }
}

export default Shop;

shopify.product template:

// Creates product in JS
<div data-product="<?= $page->shopifyID() ?>"></div>

// Display values with Kirby if you want
<img src="<?= $page->shopifyFeatured() ?>" />
<?= $page->yourCustomField() ?>
<?= $page->shopifyPrice() ?>
<?= $page->shopifyDescriptionHTML() ?>
<?= $page->shopifyType() ?>
<?= $page->shopifyVendor() ?>

<?php foreach ($page->shopifyTags()->split(',') as $key => $tag): ?>
  <?= $tag ?>
<?php endforeach ?>
2 Likes

@tristantbg
thanks for your work.
Display the shopify values with kirby works fine, but how do I integrate/run the js script?
best, Radiomann

This code is from a personal module I made in ES6 for Webpack.
Please refer to https://shopify.github.io/buy-button-js/ if you want to make your own !

@tristantbg
Hi, and thanks for your work! I’m trying to see if this could be a good solution for one of my projects - It’s my first time using a plugin, and I’m a bit confused on how to set up the .env file.

I’ve added the API key and password, but I am getting fatal error: unable to read .env file.

Should I be renaming it to something specific, moving it somewhere, etc?

Also, is setting up the webhooks essential for the plugin to work? The client wants to update the product list manually.

Thanks in advance for your help!

@Jac733 The .env file should be inside the plugins folder. Youll see an example file there, just rename that to .env and fill in the details.

As for the webhooks, i would suggest setting those up. This means that when changes are made on Shopify, they get pushed to your site via the webhook. Otherwise you have to do it manually which is a pain. It will work without, but changes made in shopify wont automatically come through, which i guess is what you actually want.

1 Like

@jimbobrjames Thanks for the quick reply! The issue was that I couldn’t rename the file to .env (“You must type a file name”), but I found a workaround.

Thanks for the info about the webhooks! My main interest in this plugin is the extra customisation that it can bring over Shopify’s own “buy buttons”, which are a pain because of the iframes (I need the buttons and shopping cart to look a certain way to be coherent with my website, and the iframes make that extremely impractical to achieve).

Thanks again for your help!

Edit:
I’ve now set up the .env file, and the webhooks as dictated in the instructions.
However no matter what I do in Shopify, nothing gets updated. I’m assuming the products should be showing up in shopify.products.txt in the content?

I am glad the plugin can help you.
About the iframes you know that you can use iframe: false in the Shopify SDK ?

If you don’t see any products in your Products page in the Kirby back-end, it means that you didn’t setup it well I think.
The webhook should be pointing to a public online URL, not a localhost.
Try to empty the Kirby cache folder also.

@tristantbg
Thanks, I didn’t know that for the iframes - I’ll try that out later!

I have the website up on a public online URL, and the webhook points to https://site-name.com/kirby-shopify/api/cache/products/clear. I’ve tried creating and uploading some test products to try and affect the content in Kirby, but still nothing…
(Also emptied the cache, still nothing)

Did I set up the content correctly? I have content/products/shopify.products.txt, and content/collections/shopify.collections.txt. I took those directly from your example folder. Did they need anything else so that they could be affected by the plugin?

It also confuses me that the webhook points to something that isn’t there (there is no kirby-shopify folder at the root of the website), but I guess the plugin has been set up to handle this?

Thanks a lot for your help, and sorry for any silly questions! I’m trying to learn :slight_smile:

Edit: In the panel I have this message on the Products page.


I have .env in site/plugins/kirby-shopify, with all variables filled in.

The .env file is not well named I think, try to change its name using the Terminal instead of your file browsing system
mv [YOUR_WEIRD_ENV_FILE] .env

Yes, that’s how I managed to rename it in the first place…

It’s in the right place and properly named:
image