Design after familiarising yourself with a platform

Take the time to get to know the platform, web technologies, and end output you’re designing for as each platform has design and functionality related limitations. If you don’t do this first, there’s always the danger that you’re going to design something that is completely wrong for the platform or cannot be coded within a reasonable amount of time. So make sure it’s possible first!

How do I do this? The easiest way to do this is to use the platform and see how it works. Being aware of what scenarios and platforms you’re designing for will help you figure out how big your sandbox is. It also means setting the right expectations for what’s possible with tech. This way, you don’t over promise to your client or product owner only to later say that a key feature you designed can’t be coded.

For example, within WordPress, get to know:

• The content pop workflow in Gutenberg and see what the output is on the frontend
• Widgets
• Custom post types
• Popular plugins like Gravity Forms, FacetWP and FooGallery

For web tech, get familiar with knowing:

• Solid responsive design knowledge from small to 4K screens
• Bootstrap components
• How social sharing works
• How designs will affect website performance

This is by no means an exhaustive list, but it should give you a good idea of what you need to know. Still unsure? Talk to a frontend (FED) and backend (BED) developer for some guidance.

Keep in mind coding effort

It’s very possible that a little bit of design will result in a lot of coding. A typical scenario I’ve encountered is when a designer has designed a seemingly simple feature in a minute, however, it ends up taking much longer to code during FED and BED. The reason for this significantly longer development time is that making designs functional may require more complex backend logic. The danger of not considering coding time and effort is that you’re designing development heavy features that are time-consuming to code which can result in your product development running behind schedule.

Say you’re designing a product sash for products on an ecommerce website. The designer has already designed several product sashes like Sold Out, Popular and On Sale that have backend logic (rules that dictates behaviour) attached so that these sashes will only appear in certain cases. For example, the backend logic for the Sold Out sash means it only appears when the product inventory is 0. Now let’s say that we want to add a new sash for “Popular”. Design and FED-wise, this would probably be pretty fast because there’s already an existing sash template for the designer to modify and existing sashes implemented from which to create a new HTML element in FED. However, the effort to backend code the Popular sash is much higher.

Track time with Toro Timer

Toro helps remote teams stay productive no matter where they are.

Get early access

In order for the BED to code the Popular sash’s backend logic, they first have to know the rules for what constitutes as “Popular”. Different versions will also take different amounts of time. For instance, one possibility is where the product owner wants the Popular sash to show if more than 20 units have been sold within the last two weeks. Alternatively, they may want to be able to manually control what is labelled as “Popular” in which case the admin can tag the product as “Popular”. So depending on these two types of BED logic, there would be a big difference in the time needed to code.

Now, developers generally do not shy away from coding (or at least we hope that they don’t!), but you have to consider how much work you’re creating for them down the line. This is especially important when you have multiple designs and products to juggle and client or colleague expectations to manage. In this light, it might be better for you to give up on this feature (for now) or coming up with a pared down version for the sake of staying on schedule and not overworking your developer.

What should I do? Think about what kind of logic would be needed to execute your design first then consult your client, product owner and friendly neighbourhood developer before proceeding with design. You may find out that what you want to do is not realistic or of low value to the end user. Alternatively, you may find that it’s easy to design, code and has great value! Either way, you’re better informed about the effect of your designs.

Design reusable UI components

It’s important to remember that designs need to be practical, not only in terms of how it will be initially coded but how it will be managed in the long term. In tech terms, this means thinking about designing UI components so they can be reused across the website or app. This adds to the longevity of a design because it can be easily maintained from a backend standpoint while still looking good on the frontend. In order to achieve this you may have to reach a compromise with your design’s aesthetic elements in favour of ease of maintenance.

Let’s explore the consequences of this in an example. You may have chosen to design a website which has varied irregular shapes (think jellybeans and splats). Though this may make for a more visually interesting design, it might become hellish for developers as variations might lead to the writing of bad or unmaintainable code. This is because every unique shape has different margin and padding requirements and the more variations there are, the more low-level coding is required to fine tune them. If the developer is inexperienced, there’s a possibility that the way it’s been coded may not be so readable, elegant or maintainable. This means that if another developer, or even the same one, comes in later, they will have trouble understanding the code and will therefore have more trouble fixing it. More design and coding variations also means that the developer cannot use a blanket fix on them and must spend more time coding a fix for each one. Another problem is that with more code comes more opportunities for older code to break. The end result? Massive headaches.

