Skip to content
No description, website, or topics provided.
PHP
Branch: master
Clone or download
Latest commit 594e6c9 Sep 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example/content added collections Jul 1, 2019
src img_url Sep 10, 2019
vendor improve img_url Sep 11, 2019
.editorconfig init Mar 20, 2019
.env.example hook Jul 1, 2019
.gitattributes init Mar 20, 2019
.gitignore test Mar 20, 2019
LICENSE.md init Mar 20, 2019
README.md improve img_url Sep 11, 2019
composer.json composer Jun 6, 2019
composer.lock collection products Sep 10, 2019
index.php improve img_url Sep 11, 2019

README.md

Kirby 3 Shopify Plugin


Installation

Download

Download and copy this repository to /site/plugins/kirby-shopify.

Git submodule

git submodule add https://github.com/tristantbg/kirby-shopify.git site/plugins/kirby-shopify

Composer

composer require tristantbg/kirby-shopify

Setup

Set your .env file inside the plugin folder using the .env.example one with your Storefront credentials. Add manually a page called products with the template shopify.products in the content folder. (like shown in "example") Add manually a page called collections with the template shopify.collections in the content folder. (like shown in "example")

Make Shopify update your Kirby products list

Set a Shopify webhook for "Product create", "Product update", "Product delete" with value:

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

Set a Shopify webhook for "Collection create", "Collection update", "Collection delete" with value:

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

(The webhook is verified for security reasons: https://help.shopify.com/en/api/getting-started/webhooks#verify-webhook) Add the webhook HMAC signed key to your .env file under the SHOPIFY_APP_SECRET key

Frontend

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,
        startOpen: 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 ?>

Resize thumbnails

You can resize thumbnails directly from Shopify CDN using this field method and the Shopify img_url attribute. https://help.shopify.com/en/themes/liquid/filters/url-filters#img_url

<img src="<?= $page->shopifyImages()->toStructure()->first()->img_url('1000x1000') ?>" />

Options

WIP

API

\KirbyShopify\App::init()
\KirbyShopify\App::getProducts()
\KirbyShopify\App::clearCache()

License

MIT

Credits

You can’t perform that action at this time.