Hello, everyone. Yellow Web and today we're going to take a look at powerful script for your pads - Drewlex.The creator of this miracle is unknown, the script was found by me in sleepersThen I saw it in the prose of one of the famous PP, I assume that it was created by someone in the layout department of this PP, and then it was spread around the Internet. The author himself describes his creation as follows:
"A radically new product that exceeds the performance potential of an entire stack of layout designers."
Well, let's see if the functionality corresponds to such a loud statement!
Feature set
The script was slightly finalized: I added to it all sorts of features to protect against copying, which, although it was declared, but was not implemented. Well, and basic the set of functions is as follows:
- Blocking: context menu, save page, copy
- Inserting dynamic dates:
- minus 10 days from the current day (usually used to indicate the date of the article)
- For today's number
- for comments
- current year
- Facebook-style comments - likes, reposts, etc. buttons.
- Scroll smoothly to the desired part of the page
- Countdown timer
- Slider for pictures
The script also has a number of advanced capabilities:
- Roulette
- Automatic comments
- Pop-up bars to show that someone bought the product
- Adding an order form
Connecting
Let's deal with everything in order, starting with connecting the script to your pad:
Download the script itself and all additional files from GitHub, copy them to the folder of your pad, open the file index.html
spacers and in it add somewhere in the tag <head>
<script src='drewlex.js'></script>
Next, let's walk through the setup basic functions (you can take a peek: in the file example.php
there is a ready-made setup example).
Enabling copy protection
To enable protection inside a tag <head>
writing:<script>var mv_protect='on'</script>
After that the user will not be able to call the context menu, the key combination will be disabled Ctrl+S to save the page and you will lose the ability to highlight text.
Adding dynamic dates
It's easy with dates - add the item to your proclu in the right place div or span and specify an appropriate class for them:
<div class="mv_mdate"></div>
- for -10 days from the current date<div class="mv_tdate"></div>
- for the current datemv_rtdate
- for the date of comments. The trick is that if there is more than one comment, then each subsequent comment will have a larger date than the previous one:<div class="mv_tyear"></div>
- for the current year
Facebook-style comments
To add a fb-style comment block, create a <div class="”comments”"></div>
Inside it, add the necessary comments in the following form:
User name
Like
Repost
0
It will look like the previous screenshot above.
At the bottom of the comment block, you can add a form for the user to add a comment, and it will be added! It goes like this:
Comment:
Name:
The appearance of such a form:
Smooth scrolling
With smooth scrolling it's very simple: add a link element (i.e. tag <a>) class .scrollto and a href with the idi of the element you want to scroll to. For example: <a href="/en/”/#orderform”" class="”scrollto”">Buy</a>
Timer
Countdown timer is the most important thing for any website. To add it it's enough to create div with class mv_timer.<div class="”mv_timer”"></div>
By default, the timer counts the time until the end of the current day.
Slider
Slider - this is essentially a carousel, i.e. several pictures, between which you can switch with a swipe or mouse. It is added like this:
Creating multiple tags <div>
tagged <img>
inside, and then shove them all in <div class="”owl-carousel”">
For example:
We've got the basics sorted out and are gradually getting to the tastiest part, namely, the advanced functions of the script, which the author affectionately called "Chips": autocomments, popups, roulette, work with the form. Let's go!
Advanced Features
To turn on the "tricks", first we write in the right place of the page block <div class="features-wrapper"></div>
I usually add this block after the main pad text and before the comments block.
Next, we need to make settings. In a few words about them:
The settings block consists of 3 basic (mandatory) parameters and 5 additional modules.
The main ones are responsible for language, product and gender (e.g. EROGAN is male, BELLINDA is female, and FITOSPRAY is all) all 3 must be listed!
Additional modules are responsible for installing on page forms, autocomments, popups and roulette in any combination: form - just form, roulette - just roulette, form + roulette = form pops up after roulette rotation. Modules contain a set of unique settings, allowing you to more accurately fit the feature to the page. Unnecessary modules can be removed from settings not to take up space.
Drum roll! settings block (insert anywhere on the page):
.
initFeatures({
lang : 'ru', //list of available languages - vn,it,es,co,hr,en,de,fr,ph,cz,id,th,gr,bg,al,ro,sg,en_sg,mk,si,sk,lv,hu,pl,lt,pt
product : 'SPICE', //product name
genderTargeting : 'all', // gender of the target audience - all, male, female
form : {
isNeeded : 1, // 1-include form, 0-off
img: 'https://www.webrotate360.com/campaigns/360-product-view.gif', // the path to the product picture
price : true, // price bar
priceBrFix : true, // fixes the display of prices in the price tag (true - removes line break)
showSelect : false, // show or hide select field
untilExpire : 600 // timer for the end of the action where 600 = 10min. Set it to 0 if you don't need it.
},
autoComments : {
isNeeded : 1, // 1-include auto-comments, 0-disable
bgColor : '#d7f2d8' // comment block background color
},
popups : {
isNeeded : 1, // 1-turn pops on, 0-turns off
bgColor: 'rgba(87, 86, 141, 0.8)', // message background color
textColor : '#fff', // the color of the main text of the message
emphColor : 'cyan', // the color of the highlighting in messages (for example, 'XX% discount', '' )
blackIcons : false // black or white icons, values true or false
},
wheel : {
isNeeded : 1, // 1-include wheel, 0-off
customWheel : false // reference to your wheel, or false
}
});
</script>
In general, it is clear from the comments in the code what is responsible for what, but how can it all be applied? Easy. We specified such language, product name and gender of the audience and enabled, say, auto-commenting. And we have a new comment starting to appear on the page from time to time (from a large database embedded in the script in advance!) in the right language (!) from people of the right gender!
It's the same with popups.
And for dessert - roulette. After the roulette has scrolled and we "won" something, it is possible to show a picture of the product (it should be put in the img folder and named product.png) along with the order form + under the picture, if necessary, there will also be a timer:
If you need to insert additional fields into this form (for example, subs), see how it is done in example.php - the variable formApiCode.
I don't know about you, but I'm really impressed with the capabilities of the script, I give the author 10 out of 10 layout. Plug yourself in, figure out the features, increase the conversion!
Thank you for reading, and with you was Yellow Web, get on the plus side, gentlemen!
This script has one, quite a significant disadvantage that I noticed, because the form here is loaded through the js of the script in keitaro all their macros with additional fields, including subid transfer, will not be bound to the form
Not really, anything is possible in fact! check out the example.php file, I gave an example of a sub-transfer there.
It is certainly possible that it will work, I can not try unfortunately, I once tried to add these additional fields to the script is already loaded form and there macro did not change the value for some reason.
Well, yes, I also have long noticed this script and cleaned up for myself, very handy
It turns out that every time for the keytar macro sub1={subid1} to work, you have to write your own formApi:{
isNeeded: 1,
landingValue: 'cz1.predstavitnd.com'
In this parameter
landingValue: 'cz2.predstavitnd.com'
landingValue: 'cz3.predstavitnd.com', etc.
If so, it is inconvenient to enter this value every time.
That is, you can not do and bring to a common view, so that each time not to enter a new domain?
No one is stopping you from shoving just the current domain with a js-key instead of the stored value)
Уведомление: Increase the CR of the banding!
Your site displays an error from page 9 onwards.
https://yellowweb.top/page/9/
It's okay, it's nothing, I'll fix it...
The protection against downloading and copying text on the site does not work.
I copied all the files in the downloaded archive and put them in a folder with the tape, there's an index from Prokla, right?
or do I need to put the entire Drewlex.JS-main folder in the root of the proclamation?