Shopify Module
Install
Riba and Riba Shopify
To install Riba and the Riba Shopify module:
npm install --save @ribajs/core @ribajs/utils @ribajs/shopify
Babel
yarn add -D @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-proposal-optional-chaining @babel/plugin-syntax-export-default-from @babel/plugin-transform-runtime @babel/preset-env @babel/preset-typescript @babel/runtime-corejs3 babel-plugin-array-includes
ESLint and Prettier
yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/experimental-utils @typescript-eslint/parser @typescript-eslint/typescript-estree
If you use Visual Studio code it is recommended to install the following plugins:
These two plugins automatically use the .eslintrc.js from thisk repository, the first plugin shows you possible errors, the second one formats your code automatically when you save it.
Webpack, Yarn PnP and TypeScript
yarn add -D webpack webpack-cli webpack-stream typescript @yarnpkg/pnpify html-loader babel-loader
Add webpack to resolutions
in your package.json to be shure to use the latest Webpack v4 version:
"resolutions": {
"webpack": "^4.42.1"
}
Gulp 4 and (Slate) tools
yarn add -D @ribajs/shopify-gulp gulp gulp-cheerio gulp-ext-replace gulp-plumber gulp-rename gulp-size gulp-svgmin gulp-util gulp-zip @ribajs/webpack-config
Regist Riba
To regist the module create a src/ts/main.ts
and insert import shopifyModule from '@ribajs/shopify';
, than you can regist the module with riba.module.regist(shopifyModule.init());
:
The main.ts could look like this:
import { Riba, coreModule } from '@ribajs/core';
import { shopifyModule } from '@ribajs/shopify';
import { ready } from '@ribajs/utils/src/dom';
const riba = new Riba();
const model = {};
riba.module.regist(coreModule.init());
riba.module.regist(shopifyModule.init());
ready(() => {
riba.bind(document.body, model);
});
Gulp
Add a gulp file to your theme project like this
require('source-map-support').install();
const path = require("path");
const gutil = require("gulp-util");
const argv = require("yargs").argv;
const requireDir = require("require-dir");
const ribaShopifyTaskDir = path.resolve(
path.dirname(require.resolve("@ribajs/shopify-gulp")),
"tasks"
);
if (argv.environment && argv.environment !== "undefined") {
console.log(`setting tkEnvironments to ${argv.environment}`);
gutil.env.environments = argv.environment;
}
requireDir(ribaShopifyTaskDir, { extensions: [".js", ".cjs"] });
Gulp tasks
Generate config.deploy.yml
After you have create a basic config.deploy.yml
you can run the command below to insert the latest created themes (which are usually the next release themes) in your config.deploy.yml
.
gulp generate:config:deploy
Get a list of the youngest / next release themes
To make it easier to publish the current preview links of the release themes in the chat you can use the following command:
gulp themes:list:youngest
Example output:
...
====== UK ======
Name: release/1.3.17 | New variant switcher
ID: 81177935933
Store: my-store.myshopify.com
Created: Today at 9:10 AM
Updated: Today at 10:03 AM
Edit settings: https://my-store.myshopify.com/admin/themes/81177935933/editor
Edit code: https://my-store.myshopify.com/admin/themes/81177935933
Preview: https://my-store.myshopify.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=81177935933
...
Config files
config.deploy.yml
:
staging:
password:
theme_id: 80030728250
store: my-store-staging.myshopify.com
ignore_files:
- config/settings_data.json
- locales/*
de:
password:
theme_id: 79757934703
store: my-store-de.myshopify.com
ignore_files:
- config/settings_data.json
- locales/*
eu:
password:
theme_id: 81227481159
store: my-store-au.myshopify.com
ignore_files:
- config/settings_data.json
- locales/*
fr:
password:
theme_id: 79767437399
store: my-store-fr.myshopify.com
ignore_files:
- config/settings_data.json
- locales/*
uk:
password:
theme_id: 79777366077
store: my-store-uk.myshopify.com
ignore_files:
- config/settings_data.json
- locales/*
us:
password:
theme_id: 80021160036
store: my-store-us.myshopify.com
ignore_files:
- config/settings_data.json
- locales/*
release.yml
:
bitbucket:
username:
password:
workspace:
repo_slug:
Deploy
To deploy this branch to all shops just create a config.deploy.yml
with an environment for each shop like in the config-sample.deploy.yml
and run
gulp deploy
You can pass a custom config.yml file name like this:
gulp deploy:prod -- --config="config.deploy.yml"
gulp watch:dev -- --config="config.staging.yml"
Build @ribajs/shopify
Some files are written in TypeScript. To build the files to JavaScript run
yarn run build
Build postal codes
To build the exclude postalcode run
yarn run build:postalcodes
this will generate the JavaScript files localed in src/js/checkout_exclude-express-postalcodes_XY.js
.
These files are used in the checkout to detect whether express shipping is allowed or not for the customer postal code.