Category Archives: Uncategorized

SFCC SFRA page designer tools

I’ve been quite busy learning all sorts of technologies since 2019, but one of my main focuses has been on Salesforce Commerce Cloud and their page designer framework.

One of the developers that I was working with, the amazing Jacob Swain, had a set of HTML files that could parse an SFCC content asset export for page designer pages, and return results. He also introduced me to custom editors, which take page designer to an entirely new level.

Here’s a link to a repo that has my active collection:

https://github.com/zotsf/sfra-page-designer-tools

Here’s a link to my repo of custom page designer editors:

https://github.com/zotsf/sfcc-page-designer-custom-editors

Gutenberg or not to Gutenberg with ACF

The Gutenberg editor is pretty fantastic, and you can do all sorts of things. I personally love it.

However, if you want to use ACF to manage the content on a particular page template, you can’t really rely on ACF’s ‘Hide on Screen’ functionality in the field group editor.

Here’s a simple function you can use to turn off the Gutenberg editor on pages with those specific templates.

add_action('init', 'my_disable_editor');
function my_disable_editor() {

	// get the current post ID
	$post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'] ;

	// if it's not set, ignore the function
	if( !isset( $post_id ) ) return;

	// find the page template of the current post
	$template_file = get_post_meta($post_id, '_wp_page_template', true);

	// hide the gutenberg editor if one of these page types
	// edit the following to suite your page templates
	if(
	    $template_file == 'page-templates/page-this.php' ||
	    $template_file == 'page-templates/page-that.php' ||
            $template_file == 'page-templates/page-other.php' 
	) {
	    remove_post_type_support('page', 'editor');
	}
}

Custom Taxonomy Archive Template Paginiation Notes

Five things you need for custom taxonomy archive page pagination working perfectly :

( 1 ) Don’t put exclude_from_search parameter key as register_post_type argument parameter or if mention set it ‘exclude_from_search’ => false. By default it is set false if not mentioned.

( 2 ) The taxonomy that will be use with the custom post type set
‘taxonomies’ => ‘custom_taxonomy_name’ as register_post_type argument parameter or
use register_taxonomy_for_object_type() directly.
Custom taxonomies still need to be registered with register_taxonomy().

( 3 ) While querying within new WP_Query ($args)
i ) If not set in admin static front page use before new WP_Query($args)
$paged = ( get_query_var(‘paged’) ) ? get_query_var(‘paged’) : 1;
and use $query = new WP_Query( array( ‘paged’ => $paged ) );

ii ) If set in admin static front page use before new WP_Query($args)
$paged = ( get_query_var(‘page’) ) ? get_query_var(‘page’) : 1;
and use $query = new WP_Query( array( ‘page’ => $paged ) );
Remember to use ‘posts_per_page’ and ‘paged’ parameter in new WP_Query($arg) argument array.
If not set static front page then you should use ‘page’ parameter in new WP_Query ($arg) argument array

( 4 ) Use WordPress paginate_links( $args ) function like the example below to render pagination in archive template file.

$big = 999999999; // need an unlikely integer
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%', or '/paged=%#%', // if using pretty permalink
'current' => max( 1, get_query_var('paged') ),
'total' => $query->max_num_pages ) );
// Here $max_num_pages is the properties of new WP_Query() object . It is total number of pages. Is the result of $found_posts / $posts_per_page

( 5 ) The paginate_links() function output the html.

  • .......

If you use bootstrap inject “pagination” class to the

    with the help of javascript or jquery and a nice fancy pagination will be output.

Where not to host your website

I cannot tell you how many times I’ve run into the situation where a client has a website hosted on their last developer’s web server.  9 out of 10 times, there’s a disconnect in that relationship and the developer/designer has become hostile or non-responsive, and I have to pick up the pieces.

I’m not here to judge why that relationship went bad, I’m here to COMPLETELY JUDGE the hosting choices that freelance developers make.

Why, oh, why do designer/developers consider it a good business practice to host websites for their clients?  Do you think you are an ISP or Hosting provider like Media Temple or something?  Just think about the ramifications folks.  If the client decides to move on, then what?  Now you’ve got to deal with that morass of moving their site and email off your server?

Why, oh, why didn’t you just have the client host the site on their own hosting account that they own and manage?  Even if they can’t manage it, just set them up and put everything on their account on auto-renew.  Jeez folks, how hard can that be?

Also, you are not going to make a huge profit by hosting people.  The amount of energy you expend to manage a hosting account, will quickly eat up the meager profits you might get out of the deal.  If you are making a good amount of money, then you are simply overcharging the client and that makes you a bastard that takes advantage of the unwitting public in my opinion, not a good business person.

Blech, stop it folks, it’s just not worth it.

A nasty PHP hack

So, I’ve been dealing with a client’s hacked server for a few weeks now.  I thought I’d cleaned it up a few weeks ago, but stumbled across some ‘symptoms’ of this hack.  This lead me to dig a bit deeper, and I found this AMAZING write up of this particular attack by The Domestic Enthusiast.  The article is here.

This hack will work on any PHP framework.  So, if you are running up a straight up PHP site, Joomla, Drupal, or WordPress, check it out.  It’ll save you hours cleaning up a mess.

Mac OS X commandline goodness

Today I learned two things that’ll save be gobs of typing and manual manipulations.

  1. Preferences > Keyboard > Services  then check New Terminal at Folder
  2. sips

So say you are building out a site, and you are chopping up the graphics in photoshop or Illustrator, and you’ve got a nice tidy folder to scp up to your development server.  Well, you’ve been working in a given folder via your GUI and after you’ve set point #1 above, then you simply right click on that folder in the GUI and click ‘New  Terminal at Folder’, and wala, you are on the command line in that folder.

…no more CDing around.  You are just there 🙂

Ok, now suppose that you need to make all the images 25px smaller for whatever reason.  Forget Adobe Bridge, or forget creating that macro for Photoshop…just head back to the command line.

sips -Z pixelsize *.imagefileextension

…and your files are resized.  Be careful to work with copies of the originals.  There’s no going back on the command line 🙂

Using Font Icons

Ok, this topic has been covered quite well on the web, but I thought I’d do a little write up anyway.

We all use images for those groovy little icons.  For example, facebook buttons, ‘X’ for delete, etc…

Well, now that the use of embedded fonts is stable and more widely used, folks have started creating ‘icon’ fonts.  Chris Coyier created us a great demo page to prove why icon fonts are so cool.  He then goes on to write up a great list of available fonts.

Now that’s all more than cool, but what if the icon is the wrong direction?  Here’s what I’ve implemented 🙂


.flip {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}

Snook has a great write up on rotating things.

.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}

Fun stuff!