The last point is that people usually do not end up using all the bells and whistles you designed. Though the website may look fancy after you initially deploy it, your client or whoever ends up doing the content updates and maintenance may not choose to follow suit, or, may even get confused if there are too many options. They may very well end up sticking to one or two elements that they’re comfortable with for content population and forego the other options. All the other stuff you designed and coded will then be wasted effort.

What should I do? Although it is possible to use as many shapes as you like, think about how they’re actually going to be coded and maintained later. One strategy is to design UI components in a way that makes them reusable. Set a fixed number of variations e.g. 4 and stick to those only. The definition of maintainable code is that it’s code that is easy to modify, extend and debug. By designing a custom shape that you can then flip horizontally and vertically to make “new” shapes, you will get the visual variety that you need while still making it easier for the developers to write fixes if ever they break. It’ll also hopefully be simpler for whoever maintains the website in the end.

There you have it folks! Though it’s easy to create aesthetically pleasing designs and features, you have to consider the direct effect design will have on FED and BED and beyond. Remember, design isn’t just about how it looks, it’s also about how it works and what the experience is like for others that you’re working with. Talk to your developers often to discover limitations and peek into what it’ll be like to maintain the design in the future so that you design with development in mind.

The post Designing with Development in Mind appeared first on Stampede: the strategic design & technology company.

Gutenberg by default comes with a handful of block types that should cover standard web content updating needs. However, it also has a nifty Block API for adding custom block types if you need them to display specially designed components for our website. In this tutorial, you are going to add a custom Gutenberg block type so that the output is a notice box with a few predefined styles that accepts arbitrary text input from the user.

This is what you’re going for.

And here is how it looks from the admin’s side.

Alright, let’s get to coding!

Step 1: Create a plugin for the new block type

You will be creating a custom block type as a WordPress plugin. This will allow you to decouple it from any themes you are using and in case anything goes wrong, you can simply deactivate it.

So create a new folder in the WP plugins folder and let’s call it gutenberg-notice-block. In this new folder, create a plugin.php file with the following code:

/**
* Plugin Name: Gutenberg Notice Block
* Author: Shaiful
* Description: A notice box with a few predefined styles that accepts arbitrary text input.
* Version: 1.0
*/

// Load assets for wp-admin when editor is active
function shaiful_gutenberg_notice_block_admin() {
   wp_enqueue_script(
      'gutenberg-notice-block-editor',
      plugins_url( 'block.js', __FILE__ ),
      array( 'wp-blocks', 'wp-element' )
   );

   wp_enqueue_style(
      'gutenberg-notice-block-editor',
      plugins_url( 'block.css', __FILE__ ),
      array()
   );
}

add_action( 'enqueue_block_editor_assets', 'shaiful_gutenberg_notice_block_admin' );

// Load assets for frontend
function shaiful_gutenberg_notice_block_frontend() {

   wp_enqueue_style(
      'gutenberg-notice-block-editor',
      plugins_url( 'block.css', __FILE__ ),
      array()
   );
}
add_action( 'wp_enqueue_scripts', 'shaiful_gutenberg_notice_block_frontend' );

Basically what this file does is initialise the plugin by loading the necessary JS and CSS files at the right place and at the right time. The code above is looking for block.js and block.css, which you will create momentarily.

At this point, you should be able to see the new plugin listed in your WP Plugins admin page. Go ahead and activate it.

Moving forward, all of your coding will be done in JavaScript with some ReactJS flavour to interact with the Gutenberg Block API.

Step 2: Register the new block type

Create a file called block.js in your custom plugin folder. This file will hold the entire logic of the custom block type for the admin-side and frontend of your website.

Start by adding the following bare-bones code.

/* block.js */
var el = wp.element.createElement;

wp.blocks.registerBlockType('shaiful-gutenberg/notice-block', {

   title: 'Notice', // Block name visible to user

   icon: 'lightbulb', // Toolbar icon can be either using WP Dashicons or custom SVG

   category: 'common', // Under which category the block would appear

   attributes: { // The data this block will be storing

      type: { type: 'string', default: 'default' }, // Notice box type for loading the appropriate CSS class. Default class is 'default'.

      title: { type: 'string' }, // Notice box title in h4 tag

      content: { type: 'array', source: 'children', selector: 'p' } /// Notice box content in p tag

   },

   edit: function(props) {
      // How our block renders in the editor in edit mode
      return null;
   },

   save: function(props) {
      // How our block renders on the frontend
      return null;
   }
});

