If you are trying to add / edit the "Pages" widget on your Blogger blog's layout you may have noticed that it isn't working lately.
Show random product suggestions on Checkout page in Shopify
An "Add more to cart" module on the Checkout is a great way to increase the amount of products your customers buy, Checkout page can be a great place for showing a few more products that your customers may want to add to their carts.
Editing the Checkout.liquid file is only possible for Shopify Plus users, so this tutorial is targetted only for Shopify sites which have the ability to edit the checkout's liquid file, if you don't you may not be able to do this.
What are we building?
This. If you are here you know why you may need it so I won't go into the details about the marketing needs for having an up-sell module on your checkout page.
Show me how to do this
Even after you get the ability to edit Checkout.liquid file you still don't get a whole bunch of goodies that you can simply drag and drop on your Checkout pages. We will use JS DOM Manipulation to insert the required HTML.
Next is getting a list of random products, now no AJAX API in Shopify provides a direct API to get you a list of random products, so we built a nice enough system to get us that, using Product Recommendations API
Let's get started
Normally I would go through each of the lines of code explaining the parts of code, but since this entire piece of code can be simply pasted in your checkout.liquid file I won't waste your time trying to explain you the code, you can simply copy paste and start using it.
The code is commented, so you know what's going on and what you can change to fit your own needs.
<script type="text/javascript">If you are having trouble viewing the code then check this Gist on Github with the full code where you can copy and paste easily.
var addProuct = function( variant_id, qty, btn ) {
if ( !qty ) { qty = 1; }
var data = {
"id": variant_id,
"quantity": qty
};
window.Checkout.jQuery.ajax({
type: 'POST',
url: '/cart/add.js',
data: data,
dataType: 'json',
success: function() {
// As soon as the success response is received we reload the page,
// so the user can see the updated cart items on checkout page itself.
$( btn ).removeClass('btn--loading');
window.location.reload();
}
});
};
// Function that makes a call to the Product Recommendations API, we pass a random product id and get a list of products, then we choose a random product from that list of products.
function _getARandomProduct( productid ) {
Checkout.$.getJSON("/recommendations/products.json?product_id="+ productid +"&limit=5", function( res ) {
if ( res.products != null ) {
var selectARandom = res.products[ _getRandomInt( 0, ( res.products.length - 1 ) ) ];
// We don't get the different sizes of images in the response, so we do a simple string replace to add _small to load a small image and not a full sized one.
var smallImage = selectARandom.featured_image.replace('.jpg', '_small.jpg');
// This is one individual product card,
var productHtml = `
<div class='random-product-item'>
<div class='thumb-product-img'>
<img src='${ smallImage }'>
</div>
<div class='product-detail-col'>
<h4 class='prod-title'><a href='${ selectARandom.url }' target='_blank'>${selectARandom.title}</a></h4>
<div class='prod-price'>Rs.${ (selectARandom.price / 100) }</div>
</div>
<div class='product-add-wrapper'>
<a href='#' class="extra-productadd-btn" data-variant='${selectARandom.variants[0].id}'>
<span class='btn-text'>Add</span>
<svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button"></use></svg>
</a>
</div>
</div>
`;
// We keep appending each product to the HTML
Checkout.$('.checkout-add-products-list').append( productHtml );
}
});
}
function _getRandomInt(min, max) {
return min + Math.floor(Math.random() * (max - min + 1));
}
// This is the entire function that will execute on page load, here we will reference to the functions that we created above.
(function(){
$ = Checkout.jQuery;
$( document ).on('page:load page:change', function(){
/*
* Add more products to cart.
*/
// Here we add this container HTML after the #order-summary div that's there on the page
$('#order-summary').after( `
<div class="checkout-add-cart-module">
<h4>Add more products to cart</h4>
<div class='checkout-add-products-list'></div>
</div>`
);
// IMPORTANT:
// These are product ids, it should be different for your site. These product ids are what we use to find random related products, so fill these with the products from collections from where you want to show random products.
// To get the product ids go to a product edit page, on the browser address bar you will find the id in the url at the end.
var productIds = [
'5514666082459', '5448173977755', '5448178270363', '5448176894107',
];
// We assume there's a div .cart-random-products
//
var randomProductsToShow = [];
for ( var i = 0; i < 6; i++ ) {
var randomProductId = productIds[ _getRandomInt( 0, ( productIds.length - 1 ) ) ];
_getARandomProduct( randomProductId );
}
$('body').on( 'click', '.extra-productadd-btn', function( e ){
// Get the variant id of the product
var variant = $( this ).data('variant');
// Add a nice loading effect to button while the AJAX call runs
$( this ).addClass( 'btn--loading' );
// Call the function to add the product using ajax and reload the page on success.
addFreeGift( variant, 1, $(this) );
// So the button link doesn't do anything strange.
e.preventDefault();
});
});
}());
</script>
In this code you do not have to do much, for `productIds` populated the array with product ids from your own Shopify Plus store. Other than that you can also change the numbers in the `for loop` to show more or fewer products.
Where do I place this?
In your Shopify site's theme edit look for the checkout.liquid file, if it doesn't exist click on "Add a new layout" under "Layout", select "Checkout" from the select menu and create it.
Here you can paste this code just above the closing </body> tag.
HTML is done, let's do some styling
You now have the HTML rendering but it is not complete with a good style. I am using a very basic and standard style for the module but you can change the CSS according to your own needs.
/*This is it. I have made it mobile responsive too and gave it a slider kind of look so that it doesn't take a lot of vertical space on mobile screens.
* Add to Cart module for Checkout
*/
.checkout-add-cart-module {
padding: 0px;
background-color: transparent;
margin-top: 30px;
}
.checkout-add-cart-module > h4 {
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
.checkout-add-cart-module .checkout-add-products-list {
margin: 15px 0;
}
.checkout-add-cart-module .random-product-item {
padding: 5px 0px;
display: flex;
align-items: stretch;
}
.random-product-item .product-detail-col {
width: 50%;
padding: 5px 10px;
}
.random-product-item .product-detail-col .prod-title {
font-weight: 600;
color: #333;
font-size: 15px;
margin-bottom: 5px;
line-height: 1.4;
}
.random-product-item .product-detail-col .prod-price {
font-size: 13px;
font-weight: 600;
color: #333;
}
.checkout-add-cart-module .random-product-item .thumb-product-img {
width: 65px;
height: 65px;
border-radius: 5px;
position: relative;
overflow: hidden;
background-color: #fff;
border: 1px solid #eee;
}
.checkout-add-cart-module .random-product-item .thumb-product-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.product-add-wrapper {
width: 25%;
display: flex;
align-items: center;
justify-content: flex-end;
height: 100%;
align-self: center;
position: relative;
}
.product-add-wrapper a.extra-productadd-btn {
color: #fff;
display: inline-block;
padding: 5px 20px;
background-color: #197bbd;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
position: relative;
}
.product-add-wrapper a.extra-productadd-btn:hover {
background-color: #1c6495;
}
.product-add-wrapper a.extra-productadd-btn.btn--loading .btn-text {
opacity: 0;
}
@media ( max-width: 640px ) {
.checkout-add-products-list {
display: flex;
overflow-y: auto;
align-items: flex-start;
}
.checkout-add-cart-module .random-product-item {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
min-width: 175px;
}
.random-product-item .product-detail-col {
width: 100%;
text-align: center;
}
.product-add-wrapper {
width: 100%;
justify-content: center;
}
.checkout-add-cart-module .random-product-item .thumb-product-img {
margin: 0 auto;
}
.product-add-wrapper {
align-self: flex-start;
height: auto;
}
}
Where to place this? Wrap it in a style element and paste it just below the <script> you added above, or you can create an asset file and then include that asset in the checkout liquid file. Your choice.
So this is it.
Where do I find help on this?
I wanted to cover this script deeply but the fact that web developers are the primary audience for such tutorials I haven't, but if you are a Shopify user and would like this feature then you can contact me (depy45631@gmail.com) to get this done on your site.
On top of that if you are already a Shopify Plus user and are looking for someone to add features on Checkout pages then I can help you too. I have done a lot of different customizations on Checkout liquid, such as OTP Verification for Cash on Delivery on Shopify Checkout, Automatic pincode checker and populate City, State, Country, Add Free gift to Cart on purchase of X amount etc.
Fixing WordPress Website Infected by .ico Malware
More cases of WordPress websites being infected by .ico Malware are showing up and it is a difficult job to get rid of it completely and make sure site safe again, but it's not impossible.
I wrote an article on fixing this virus problem before and it is recommended you check it first, it explains how to get rid of the virus by manual process simply by finding the strange looking PHP files and the .ico files which are spread across different folders, it makes it very hard to find if you are not someone who deals with these sort of things on a regular basis.
Just recently multiple websites were again infected by this malware, which in all instances caused the website's to go down and returned error messages like "There has been critical error on your website."
What does the malware do?
The malware may have originated from a compromised plugins (it happens a lot often on WordPress platform) which have now infected your whole server with strange looking PHP files in different folders which includes the core WordPress files and also the plugin files, when it does that a faulty plugin file can lead to your site going down, in some cases your admin dashboard won't be accessible in some cases the main site, and sometimes both.
What to do now?
It depends on your experience in cleaning up sites and detecting infected files. If you are not a tech savvy person it might be difficult, best option is to hire somebody to do it for you and get it fixed completely. I have a lot of experience in this and if you want my help you can email me at depy45631@gmail.com and we can take it forward.
For the developers, read this article, the cleanup process involves finding the strange files, you will know when you see one and also files with .ico extensions. Along with that I would definitely recommend the plugin MalCure which can save you a lot of time by helping you find the infected files so that you can clean it up yourself completely.
Getting Rid of WordPress Malware (.ico Backdoor Malware)
Recently major malware campaigns on WordPress were launched, infecting and exposing vulnerabilities in many popular plugins which effectively affected hundreds of thousands of WordPress sites.
In this post we talk about a malware that affects the site by injected malicious .ico files at random locations, as well as index.php files and code snippets in core WordPress files.
One of the sites that I manage was affected by this malware, first course of action was to look for the problem being faced by other people, this article came up which was one of the very few links online that discussed the issue we face:
https://www.getastra.com/e/malware/infections/favicon-ico-malware-backdoor-in-wordpress-drupal
As discussed this hack injects files with .ico extensions in different folders. These ico files contain malicious PHP code which does all of the malicious tasks it is supposed to do, one is to spread the malware and infect further files. Primary function of this malware is to redirect incoming traffic to some shady websites.
I tried finding the root cause, where it came from, which plugin caused but it was not very clear. However, I decided to take some steps to clean it which was to look for .ico files on the server, because some core files like wp-config.php, index.ph, wp-settings.php had the code these @include.. PHP which referenced to the actual files I was able to search for its location by decoding the Unicode text.
Using FTP I found the files which were in a deep folder:
After removing it we believed the problem was solved, but 2 days later the same problem was back, this time the .ico file was added to a different random location and the code injected into different core files.
If everything is done right you should be able to access your site.
At this point all we can do is wait and see if the malware returns. In our case this method fixed the problem which makes it apparent that somewhere inside the core WordPress files the malware was injected and went unnoticed by security plugins like Sucuri and WordFence.
If you still face the issue even after trying this let us know in the comments.
In this post we talk about a malware that affects the site by injected malicious .ico files at random locations, as well as index.php files and code snippets in core WordPress files.
One of the sites that I manage was affected by this malware, first course of action was to look for the problem being faced by other people, this article came up which was one of the very few links online that discussed the issue we face:
https://www.getastra.com/e/malware/infections/favicon-ico-malware-backdoor-in-wordpress-drupal
As discussed this hack injects files with .ico extensions in different folders. These ico files contain malicious PHP code which does all of the malicious tasks it is supposed to do, one is to spread the malware and infect further files. Primary function of this malware is to redirect incoming traffic to some shady websites.
Steps that were taken
But did not work.I tried finding the root cause, where it came from, which plugin caused but it was not very clear. However, I decided to take some steps to clean it which was to look for .ico files on the server, because some core files like wp-config.php, index.ph, wp-settings.php had the code these @include.. PHP which referenced to the actual files I was able to search for its location by decoding the Unicode text.
Using FTP I found the files which were in a deep folder:
After removing it we believed the problem was solved, but 2 days later the same problem was back, this time the .ico file was added to a different random location and the code injected into different core files.
What Worked
So far it was frustrating, like many on the forums who discussed this issue who woke up daily in the morning and checked for such files and cleaned it we too were doing just that, the malware kept coming back.
Updating / removing plugins did not worked either.
What work was cleanup of the core WordPress files completely. These WordPress files are files that are supposed to be intact and does not change with our changes. Follow these stes:
- Make sure you have FTP access to your site, also take backup of your files (any customized theme, plugins etc.)
- Delete these folders completely:
wp-adminwp-includes - When you delete the folders, also remove core files in the root folder where files like wp-config.php, index.php etc. reside. Make sure to copy contents of wp-config.php file as it contains details of your server / database.
- Download WordPress files from here: https://wordpress.org/download/ - unzip it and place it somewhere on your system.
- Now one by one first upload the files using FTP that you deleted from the root folder, make sure to replace important content in wp-config.php file.
- Now, it is time for uploading the entire
wp-adminandwp-includesfolder back. Use your FTP software to upload all the files.
At this point all we can do is wait and see if the malware returns. In our case this method fixed the problem which makes it apparent that somewhere inside the core WordPress files the malware was injected and went unnoticed by security plugins like Sucuri and WordFence.
If you still face the issue even after trying this let us know in the comments.
Show A COVID-19 / Corona Virus Update Message on your Blogger Blog
The World is in a lock-down, we are all aware of it. Due to many factors you may want to show some message on your Blogger.com blog to notify your readers about what's going on for you.
In this quick tutorial I will quickly show a simple and efficient way to display a message on your blog / website hosted with Blogger. You do not need any coding experience, just basic knowledge of copy-pasting work.
Copy this code and then go to your Blogger Dashboard -> Layout -> Add A Gadget on any area on the layout
Click on the plus sign next to the "HTML/JavaScript" widget
Now paste the code from above in the content area, and make sure the option on the top right shows "Rich Text", this means that we are currently in HTML mode.
We do not need to enter any title for the widget. Save it.
If you know a bit of JS coding you may be able to edit the configuration of the message by altering some variables in the code. In any case you will still want to edit the message that it shows, so before you save the code you can edit the message part in the code.
In this quick tutorial I will quickly show a simple and efficient way to display a message on your blog / website hosted with Blogger. You do not need any coding experience, just basic knowledge of copy-pasting work.
<script type='text/javascript'>
var covid19msg = (function(){
/* Edit values here */
var covid19msg = {
'message': 'Hello readers, due to the COVID-19 outbreak you may see some delays in our regular updates. Kindly bear with us for the time-being.',
'background-color': '#333',
'text-color': '#fff',
'position': '' // set to 'fixed' if you want the msg to be displayed always
};
/* Don't edit anything below this */
var newElm = document.createElement('div');
var theMsg = covid19msg.message;
var fixedClass = '';
if ( covid19msg.position == 'fixed' ) {
fixedClass = 'msg-fixed';
}
var covid19html = '<div class="covid19-message '+ fixedClass +'"><div class="inner">'+ theMsg +'</div></div><style>.covid19-message { position: relative; padding: 20px; text-align: center; background: #333; color: #fff; } .covid19-message.msg-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 99; } .covid19-message { background-color: '+ covid19msg['background-color'] +';color: '+ covid19msg['text-color'] + '; }</style>';
newElm.innerHTML = covid19html;
var theBody = document.getElementsByTagName('body')[0];
theBody.insertBefore(newElm, theBody.firstChild);
});
covid19msg();
</script>
Copy this code and then go to your Blogger Dashboard -> Layout -> Add A Gadget on any area on the layout
Click on the plus sign next to the "HTML/JavaScript" widget
Now paste the code from above in the content area, and make sure the option on the top right shows "Rich Text", this means that we are currently in HTML mode.
We do not need to enter any title for the widget. Save it.
If you know a bit of JS coding you may be able to edit the configuration of the message by altering some variables in the code. In any case you will still want to edit the message that it shows, so before you save the code you can edit the message part in the code.
Solving "Preload key requests" point on PageSpeed for WordPress sites
Getting a good score on Google PageSpeed is important if you want to rank higher and in the process provide a better experience to your users. However with the constantly updating system of PageSpeed you have to tackle new issues. One of the recent updates now focuses on preloading key requests on your site.
Update 3rd Jan 2020 : Modified the code to support extra attributes like crossorin and type that is required for some other types of content such as Fonts file.
Update 3rd Jan 2020 : Modified the code to support extra attributes like crossorin and type that is required for some other types of content such as Fonts file.
Browsers are smart and to make use of it there's something called pre-loading of requests, that is you tell the browser to already pre-load a set of resources ahead of time which you know will be used in the future.
This tutorial is focused towards WordPress sites but the technique is same for any site, it's just a few lines of HTML that goes on top of the <head> of your website.
I won't discuss what's preloading a request is in detail but if you would like to know more check this out: https://web.dev/uses-rel-preload/
Note: There is another point that sounds very similar, it is "preconnect", it is for pre-fetching DNS that we know will be required. There will be another similar tutorial for that, so stay tuned.
It looks something like this in the PageSpeed report:
The above code will go into your theme's functions.php file. All you have to do here it add elements to the array
Are you looking to solve another Google PageSpeed x WordPress problem? Let us know in the comments, we will be happy to write a blog post for that as well.
This tutorial is focused towards WordPress sites but the technique is same for any site, it's just a few lines of HTML that goes on top of the <head> of your website.
I won't discuss what's preloading a request is in detail but if you would like to know more check this out: https://web.dev/uses-rel-preload/
Note: There is another point that sounds very similar, it is "preconnect", it is for pre-fetching DNS that we know will be required. There will be another similar tutorial for that, so stay tuned.
It looks something like this in the PageSpeed report:
/*
* Preload the s**t out of Google
*/
function stramaxon_preload_requests_html() {
$preloadRequests = array(
array(
'as' => 'style',
'href' => '/wp-content/themes/example/style.css',
'type' => 'text/css'
),
array(
'as' => 'script',
'href' => '/wp-content/themes/example/main.js',
'type' => 'text/javascript'
),
array(
'as' => 'font',
'href' => '/wp-content/themes/example/font.woff2',
'type' => 'font/woff2',
'crossorigin' => 'crossorigin'
),
$linksHtml = '';
foreach ($preloadRequests as $val) {
$attrs = '';
foreach ($val as $key => $att ) {
$attrs .= $key . '="' . $att . '" ';
}
$linksHtml .= '<link '. $attrs .' rel="preload">';
}
echo $linksHtml;
}
add_action('wp_head', 'stramaxon_preload_requests_html', -100);
The above code will go into your theme's functions.php file. All you have to do here it add elements to the array
$preloadRequests and define the href and as value as required.Are you looking to solve another Google PageSpeed x WordPress problem? Let us know in the comments, we will be happy to write a blog post for that as well.
A Review of the Blogger App for Android
Used and loved by millions of bloggers and content creators around the World, it is just very natural and obvious for Blogger to bring out an Android App to let its users to what they love on the go, but is it really worth the install?
I have been away from Blogger and blogging for quite a while now, but just recently heard about the official Blogger app for Android, well, there was one some few years back but it was a nightmare from what I remember.
The new app looks sleek, the design blends with the roundish material design of the latest Android UIs, and overall looks very, dull. Yes, while other Google apps, like Gmail, Messages etc. are pretty useful in the kind of design and layout they possess Blogger doesn't.
For a Blogging app the design is bland, features that should be there on a blogging app are missing. It looks more like a note keeping app. Of-course you get a mobile optimized writing experience but you can do pretty much the same thing by visiting Blogger.com on your mobile browser.
While I think the app is a good step for people who are more comfortable with using apps for most of their work, it still isn't enough to urge a person from not using the desktop version of the platform on their mobile browser - after-all you trade scale of the site for a lot of features you need on a blogging app.
Google needs to do a lot more work on the app to make it look, feel and work like a real Blogger app and less like a note keeping app.
I have been away from Blogger and blogging for quite a while now, but just recently heard about the official Blogger app for Android, well, there was one some few years back but it was a nightmare from what I remember.
The new app looks sleek, the design blends with the roundish material design of the latest Android UIs, and overall looks very, dull. Yes, while other Google apps, like Gmail, Messages etc. are pretty useful in the kind of design and layout they possess Blogger doesn't.
For a Blogging app the design is bland, features that should be there on a blogging app are missing. It looks more like a note keeping app. Of-course you get a mobile optimized writing experience but you can do pretty much the same thing by visiting Blogger.com on your mobile browser.
While I think the app is a good step for people who are more comfortable with using apps for most of their work, it still isn't enough to urge a person from not using the desktop version of the platform on their mobile browser - after-all you trade scale of the site for a lot of features you need on a blogging app.
Google needs to do a lot more work on the app to make it look, feel and work like a real Blogger app and less like a note keeping app.
Subscribe to:
Posts (Atom)