Skip to content

Releases: NetoECommerce/Skeletal

23.1.0

19 Jan 08:19
a28ab0c

Choose a tag to compare

Merge pull request #562 from githubprabhat/master

IMP-571 fix done

20.1.0

30 Jan 03:24
ca8bc03

Choose a tag to compare

All Changes

  • ℹ️ - updated preorder logic - philcon93
  • ℹ️ - Implement specific_autohide
  • ℹ️ - npm audit fix - philcon93
  • ℹ️ - updated preorder logic to include WEBSTORE_USE_PREORDER_QUANTITY - philcon93
  • ℹ️ - CAT-1007 updated invoice_body payment methods to be more robust - philcon93
  • ℹ️ - Merge pull request #491 from NetoECommerce/topic/july_dependency_update - npm audit fix - philcon93
  • ℹ️ - CAT-1007 added escape tags around payment method name on invoice - philcon93
  • ℹ️ - Merge pull request #492 from NetoECommerce/feature/CAT-1007_invoice_page - CAT-1007 updated invoice_body payment methods to be more robust - philcon93
  • ℹ️ - CAT-967 make sure the invoice page will show webpayment method was used - jeff-stamborski
  • ℹ️ - Added Meta for noindex, nofollow - kiel-abraham
  • ℹ️ - Merge pull request #493 from NetoECommerce/topic/CAT-967_add_webpayments_param_to_invoice_page - CAT-967 make sure the invoice page will show webpayment method was used - philcon93
  • ℹ️ - Removed disp_ajax_templ event listener - philcon93
  • ℹ️ - Merge pull request #494 from NetoECommerce/kiel/meta-noindex - Added Meta for noindex, nofollow - philcon93
  • ℹ️ - Merge pull request #464 from NetoECommerce/feature/specific_autohide - Implement specific_autohide - philcon93
  • ℹ️ - removed submit_token references - philcon93
  • ℹ️ - Added IE compatibility mode meta tag - philcon93
  • ℹ️ - updated links and scripts to not include type - philcon93
  • ℹ️ - updated styles to not include type - philcon93
  • ℹ️ - Merge pull request #496 from NetoECommerce/topic/remove_disp_ajax_templ - Removed disp_ajax_templ event listener - philcon93
  • ℹ️ - Merge pull request #497 from NetoECommerce/topic/remove_submit_token - removed submit_token references - philcon93
  • ℹ️ - Merge pull request #498 from NetoECommerce/topic/ie_compatibility_mode - IE compatibility mode meta tag - philcon93
  • ℹ️ - Merge pull request #499 from NetoECommerce/topic/css_js_includes - css/style/js includes - philcon93
  • ℹ️ - scoped all custom.js to nCustom instead of jQuery extend - philcon93
  • ℹ️ - changed tooltip initialise to be in doc ready and bootstrap suggest data attribute - philcon93
  • ℹ️ - Added nofollow to platform branding link -
    Will have a positive SEO impact. - brandonsheppard
  • ℹ️ - Update checkout.template.html - brandonsheppard
  • ℹ️ - CAT-1091 fixed extra option breaking layout - philcon93
  • ℹ️ - Merge pull request #502 from NetoECommerce/platform-branding-nofollow - Added nofollow to platform branding link. - philcon93
  • ℹ️ - Merge pull request #503 from NetoECommerce/feature/CAT-1091-extra_options - CAT-1091 fixed extra option breaking layout - philcon93
  • ℹ️ - Merge pull request #501 from NetoECommerce/topic/custom_js_clean_up - Topic/custom js clean up - philcon93
  • ℹ️ - Merge pull request #505 from NetoECommerce/stockist-api-key-logic - Stockist API key logic - philcon93
  • ℹ️ - added node_sass for development - philcon93
  • ℹ️ - added components preorder logic from v3 branch - philcon93
  • ℹ️ - Merge pull request #507 from NetoECommerce/topic/node_sass - node_sass for development - philcon93
  • ℹ️ - fix delete wishlist - neto-ben
  • ℹ️ - page wishlist - neto-ben
  • ℹ️ - forgot closing in wishlist list - neto-ben
  • ℹ️ - T404-1346 use the config instead of hard-coding an arbitrary number - neto-ben
  • ℹ️ - T404-1346 fix delete wishlist in the customer section - neto-ben
  • ℹ️ - Merge pull request #508 from NetoECommerce/topic/wishlist - Paging wishlist items and fix delete wishlist - philcon93
  • ℹ️ - Merge pull request #419 from NetoECommerce/pre-order-stock-investigation - Preorder logic - philcon93

