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 