The code above registers your new block type with the name “Notice”, using a light-bulb Dashicon and putting it under the Common Blocks panel in the Gutenberg blocks browser. You should be able to see the new block in your editor at this point.

You also specify the attributes (and their data type) that your new block will be storing which are the box type, the box title and the box content.

Lastly, there are two functions called edit() and save(). The edit() function is responsible for rendering your block in the editor while the save() function outputs your block HTML on our website’s frontend.

Let’s explore them now.

Step 3: The edit() function

The edit() function controls how the block will appear in the Gutenberg editor for the user to interact with.

For your custom Notice block type, the goal is to accomplish two things:

1. The user can select the notice box type as well as enter the box title and content.
2. Selecting different notice box types will show a simple live preview of what the box is going to look like on the frontend.

Add the following code into the edit() function.

/* block.js */
edit: function(props) {
   // How our block renders in the editor in edit mode

   function updateTitle( event ) {
      props.setAttributes( { title: event.target.value } );
   }

   function updateContent( newdata ) {
      props.setAttributes( { content: newdata } );
   }

   function updateType( event ) {
      props.setAttributes( { type: event.target.value } );
   }

   return el( 'div',
      {
         className: 'notice-box notice-' + props.attributes.type
      },
      el(
         'select',
         {
            onChange: updateType,
            value: props.attributes.type,
         },
         el("option", {value: "default" }, "Default"),
         el("option", {value: "success" }, "Success"),
         el("option", {value: "danger" }, "Danger")
      ),
      el(
         'input',
         {
            type: 'text',
            placeholder: 'Enter title here...',
            value: props.attributes.title,
            onChange: updateTitle,
            style: { width: '100%' }
         }
      ),
      el(
         wp.editor.RichText,
         {
            tagName: 'p',
            onChange: updateContent,
            value: props.attributes.content,
            placeholder: 'Enter description here...'
         }
      )
   ); // End return

},  // End edit()

Line 16-49 is the main code you will use to display the user interface in a way that allows you to update the content in your block type. The code is written in ReactJS specifically the React.createElement() function is used to create new DOM elements. Do not worry if ReactJS is unfamiliar to you. You can make use of this specific tool to compile JSX template code to React.createElement() functions.

Here is an example.

It’s a good idea to create your block.css file right now so that you can test the live preview functionality in the editor. Make sure the CSS file is saved in your plugin folder.

/* block.css */
div.notice-box {
   border: 1px LightSkyBlue solid;
   border-left-width: 5px;
   padding: 10px 15px;
   margin: 30px;
}

div.notice-box.notice-success {
  border-color: MediumSpringGreen ;
}

div.notice-box.notice-danger{
   border-color: LightCoral ;
}

div.notice-box h4 {
   font-size: 18px;
   margin:0 0 10px 0;
}
div.notice-box p {
   font-size: 16px;
   line-height: 24px;
   margin:0;
}

At this point, you should be able to add your Notice block type into the editor and see three different fields for configuring the notice box. The dropdown for selecting the notice box type should also gives you a live preview between the default (blue), success (green) and danger (red) box types.

Step 4: The save() function

The save() function for your Notice block type is pretty straightforward. You just have to construct the correct HTML structure and populate the title and content into the notice box <div>. Once again the DOM elements creation code has to be written in ReactJS.

Here is the code:

/* block.js */
save: function(props) {
   // How our block renders on the frontend

   return el( 'div',
      {
         className: 'notice-box notice-' + props.attributes.type
      },
      el(
         'h4',
         null,
         props.attributes.title
      ),
      el( wp.editor.RichText.Content, {
         tagName: 'p',
         value: props.attributes.content
      })

   ); // End return

} // End save()

That’s it!

Your Notice block type should now work on both the admin and website’s frontend.

Here is the link to download the completed plugin.

Something to keep in mind

Looking at the save() function, you’d imagine that updating the HTML output in there would cause a global update for all instances of the Notice box that you have populated on your website. It’s natural to expect this (it is, at least from our experience with working with WP shortcodes). Unfortunately, this isn’t what happens.

