hujjat / shopify-sunrise Goto Github PK

Is there no package.json?

Hi
cooll theme, but get alpine errors - https://prnt.sc/8jnEXYmaFxoR
how fast fix?

👋 Hello again. I am proposing a means to allow the user to define custom breakpoints without having to rely on a custom tailwind config file. This way the end user can pop into the theme editor and change these values at will.

[ My contribution would only move the tailwind breakpoints outside of the tailwind config file (using default values), and the theme author can decide whether they want to provide this functionality ].

Pros

• End user can change pre-defined breakpoints easily
• In development, the css is rebuilt automatically when using Shopify Theme Serve with the '--theme-editor-sync' option

Cons

• Outside of development, must rebuild the css after changing breakpoints through the editor, or [ tailwind ] generated queries will not be updated

How

I have tested this by adding breakpoints to the settings_schema (e.g, 'breakpoint_lg'), and importing the json data into the tailwind config file from 'settings_data'. (optionally, you can simply add these breakpoints to 'settings_data' directly)
tailwind.config.js

const settings = require("./config/settings_data.json").current;
const breakpoints = {
  xl: settings.breakpoint_lg + "px",
  lg: settings.breakpoint_lg + "px",
  md: settings.breakpoint_md + "px",
  sm: settings.breakpoint_sm + "px",
  xs: settings.breakpoint_xs + "px",
};
module.exports = {
  content: [/* paths */],
  theme: {
    screens: {
      xl: breakpoints.lg,
      lg: breakpoints.lg,
      md: breakpoints.md,
      sm: breakpoints.sm,
      xs: breakpoints.xs,
    },
  },
};

Of course, you can continue to use tailwind breakpoints, but I wouldn't. My solution is to not use tailwind breakpoints (e.g, md:p-0) wherever possible, and use the settings values directly instead via {% style %} tags. I took this approach because I was having zero luck getting css vars to work inside the config file.

This is purely optional, tailwind breakpoints will continue to work as intended. I think it's worth it to allow the user to change these values as needed. What do you think?

Cheers

Edit; I've noted that while you work on the theme settings schema, you'll want to use Shopify Theme Serve without the sync option (or whatever is equivalent)

main-cart-footer section is not exist!!!!

Hello buddy, I'm working on my theme and noticing quite a few linting warnings. One of which is that 'img_src' is deprecated. It still works, but the new way to do it is "section.settings.image | image_src: width: 'string', height: 'string'". Only one dimension is required.

There are quite a few instances, I understand if you're too busy to update. If you like, I can do a PR. Cheers

Variant selection and add to cart on product pages with multiple variants isn't working. Attaching a screenshot of the error I'm getting in the console.