19.7.0

03 Jul 07:52
c1c32b8

Choose a tag to compare

All Changes

19.2.0

05 Feb 03:26
efc45b4

Choose a tag to compare

Welcome 2019!

We have added some great changes since the last release. From updating the google verification meta tag #462, adding in more structured data #465, refactoring the invoice templates #457, to updating our core front end dependencies #459.

Happy New Year 🐉 🎆

All Changes

Read more

18.11.0

01 Nov 00:13
0d2fd18

Choose a tag to compare

Yo team,

It's been awhile, October was a slow month for Skeletal so we held off a release until November so it had some meaningful changes. One major item that came from this release is the addition of a shipping calcualtor config! Now merchants will be able to change which type of shipping calculator they wish to display on their webstore with a change of advance config. More information on these changes can be found in it's PR:

✌️

All Changes

18.9.0

05 Sep 02:03
77cc4b6

Choose a tag to compare

All Changes

18.8.0

02 Aug 22:39
7d52e4d

Choose a tag to compare

A couple of bug fixes since the major framework update, and a handful of features and performance additions. Overall, it was a good month 👌

All Changes

  • ℹ️ - HTML tags showing in customer comments
  • ℹ️ - One too many div when 5+ vouchers are ordered
  • ℹ️ - replaced payment_methods with checkout_pay_icons - philcon93
  • ℹ️ - updated less to include neto naming conventions - philcon93
  • ℹ️ - merged #418 in - philcon93
  • ℹ️ - made zip logo same size as others so less inline styles - philcon93
  • ℹ️ - concat jquery popper and bootstrap - philcon93
  • ℹ️ - Update build scripts to allow gulp as a local dependency - matt-downs
  • ℹ️ - Update readme to describe updated compile commands - matt-downs
  • ℹ️ - updated branch to master - philcon93
  • ℹ️ - fixed up vouchers template - philcon93
  • ℹ️ - Add margin to bottom of payment plans card - matt-downs
  • ℹ️ - Remove duplicate home button - matt-downs
  • ℹ️ - merged in master - philcon93
  • ℹ️ - add vendor script to CDN - philcon93
  • ℹ️ - Merge pull request #423 from NetoECommerce/hotfix/cart-plan-margin - Add margin to bottom of payment plans card on cart page - philcon93
  • ℹ️ - Merge pull request #421 from NetoECommerce/feature/local-gulp - Update build scripts to allow gulp as a local dependency - philcon93
  • ℹ️ - new paypal link implementation - philcon93
  • ℹ️ - Update custom.js
  • ℹ️ - Merge pull request #425 from NetoECommerce/feature/CAT-185_paypal_link - New Paypal link implementation - philcon93
  • ℹ️ - Merge pull request #424 from NetoECommerce/hotfix/duplicate-home-button - Remove duplicate home button on content review success page - philcon93
  • ℹ️ - Merge pull request #426 from NetoECommerce/wishlist-image-change - Custom.js addToWishList params - philcon93
  • ℹ️ - Merge pull request #356 from NetoECommerce/payment_methods_icons_update - CAT-81 - replace payment_methods with checkout_pay_icons - philcon93
  • ℹ️ - Merge pull request #420 from NetoECommerce/feature/vendor_scripts - Concat jquery, popper and bootstrap - philcon93
  • ℹ️ - added test id to invoice page - philcon93
  • ℹ️ - Merge pull request #428 from NetoECommerce/hotfix/behat_additions - Added test id to invoice page - philcon93
  • ℹ️ - updated permissions - philcon93
  • ℹ️ - Merge pull request #429 from NetoECommerce/hotfix/permissions - Updated permissions - philcon93
  • ℹ️ - Change remove_single_url tag back to remove_url - matt-downs
  • ℹ️ - Merge pull request #431 from NetoECommerce/hotfix/remove_url - Fix issue where category and instock filters could not be toggled off once selected - philcon93
  • ℹ️ - Merge pull request #422 from NetoECommerce/hotfix/html_showing - Voucher template fix - philcon93

18.7.0

02 Jul 08:51
01d5c1b

Choose a tag to compare

Bootstrap update

Updated CSS framework from Bootstrap 3.3.6 to 4.1.

Almost every file in the Skeletal repo has been updated in some way to accommodate for this update. There are huge benefits to updating our CSS framework: better modern browser support; using modern CSS (e.g Flexbox); simplified components with extensive utility classes; etc. It's just a great move forward. Bootstrap has created a migration article about what is new: https://getbootstrap.com/docs/4.0/migration/#summary

