Kirby 3 Shopify plugin - shopify.products not found

Resources Plugins
2

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: