dynamic / silverstripe-shopify
A Shopify Store module for Silverstripe
Installs: 472
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 7
Forks: 3
Open Issues: 19
Type:silverstripe-vendormodule
Requires
- php: >=7.4 || >=8.0
- bramdeleeuw/silverstripe-schema: ^2.0.1
- gnikyt/basic-shopify-api: ^10.0
- littlegiant/silverstripe-catalogmanager: ^5.2
- silverstripe/recipe-cms: ^4.11
- symbiote/silverstripe-gridfieldextensions: ^3.0
Requires (Dev)
This package is auto-updated.
Last update: 2024-10-20 16:41:50 UTC
README
A Shopify Store module for Silverstripe.
Requirements
- silverstripe/recipe-cms ^4.11
- bramdeleeuw/silverstripe-schema ^2.0
- littlegiant/silverstripe-catalogmanager ^5.2
- osiset/basic-shopify-api ^10.0
- symbiote/silverstripe-gridfieldextensions ^3.0
Installation
composer require dynamic/silverstripe-shopify
note - due to an issue with v10.0.6 of osiset/basic-shopify-api
, we recommend requiring version 10.0.5 of osiset/basic-shopify-api
if you're running PHP 7.
License
See License
Overview
Silverstripe Shopify allows you to create a headless Shopify store using Silverstripe CMS. Products and collections are imported from Shopify, and created as pages in the CMS. The Shopify Buy Button is used to purchase products via the Shopify cart and checkout.
Setup
Create a private app
First, ensure that private apps are enabled in your Shopify Store (this is false by default).
In your Shopify Admin, click Apps
from the left column navigation. Once the page loads, scroll to the bottom and click on the link in the following line:
Working with a developer on your shop? Manage private apps
If no private apps exist, click Create new private app
. Otherwise, click on the link to the existing private app you'd like to use for your Silverstripe website.
Obtaining API Keys and Setting Permissions
Admin API
In the Admin API section, set the following permissions to Read Access
- Customers
- Orders
- Product Listings
- Products
All other permissions are optional and are not required for Silverstripe Shopify.
Copy the following keys to the correspoding variables in your config:
- API key >
api_key
- Password >
api_password
- Shared Secret >
shared_secret
Storefront API
In the Storefront API section, check
Allow this app to access your storefront data using the Storefront API
Check the following permission boxes to enable the access required by Silverstripe Shopify:
Read products, variants and collections
Read product tags
Read inventory of products and their variants
Read and modify customer details
Read customer tags
Read and modify checkouts
All other permissions are optional and are not required for Silverstripe Shopify.
Copy the following key to the corresponding variable in your config:
- Storefront access token >
storefront_access_token
Basic configuration
Dynamic\Shopify\Client\ShopifyClient: api_key: 'YOUR_API_KEY' api_password: 'YOUR_API_PASSWORD' shared_secret: 'YOUR_API_SHARED_SECRET' storefront_access_token: 'YOUR_ACCESS_TOKEN' # for buy button shopify_domain: 'YOUR_SHOPIFY_DOMAIN' # mydomain.myshopify.com custom_domain: 'YOUR_CUSTOM_DOMAIN' # optional - checkout.example.com
Using Multipass
Dynamic\Shopify\Client\ShopifyMultipass: multipass_secret: 'YOUR_MULTIPASS_SECRET'
Importing products
Once the basic configuration above is setup, you can import Shopify products and collections via CLI using the ShopifyImportTask:
vendor/bin/sake dev/tasks/ShopifyImportTask
or by running the task in the browser at /dev/tasks/ShopifyImportTask
Usage
CMS
Products and collections are created as pages in the CMS. Products that belong to collections are automatically set as a child page of that collection in the site tree. If a product belongs to multiple collections, the ShopifyProduct page is created under the first listed collection, and subsequent collections will list a VirtualPage of the product.
All products and collections that are available in the private app sales channel will be imported.
Shopify related pages are set as draft or published based on the status set in Shopify. For products, if the product is set to Active in Shopify, it will be published in Silverstripe.
The module creates a CatalogPageAdmin to manage Shopify records via a ModelAdmin, rather than only in the site tree.
The ShopifyProduct page also implements product schema from schema.org. This provides more information to be displayed in search results for google and other search engines.
Theme
Cart Include
In your top-level Page.ss template, include the following just before the </body>
tag:
<% include Cart %>
Cart Configuration Options
To disable cart notes:
PageController: showNote: false
Setting notes character limit (when notes is enabled):
PageController: noteLimit: 123
Note: For specific configuration by page type, you can set the showNote
and noteLimit
values per controller class.
You can also override the default cart settings via an Extension Hook updateCartOptions
in the getCartOptions()
function in ShopifyExtension.php
.
public function updateCartOptions(&$config)
{
$config['cart'] = [
'popup' => 1,
];
}
Display Buy Button
Out of the box, there are 3 includes to display different variations of the Shopify Buy Button:
BuyButton
- just a simple add to cart button with no other product infoBuyForm
- a typical add to cart form, ideal for a ShopifyProduct pageBuyOverlay
- an add to cart button that opens an overlay containing product info from Shopify
To display the Buy Button, just include one of the files above in your template.
Buy Button Configuration Options
The default settings for buy buttons in the module disables the iframe option, and strips out most of the buy button content and stylings. The includes above are instead intended to be used with the images and title imported from Shopify into the database, and with iframes disabled it enables complete control over the style of the buy button.
However, you can override the default settings for each Buy Button type above via Extension Hooks in ShopifyProduct.php
.
getButtonOptions()
hasupdateButtonOptions(&$buttonOptions)
getFormOptions()
hasupdateFormOptions(&$formOptions)
getOverlayOptions()
hasupdateOverlayOptions(&$overlayOptions)
public function updateButtonOptions(&$buttonOptions)
{
$buttonOptions['product'] = [
'iframe' => true,
'contents' => [
'title' => true,
'variantTitle' => false,
'price' => true,
'description' => true,
'quantity' => false,
'img' => true,
],
'width' => '100%',
'styles' => [
'button' => [
'color' => '#ffffff',
'background-color' => '#279989',
':hover' => [
'color' => '#ffffff',
'background-color' => '#C5E86C',
],
],
]
];
}
Advanced
Product impression tracking
Product impressions can be tracked by adding data attributes to html tags rendered with products.
data-sku
is the only required data attribute, but data-title
, data-category
, and data-vendor
can also be added.
<div class="product__content" data-sku="$SKU" data-title="$Title" data-category="$Category.Title" data-vendor="$Vendor"></div>
Maintainers
Credits
Inspired by previous work done by xddesigners.
Bugtracker
Bugs are tracked in the issues section of this repository. Before submitting an issue please read over existing issues to ensure yours is unique.
If the issue does look like a new bug:
- Create a new issue
- Describe the steps required to reproduce your issue, and the expected outcome. Unit tests, screenshots and screencasts can help here.
- Describe your environment as detailed as possible: SilverStripe version, Browser, PHP version, Operating System, any installed SilverStripe modules.
Please report security issues to the module maintainers directly. Please don't file security issues in the bugtracker.
Development and contribution
If you would like to make contributions to the module please ensure you raise a pull request and discuss with the module maintainers.