the-couch / slater Goto Github PK
View Code? Open in Web Editor NEW🛠 Shopify development toolkit
Home Page: https://slater.store/
🛠 Shopify development toolkit
Home Page: https://slater.store/
Add structured data to theme in JSON-LD format
I’m looking into this as a basis of transferring the shopify supply theme to, which i have on the old slate version however when i have ran a lighthouse audit on the four examples shown the all score really badly on performance at about 30%. The examples appear really fast but why does google audit think differently.
Let's say the product has many variants with different prices and "Compare at price".
When we are on the product page and select between variants using the dropdown, the price is not updated. It seems that it takes only the first variant and its price.
Select and radio buttons should trigger the price update according to the chosen variant.
Adding to the cart works just fine, it's only about updating the price on the product page.
This is more a "How have you all handled this?" than a bug, but I'm curious to hear how anyone using Slater has managed to handle the fact that the Trekkie scripts don't treat route changes as page loads, and tend not to fire as a result.
First of all, well done guys.
It's really nice to see some alternative to recently not supported Slate.
So, it seems that quantity buttons on the product page don't work. They do work on the cart overlay though.
I am pretty sure you are aware of that issue, here is the screenshot https://take.ms/UzaYe
Loader missing for binary font files
error ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleParseError: Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)
As an avid SCSS user I'm super happy that you have chosen to include Sass-support with a simple change in the config file, makes it much easier for me to work with my beloved functions and mixins. However there is one tedious thing keeping me from a smooth workflow if I want to use the nice bootstrapping provided with Slater - renaming all.css
to .scss
, both in filenames and @import
.
I propose a new command: slater config --styles=<css|sass|scss>
. This would update the assets preset in slater.config.js
with either css
or sass
and all filenames and @import
to .css
, .sass
or .scss
. (note: I have yet to meet a developer who prefers Sass over SCSS, but its nice to have that support anyways)
This would save a lot of time during startup, and also probably be quite fun to code!
slater config
could also be extended in the future for other similar tasks.
Thoughts?
Hi,
I'm testing slater, and I love it! But, I'm getting an issue when I click the cart button, it opens the sidebar correctly, but I get this error on the console:
bootstrap:2 TypeError: Cannot read property 'getElementsByTagName' of undefined
at bootstrap:2
at bootstrap:2
at Object.mount (bootstrap:2)
at bootstrap:2
Also, I can't change the quantity of the products that I have in my cart.
Thanks!
BTW this is also happening in your demo site https://slater-demo.myshopify.com/
I recently discovered that it's not possible to sync the checkout.liquid-file via the slater cli – This made me think about how to fix this issue, and after reading the Shopify assets api docs, I found a way to do so.
The problem is currently that the function upload()
in @slater/sync/index.js
, is base64 encoding the liquid files, and deploying them via the attachment key.
function upload ({ key, file }) {
const encoded = Buffer.from(fs.readFileSync(file), 'utf-8').toString('base64')
return api('PUT', {
asset: {
key,
attachment: encoded
}
})
...
}
The problem with this is, that Shopify is expecting the liquid input as a normal string, and via the value key, as in this example – So a possible fix, could be changing the upload function to this:
function upload ({ key, file }) {
const encoded = Buffer.from(fs.readFileSync(file), 'utf-8').toString('base64')
const value = Buffer.from(fs.readFileSync(file), 'utf-8').toString()
const output = key.includes('.liquid') ? { key, value } : { key, attachment: encoded }
return api('PUT', {
asset: output
})
...
}
These changes has been tested, and are working.
Wondering what you guys meant with:
This project is an active work in progress! The CLI is stable, but the theme itself is not.
What's missing from the theme itself that you would consider it unstable?
Edit: close this, the issue was related to yarn and I've since fixed it.
If anyone comes across a ram max out once slater is watching, update yarn.
Would be cool to add a command to open a particular theme by id
, using the configured themes in slater.config.js
.
Could be a flag on watch as well i.e. during development: slater watch --theme dev --open
I was sure I've filled out the the config file correctly. Used an existing theme named development
's id, correct store username and password. Shopify gives me this unhelpful error:
error syncing assets/index.js failed - [API
] Invalid API key or access token (unrecognized login or wrong password)
account-address.liquid:
<button class='button btn primary mr05' onclick='slater.toggleForm({{address.id}})'>Edit</button> <button class='button btn primary mr05' onclick='slater.removeAddress({{address.id}})'>Delete</button>
is there a file missing?
Hello i just realised this bug, when trying to test the window-fix, and i couldn't seem to get it working. Then i realised that it was the v.1.5.3, it kept installing from the npm-server :)
I'm having an issue where the quantity buttons, js-remove-single
and js-add-single
in the cart drawer are not functioning properly. js-add-single
is removing quantities, and js-remove-single
is removing more than one item. Has anyone else had this issue and has anyone had any ideas on how to fix?
My dev shop is here.
Thanks,
Jesse
Caused by incorrect theme ID in config file: Cannot read property 'asset' of undefined
https://github.com/the-couch/slater/blob/master/packages/slater/cli.js#L78
It seems that autoprefixer is disabled when switching to SASS preset:
module.exports = {
assets: {
presets: [
'sass'
]
}
}
Is there any way that we can enable it through slater.config.js?
Or any other way.
I couldn't find that option anywhere.
Hope you can help guys ;)
This is first time I am using slater. When I first run "slater watch" which is fine. After I run "slater sync" then I come back and run "slater watch", the following error occur.
I've tried delete and whole theme and re-initialise the theme 3 times but no luck. Not sure what kind of error it is.
slater v1.4.1
watch development theme (https://xxxxx.myshopify.com/?fts=0&preview_theme_id=99999999999)
events.js:183
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE :::4000
at Server.setupListenHandle [as _listen2] (net.js:1360:14)
at listenInCluster (net.js:1401:12)
at Server.listen (net.js:1485:7)
at Object.watch (/usr/local/lib/node_modules/slater/node_modules/@slater/compiler/index.js:81:10)
at watch (/usr/local/lib/node_modules/slater/index.js:202:23)
at <anonymous>
Need to flip through issues and add everyone to .all-contributorsrc
. Once they're in there, I've added a npm run contributors
script to generate the blocks in the Contributors section of the README.
Should not require an assets entry if users are using some other compilation process, but should let them know in case they need to specify a correct entry path.
It appears that with a flat product, that doesn't have any variants, the "select" doesn't default to the only available option. This is straight out of the box, and can be seen in your demo:
https://slater.store/collections/frontpage/products/sale-product
Wondering if that's come up before, and if so, what the best way to resolve that is — since ideally this will be visually hidden since it doesn't require user input. Thank you!
What are your thoughts on creating a Slack or Discord to facilitate community help and develop Slater?
It seems that some things don't work after recent pull #19
I got this https://take.ms/GuDBA
Cannot read property 'cart' of undefined
I also tried to make a clean install and got the same error.
Hi, I have a question. I'm trying to include a JS carousel library for the product images, but I'm having a problem. I don't know if I understand the correct way to include libraries or run scripts in specific pages. At the moment I'm adding my code in src/scripts/index.js
My code:
import { tns } from '../../node_modules/tiny-slider/src/tiny-slider'
const slider = tns({
container: '.product-slider',
items: 1,
slideBy: 'page',
autoplay: true,
mouseDrag: true
})
It works, the problem is that it only works if I refresh the site or if I land on a product page. I'm guessing this is because of the Router. My question is, what is the best way to include other libraries and scripts? It's not to clear to me on the documentation (maybe I'm not understanding). Also, I'm more used to the old way of creating Shopify themes, and I'm still learning to adapt.
If the remote theme doesn't exist, @slater/sync fails with an unhelpful message. Looks like it's the error handling in both the entry file and the cli. Error is like can't read property asset of undefined
.
CC @iamkevingreen can you update your blog post?
Hey 👋
Just wondering if there will be any maintenance from the-couch owners at all in the future? I noticed on your website the agency has unfortunately closed down :(
Might be useful to put out a 'looking for maintainers message' if necessary.
Not sure if this was intended to be addressed in 16, but I'm seeing that a couple apps my client uses (Wishlist and Shopify Reviews) aren't being loaded on the product.liquid template without a manual reload of the page. Guessing there's a simple fix perhaps and maybe someone can point me there.
Slater doesn't seem to be handling main.scss on my fresh, out-of-the-box build. (also getting some unhandled rejection errors). Let me know if you need any more information. Thanks for the great work!
slater build
slater v1.5.2
build development theme
error ./src/styles/main.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. Se
e https://webpack.js.org/concepts#loaders
> .test {
| filter: blur(5px);
| }
@ ./src/scripts/index.js 1:0-29
built in 0.62s
> index.js 1.238kb
(node:2245) UnhandledPromiseRejectionWarning: [object Array]
(node:2245) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:2245) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
I am a little confused on what to expect from slater right out of the box. Perhaps the documentation could make this a little more clear. After a slater init
I would expect the theme to be in a buildable state but I had to enable SCSS in the config before I was able to build the theme without error. Once built, uploaded and synced the theme seemed to be completely unstyled but by including main.css
in theme.liquid
some style was applied (orange background on the body) but it still seems pretty unstyled. I haven't seen any mention of main.css
, so I am just a little confused. Also without a screenshot to reference I really don't know if I have everything set up properly -- it looks broken but I have seen mention that the starter theme needs some love so that could be the case. I also understand that this is a bit of an opinionated start, but it would be helpful to understand exactly which opinions have been implemented. I am sure many people would love to use slater and build a theme truly from scratch without the opinionated starting point.
I have read this blog post, but that is all I can really find as far as any documentation is concerned.
As an aside, kudos and thanks for this project. It is good to see the community building tools as it seems that Shopify can't be bothered to build, maintain and support anything official. I first got really exited about slate at Shopify's Unite 2018 conference and am incredibly disappointed that they have seemingly abandoned the project.
Here pull request does the trick at least for now #30
Hi team, migrating to Slater today. It is really wonderful, thank you for making this. I am attempting to use the ENV variable feature, and I'm either using it wrong or there is an issue. After installing the initial Slater init
project, and setting up my development store settings, I made these changes:
Updated slater.config.js
to include an env
object (the ...
are real values pointing to my development store):
const path = require('path')
module.exports = {
themes: {
development: {
id: '...',
password: '...',
store: '...',
ignore: [
'settings_data.json' // leave this here to avoid overriding theme settings on sync
]
}
},
env: {
TESTVAR: 'testing the env'
}
}
Then in src/scripts/index.js
file I added the following at the bottom:
console.log("hey yo");
console.log(TESTVAR);
Bug: Console error: Uncaught ReferenceError: TESTVAR is not defined
. The hey yo
message does appear when previewing the theme, so I know the sync worked. I might be reading the documentation improperly, and I couldn't figure out where to find how this is performed in the source.
Any help would be appreciated! Thanks.
Thanks for building this theme, it's been great so far but I am working in the dark as the workflow is new to me and the documentation is quite patchy/light so apologies for asking the obvious.
I've pointed the site to a domain and the site no longer loads. I get the below error message in Chrome:
'Your connection is not private
Attackers might be trying to steal your information from sitename.co.uk (for example, passwords, messages or credit cards). Learn more
NET::ERR_CERT_COMMON_NAME_INVALID'
I also have the below console error when previewing via Shopify:
'slater - connection to server at 4000 failed'
I can't see in the docs how I set this up properly or indeed what I should be reasearching here. I don't want to use the livereloading or localhost (as I'm sure this is the issue) but just want this to load properly on a live domain. Any advice on how to fix these issues would be great.
I suspect it has something to do with router.js
When we disable routing in the index.js then pagination works just fine.
Hey, y'all. First off, this tool is amazing, makes theme development so much better.
I am developing a store for a client, and they have products with multi-word color variations, i.e. Melted Chocolate, Salted Green, etc. The radio inputs on product pages are outputting the values in strange ways, making the second word in the product name an attribute on its own, which fails to update the select box. It's kind of convoluted explaining it in words, but here is the HTML that it's spitting out.
<label class="radio f aic">
<input id="Melted" chocolate="" type="radio" name="Color" value="Melted" chocolate checked>
<span>Melted Chocolate</span>
</label>
I need it to output like so:
<label class="radio f aic">
<input id="Melted Chocolate" type="radio" name="Color" value="Melted Chocolate" checked>
<span>Melted Chocolate</span>
</label>
But I'm failing to find where the problem lies. Anyone have any solutions?
Only impacts first upload of theme, would be nice to have the compiled version by default and not need to run npm run start
to see the latest update of styles/js
Having a bit of a strange issue where changes inside the repo cause a refresh to fire as expected. This is the case for JS, Liquid, CSS (Using SASS in this build). However, after the refresh, only styling and JS updates seem to come through without a second manual refresh occurring.
Any changes to Liquid don't appear in browser until a manual refresh. Feels like this is a caching issue and maybe not specific to Slater itself. Curious if anyone else has run into this behavior?
Following the directions in the Tailwind docs, I’ve tried adding the plugin declarations in slater.config.js, but it’s failing to compile properly.
It’s not throwing any errors, so I’m a little confused what’s going wrong.
I tried to import app.js and use app.go('collections/all')
in my slater-welcome.js to redirect to collections page, but it said app.go is not a function. Can anyone help to point out the right way for redirection?
Hello. Since there’s no selectCallback() built into this theme, is there anywhere you can point me to in order to add swatches and changing variant images to the theme?
Thank you!
Reload is a little weird, sometimes updates are reflected properly. Pry need to confirm reload is happening after the asset is uploaded.
Also for JS/CSS updates, ensure it's only reloading once.
Multiple entry points would be nice to have for creating separate style and javascript bundles. Our personal use case would be for Shopify plus checkout pages.
It seems that we can't use SVGs (from Assets folder) in the scss file. There is an error in the Webpack saying:
Module build failed (from /Users/.../.nvm/versions/node/v8.16.0/lib/node_modules/slater/node_modules/@slater/compiler/node_modules/mini-css-extract-plugin/dist/loader.js): ModuleNotFoundError: Module not found: Error: Can't resolve './icon-down.svg' in '/path_to_css/styles'
I've tried different assets path combination but none of them worked.
Until this is fixed here is my workaround: https://stackoverflow.com/a/21626701/5664137
Just convert SVG source to Base64 format (using e.g. https://www.base64encode.org/) and then include in the scss file as
background-image: url("data:image/svg+xml;base64,YOUR_CODE_HERE");
As mentioned here #16 (comment)
I have the related products section on the product page and these related products have the “add to cart” button enabled. For some reason, I got the following JS error:
https://take.ms/hVTye
The temporary fix suggested by @mrtamagotchi is to change the policy for the products so that they wouldn't sell after they went out of stock.
It would be nice to find a more stable fix for that issue.
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.