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 !