Sass support upgraded for Spiffy Stores Themes

This is a quick “heads-up” for all our Spiffy Stores web designers and developers out there who are customizing and building fantastic themes for their customers.

As you already know, Spiffy Stores has always supported the use of Sass (Syntactically Awesome Style Sheets) to ease the development of stylesheets in your themes. It’s a great productivity tool and makes the whole job of building and managing your CSS styles a whole lot easier. In fact, at Spiffy Stores, we’ve been using Sass almost from day one, well over ten years ago.

Since it’s such a great productivity tool, we were a bit concerned to learn that our current implementation was being deprecated in favour of a newly developed version called Dart Sass, and that this version would be the basis of all future development going forward.

We’re happy to announce that we’ve just built a bridge to the new Dart Sass that can be used by all existing themes and any new themes without any change, ensuring our long-term commitment to the Sass language and environment.

We’re aware that another ecommerce platform has decided that supporting Sass is too difficult, and has chosen to withdraw support for Sass from their theme platform, requiring instead that all stylesheets be coded using native CSS. Booooo! As web developers ourselves, we’d be pretty unhappy about something like this, so if you know anyone who has been affected by this change, then please let them know that Spiffy Stores is fully behind Sass and it’s continued importance in the web development stack.

If you have any questions about the use of Sass, or developing themes for Spiffy Stores, please let us know at support@spiffystores.com.au.

Adding jQuery to Webpacker 6 under Rails 6

From time to time we post some notes about technical issues that we’ve encountered during our development work on Spiffy Stores. There are a lot of moving parts to manage, and sometimes we come across some tips or techniques that can help others to build their projects.

In this case, we’ve been looking at how to configure Webpacker 6 (currently Beta 7) under Rails 6.1, which acts as a wrapper to the latest version of Webpack 5. Now, as anyone who’s used Webpack since it was introduced as an option in Rails 5 will attest to, it’s not an easy package to get working properly.

The new versions of Webpacker and Webpack bring around some changes to the way things are configured, and unfortunately, some of the documentation is lacking, or indeed, wrong.

For our environment, we need jQuery as a starter. The trick with Webpack is to get the code loaded and assigned to the global variables, $ and jQuery. The trick with jQuery is to realize that the node modules version provides both a distributed module and also the source code which can be used to build the module with Webpack. If you just

require("jquery")

then you’ll get the pre-built module. It turns out that it’s better to build it from source instead.

If you’ve followed the migration documentation, you should have a custom.js under your webpack directory.

module.exports = {
   resolve: {
     alias: {
       jquery: 'jquery/src/jquery'
     }
   }
 }

Requiring jquery now, pulls in the source files instead, and this will build jQuery with the appropriate global references.

Another important “gotcha” with Webpacker 6 is that when you include the javascript_pack_tag in your layout, you MUST include it only once.

<%= javascript_pack_tag('application', 'common', 'customer', data: { turbolinks_track: :reload }) %>

Webpack builds a number of different file chunks for each entry point, and this means that the javascript_pack_tag will generate a number of <script> tags, one for each chunk. If you have multiple entry point files, then you must include them all on a single javascript_pack_tag and not create a separate tag for each entry point.

Unfortunately, coming from a Sprockets background, most Rails programmers will be used to creating multiple javascript_include_tags, but this is not the case for Webpacker.

If you happen to use multiple javascript_pack_tags, you’ll likely find that scripts may be loaded multiple times. In many cases, this may not be obvious, but if you see errors from @rails/ujs, then this is probably because it is being loaded multiple times by Webpack.

Australian Data Retention Laws – Are you protected?

email-privacyAustralia’s new data retention laws start today, and this means that ISPs are obliged to collect and keep records about your digital activities for 2 years, and to make those records available to various government agencies on demand without the need for any warrants or legal oversight.

The good news is that the email services provided by Spiffy Stores and Domain Hosting Shop are not subject to these data retention laws. In basic terms, the law only applies to carriage service providers, which means anyone who provides the physical connection for your home or office to the Internet or telephone system.

We will keep your Spiffy Stores email safe and secure, and you can send and receive email secure in the knowledge that the messages will not be archived and retained in any way, and will not be available to any government agency.

Making Fuzzy Searching Even Better

Search-Magnifying-Glass

Here’s a little ecommerce trick that everyone seems to forget about.

Make sure that your customers can find the product they want, when they do a search using your store’s built-in search function!

At Spiffy Stores we try to strive for excellence in the way we design and build our software. This sometimes means going back to look at existing functions to see if we can improve them in some way.

This is part of our philosophy and it’s a way of setting us apart from the general way of the Internet where lots of colour and movement appear to be more important than providing something with real substance.

Continue reading

Getting to know your customers

getting-to-Know-Your-CustomersWe love adding new stuff to Spiffy Stores, and we’re pleased to announce that we’ve just finished putting the final polish on a brand new feature.

When you manage your online store, there’s obviously lots to think about in terms of products, inventory, prices and shipping. But until now, there’s been an important part missing from this equation – your customers!

As ever, we’re anxious to make sure we’re providing you with the very best tools and support to help you run your ecommerce venture successfully and to make lots of money, so we’ve done something about this. From today, you’ll see a new tab in your Spiffy Stores Toolbox, right next to your ‘orders’, called ‘customers’.

Click on this and you’ll be taken to an overview list of all your customers and you’ll see options to sort and filter your customer list, so that you can easily see who’s ordered what, how much they’ve spent and where they are located. Add to this our fantastic new custom search filters that let you create and save your own searches, and you’ll soon see these as an indispensable part of your marketing armoury.

There’s much more detail about this new feature in our Knowledge Base at https://www.spiffystores.com.au/kb/Information_about_your_customers  so we recommend you have a quick look at the documentation to see how this can help you better understand your customers.