Some important changes:

Font Awesome 5

Updated our icon library from Font Awesome 4 to 5!

Each icon needs to have the name and the proper prefix specified. Version 4 just had one prefix — fa. Version 5 has four prefixes: https://fontawesome.com/how-to-use/upgrading-from-4#icon-name-changes

Mobile header

The mobile header has been redesigned to be more slimline, and because of the power of Bootstrap 4, the dropdown menu works by default on mobile!

screen shot 2018-05-10 at 12 37 17 pm

Invoice/confirmation templates

New invoice/confirmation page design! This has been designed based on tons of usability research, communicating directly with Neto merchants and multiple design sessions with key people from all different departments of Neto.

devphil neto com au__mycart_ts 1525330316052471 1 1

SASS

Bootstrap 4 uses SASS instead of LESS, so we also updated our themes to use SASS. We also placed the SASS files directly under src, e.g 'src/scss', instead of being inside of css, e.g 'src/css/less'. This was to help keep the preprocessor files separate to the compiled output. 

SASS and LESS are very similar; for the most part the syntax is only a little different, e.g to do variables in LESS you would have the following:

@primary-color: #333;

body {
 color: @primary-color;
}

And in SASS:

$primary-color: #333;

body {
 color: $primary-color;
}	

Easy right!

Mixins are similar, LESS has '.custom-mixin', while SASS mixins starting with '@mixin' and being called with '@include'. 

Import are exactly the same, we have just updated one of the partials names because of SASS overrides;

// Bootstrap and overides
@import "./_bootstrap";
// Neto standard styles
@import "./_neto";
// Custom styles
@import "./_custom";	

More info on SASS overrides can be found in the Bootstrap documentation: https://getbootstrap.com/docs/4.1/getting-started/theming/#variable-defaults

For more in-depth documentation on SASS: https://sass-lang.com/

Gulp task

Our gulp build process has been updated to use SASS and also optionally use the JS from the theme dependency. I.e. Bootstrap and Popper.js are included via package.json and the gulp task 'gulp js' will bring those relevant JS files into the theme. This allows the theme to directly link with its dependency. Also, when Bootstrap gets updated for new features or bug fixes, a theme could update its dependencies and use that version of Bootstrap. By default Skeletal will use CDN versions of these JS files for performance, but we will be actively keeping our dependencies up to date as well.

[%cdn_asset html:'1' type:'js' library:'popper' version:'1.14.3'%]popper.min.js[%/cdn_asset%]
[%cdn_asset html:'1' type:'js' library:'bootstrap' version:'4.1.1'%]bootstrap.min.js[%/cdn_asset%]	

As Bootstrap is using SASS, we updated the gulp tasks to use gulp-sass instead of gulp-less, and we have added a basic setup to use PostCSS and PostCSS-cssnext as well. PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today, and with the basic setup vendor prefixes are automatically added. 

var path = require('path'); 
var fs = require('fs'); 
var gulp = require('gulp'); 
var postcss = require('gulp-postcss'); 
var cssnext = require('postcss-cssnext'); 
var sass = require('gulp-sass');  

var config = {}; 
config.src = './src'; 
config.JS = config.src + '/js'; 
config.SCSS = config.src + '/scss'; 
config.CSS = config.src + '/css';  

// Compile SASS into CSS
gulp.task('sass', function() {
var plugins = [ cssnext ];
return gulp.src(config.SCSS +'/*.scss')
.pipe(sass())
.pipe(postcss(plugins))
.pipe(gulp.dest(config.CSS))
});

We hope theme developers will be able to leverage this and configure it to their theme's needs.

JS

We have updated the custom functions inside of custom.js to be scoped to one main object, 'nCustom'. This has been done to reducing bloating the global space but also to make our code dryer, to reduce repetition elsewhere in the theme.

Previously we used a click event listener on '.btn-load' to change its state with an anonymous function:

$(".btn-loads").click(function(){
	$(this).button("loading");
	var pendingbutton=this;
	setTimeout(function(){
		$(pendingbutton).button("reset");
	},3000);
});	

This mostly worked, but didn't take into account product page reloads with AJAX, so we needed a better way to work with event delegation. Also Bootstrap no longer supports the .button('loading') method, so we needed a new way to handle the actual function. Now, we create our scoped function and then use that function with two different event listeners based on whether it is an AJAX section:

//
//custom.js
//
var nCustom = {
	funcs : {
		buttonLoading: function(){
			...
		}
	}
}

