PHPackages                             tristantbg/kirby-shopify - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [API Development](/categories/api)
4. /
5. tristantbg/kirby-shopify

ActiveKirby-plugin[API Development](/categories/api)

tristantbg/kirby-shopify
========================

Display products on your own site and integrate the checkout process with your Shopify shop

1.3.7(3y ago)662776[8 issues](https://github.com/tristantbg/kirby-shopify/issues)MITPHP

Since Sep 10Pushed 6mo ago3 watchersCompare

[ Source](https://github.com/tristantbg/kirby-shopify)[ Packagist](https://packagist.org/packages/tristantbg/kirby-shopify)[ RSS](/packages/tristantbg-kirby-shopify/feed)WikiDiscussions master Synced 3w ago

READMEChangelogDependencies (3)Versions (19)Used By (0)

Kirby 3 Shopify Plugin
======================

[](#kirby-3-shopify-plugin)

> **⚠️ DEPRECATION WARNING**
> This plugin is no longer maintained. Please use [Kirby Kart](https://kart.bnomei.com/docs/providers/shopify) by [@bnomei](https://github.com/bnomei/kirby-kart) instead, which provides Shopify support with active maintenance and more features.

---

Installation
------------

[](#installation)

### Download

[](#download)

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

### Git submodule

[](#git-submodule)

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

```

### Composer

[](#composer)

```
composer require tristantbg/kirby-shopify

```

Setup
-----

[](#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")

```
API_KEY= 1
API_PASSWORD= 2
SHOPIFY_APP_SECRET= 3
ACCESS_TOKEN= 4 (Useless)

```

[![Capture d’écran 2023-05-15 à 16 43 12](https://private-user-images.githubusercontent.com/4832038/238385169-95d308d0-d201-4628-9f64-d236e3207e49.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzNzkxOTUsIm5iZiI6MTc4MjM3ODg5NSwicGF0aCI6Ii80ODMyMDM4LzIzODM4NTE2OS05NWQzMDhkMC1kMjAxLTQ2MjgtOWY2NC1kMjM2ZTMyMDdlNDkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjVUMDkxNDU1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NDZmZTU2NDMwNjU3ZjQ3NGNkMjZmOTgzNWRmZTAzNDNiZTdjNDMwNzcxYmNmYzZmOWVjYmFkMWFiMjQ3OWI5MSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.No8Vd87JypyjBYjExA_Yz-WUVRKOSy4os76FodgL1gk)](https://private-user-images.githubusercontent.com/4832038/238385169-95d308d0-d201-4628-9f64-d236e3207e49.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzNzkxOTUsIm5iZiI6MTc4MjM3ODg5NSwicGF0aCI6Ii80ODMyMDM4LzIzODM4NTE2OS05NWQzMDhkMC1kMjAxLTQ2MjgtOWY2NC1kMjM2ZTMyMDdlNDkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjVUMDkxNDU1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NDZmZTU2NDMwNjU3ZjQ3NGNkMjZmOTgzNWRmZTAzNDNiZTdjNDMwNzcxYmNmYzZmOWVjYmFkMWFiMjQ3OWI5MSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.No8Vd87JypyjBYjExA_Yz-WUVRKOSy4os76FodgL1gk)[![kirby-shopify screen-3](https://user-images.githubusercontent.com/4832038/136786285-67ada112-52e8-45d5-b9ff-9724a8aca172.png)](https://user-images.githubusercontent.com/4832038/136786285-67ada112-52e8-45d5-b9ff-9724a8aca172.png)

Make Shopify update your Kirby products list
--------------------------------------------

[](#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

```

At the end of

(The webhook is verified for security reasons: ) Add the webhook HMAC signed key to your `.env` file under the `SHOPIFY_APP_SECRET` key

Frontend
--------

[](#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