Hybris with wro4j not pulling in addon js files - sap-commerce-cloud

When using wro4j for minification in Hyrbis addon js files are not being added to the generated minified/concatenated output (/wro/addons_responsive.js) OOTB addons are being pulled in however third party addons are not.
I've added their path to the wro.xml for the specific storefront and have wro4jconfigscan.addon=true property in the relevant addon project.properties.template file.
I can't quite see which part of the puzzle I'm missing.. Any ideas?

Make sure, you have added the below properties in your project.properties of your addon
<your>storefront.wro4jconfigscan.<your>addon=true
<your>addon.javascript.paths.responsive=/responsive/common/js/<your>addon.js;/responsive/common/js/<your>addon2.js
<your>aaddon.css.paths.responsive=/responsive/common/css/<your>addon.css;/responsive/common/css/<your>addon2.css
During the build, above js & css files will be added to your wro_addon.xml file under storefront resource folder.
Another way is to add your addon css/js path directly to ${ext.YOURstorefront.path}/wro_addons_template.xml, which used to create wro_addon.xml while building the platform.
Like
<groups xmlns="http://www.isdc.ro/wro" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd">
<group name="addons_responsive">
<js>/_ui/addons/b2bacceleratoraddon/responsive/common/js/acc.checkoutsummary.js</js>
<js>/_ui/addons/customaddon/responsive/common/js/acc.customaddon.js</js>
<css>/_ui/addons/customaddon/responsive/common/css/customaddon.css</css>
</group>
</groups>

Related

Shopware 6 Cloud App - how to access values from config.xml fields in the SCSS file?

I have a question: how can i (easy) implement the functionality from this plugin documentation https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-scss-variables-via-subscriber in a (cloud) app? I want to access values from config.xml fields in the SCSS file. I would be reluctant to define this as inline CSS (how SwagCustomNotification does it).
In the documentation under https://developer.shopware.com/docs/guides/plugins/apps/configuration scss is not included. So it is not possible?
You can't access fields defined in config.xml in scss files of regular apps but you should be able to setup a theme within your app. In the theme.json you can then define theme specific config fields. These fields should then become available as variables in your theme's scss files. You can find and change the config fields in the administration in the theme settings when assigning the theme to a sales channel.

How to properly add Twitter Bootstrap to meteor

How can I properly install Twitter Bootstrap into my meteor project?
I know I can do meteor add bootstrap but I can't customize the variables (ie colors and the sorts). I've also looked at nemo64:bootstrap but same issue, I can only include and exclude modules of Twitter Bootstrap but not the variables.
How can I properly include Twitter Bootstrap and have access to the variables.less ?
In order to control the order in which Meteor loads .less files you need to add .import.less to the file extension. If you import the bootstrap less files into your project and rename them, you will have finite control of all the mixins and variables. Here is a great post that summarizes this. http://www.manuel-schoebel.com/blog/meteorjs-and-twitter-bootstrap---the-right-way

How can I build YUIDoc with offline resources?

When you build & run YUIDoc it gets some of his resources from http://yui.yahooapis.com/.... These resources include the stylesheet and yui.min.js.
How can I download and use these resources offline?
The reason for this is because we run our docs on a HTTPS server. The YUIDoc serves his files always over HTTP protocol.
I had the same problem and I really don’t understand why the don’t have a valid certificate for yui.yahooapis.com. Here’s what works for me (with YUIDoc 0.5.0):
Create a custom theme
First of all, you’ll need to create a new theme that overrides some parts of the default theme.
Create the following folder structure:
my_theme
├── assets
│   ├── css
│   └── yui
└── layouts
Modify the main layout
To avoid loading the remote CSS and scripts, you need to alter the main layout.
Copy the file called main.handlebars from the original theme to your my_theme/layouts/ folder. If you installed YUIDoc via node, the original file is located in node_modules/yuidocjs/themes/default/layouts/. Alternatively, you can grab it from the yuidoc GitHub repo.
Make the following changes in that file:
1.) Replace the link tag referencing the remote stylesheet:
<link rel="stylesheet" href="{{yuiGridsUrl}}">
<link rel="stylesheet" href="{{projectAssets}}/css/cssgrids-min.css">
2.) Replace the script tag referencing the remote YUI library:
<script src="{{yuiSeedUrl}}"></script>
<script src="{{projectAssets}}/yui/build/yui-base/yui-base-min.js"></script>
Add a local copy of the remote assets
1.) Fetch the CSS from Yahoo’s CDN
Download cssgrids-min.css from the Yahoo CDN and put it in your my_theme/assets/css folder.
2.) Download the YUI 3.9.1 library
Download YUI 3.9.1 from http://yui.zenfs.com/releases/yui3/yui_3.9.1.zip (Release Notes) and put the build folder from the archive to my_theme/assets/yui.
Build your docs
When building your docs, make sure you specify your custom theme:
$ yuidoc my_js_folder --themedir my_theme
Possible improvements
Since this adds a bunch of files to your project, it might make sense to dive a little deeper into YUIDoc and see which YUI modules are actually required and remove everything else. Also, combining the files would be desirable (the library served form Yahoo’s CDN does this and it should be possible to get this working locally as well).

Packaging requirejs optimized files in war

In a large web application, I'm using requirejs amd modules so that the scripts themselves are modular and maintainable. I have the following directory structure
web
|-src
|-main
|-java
|-resources
|-webapp
|-static
|-scripts
|-styles
|-images
|-static-built //output from r.js. not checked into git
|-WEB-INF
During build js and css are optimized using r.js into static-built folder. Gradle is the build tool.
Now the problem: The jsps refer to the scripts in static/scripts folder and this is how i want when working locally. However when building war, I want the static files to be served from static-built folder. The important thing is the source jsp should not have to change to serve the optimized files from static-built folder.
Two options that I have are: a) the gradle build while making war should include static-built instead of static. b)include static-built in addition to static and using tuckey urlrewrite pick the resouce from static-built rather than static.
What best practices are the community following in similar scenarios?
We've setup the server to have a runtime profile (dev, qa, prod, etc) read from a system property which determines some settings based on it. When running in production profile we serve the optimized files from the WAR. In development we serve the non-minified and non-concatenated files directly from the filesystem outside the application context.
Files are structured according to the official multipage example.
Configuring serving files depends on your chosen backend solution. Here's an example for spring.
Alternatively, r.js can generate source maps and those will help with development as well.
Not sure if this question is outdated already, but I had a kind of similar problem.
I had similar project structure, but with the only difference - I've split the project into 2 modules:
one of them (let's call it service) was java-module for back-end
the second one contained only js and other stuff related to front-end (let's call it ui).
Then in Gradle build 'assemble' task of the service depends on 'assemble' task of ui AND another custom task called 'pre-assemble'. This 'pre-assemble' task was copying the optimized js files to place where I wanted them to be.
So, basically, I've just added another task that was responsible for placing all the optimized js files in the proper place.

Meteor package images are not shown on production server

I have added chosen-package to my app, but when I deployed it on production, images of the package are not loaded. Example page: http://package-images.meteor.com/
How to show/load images of Meteor package on production server?
Note to package creators: If you include images and css which reference those images, you must modify the paths (or user an override css file) to start with /packages, otherwise the files won't be found in production.
I haven't used chosen but after spending a couple of minutes looking at the source it looks like it wasn't packaged in a way that will work with the current version of meteor's production path system. You have two choices:
Use select2 instead.
Create a new version of chosen (you could host it locally or create a new atmosphere package), and include a path override css file. See this example from select2.

Resources