Making any changes to the block HTML output would trigger a conflict with all existing instances of the blocks that have been populated. What’s worse is that the only way to fix this is by repopulating the blocks one by one. This is the caveat of static block types.

To work around this, make use of the Dynamic Blocks feature which hands over the save() function from JS to PHP to generate the block HTML output on the fly.

Final thoughts

The ability to create custom block types is very cool and opens a lot of possibilities for content customisation. After trying it out myself, I would say the basic concept is fairly easy to follow. The real challenge, however, is presenting the custom block in the best possible way to give content authors the best editing experience, especially for blocks with complex functionalities. I find that the official developer documentation for various attributes configurations or working with RichText field for example, are still lacking. It will improve surely but the best reference materials we have at this moment are online articles and the existing blocks that came out of the box with WP5.

On another note, I am personally looking forward to the Advanced Custom Fields (ACF) plugin taking on the custom block types with their own ACF Blocks for Gutenberg. This new addition should lower the barrier for WP developers to take advantage of Gutenberg block capabilities in a more intuitive way.

The post Creating a Custom Block Type for WordPress Gutenberg Editor appeared first on Stampede: the strategic design & technology company.

The standard way of embedding Google Forms is to use an iframe, which is sufficient. The more preferable way of course is by manually extracting the form’s HTML fields and re-coding it according to your theme’s HTML structure. Not only will it match your theme nicely, but you can also insert some custom JS validation on the fields as needed. Another plus is that Google Forms captures form submissions in a convenient spreadsheet format.

The Steps

The first step is to create two web pages in BigCommerce that will become our form page and success page when users submit the form. The form page is a custom template file that will contain our form HTML codes while the success page is simply a generic page. Take note of the success page URL.

Next, build our form in Google Forms with the most minimalist styling. Once tested and published, view its source to get the form codes and re-code the form into our custom template file — in the HTML structure we like while preserving the field names and the <form> action (and method). Next is some code alterations.

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"style="display:none;" onload="if(submitted) {window.location='SUCCESS_PAGE_URL';}"></iframe>


<form action="https://docs.google.com/forms/d/1CsZt9s0vVegFb3-Qa3162Ri7A91ggx6S9B6qvBZcyJY/formResponse" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
...your form fields...
</form>

Add line 1 and 2 right before our form tag and replace the correct success page URL in line 2.

Next, add target="hidden_iframe" onsubmit="submitted=true;" attributes to the <form> tag so that the form submits into the hidden <iframe> we created in line 2.

Finally, give it a test run. It is advisable to validate the form fields with JS to ensure the form is indeed being submitted successfully.

Although this guide is written for BigCommerce, the implementation steps are generic enough to be used on any platforms where you have HTML and JS editing access. Hope it helps.

Need help making your BigCommerce store stands out from the competition? Get in touch.

The post Embedding Forms in Bigcommerce Using Google Forms appeared first on Stampede: the strategic design & technology company.

A staple feature of e-commerce websites.

In Shopify, this feature may already comes standard with most of the themes or in an updated version of the current theme you are using, which is great. However in some cases you could be using a heavily customized theme and updating is not going to be a breeze, well, all you need is just a couple of lines of codes and you got yourself an upgraded product slideshow.

The Code

Paste the code below into the bottom of either template file product.liquid or snippet file product-form.liquid.

{% if product.variants.size > 1 %}
<script>
(function($) {
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    variantImage_count = 0;
  	//produce mapping between variant image and options
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
         variantImage_count++;
   	   }
    {% endfor %}

    $(function() {

      if (variantImage_count > 0) {
        $('select.single-option-selector').change(function() {
          var selected_color = $(this).val();
          thumbnails = $('.flex-control-thumbs img').each(function(index, el) {
            var image = $(el).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
            if (typeof variantImages[image] !== 'undefined') {
              if(selected_color == variantImages[image]['option-0']) {
                //only check against the first option ['option-0'], which is Color (in my case)
              	$('.flexslider').flexslider(index);
              }
            }
		      });
        });
      }

    });
})(jQuery);
</script>
{% endif %}

The code is a combination of Liquid template tags and JS. It is based on the customization provided by Shopify for enabling customers to select a product variant by clicking its image and modified to work the other way around.

