Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

if you are currently using corvid buy wax then you probably already figured out that there is no code to detect scrolling so it makes you wonder how you could possibly code any functions that are controlled from a scrolling action one reason why developers would like to detect scrolling is to progressively load content on page scroll this means that the content will auto load as soon as the person starts scrolling most people don't like the buttons that say load more they prefer that their users avoid clicking extra buttons like load more for pagination numbers so that way they can scroll through the content infinite scrolling is a very popular I'm code Queen Ali and I'm going to show you how to make this totally codable if you're watching this tutorial on youtube please click on the video description and find the link to the tutorial site I'm on the homepage and I'm going to show you what I built all I did was connect more Peter to a data set and added a tiny bit of code now keep an eye on the very bottom of my page as I scroll down you're gonna see a small loading Jif as it loads more content ready did you see that I only have nine items let me refresh the page once again keep an eye at the bottom of the page here we go did you see it now pause the video go back just a little bit so you can see it or wait just one more second while I get into the editor and I'll show you what it looks like this is the home page I have a simple repeater acted to a data set and on the very bottom I have a strip that has a Jif I'm going to show you exactly how I created this and probably in under five minutes you can have one just like this now I've already duplicated a page so I'm going to go to my site menu and go to a copy of the home page of course it's missing some elements now because I want to walk you through the steps so you can get it working exactly the same way first I'm going to click on the plus sign and I'm going to go to lists and grids you can drag and drop any of these repeaters I'm going to use the top line but this time I'm not going to change the design I'm going to leave it as is I'm going to drag it and drop it to make sure it attaches to my strip because my page is built on different strips I'm going to take the bottom of the strip stretch it all the way up to the top you will click on the plus sign and you're going to scroll down and look for the word content manager you don't see the word content manager then you'll probably see the word database Wix recently updated their editor from here you're going to look through the different options and find the one that says data set click on the plus sign to add a data set to the page the example that we are using is by connecting it to a Wix stores you can use this tutorial method on any database that you've created yourself or you can use this method on any database collection that Wix automatically generates for you for example if I go down to the bottom in fact open up the site structure panel using the arrow at the very bottom corner I'll be able to see under database all the different databases that I have access to based on the Wix apps that I have installed on this site I can see that I'm connected to stores so I'm able to connect to these database collections I'm also connected to members and marketing so I'm going to be working on the Wix storage database back to the data set I'm going to click on the settings from connect a collection I'm going to look for stores and then go down to products from here it'll auto select read-only which is fine we only want to read for the number of items to display this is the number limit for the items that will auto load when your page is ready I'm gonna change that to 3 instead of 20 I can click out of there click on the X and the data set is configured now I'm gonna click on the repeater click on the database icon choose a data set there's my storage data set and I can connect most of the items from here I'm gonna click on the image image will be connected to the main media alt text I will connect it to the name tooltip I will connect it to the name and the links to will be connected to the product page URL if I scroll back up go back to all connections I can connect the next item I'm going to connect this to the name and scroll down the list and connect each one I am gonna connect the button and I want to connect it also to the product page URL I'm not done yet you still need to fill the bottom part so remember we build this on this trip but if you see here there's another strip underneath try to avoid moving your page manually do not adjust the height let the page auto adjust so that way there are no gaps on the page on the plus sign we're gonna go down to strip classic and click on one I'm going to move this strip up and move the other strip down notice that I am not manually adjusting the height of the page it is auto adjusting just by using these drag handles to push the elements up or down I'm going to push this one all the way up and I'm going to change the background to zero opacity from here I'm going to go into my media image my uploads and I can select a jiff now you don't have to have the jiff but that simulates the feeling that something is loading on the page so I definitely do recommend you use some type of gems and there's a lot of free ones online I'll have a link to my totally codable page so that way you can browse through the resources and try to find free gifs for now I'm going to select this red one I'm going to add it to the page I'm gonna make it a bit smaller and I'm going to attach it to the strip I'm going to open up the properties panel so you can right click select view properties and then when the properties panel opens for this jiff I'm going to click hidden on load I can change the name loading gif and for this strip I will change the name as well the loading master from here with the properties panel open I'm going to turn on the on view port enter enter this means as soon as this strip comes into view on the page I want the code to do something so let me get a copy of my code from the home page and let me paste it on that other page inside of the export function that got auto-generated when you've clicked on a view port enter I pasted the code I will drop a link in the tutorial description so you can copy and paste the code from my tutorial site we're going to change the code just a little bit the loading jiff I'm going to edit on the first line of the code for the data set just make sure that your dataset name matches what is on your page and then for the third line you're also going to put the name of your jiff now if you notice I am typing in a few letters and Wix is suggesting a couple of matches on the page if you click on one of those it'll autocomplete the code for you and that's it this is all the code that you need to make that lazy loading effect let's go ahead and save it and preview there we go did you see it load that time amazing right just a tiny bit of code at a very fancy design that hopefully you can use on your website remember if you have any questions please look us up on Facebook we are the totally codable largest corvid code group on facebook you can also visit totally codable com for other pieces of codes and other tutorials or if you still can't find your answers I am available for private tutoring follow this booking link on the tutorial side and it'll take you to my website to book a session with me I'm Coco Neely and this was another totally codable moment .

Video Discription

Learn how to auto load content on scroll to create a lazy loading effect on your Wix website using Corvid. Our example uses Wix Stores app to give our products index section a unique loading style that is very popular on websites such as AliExpress. This method allows the to page to progressively load content on page scroll instead of clicking a load more button or pagination element. This is a great method to create an infinite scroll effect if you have many items on a database so that you can save on load time but limiting the initial number of items to display and slowly load a little more at a time as the person scrolls down the page.

—————————————-

Links to tutorial site:
Link to Code:
Link to resources:
Link to GIF's: coming soon (check back later)

—————————————-

Join Facebook Group: www.facebook.com/groups/wixcode
Official YouTube Website: www.totallycodable.com
Facebook Page: www.facebook.com/codequeen
Code Snippets: support.totallycodable.com/tutorials
Official Partners Page: www.totallycodable.com/code-queen-partners
Contact Code Queen: www.codequeen.co/
Official Wix Corvid Forum:

——————–

Totally Codable Logo by:
Code Queen logo by:

Video Intro by: Code Queen

 

Leave a Reply