But wait, there’s more! This is just phase 1 in our rollout of our new customer-related features. Be on the lookout for some exciting new additions to your Spiffy Store in the coming months.

Problems rendering a layout in Rails3

From time to time we like to share technical tips when we’ve uncovered a solution to a problem that might help other Rails developers.

Spiffy Stores is written using the Ruby on Rails framework, and we encountered a glitch with the Rails3 layouts. Basically we couldn’t get the layout to display, even though all the syntax was correct. Others have experienced this sort of problem. See http://stackoverflow.com/questions/6605716/cant-render-layout-in-rails-3 for an example.

After lots of digging around and tracing, the answer became clear. The AbstractController::Layouts module has an initialize method, but this method was not being called when a new controller was created.

If you experience this problem, then check any modules that you have included in your controller, as one of them has an initialize method that doesn’t call ‘super’.

If an included module needs an initialize method, then it needs to follow this pattern:

def initialize(*)
  # Module initialization code here
  super
end

If the call to ‘super’ isn’t included, then the initialization chain stops, and your controller won’t be properly initialized. You can find out all the included modules for a controller by executing this code from the console:

MyController.ancestors

Easy theme editing using WebDAV

We’ve always believed in pushing the technical envelope to provide advanced technical solutions to make life easier for our store owners.  This is way more important to us than the hype and gloss that you may find in the rest of the industry.

Over the past year, we’ve been talking to loads of web designers who use Spiffy Stores to create online stores for their customers. Although they love creating new e-commerce shops using our software, the resounding feedback we’ve been getting is that whilst the current Theme Editor in the Toolbox is great for small changes, it get’s a bit more difficult when designing an entire theme for a store.

For larger theme updates it’s really necessary to download the theme files to your computer, edit them and then upload the new files to the server. Using the Theme Editor to do this is a bit cumbersome, and makes the design process more difficult than it should be.

We’ve listened to these concerns, and have spent considerable time and effort working on a solution… so today we’re very proud to announce a major new capability which allows all your theme files and assets to be edited directly from your computer using WebDAV enabled editors such as Adobe’s Dreamweaver, and Panic’s Coda.  If you’re on a Mac, you’re even luckier, as WebDAV is built right into OSX, and can be used in conjunction with TextMate and Taco.

To use this new feature in Windows, all you need is a WebDAV enabled editor or a utility such as NetDrive which allows WebDAV files to be mounted on your computer as a local folder. This means that you can use your favourite editor to edit your store’s theme files directly from your computer.

If you’re using a WebDAV enabled editor such as Dreamweaver, you also have access to some advanced features such a file checkout and locking so that you can work in a team without having to worry about whether someone else overwrites your changes.

If you’re a web designer and your current e-commerce software doesn’t support WebDAV, then you should seriously consider Spiffy Stores for this feature alone, as you’ll find your theme development time slashed significantly.

For more info about using WebDAV to edit your store, head over to the WebDAV section of our knowledge base.

Related articles

Adding URL Redirects makes migrating your online store even easier

A URL redirect can help your customers find your products on your new Spiffy Store site when you migrate from another software platform and your old links are still cached by the search engines. This makes the whole migration process easy and painless as you don’t run the risk of losing sales because your customers can’t find the right products.

In simple terms, a URL redirect lets you map from one web page address to another, and this is the kind of feature that you’ll find supported by most modern ecommerce and online shop builder software.

However, here at Spiffy Stores we like to provide our store owners with the best possible tools for running their online stores, so we decided to go just that little bit further to help you solve your problems without actually creating more work for you.

If you look at the URL Redirection solutions offered by other hosted e-commerce providers, you’ll quickly see that in most cases they don’t offer any form of pattern matching or wildcard support for the redirections. This means that for a large store, you may be forced to enter many thousands of redirection mappings to support the full range of possibilities. Even worse, some don’t even offer a bulk import/export feature, so you have to type in all your redirects by hand.
Continue reading

Syntax highlighting – now in our Liquid template editor

Until now the Theme Editor has displayed your theme’s Liquid template files in a very boring, black text field.

We think this makes it harder to edit and change your theme files than it needs to be, so we’ve added a bit of colour to the whole process.

Now, when you go to edit a theme’s Liquid file, you’ll see the text highlighted and colour-coded according to the syntax of the language. You’ll see HTML, CSS and Javascript as well as all the Liquid tags highlighted using different colours so that it makes it a lot easier to navigate your way around the file. In addition, strings, numbers and various other bits of punctuation are highlighted as well.

To round off this update, we’ve added line numbers on the left to make it easier to locate and refer to the code.

In technical terms, this is known as a syntax-directed editor, but we just call it easy to use.

Introducing SASS – Syntactically Awesome Spiffy Stores

Actually, it’s really “Syntactically Awesome Stylesheets”.

For all the theme designers out there, we’ve just made your life a little bit easier. We all know that sometimes CSS stylesheets can get complicated, so anything that can help you manage that complexity is a welcome bonus.

As you may already know, when you enable the Theme Editor by creating a ‘theme.settings‘ file, you can parse your CSS files by making sure they have a suffix of ‘.css.liquid‘.

Now, as part of the CSS processing that gets initiated to deal with the Liquid tags, we’ve added a pass through the SCSS processor, which is part of the SASS CSS extensions. You can read more about these CSS extensions at http://sass-lang.com

By using the CSS extensions, you can simplify your stylesheets by using variables, conditional logic, mixins and templates, nested attributes and a whole lot more. Even better, at the end of the processing you get a compressed CSS file so you can ensure that your site loads as fast as possible. Even if you don’t use any of the CSS extensions, you still get a compressed stylesheet, so that’s got to be something to smile about!

You can read more about the Spiffy Stores Theme Customizations in our Knowledge Base.