the-couch/slater

🛠 Shopify development toolkit

slater's Issues

Add structured data to theme

Add structured data to theme in JSON-LD format

Google Lighthouse Audit Query

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.

Theme: Product Options, product price does not change when selecting variants

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.

Build/Watch Error Windows

I have followed the read me instructions however I receive the following errors when trying to build or watch using slater command on windows.

Am I missing something?

Firing Shopify Trekkie (Facebook/GA/Tracking Scripts) on route change

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.

replace socket script

https://github.com/WebReflection/pocket.io

Theme: Product page: Quantity buttons don't work

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

How to include fonts files

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)

CLI command to switch between CSS/Sass

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?

picoapp - cartDrawerItem failed

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/

Slater not able to sync the checkout.liquid for Plus merchants

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.

why is theme considered unstable?

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?

slater maxes out ram

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.

Open dev theme on start

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

error syncing assets/index.js failed

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)

slater.toggleForm, slater.removeAddress not defined

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?

npm not updated for v.1.6.0

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 :)

Issues with quantity in cart drawer

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

Fix bad prop check in upload error reporting

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

Autoprefixer disabled in SASS preset in Assets

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 ;)

Error when I secondly run slater watch command

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>

add all contributors

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.

Show warning if assets entry doesn't exist

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.

Product Page: Default variant unselected

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!

Add port flag to cli watch command

Community discussion of Slater

What are your thoughts on creating a Slack or Discord to facilitate community help and develop Slater?

Cannot read property 'cart' of undefined after recent update

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.

Issue loading scripts on product page

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.

Windows watch error

On Windows 10

I can run the slater build command without issue, but when I run slater watch the above error shows up.

Could it be related to fsevents dependency not being installed? Any ideas on how to fix this issue?

Fix fatal error handling

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.

Fix discrepancies with port usage in READMEs and blog post

CC @iamkevingreen can you update your blog post?

Further maintenance

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.

Shopify Apps (product reviews) need a manual refresh to be loaded on the product template?

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.

webpack error parsing scss

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.

Confusion on what to expect out of the box

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.

Broken urls for images inside cart drawer

Here pull request does the trick at least for now #30

Issue when using ENV vars in JS

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.

Connection is not secure

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.

Theme: Pagination on the collection page doesn't work

I suspect it has something to do with router.js
When we disable routing in the index.js then pagination works just fine.

Issue with Outputs

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?

Before publishing to npm, build and package JS/CSS assets

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

SCSS/CSS Live Reloading, Liquid Not

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?

Struggling to add TailwindCss

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.

Redirect to collections as landing page

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?

Variant images

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!

Reloading & caching of assets

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.

Feature Request: multiple entry points

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.

Can't include SVG in the scss

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");

Clarify multi-theme usage and private app creation

As mentioned here #16 (comment)

Add to cart doesn't work for related products on the product page

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.