Question: workflow and theme inheritance about magento2-alpaca-theme HOT 9 CLOSED

I have resolved questions 2 & 3. Will you at least answer question 1? Hoping you can provide some minor guidance.

The only thing I need to learn more about is workflow and how inheritance works.

from magento2-alpaca-theme.

Hey @mli025, thanks for the interest and use of Alpaca!

After installation you should have alpaca theme & components in vendor/snowdog and your theme in vendor/splys directory, where you can edit all templates.

Answering your first question, when you run bin/magento setup:upgrade static content in pub/static is removed and you have to compile all assets again with gulp styles && gulp babel && gulp svg. It's good to add these gulp tasks to your deployment config after magento upgrade command.

We'll soon create a boilerplate for faster setting a new project based on Alpaca Theme, Alpaca Components and Frontools with better documentation how to setup everything and some workflow introduction.

from magento2-alpaca-theme.

I've a question on workflow and inheritance, too.Is there any timetable for the boilerplate available?

I've created a component module "client-components" under app/design/frontend/vendor/client-components" with the modules.json["../../../../../vendor/snowdog/module-alpaca-components"].
Also there is a theme "client" under app/design/frontend/vendor/client
with theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Client Theme</title>
    <parent>Snowdog/alpaca</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

themes.json

  "alpaca": {
    "src": "vendor/snowdog/theme-frontend-alpaca",
    "dest": "pub/static/frontend/Snowdog/alpaca",
    "locale": ["en_US", "de_DE"],
    "modules": {
      "Snowdog_Components": "vendor/snowdog/module-alpaca-components/components"
    }
  },
  "client": {
    "parent": "alpaca",
    "src": "app/design/frontend/Vendor/client",
    "dest": "pub/static/frontend/Vendor/client",
    "locale": ["en_US", "de_DE"],
    "modules": {
      "Snowdog_Components": "app/design/frontend/Vendor/client-components/components"
    },
    "ignore": ["node_modules"]
  }
}

and styles.scss

@import '../Snowdog_Components/01-globals/variables/variables';

// Theme variables
@import 'variables';

// Components
@import '../Snowdog_Components/styles';

// Theme styles
@import 'theme';

but my client-component styles aren't imported. Only the alpaca one.

How do I solve this?

from magento2-alpaca-theme.

Besides that I always get error for the missing mq mixin. Since it's part of the Alpaca components I should not include it myself, or should I?

from magento2-alpaca-theme.

Hi @dyron
We are still working on boilerplate and not sure when it will be ready.

Try this flow to work with client (assuming that client is vendor name):

1. Components based on Alpaca
   Create client-components as a composer repo in <root>/vendor/client/client-components.
   in modules.json (inside components repo) please add:

[
    "vendor/snowdog/module-alpaca-components"
]

to set inheritance from alpaca

in composer.json file of the components package you should add alpaca-components as a dependency

"require": {
    "snowdog/module-alpaca-components": "1.3.2"
  }

To run components repo by itself you should have also snowdog/frontools repo as a dependency
and run composer install inside components directory.

To use custom variables for client-components, create a file _client-variables.scss inside components folder: <components>/components/01-globals/variables/_client-variables.scss
and import it in <components>/docs/styles/styles.scss. Necessary imports look like:

// Variables
@import '../../components/01-globals/variables/variables';
@import '../../components/01-globals/variables/client-variables';

// Components
@import '../../components/styles';

// Styles necessary only for Fractal purposes
@import 'fractal';

2. Theme based on Alpaca
   Create theme-frontend-client as a composer repo in <root>/vendor/client/theme-frontend-client with theme.xml as you've created earlier (with alpaca theme as a parent)
   In <theme>/styles/styles.scss you should import:

// Component variables
@import '../Snowdog_Components/01-globals/variables/variables';
@import '../Snowdog_Components/01-globals/variables/client-variables';

// Vendor modules
@import 'vendor/fotorama/gallery';

// Components
@import '../Snowdog_Components/styles';

// Theme styles
@import 'theme';

3. Frontools
   theme.json:

{
  "alpaca": {
    "src": "vendor/snowdog/theme-frontend-alpaca",
    "dest": "pub/static/frontend/Snowdog/alpaca",
    "locale": ["en_US"],
    "modules": {
      "Snowdog_Components": "vendor/snowdog/module-alpaca-components/components"
    }
  },
  "client": {
    "src": "vendor/client/theme-frontend-client",
    "dest": "pub/static/frontend/Client/client",
    "locale": ["en_US"],
    "parent": "alpaca",
    "modules": {
      "Snowdog_Components": "vendor/client/client-components/components"
    }
  }
}