$(document).on("click", ".btn-loads", nCustom.funcs.buttonLoading);		
//
// products/includes/products_scripts.template.html
//
$(document).on("click", ".btn-ajax-loads", nCustom.funcs.buttonLoading);	

B@SE

All b@se has also been updated to use modern syntax, e.g removal of comment tags around b@se functions and use of data/config tags instead of data/config functions.

Old code for filtering by price:

[%PARAM *body%]
	[%DATA id:'selected' if:'==' value:'1'%]
		[%PARAM *if_true%]...[%/PARAM%]
		[%PARAM *if_false%]
			[%DATA id:'min' if:'=' value:'0'%]
				[%DATA id:'max' if:'>' value:'0'%]...[%/DATA%]
			[%/DATA%]
			[%DATA id:'min' if:'>' value:'0'%]
				[%DATA id:'max' if:'>' value:'0'%]...[%/DATA%]
			[%/DATA%]
			[%DATA id:'max' if:'=' value:'0'%]...[%/DATA%]
		[%/PARAM%]
	[%/DATA%]
[%/PARAM%]	

New code:

[%param *body%]
	[%if [@selected@]%]
		...
	[%else%]
		[%if [@min@] == 0 AND [@max@] > 0%]
			...
		[%elseif [@min@] > 0 AND [@max@] > 0%]
			...
		[%elseif [@max@] == 0%]
			...
		[%/if%]
	[%/if%]
[%/param%]

Node dependencies

Skeletal's dependencies have been updated, mostly to accommodate for Bootstrap 4 using SASS, but it also includes 'ntheme' and 'simple-github-release'.

simple-github-release

We have changed our releasing type from semver to a much simpler version based on chronological versioning. This was because semver didn't make sense with Skeletal, while chronological versioning makes clear the next version number, build date, and keeps it simple. The release process uses a module Brandon developed which is open-source and can be viewed here: https://github.com/brandonsheppard/simple-github-release

ntheme

ntheme lets you generate and compile a Neto theme. This is a direct dependency for Skeletal because it is needed for compiling to the theme store. When child themes are created, it has all the dependencies needed to compile correctly for theme store. This will replace the 'bin/compile' command with 'npm run compile'. This was done so the compile script wasn't a file in Skeletal (like it currently is) but a dependency, leveraging the ability to update the script for new features or fix bugs more easily. More on how this is used for child themes in a moment 

Child themes

Child themes can depend off Skeletal, like they would for any node module:

 "devDependencies": {
    "Skeletal": "git://github.com/NetoECommerce/Skeletal.git"
  },	

This is extremely useful as _neto.scss contains all styles that are needed for a theme to work correctly, be that npopup, search results, cart dropdown, payment icons etc. Essentially, components that are the same across themes.

Instead of a theme including these styles in their own scss partial, theme developers could update their app.css to the following:

 // Bootstrap and overides
@import "./_bootstrap";
// Neto standard styles
@import "../../../node_modules/Skeletal/src/scss/_neto";
// Custom styles
@import "./_custom";

If there are any updates to Neto base styles, the repository can update its dependency, and on gulp task 'gulp sass', it will have the new Neto styles. If a theme styles need to be adjusted, they can be overwritten as standard CSS in the _custom.scss partial. This makes it much easy to maintain themes and shows what actual styles are different to the child theme.

When generating a new theme, it will use the new themes _neto.scss by default. This is to give the option for theme developers to customise if desired. This would require the developer to do more maintenance/update work but we want the developer to decide if they want to directly edit this CSS or to override in their _custom.scss partial. 

Theme-starter-kit

The theme starter kit has been redeveloped as a node module: https://www.npmjs.com/package/ntheme

Generating a theme

Simply run the following command:

ntheme generate themeName

Option

-b 'branch'

Instead of generating your theme off the Master branch of Skeletal, you can target a branch or release tag...

Read more

18.5.1

30 May 07:35
c42fcbe

Choose a tag to compare

This release had a focus on updating Skeletal for GDPR. All theme developers will need to take these changes into account when developing and maintaining their themes. You can view the specific PR's here:

This was just a small release in order to have a clear cut off for the next release. Get excited, its going to be a big one :)

All Changes

18.5.0

30 Apr 23:28
e4ed8fd

Choose a tag to compare

Yo, goat here! More amazing work has gone into Skeletal this past month, with a lot of great bug fixes and some template enhancements. We have also been working hard on preparations for the next big major release of Skeletal! More information will be coming soon, but if you would like a hint, check out the following PR ;)

🤙

All Changes

Read more