ADD FAKE VIEWER IN SHOPIFY

 

-------------------------------------------------------------------------------------------------------------------

ADD FAKE VIEWER IN SHOPIFY

ReadMore:

https://youtu.be/dsJWROS4nP8

-------------------------------------------------------------------------------------------------------------------

STEP :0

ADD SNIPPET LINK recently-viewed.liquid  IN SECTION FOLDER FILE

product-template.liquid BEFORE DESCRIPTION DIV

{% include 'fake-viewer' %}

<div class="product-single__description rte">

-------------------------------------------------------------------------------------------------------------------

STEP :1

ADD SCHEMA CODE IN product-template.liquid BEFORE 

SETTINGS CLOSED DIV ]

-------------------------------------------------------------------------------------------------------------------

,
{
"type": "header",
"content": "Fake viewer"
},
{
"type": "checkbox",
"id": "fake_view_enable",
"label": "Enable",
"default": true
},
{
"type": "range",
"id": "fake_view_min",
"min": 10,
"max": 110,
"step": 1,
"label": "Min value",
"default": 12
},
{
"type": "range",
"id": "fake_view_max",
"min": 25,
"max": 125,
"step": 1,
"label": "Max value",
"default": 30
},
{
"type": "range",
"id": "fake_view_duration",
"min": 1,
"max": 20,
"step": 1,
"unit": "s",
"label": "Duration time",
"default": 3
},
{
"type": "text",
"id": "fake_view_text_prefix",
"label": "Pretext",
"default": "Currently there are "
},
{
"type": "text",
"id": "fake_view_text_suffix",
"label": "Subtext",
"default": " peoples are currently looking at this product"
}

]

-------------------------------------------------------------------------------------------------------------------

STEP :2

ADD SNIPPET fake-viewer.liquid IN SNIPPET FOLDER

-------------------------------------------------------------------------------------------------------------------

fake-viewer.liquid CODE

-------------------------------------------------------------------------------------------------------------------

<!-- CSS RIBBON CODE
https://css-tricks.com/snippets/css/ribbon/
https://devsnap.me/css-ribbons
https://uicookies.com/css-ribbons/
https://freefrontend.com/css-ribbons/ 
-->
<style>
span.js-fake-view.bg-theme.gradient-theme-vertical.p-1.px-2.text-white.d-inline-block {  
background-color: #25e22b;
border-style: solid;
border-color: Black;
color: BLack;
padding: 5px;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.ribbon {
font-size: 16px !important;
position: relative;
background: #ba89b6;
color: #fff;
text-align: center;
width: 120%;
}
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #986794;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #804f7c transparent transparent transparent;
bottom: -1em;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
</style>

{%- if section.settings.fake_view_enable -%}
<h1 class="ribbon">
<div class="fake-view py-4">
<span> {{section.settings.fake_view_text_prefix}}</span>
<span class="js-fake-view bg-theme gradient-theme-vertical p-1 px-2 text-white d-inline-block" data-min="{{section.settings.fake_view_min}}" data-max="{{section.settings.fake_view_max}}" data-duration="{{section.settings.fake_view_duration | times:1000}}"></span>
<span> {{section.settings.fake_view_text_suffix}}</span>
</div>
</h1>
{%- endif -%}

<script type="text/javascript">
//<![CDATA[
window.onload = function() {
/* ================SLATE ================ */
window.theme = window.theme || {};
theme.fakeViewer = function() {
var t = $(".js-fake-view")
, e = t.data("min")
, i = t.data("max")
, s = t.data("duration");
function a(e, i) {
var s = Math.floor(Math.random() * (i - e + 1) + e);
t.text(s)
}
void 0 !== e && void 0 !== i && (a(e, i),
setInterval(function() {
a(e, i)
}, s))
}(),
$(theme.init);
};
//]]>
</script>

-------------------------------------------------------------------------------------------------------------------

WE CAN WRITE ABOVE CODE IN product-template.liquid BY THIS WAY

under {% javascript %} tag and under window.theme

{% javascript %} {% endjavascript %} make javascript file 

<script id="sections-script" data-sections="product-template" defer="defer" src="//cdn.shopify.com/s/files/1/0042/9811/3117/t/161/compiled_assets/scripts.js?36091"></script>

-------------------------------------------------------------------------------------------------------------------

{% javascript %}

/* ================SLATE ================ */
window.theme = window.theme || {};
theme.fakeViewer = function() {
var t = $(".js-fake-view")
, e = t.data("min")
, i = t.data("max")
, s = t.data("duration");
function a(e, i) {
var s = Math.floor(Math.random() * (i - e + 1) + e);
t.text(s)
}
void 0 !== e && void 0 !== i && (a(e, i),
setInterval(function() {
a(e, i)
}, s))
}(),
$(theme.init);

{% endjavascript %}

-------------------------------------------------------------------------------------------------------------------

WE ALSO USE THIS CODE THEME2.JS.LIQUID

theme2.js.liquid

<script src="{{ 'theme2.js' | asset_url }}" defer="defer"></script>      

</head>

-------------------------------------------------------------------------------------------------------------------

theme.fakeViewer = function() {

var t = $(".js-fake-view")

, e = t.data("min")

, i = t.data("max")

, s = t.data("duration");

function a(e, i) {

var s = Math.floor(Math.random() * (i - e + 1) + e);

t.text(s)

}

void 0 !== e && void 0 !== i && (a(e, i),

setInterval(function() {

a(e, i)

}, s))

}(),

​

$(document).ready(function() {

var sections = new theme.Sections();

sections.register('Fakeviewer', theme.fakeViewer);

});

-------------------------------------------------------------------------------------------------------------------