internalfx / quickshot Goto Github PK
View Code? Open in Web Editor NEWA Shopify theme development tool.
License: ISC License
A Shopify theme development tool.
License: ISC License
What it says on the tin.
I have a liquid template with no content in it, when I download that same file it is created with the contents null
.
If I download a page and modify I cannot re-upload. I get error {"handle":["has already been taken"]}
. This is a significant degradation in functionality since 1.x where we could also watch pages: #28 — the major advantage of quickshot previously was that I never had to use the Shopify admin panel, now I do again..
Sorry if this seems obvious, but was hoping someone could enlighten me with the best way to work with the tool for local editing since upload and download do not respect deleted pages/products/theme files.
mkdir project
cd project
git init .
qs configure
qs theme download
qs products download
qs pages download
git add --all
git commit
git push
However, removing pages (for instance) on the shopify site removes the pages, but a qs pages download
does not remove it from my local. I understand that it is not really a 'sync' per se, but perhaps there is a better way to work and edit with qs that eludes me.
I love the tool by the way, really helps me add more developer speed to editing shopify sites.
Thanks, Mike
Anyone else having this problem?
qs product download works fine. All product folders are created, but no luck when I try to upload them to a different target.
Thanks!
Is there a way to avoid uploading/downloading a whole theme directory and limit it to changed files (assuming you're keeping them in git)
Hello,
I'm just getting into Shopify theme development and came across Quickshot so sorry for the noob questions but I just wanted to get some pointers on workflow.
My client has an active store which I was able to pull down into QS - that's all good. I set up a development store which I want to use for staging/dev to see theme changes before pushing to live.
However, when you create a new development store, it comes with only the Debut theme activated by default. When I tried to push the theme I downloaded from our live store, it pushes the files into the current active theme, not as a separate theme.
If so, how should I set up the dev store and a target in qs to use the correct theme? Should I add the theme to the dev store first from the store admin, then add the target and push into that? Or is there another way?
The live site is using the Canopy theme and the theme structure looks like this:
Canopy
I'm not sure why the active theme is in a subfolder of the Canopy theme. Could this cause problems with QS? Is this how it is supposed to be set up on the live store? It doesn't feel right - I would think it would be better to have the active theme outside of another theme but maybe this is the way Shopify structures it if you work on a duplicate of your theme.
In short, I want to upload my current live theme to work locally, then push the theme to a development store so I can see changes before going live.
Thanks!
Not sure exactly which file but it was either a .ttf
or .svg
or .eot
webfont file that caused this error:
/usr/local/lib/node_modules/quickshot/download.js:138
if (data.asset.attachment) {
^
TypeError: Cannot read property 'asset' of undefined
at /usr/local/lib/node_modules/quickshot/download.js:138:33
at Deferrals.exports.Deferrals.Deferrals._call (/usr/local/lib/node_modules/quickshot/node_modules/iced-runtime/lib/runtime.js:86:16)
at /usr/local/lib/node_modules/quickshot/node_modules/iced-runtime/lib/runtime.js:98:26
at exports.trampoline.trampoline (/usr/local/lib/node_modules/quickshot/node_modules/iced-runtime/lib/runtime.js:64:14)
at Deferrals.exports.Deferrals.Deferrals._fulfill (/usr/local/lib/node_modules/quickshot/node_modules/iced-runtime/lib/runtime.js:96:16)
at Object.ret [as cb] (/usr/local/lib/node_modules/quickshot/node_modules/iced-runtime/lib/runtime.js:29:18)
at /usr/local/lib/node_modules/quickshot/helpers.js:122:18
at Deferrals.exports.Deferrals.Deferrals._call (/usr/local/lib/node_modules/quickshot/node_modules/iced-runtime/lib/runtime.js:86:16)
at /usr/local/lib/node_modules/quickshot/node_modules/iced-runtime/lib/runtime.js:98:26
at exports.trampoline.trampoline (/usr/local/lib/node_modules/quickshot/node_modules/iced-runtime/lib/runtime.js:64:14)
at Deferrals.exports.Deferrals.Deferrals._fulfill (/usr/local/lib/node_modules/quickshot/node_modules/iced-runtime/lib/runtime.js:96:16)
@hughker reported this to me Page with handle shipping-returns was not found in shop for pages/shipping-returns.html
when trying to d/l pages from one store and upload to another. I know this was also not possible with tmbundle, @internalfx wondering if it could be solved somehow?
need I say more
I'm receiving this error when i try to use quickshot in windows (i just updated to qs v2.1).
Before that i was using qs v1.3 without issues.
let Promise = require('bluebird')
^^^
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Function.Module.runMain (module.js:447:10)
at startup (node.js:139:18)
at node.js:999:3
I have downloaded a theme and i'm trying to push it to a different environment. Every time i do though I get the following error.
08:34:27 pm - Request Failed!: [404] Not Found
{"key":"theme/assets/ico-select.svg.liquid"}
Any clue why this could be happening?
Thank you in advance!
Nexus6:taylorstitch Rick$ qs theme download
? Select target [live] - 'Master' @ taylor-stitch.myshopify.com
04:05:06 pm - Downloaded 0 files.
Unhandled rejection Error: EEXIST: file already exists, mkdir '/Users/Rick/Sites/myshop
ify/themes/taylorstitch/theme/assets'
This project looks like it is not actively developed, while Theme Kit is. Are there any advantages to quickshot, and is it recommended still?
Hey Users,
After a multi-year hiatus, one of my large clients is moving back to Shopify!
This means that getting quickshot working properly (and quickly) is now on the front burner.
Couple questions for the community.
Is this project still useful? (has Shopify released a better tool for theme dev)
Any ideas for what will be version 3.0?
Pinging past contribs..
@rickydazla @waldyrious @hughker
I wasn't really sure how to title this issue correctly, although it's easy to explain...
If I run e.g. qs theme download config --target=live
in version 2.x I would have got only the contents of the config folder, whereas now the config
argument in the command is ignored.
I recently updated my node environment to v8.9.1 and encountered an error when running qs theme watch. The node-sass binding was incorrect for my runtime environment.
Quickshot uses node-sass 3.13.1. That version is only supported within node environments up to version 7 https://github.com/sass/node-sass/releases/tag/v3.13.0.
To fix this I navigated to quickshots global npm module - /usr/local/lib/node_modules/quickshot and ran:
npm rebuild node-sass
That seems to have worked for me and I'm now able to run qs theme watch command.
Is that the correct method to fix the issue?
Specifically, I'm trying to download a specific file from a specific target.
docs provide this:
qs theme download [options] [filter]
I'd think that this would work, but it doesn't
qs theme download --target dev --filter page.dealer-intl.liquid
Thanks!
qs blog download
qs blog upload
Maybe all of the above (and Pages actually) should not be invoked by the regular call to up/download - since they are user-editable (ok, so are the theme files, but they are much more likely to actually be user-edited) there is more risk of error / overwrite...
quickshot.json
and all .DS_Store
(recursive)I forget what exactly each product folder consists but I would certainly like to upload only images (so as not to blow out inventory or anything else that staff have been working on while I have been optmizing said images.
Metafields might also be useful to overwrite or choose not to
Also inventory
Currently when you want to run a quickshot command with multiple targets in your quickshot.json file you run quickshot watch
and have to choose from a dropdown the desired target.
Ideally you can call the target explicitly from the watch command.
quickshot watch [target]
/ quickshot watch -t [target]
/ quickshot watch --target [target]
➜ ~ qs configure
/usr/local/lib/node_modules/quickshot/bin/quickshot:3
let Promise = require('bluebird')
^^^
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:405:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:430:10)
at startup (node.js:141:18)
at node.js:1003:3
Heads up to anyone heavily using the Shopify customizer. I've found that a full 'qs theme upload' will clear your customizer settings.
A solution is to make sure your settings_data.json is downloaded from your live site so it is up to date. Also don't include theme/config/settings_data.json in your .quickshotignore.
Hello,
Just getting into quickshot and liquid. I've taken over development of a retail e-commerce site that already has a pre-made theme. In trying to set up my local development environment, I've gone through and split out the main styles.scss.liquid file into modular stylesheets, interpolated all of the liquid calls and importing all of the modules into main stylesheet to be precompiled and output before pushing.
Nevertheless, I'm getting some errors with some more complex liquid calls in the pre-made theme, especially when variables are referenced elsewhere in the stylesheets.
Here's an example of the original code in styles.scss.liquid:
{% if settings.body_font contains 'GWF' %}
{% capture gfont %}{{ settings.body_font | split: '|' | last }}{% endcapture %}
{% else %}{% assign gfont = settings.body_font %}
{% endif %}
$body-font-family: {{ gfont | replace: '+', ' ' | replace: "'", '' | split: ':' | first | default: 'sans-serif' }}, sans-serif;
Which I've interpolated to:
/* {% if settings.body_font contains 'GWF' %} */
/* {% capture gfont %} */
/* {{ settings.body_font | split: '|' | last | prepend: '*\/' | append: '\/*' | remove: '\' }} */
/* {% endcapture %} */
/* {% else %} */
/* {% assign gfont = settings.body_font %} */
/* {% endif %} */
$body-font-family: #{' {{ gfont | replace: "+", " " | replace: "\'", "" | split: ":" | first | default: "sans-serif" }} '}, sans-serif;
When I use that, I get this error in the compiler:
Error: Invalid CSS after "...| remove: '\\' }": expected selector or at-rule, was "} */" on line 13 of /theme/styles/_typography.scss
>> :\" | first | default: \"sans-serif\" }} "}, sans-serif;
I've looked over everything I can find on liquid/sass interpolation and not having any luck. As variables like $body-font-family
are called elsewhere in the stylesheets, if I can't get this to compile, I get errors elsewhere.
Thanks!
A 422 usually means a syntax error in uploaded liquid code. Quickshot should display a more helpful error message.
quickshot all download
quickshot all upload
Currently the docs reference things like qs pages upload [options]
but there is no explanation / list of what the options are.
My ignore file contains a rendered scss file:
theme/assets/theme.scss
Quickshot seems to be ignoring the Liquid file too:
Rick$ qs theme watch
? Select target [dev] - 'master'
09:09:56 am - watching theme...
09:10:07 am - IGNORING: theme/assets/theme.scss.liquid
qs pages upload
03:43:34 pm - undefined
I think the upload was at least partially successful but the lack of (any) feedback isn't especially helpful..
@internalfx would be great to have ability for configuring multiple themes / stores using something like quickshot download --env=staging
. Use cases could be:
(*) This could be achieved using theme.id
We used to be able to do qs pages watch
but dunt werk no mo
Would be great if Pages could also be down/uploaded.
I have two shopify environments, I'll call them A and B. I've transferred pages from A to B in the past. I've since added some pages to A and would like transfer all the pages to B (to get the new pages I added in A into B). However, I get the following error when I try the upload:
{"handle":["has already been taken"]}
Am I doing something wrong or is it not possible to do this? Do I have to delete all the pages from B first (that would be a bummer).
Thanks.
As well as still getting undefined
here I just got this (editing a scss.liquid file):
TypeError: Cannot read property 'errors' of undefined
at Object.<anonymous> (/usr/local/lib/node_modules/quickshot/lib/requestify.js:54:23)
at throw (native)
at onRejected (/usr/local/lib/node_modules/quickshot/node_modules/co/index.js:81:24)
at tryCatcher (/usr/local/lib/node_modules/quickshot/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/usr/local/lib/node_modules/quickshot/node_modules/bluebird/js/release/promise.js:504:31)
at Promise._settlePromise (/usr/local/lib/node_modules/quickshot/node_modules/bluebird/js/release/promise.js:561:18)
at Promise._settlePromise0 (/usr/local/lib/node_modules/quickshot/node_modules/bluebird/js/release/promise.js:606:10)
at Promise._settlePromises (/usr/local/lib/node_modules/quickshot/node_modules/bluebird/js/release/promise.js:681:18)
at Async._drainQueue (/usr/local/lib/node_modules/quickshot/node_modules/bluebird/js/release/async.js:138:16)
at Async._drainQueues (/usr/local/lib/node_modules/quickshot/node_modules/bluebird/js/release/async.js:148:10)
at Immediate.Async.drainQueues [as _onImmediate] (/usr/local/lib/node_modules/quickshot/node_modules/bluebird/js/release/async.js:17:14)
at tryOnImmediate (timers.js:543:15)
at processImmediate [as _immediateCallback] (timers.js:523:5)
Would love to see LiveReload with Quickshot. I currently need to run a gulp task to generate this, which seems hacky af.
Previously if you were running qs theme watch
and were trying to upload something with a missing closing tag it would return something like the following:
Error in templates/cart.liquid - Liquid syntax error (line 66): Unknown tag 'endif'
However, in v2 it simply responds with: 09:47:08 am - undefined
— it'd be great to have the additional information returned so we can help pinpoint what the error might be.
thomas@workstation:theme$ quickshot theme watch
? Select target: [retail] - 'figaro' at holstee.myshopify.com
Watching Theme...
events.js:141
throw er; // Unhandled 'error' event
^
Error: ENAMETOOLONG: name too long, stat '/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme/Users/thomas/Desktop/figaro/theme/theme'
at Error (native)
thomas@workstation:theme$
Two points here within quickshot config:
I had about a dozen targets(!) and it took some trial and error to transition the quickshot.json config file over... I wonder if there is an easier way to do it than the search and replace that I ended up doing?
I'd like to ask the quickshot community for testimonials of how qs has helped you with your worklflow.
Knowing how my software helps others is a great encouragement to keep it up to date.
Post your comments below, thank you!
npm ERR! Darwin 14.1.0
npm ERR! argv "/Users/thomas/.nvm/versions/io.js/v1.6.2/bin/iojs" "/Users/thomas/.nvm/versions/io.js/v1.6.2/bin/npm" "install" "quickshot" "-g"
npm ERR! node v1.6.2
npm ERR! npm v2.7.1
npm ERR! code ETARGET
npm ERR! notarget No compatible version found: node-sass@'>=3.0.0-pre <4.0.0'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.9.4-rc1","0.2.0","0.2.1","0.2.2","0.2.3","0.2.4","0.2.5","0.2.6","0.3.0","0.4.0","0.4.1","0.4.2","0.4.3","0.4.4","0.5.0","0.5.1","0.5.2","0.5.3","0.5.4","0.6.0","0.6.1","0.6.2","0.6.3","0.6.4","0.6.5","0.6.6","0.6.7","0.7.0-alpha","0.7.0","0.8.0","0.8.1","0.8.2","0.8.3","0.8.4","0.8.5","0.8.6","0.9.0","0.9.1","0.9.2","0.9.3","0.9.4-rc1","0.9.4","0.9.5-rc1","0.9.5","0.9.6","1.0.0","1.0.1","1.0.2-alpha","1.0.2","1.0.3","1.1.0","1.1.1","1.1.2","1.1.3","1.1.4","1.2.0","1.2.1","1.2.2","1.2.3","2.0.0-beta","2.0.0","2.0.1","3.0.0-alpha.0","3.0.0-beta.2","3.0.0-beta.3","3.0.0-beta.4","2.1.0","2.1.1","3.0.0-beta.5"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'quickshot'
npm ERR! notarget
npm info preuninstall [email protected]
npm info uninstall [email protected]
npm info postuninstall [email protected]
npm ERR! Please include the following file with any support request:
npm ERR! /Users/thomas/fixture/figaro/npm-debug.log
No compatible version found: node-sass@'>=3.0.0-pre <4.0.0'
when i go qs theme upload
i get response like this
07:25:28 pm - Request Failed!: [404] Not Found
{"key":"theme/assets/android-chrome-36x36.png"}
on multiple stores. Nothing happens after that, no message whether the upload was successful or aborted. Btw, the asset that are "not found" actually exist.
im on windows 8.1, using quickshot v2.1.3
Add a timestamp to the terminal output messages so that you can see exactly when the last action finished. Particularly helpful for users with slower internet now in the boonies who miss their cable/fiber connections.
/cc @rickydazla
@internalfx I was going to add a "feature-request" tag but I guess I don't have rights to do so, which is why I left it out of the title.
While using theme watch
saving an invalid file shows "{timestamp} - undefined".
This in itself is perfectly fine, and expected. Is it possible to have a description of the offending issue that prevents the theme upload?
When I copy the contents of the file into the Shopify editor and attempt to save the file I get an error block above the editor of where the problem is, which makes it quick to find and update the issue. It would be amazing if Quickshot could have this kind of feature too.
Right now the instructions for getting setup are non-existent. Some (most?) users are not experts in setting up node for the purpose of running quickshot....I need to make it easy.
(at least on theme upload)
Might be useful...
Currently from the perspective of a theme tool Quickshot is pretty feature complete. But I have ambitions of making it even more powerful. I plan to make it more than just a theme tool...
But to do this, I think some breaking changes are necessary.
Currently QS has the ability to download pages into html files and upload them back again. This is handy, but I think it could be organized better. I also want to add support for more than just pages.
I am proposing breaking the pages functionality into its own module. I also plan on encapsulating all the theme functionality into a module as well.
Currently you run qs download
and get all the theme files, and pages.
In the future to download the theme you run qs theme download
.
Which will only download the theme files (assets, config, layouts, snippets and templates)
Separating theme functionality into a sub-command gives me lots of flexibility.
Now you could do qs pages download
to get all pages.
Want to add support for more? How about products!
qs products download
Hey! what about a command to copy products from one shop to another? It's pretty intuitive.
qs products clone [sourcetarget] [destinationtarget]
Run qs
and you get this...
Quickshot #{VERSION}
==============================
Commands:
quickshot configure Creates/Updates the configuration file in current directory
quickshot theme Manage Shopify theme files
quickshot pages Manage Shopify pages
Run qs theme
and you get this...
Quickshot theme #{VERSION}
==============================
Commands:
quickshot theme download [options] [filter] Download theme files, optionally providing a filter
quickshot theme upload [options] [filter] Upload theme files, optionally providing a filter
quickshot theme watch [options] Watch project folder and synchronize changes automatically
Options:
--target=[targetname] Explicitly select target for upload/download/watch
This would only put QS at feature parity with what it is now, but it opens the door to Quickshot being the swiss army knife of theme development.
Community Thoughts?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.