CSS Compression Widget

[brucet]

The 'CSS Compression' Widget applies a more robust compression than the Sellerdeck Desktop default, which will improve your initial page load time and enhance your score with analytical tools such as Google Pagespeed Insights.

For more information, install the Widgets Extension and select 'Extensions > Widgets' from the Sellerdeck Desktop 'Help' menu. You may need to restart Sellerdeck Desktop after installing the extension.

[Phil H]

Great idea. I think it could be a SellerDeck plus point if SD sites could all rank higher than other platforms.

[samlll]

The 'CSS Compression' Widget applies a more robust compression than the Sellerdeck Desktop default, which will improve your initial page load time and enhance your score with analytical tools such as Google Pagespeed Insights.

For more information, install the Widgets Extension and select 'Extensions > Widgets' from the Sellerdeck Desktop 'Help' menu. You may need to restart Sellerdeck Desktop after installing the extension.

really handy extension

[Mantra]

The 'CSS Compression' Widget applies a more robust compression than the Sellerdeck Desktop default, which will improve your initial page load time and enhance your score with analytical tools such as Google Pagespeed Insights.

I would have expected the code for this to have been incorporated into the latest v16 and v18 upgrades to apply the most robust compression rather than by the application of a widget that requires the license key to be renewed annually!!

[graphicz]

Place

<actinic:block php="true">

$sCSS = <<<'CSSDefinition'

at the top before everything and the following at the bottom after everything:

CSSDefinition;
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCompressionEnabled%22%20%2f%3e">
// Clean up CSS
$sCSS = preg_replace('/\r
|\r
/', ' ', $sCSS); // eliminate newlines
$sCSS = preg_replace('/\s+/', ' ', $sCSS); // convert all multiple tabs and spaces to a single space
$sCSS = preg_replace('/\/\*.*?\*\//', '', $sCSS); // remove all comments
$sCSS = preg_replace('/\s*(\{|\}|:|;|,|>|\/)\s*/', '${1}', $sCSS); // eliminate spaces either side of { } : ; , > /
$sCSS = preg_replace('/([^0-9])0px/', '${1}0', $sCSS); // convert 0px to 0
$sCSS = preg_replace('/^\s*/', '', $sCSS); // remove spaces remaining at start of CSS
$sCSS = preg_replace('/([^\'])#([0-9a-fA-F])\2([0-9a-fA-F])\3([0-9a-fA-F])\4/', '${1}#${2}${3}${4}', $sCSS); // convert colours like #aabbcc to #abc
$sCSS = preg_replace('/(padding|margin):([0-9]+(?:px|%)+) \2;/', '${1}:${2};', $sCSS); // convert margin:0 0; to margin:0;
$sCSS = preg_replace('/(padding|margin):([0-9]+(?:px|%)+) \2 \2 \2;/', '${1}:${2};', $sCSS); // convert margin:0 0 0 0; to margin:0;
$sCSS = str_replace(' !important', '!important', $sCSS); // remove space before !important
$sCSS = str_replace(';}', '}', $sCSS); // get rid of trailing ; in rules
</actinic:block>
echo $sCSS;
</actinic:block>

Please note:

$sCSS = <<<CSS

is using PHP's nowdoc syntax that came in with PHP 5.3.0.

Older SellerDeck versions use an older version of PHP that doesn't support nowdoc.

The older PHP's supports heredoc which is what you will be using if you remove the single quotes.

https://community.sellerdeck.com/for...396#post551396

<actinic:block php="true">

$sCSS = <<<CSS

at the top before everything and the following at the bottom after everything:

CSS;

// Clean up CSS
$sCSS = preg_replace('/\r
|\r
/', ' ', $sCSS); // eliminate newlines
$sCSS = preg_replace('/\s+/', ' ', $sCSS); // convert all multiple tabs and spaces to a single space
$sCSS = preg_replace('/\/\*.*?\*\//', '', $sCSS); // remove all comments
$sCSS = preg_replace('/\s*(\{|\}|:|;|,|>|\/)\s*/', '${1}', $sCSS); // eliminate spaces either side of { } : ; , > /
$sCSS = preg_replace('/([^0-9])0px/', '${1}0', $sCSS); // convert 0px to 0
$sCSS = preg_replace('/^\s*/', '', $sCSS); // remove spaces remaining at start of CSS
$sCSS = preg_replace('/([^\'])#([0-9a-fA-F])\2([0-9a-fA-F])\3([0-9a-fA-F])\4/', '${1}#${2}${3}${4}', $sCSS); // convert colours like #aabbcc to #abc
$sCSS = preg_replace('/(padding|margin):([0-9]+(?:px|%)+) \2;/', '${1}:${2};', $sCSS); // convert margin:0 0; to margin:0;
$sCSS = preg_replace('/(padding|margin):([0-9]+(?:px|%)+) \2 \2 \2;/', '${1}:${2};', $sCSS); // convert margin:0 0 0 0; to margin:0;
$sCSS = str_replace(' !important', '!important', $sCSS); // remove space before !important
$sCSS = str_replace(';}', '}', $sCSS); // get rid of trailing ; in rules

echo $sCSS;
</actinic:block>

[Mike Hughes]

Hi Jonathan

at the top before everything and the following at the bottom after everything:

Could you be a bit more specific about where the code goes and what you mean by 'everything' ?

Thanks

Mike

[graphicz]

It's the 'Current stylesheet. Right at the top before everything and the other bit right at the bottom after everything.

[graphicz]

PS - If you use widgets to add other functionality the widget will add any additional css AFTER the closing php statement so it will not be included in compression.

Just cut and paste moving the new code above the closing php statement.

[Mantra]

Thank you Jonathan

I won't bother with the quotes as they do not seem to be working for some reason under this topic.

I basically had the code laid out correctly at the top and bottom of the Current Style style under the comment:
/*=== Do not edit below here === */

I see now now that 54 lines of code must have been added at sometime after upgrading concerning PayPal Express.

I checked the widgets and I see there is an "Error in installation" showing red for the "Paypal Commerce Platform"

We do not engage with Paypal and have not tried to install the widget so I will be raising an SD support ticket to remove the error for the PayPal Commerce Platfom to show "not installed".

Hopefully this will remove the Paypal Express code lines so that the CSS compression code is correctly incorporated at the bottom of the style sheet.

Incidentally, the CSS Compression Widget is showing as "installed" but this was added well before the widget was available and should in my view be incorporated when the application is updated not by way of a widget that is subject to an annual license renewal.

[graphicz]

As in the PayPal widget the CSS widget is for people who are not happy making code or layout changes. If you are then you don't need the widget so do not need to buy it - I guess.

[EdHarrison]

I'm confused (easily granted), I have PayPal commerce and implemented it via the sellerdeck instructions shortly after release, no extension or widget?