Line 10-30 produces the mapping between variants image and options in a JSON object that is used for comparison against the product thumbnails in the select box event handler function as seen in line 35-46. Line 42 is the actual code that tells the slideshow to jump to a specific slide. As you might have guessed, the code is unique to Flexslider slideshow plugin. You need to determine what slideshow plugin you are using and then figure out how to jump to a specific slide using its API.

I hope you find this guide useful. If you have questions/feedback, let me know in the comments.

Have a nice day!

The post Showing Selected Product Variant Image in Shopify Product Slideshow appeared first on Stampede: the strategic design & technology company.

Since a couple of years ago, I have pretty much refrained from coding CPTs from scratch, unless for extremely simple post types. I have sworn my allegiance to two well-known CPT solution plugins namely Pods and Types. In this post, I’ll try my best to explain how they fare against each other, specifically on the way they handle CPTs (and custom taxonomies).  What I don’t intend to cover are extended features like user roles or data migration. Finally, there’s a bonus section about enhancing their functionalities.

WordPress Pods plugin

The CPT management screens in Pods are really well-done and user friendly. If you are new to the world of CPTs, Pods will present you with a gentle learning curve to get you up and running. When you create a new CPT or custom taxonomy, you immediately have access to the custom fields management panel within the same CPT or custom taxonomy edit page. This makes the whole process of managing the custom fields a breeze and feels natural.

These are the main strengths of Pods:

1. Nice and intuitive user interface.
2. Large selection of custom field types.
3. You can add custom fields to custom taxonomies too.
4. Pods Template is an optional component you can enable in Pods to create templates for outputting Pods CPTs using magic tags and shortcodes all within WordPress without messing around with theme files.
5. You can create a custom Settings page for miscellaneous usage.

The limitation of Pods based on my experience are:

1. While you can create true parent-child (or one-to-many) relationships between Pods CPTs, the level of integration doesn’t appear to be truly seamless. For instance, in a property rental website presumably you had setup a one-to-many relationship between two CPTs; Properties and Rentals. However when editing a Property record you cannot add new Rental records in the same screen.
2. Each CPT can only have one meta box named More Fields containing all the custom fields.
3. You cannot make basic fields like plain text repeatable which could be handy in certain scenarios. Fortunately multiple image uploads is still possible.

WordPress Types plugin

The Types plugin may not look as straightforward to use at first glance primarily because the CPT and custom fields are managed in different admin screens but once you get your head around this it actually opens up a new possibility of the things you can do.

These are the main strengths of Types:

1. You can create true parent-child (or one-to-many) relationships between any CPTs or WP’s native objects with very seamless integration. For instance, in a property rental website presumably you had setup a one-to-many relationship between two CPTs; Properties and Rentals. When editing a Property record you can quick-add new Rental records in the same screen. Additionally, you can also specify which fields should appear in the quick add form.
2. You can have as many meta boxes with custom headings and combination of custom fields in each CPT. Furthermore, the meta boxes support custom CSS so you can arrange certain fields in side-by-side fashion instead of one per row for instance. This creates a more intuitive editing experience for the end users.
3. All custom fields can be made repeatable.
4. Non-repeatable custom fields can be fine-tuned with conditional logic to control when they should appear based on the values of other fields.
5. Meta boxes and custom fields can be added to user profiles.
6. The equivalence of Pods Templates for Types is called Views. It is not free but certainly a lot more powerful.

The limitation of Types based on my experience are:

1. User interface can be a bit tricky to work with.
2. No custom field of type Relationship.
3. No way of adding custom fields to custom taxonomies.

Bonus: Advanced Custom Fields plugin

In cases where I was using Types and needed to use the Relationship-type custom field, I usually resorted to the Advanced Custom Fields plugin. It may sound like an overkill to use it solely for one purpose but the field provided by Advanced Custom Fields simply has the perfect UI for a relationship-type field. It is also far superior than what Pods provided by default.

The perfect UI for a relationship-type field.

As a matter fact, Advanced Custom Fields is by far the best custom fields plugin for WordPress. To unlock its full potential you need to purchase the Pro version though.

Bonus: Codepress Admin Columns plugin

When you are working with CPTs, the Codepress Admin Columns plugin is quite simply the icing of the cake for all your hard work. The plugin allows you to customize table columns in the admin landing page of CPTs or any WP’s native objects. It fulfills a basic need that greatly enhances user experience when working with CPTs in the admin area.