to setup frontools:
cd vendor/snowdog/frontools && yarn && gulp setup
this create simlinks in <root>/tools folder, so from there of from vendor/snowdog/frontools run gulp styles && gulp babel && gulp svg to compile files.

Additionaly:
You can create project's frontools repo (composer package):
Files:
browser-sync.json:

{
  "proxy": "client.test",
  "host": "client.test",
  "open": "external",
  "logPrefix": "client",
  "notify": false
}

theme.json with theme setting like above

In composer.json you should add snowdog/frontools as a dependency:

{
  "name": "client/module-client-frontools",
  "type": "magento2-component",
  "require": {
    "snowdog/frontools": "~1.7"
  },
  "extra": {
    "map": [
      [
        "config",
        "dev/tools/frontools/config"
      ]
    ]
  }
}

this module installs frontools (you don't need to fork or copy repo, you can keep it easily updated) and use your theme config.
to setup frontools you should proceed the sama way as with default frontools repo (above).

If you will use this solution, add this repo in components and theme dependency in composer.json instead of snowdog/frontools.

You will find compiled files in: var/view_preprocessed/frontools/frontend/ components should be found in <root>/var/view_preprocessed/frontools/frontend/Client/client/Snowdog_Components (with both variables files - `variables from alpaca and client-variables from you theme).

Frontend compiled files you can find also in <root>/pub/static/frontend/

Mixins should be available in theme and components. theme should be visible in admin panel too. If theme won't be visible in admin try to run magento setup:upgrade and clear Magento cache
Please let me know if this solution work for you.

from magento2-alpaca-theme.

Unluckily, no.

I'll run into

Error in plugin 'sass'
Message:
    build/components/02-elements/map/_map.scss
Error: no mixin named mq
        on line 11 of build/components/02-elements/map/_map.scss
        from line 8 of build/components/02-elements/_components2.scss
        from line 4 of build/components/_styles.scss
        from line 5 of build/docs/styles/styles.scss
>>         @include mq($screen-m) {

   -----------------^

or

Error in plugin 'sass'
Message:
    build/components/03-modules/footer/_footer.scss
Error: Undefined variable: "$button--border".
        on line 33 of build/components/03-modules/footer/_footer.scss
        from line 20 of build/components/03-modules/_components.scss
        from line 3 of build/components/_styles.scss
        from line 5 of build/docs/styles/styles.scss
>>                 border: $button__border;

   ------------------------^

again, as if these modules were filed under app/*.

from magento2-alpaca-theme.

@dyron sorry for late reply.
In client-components repo, if you add some file to /components/ folder, you have to import all components from alpaca too:
For example, adding _client-variables.scss in <components>/components/01-globals/variables/_client-variables.scss, you should copy import file from alpaca: https://github.com/SnowdogApps/magento2-alpaca-components/blob/develop/components/01-globals/_components.scss
if you edit styles for any of component, you should each time add this _components.scss file for group. During compilation, if imported file is not found in child components, it is taken from alpaca.

Do you install magento using composer or by copy files?
Did you try to load client-components repo and theme-frontend-client repo using composer require <package_name> command?
it's strange that the file compiles into /app/* folder. Did you check all you path?
After compiling the files, you should see assests for theme in var/view_preprocessed like this:

from magento2-alpaca-theme.

@anqaka

Hi, been working with your theme for on and off for some time and there's something I would like to have implemented on my site: Quicksearch.

https://alpaca-components.now.sh/components/detail/quicksearch.html

Could you explain to me how I can get this to work? currently nothing appears. I've tried to implement it by using https://alpaca-components.now.sh/components/detail/quicksearch.html and using

styles.scss
@import '../Snowdog_Components/03-modules/quicksearch/quicksearch';

My theme is located at /app/design/frontend/<vendor>/<theme>

If you could tell me how to do this it would help a lot! Fixed ES6 for the theme (and currently using SA-Elasticsuite along with it) with some help from #153

from magento2-alpaca-theme.

Elasticsuite will be supported out of the box in 2.0 release that will be publicly available soon.

Closing this issue, because it's more a support thread than an actual issue that needs to be fixed.

from magento2-alpaca-theme.