Custom table columns FTW!

Though this plugin has a Pro version, the free one is awesome enough in most cases.

Conclusion

Pods and Types are my two favorite custom post types solutions for WordPress. How I decide between them depends ultimately on individual project requirements but so far I tend to choose Types for complex projects that require post relationship. With a couple of amazing supporting plugins, you’ll be having a blast working with either anyway.

Have a nice day!

Update (June 2015)

For an in-depth look at the features and technical differences between popular WordPress CPT plugins, view this awesome comparison matrix spreadsheet by Scott Kingsley Clark and Matt Gibbs.

The post WordPress CPT Solutions Comparison: Pods vs Types appeared first on Stampede: the strategic design & technology company.

I took a leap of faith — and decided Stampede it is.

Shaiful and Zana had the chance to talk to high-spirited Danish Mumtaz, Motopedia’s main guy. We gushed about cars, devised new website plans in the works and talked about how Danish chanced upon Stampede, before the rest is history.

The post A Leap of Faith: An Interview with Danish Mumtaz from Motopedia appeared first on Stampede: the strategic design & technology company.

Here are some highlights from the eyes of Stampede’s two biggest football fans, Iwan and Shaiful.

Iwan

Most High Tech World Cup

Referees will have GoalControl watches in Brazil. Photograph: Wolfgang Rattay/Reuters

This is the first World Cup featuring goalline technology that helps deciding the goal. FIFA approved 4 kind of goalline technology to be use in World Cup 2014. They involve camera and chips embedded in the ball itself which uses the magnetic field sensor for detecting goals. While using camera is just as simple as watching replay, embedded chips come quite handy as well. FIFA also equipped referees with smartwatches that not only tell time, but will buzz when the ball crosses the line.

Another high tech gadgets is the ball itself. “Brazuca” is designed from scratch, thanks to 2010’s “Jabulani” failure.

Luis Suarez’s Choppers Strike Again

Looks like he didn’t learn from the past because Luiz Suarez bit again. Doing the offence for the third time this time, Suarez decided to bite on Italian defender, Giorgio Chiellini’s shoulder. While no actions were taken on the field, he was found guilty by FIFA and currently serving a ban for nine Uruguay matches and from all football activities for four months. He also apologised for the bite. Despite this biting saga Barcelona still signed him from Liverpool with a fee believed to be staggering 80 million euros. That’s 14 million less than Real Madrid paid for Christiano Ronaldo’s signature on June 2009. Crazy!

Neymar Jr’s injury

There is no doubt Neymar was Brazil’s best player throughout the World Cup 2014. Unfortunately, during the game where Brazil played against Colombia on quarter final, Colombian defender Juan Zuniga kneed Neymar’s back within the last 2 minutes. Nobody expected the worst. He was seen sobbing soon after, complaining to fellow teammate and defender Marcelo that he could not feel his leg. Nursing a broken vertebra, that was the end of his journey for World Cup 2014.

New Scoring Record

There are several records broken during World Cup 2014. On top of the order is World Cup’s all-time leading scorer. Owned by Brazil’s Ronaldo previously with 15 goals, the Germany veteran, 36 years old Miroslav Klose surpassed him by scoring his 16th goal when Germany defeated Brazil by 7-1 on the semifinal. His own teammate, 24 years old Thomas Müller also make the top ten by 10 goals.

Both have one more game to play on this World Cup – the grand finale – the one we all look forward to.

Shaiful

Spain’s Early Exit

They say the bigger you are, the harder you fall. The demise of defending champion and two consecutive European cup holder Spain marked the end of an era for Spanish football. No doubt they still have the same ‘dream team’ lineup on paper but it’s just not working on the pitch anymore this time. The rise and fall of a golden era is not uncommon in the football world with France as another good example. Anyhow, credit where it’s due, they held it for 5 years and boy, were they invincible!

Brazil & Germany Making It To The Final Leg

This is a trend that we don’t expect to end anytime soon. For every generation of players, these two teams would consistently make it to the playoffs. The squads ‘star power’ may not be as intimidating as Spain or England but they certainly have proven over and over again that they can score goals. The Germans fielded mostly similar faces from the last world cup except now they have matured and really mean business. And despite Brazil’s scorching unearthly defeat by Germany in the semi, we know that it will always be the greatest football nation in the world.

(Update: Brazil, the host team was convincingly beaten by the Dutch in the third-place playoff yesterday.)

It’s GER vs ARG tonight. Who are you rooting for?

The post World Cup 2014: The Talk appeared first on Stampede: the strategic design & technology company.

The requirement: Cascading dropdown list

This being on Shopify, the only way to code this custom feature is by getting creative with Javascript. It was then when I discovered about TaffyDB as the medium to store the 100+ odd rows of vehicle data. I played around with some hard-coded sample data using TaffyDB (and jQuery) and managed to get the cascading dropdown to work properly in Shopify. Perhaps the steps can be outlined in another blog post.

Now we move on to the main gist of this post. The client had the vehicle data populated nicely in Google Sheets. My next big task was to reformat these data to a TaffyDB-compatible data file. Below is a snapshot of the Google Sheet and the corresponding TaffyDB data, which is essentially a JS array of objects. The cool part is to automate this conversion process.

Sample data in Google Sheet (click to enlarge)

var car = TAFFY([
{year:"2002", make:"Subaru", model:"WRX", trim:"Sedan", bolt:"5x100", e_family:"EJ", e_code:"EJ20"}, 
{year:"2002", make:"Subaru", model:"WRX", trim:"Wagon", bolt:"5x100", e_family:"EJ", e_code:"EJ20"}, 
{year:"2003", make:"Subaru", model:"WRX", trim:"Sedan", bolt:"5x100", e_family:"EJ", e_code:"EJ20"}, 
{year:"2003", make:"Subaru", model:"WRX", trim:"Wagon", bolt:"5x100", e_family:"EJ", e_code:"EJ20"}
]);

Enter Google Apps Script. This tool is a godsend because it allows you to use Javascript to programmatically manipulate data in your spreadsheet. To access Google Apps Script in Google Sheets, go to Tools -> Script Editor.

After going through a few tutorials, I managed to come out with a fairly decent code for performing this conversion process.

/**
 * Retrieves all the rows in the active spreadsheet that contain data and generate a TaffyDB data array from it
 */
function readRows() {
  var sheet = SpreadsheetApp.openById('SPREADSHEET_ID_HERE').getActiveSheet();   // The value of key= variable in the URL
  
  // This represents ALL the data
  var range = sheet.getRange(5, 1, 1000, 20);   // Starts reading from row #5 column #1 (cell A5). Read as far as 1000 rows and 20 columns (for future data entries).
  var values = range.getValues();
  var output = '';
  var index = [];
  var row_array = [];
  var row = "";
  
  // The main loop that goes through each cell within the selected range. i is row, j is column
  for (var i in values) {
    var cell_array = [];
    for (var j in values[i]) {
      if(i == 0) {   // i == 0 is row #5, this is the column variable name
        if (values[i][j]) {
          index.push(values[i][j]);
        }        
      } else {   // car data starts at row #7 onwards
        if (values[i][j]) {
          cell_array.push(index[j] + ':"' + values[i][j] + '"');   // compose the car data cell by cell for the current row
        }
      }
      
    }
    
    if(i > 0) {
     if(cell_array.length > 0) {
        row = cell_array.join(', ');   // join the individual cells car data for the current row with commas to form a complete row data
        row_array.push(row);
      }
    }
    
  }
  
  output = row_array.join('}, n{');   // join the individual rows with curly braces and commas to form a complete database

  output = 'var car = TAFFY([{' + output + '}]);';   // finalizing the TaffyDB format
  
  Logger.log(output);
  //return output;
};

To test this code out, simply enter your spreadsheet ID in line 5 and change the range number accordingly in line 8. The Logger.log command in line 44 is used for testing the output in the script editor console. In the production version, I have a few more extra codes to add a dropdown menu in the Google Sheets UI that users can click to download the updated TaffyDB JS data file and then simply drop it into Shopify.

The post Generating TaffyDB Data File from Google Sheets appeared first on Stampede: the strategic design & technology company.

Sample of product sashes.

In BigCommerce, exclusive product sash features are not built-in but they can be added using some clever jQuery tricks. Specifically, we need to tell jQuery to read the page for certain “triggers” or “conditions” and show the appropriate sash based on them. The key to product sashes is they have to appear in product listing pages (like category, homepage, search result) and the product details page. This means the “triggers” have to be present in all these pages for jQuery to detect.

On Sale Sash

In the following example, I am going to show how to add the most common of all product sashes, On Sale. Firstly, we need to set the discounted price for the appropriate products. If this was done right, the products will show up in the shop with a strike-through line on their original retail price. This element will become the “trigger” for the On Sale sash. So we just have to tell jQuery, if this element exists, show the On Sale sash. Below are Javascript codes for the category and product details pages.

Product Category Page

$("#CategoryContent .ProductList li .RetailPriceValue").each(function( index ) {
   $(this).parents('li').find('.ProductImage').append('<img src="http://myshopurl.com/path_to_image/on-sale.png" class="product-sash" alt="On Sale" />');
});

Product Details Page

if($('.DetailRow.RetailPrice').is(':visible')) {
   $('.ProductThumbImage .zoomPad').append('<img src="http://myshopurl.com/path_to_image/on-sale.png" class="product-sash" alt="On Sale" />');
}

Any Miscellaneous Sashes

A slightly trickier scenario is to show product sashes like Bestseller and New, which we don’t really have a way to configure via the BC admin. Even though BC has product tags and custom fields, these data don’t show up in the product category pages. Fortunately, we have something else to use, the main image alternate text. In BC admin, it’s the Description box of the main product image. You need to enter a unique identifying keyword in the Description box and thanks to jQuery, reading the presence of this keyword is a breeze. This method will allow you to show any kinds of product sashes.

Enter the keyword into the Description field of the main image.

For showing a Bestseller sash, enter the keyword Bestseller. I personally prefer to enter the actual product name followed by the keyword to keep the semantics right, like 5ft Christmas Tree – Bestseller. Here’s the code for showing the Bestseller product sash.

Product Category Page

$("#CategoryContent .ProductList li .ProductImage a img[alt*='Bestseller']").each(function( index ) {
   $(this).parents('li').find('.ProductImage').append('<img src="http://myshopurl.com/path_to_image/best-seller.png" class="product-sash" alt="Bestseller" />');
});

Product Details Page

if(ProductImageDescriptions[0] && ProductImageDescriptions[0].indexOf("Bestseller") >= 0) {
   $('.ProductThumbImage .zoomPad').append('<img src="http://myshopurl.com/path_to_image/best-seller.png" class="product-sash" alt="Bestseller" />');
}

The examples I provide here only contain the necessary jQuery code snippets to make the product sash works. It’s not really a step-by-step beginners tutorial. You would need CSS to style the product sash nicely. Don’t forget about the sash graphics too, they are transparent PNGs. I can also foresee that my codes are totally template-dependent. However, if you are familiar with jQuery selectors I am sure you will be able to understand the gist and tweak the codes accordingly to fit your templates.

Give it a try and post your feedback below!

The post Add Product Sash/Ribbon in BigCommerce Using jQuery appeared first on Stampede: the strategic design & technology company.

Personal favourites

Metamorphosen by Austrian studio atelier olschinsky

This illustration piece called Metamorphosen looks like how an array of emotions would look like.

Change it! (aka Wallnado) by Russian designer Amirko

The walls allow us to change the colours according to our moods, as we all know how colour has a huge impact with our feelings. Feeling a little blue? Change it blue!

String Theory by German designer Federico Leggio

Stare at the text long enough and you’ll feel like you’re in it. Try moving left and right repeatedly.

Painting by Korean artist Kwang Ho Shin

Kwang Ho Shin is one of my favourite artists – how haunting is this piece of portrait?

Smeared Skies Made from Hundreds of Stacked Photographs by Matt Molloy

Last but not least is a shot from Matt Molloy of a smeared skies made with hundreds of stacked photographs.

To conclude…

Over the past year, Curated has been my platform for my own daily designs inspiration dose. It started as an assignment for me to look for a few design-related posts in a daily basis – from photography, fine arts, digital designs, even to hand drawing sketches. Little did I know that over all this time, the blog has grown to be some sort of my own measurement scale to train my eyes to spot good design and their trends. Whenever I looked through the older posts, I could see the progress of how much my penchant for design has matured. After a while now, I get really picky on what posts to curate.

Is there anything in particular you would like me to cover in Curated?

The post Curating Curated! appeared first on Stampede: the strategic design & technology company.