ADD RANDOM SELLING PRODUCT POPUP

-

 

----------------------------------------------------------------------------------------------------------------------
ADD RANDOM SELLING PRODUCT POPUP
Read More:
----------------------------------------------------------------------------------------------------------------------
theme.liquid
1) ADD THREE FILE LINKS BEFORE CONTENT HEADER
2)ADD SECTION LINK AFTER CONTENT LAYOUT 
----------------------------------------------------------------------------------------------------------------------
{{'RandomSellingProductPopUp.scss.css' | asset_url | stylesheet_tag }}
<script src="{{ 'https://code.jquery.com/jquery-3.5.0.min.js'}}"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
{{ content_for_header }}
    
{{ content_for_layout }}
{% if settings.ena_random_prod %}
{% include 'RandomSellingProductPopUp' %}
{% endif%}      
----------------------------------------------------------------------------------------------------------------------
CREATE SNIPPET >  RandomSellingProductPopUp.liquid
----------------------------------------------------------------------------------------------------------------------
{% if settings.ena_random_prod %}
{% if settings.best_product_collection != blank %}
<div class="popup_random_prod" style="{% if settings.lr_randomprod == "left" %} left: 40px; right: auto{% elsif settings.lr_randomprod == "right" %} left: auto ; right: 40px {% endif %}">
<div class="close_popup">
<span class="ti-close"></span>
</div>
<ul class="prod_sidebar">
{% assign col = settings.best_product_collection %}
{% for product in collections[col].products%}
<li class="product_info d-none">  
<div class="d-flex align-items-md-center align-items-start">
<div class="img_left">
<a href="{{ product.url | within: collection }}">
<img width="80" height="80" src="{{ product.featured_image.src | img_url: 'master' }}" class="img-responsive" alt="{{ product.featured_image.alt | escape }}">
</a>
</div>
<div class="info_right">
<p class="info_puchare"><span class="js-name"></span> in <span class="js-address"></span> purchased a </p>
<a class="product-title" href="{{ product.url | within: collection }}">{{ product.title |truncatewords: 8}}</a>
<div class="minute_random">About <span class="random_minute"></span> minutes ago</div>
</div>
</div>
</li>
{% endfor %}
</ul>
<div class="read_name">
{% assign name = settings.name_purchare | split: ", " %}
<ul class="d-none js-readname" data-max={{name.size}}>
{% for xxx in name %}
<li>{{xxx}}</li>
{% endfor %}
</ul>
</div>
<div class="read_address">
{% assign address = settings.address_purchare | split: ", " %}
<ul class="d-none js-readaddress" data-max={{address.size}}>
{% for address in address %}
<li>{{address}}</li>
{% endfor %}
</ul>
</div>
</div>
<script>
function random(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}
var max = $('.js-readname').attr('data-max')-1;
var text = $('.js-readname').children().eq(random(0,max)).text();
$('.js-name').text(text);
var max2 = $('.js-readaddress').attr('data-max')-1;
var text2 = $('.js-readaddress').children().eq(random(0,max2)).text();
$('.js-address').text(text2);
jQuery(document).ready(function($) { 
var dem = {{ collections[col].all_products_count }} - 1;
var initial2 = random(0,dem);
var count2 = initial2;
$( '.popup_random_prod' ).find('ul').children().eq(count2).removeClass('d-none');
var initial = random(1,60);
var count = initial;
var x = document.getElementsByClassName("random_minute");
x[count2].innerHTML = count;
});
jQuery(document).ready(function($) { 
setInterval(function() {
$('.popup_random_prod').addClass('hide_popup_random_prod');
}, 5000) 
$('.close_popup').on('click', function() {
$('.popup_random_prod').addClass('hide_popup_random_prod');
});
setInterval(function() {
$('.popup_random_prod').removeClass('hide_popup_random_prod');
var dem = {{ collections[col].all_products_count }} - 1;
var initial2 = random(0,dem);
var count2 = initial2;
$( '.popup_random_prod' ).find('ul').children().addClass('d-none');
$( '.popup_random_prod' ).find('ul').children().eq(count2).removeClass('d-none');
var initial = random(1,60);
var count = initial;
var x = document.getElementsByClassName("random_minute");
x[count2].innerHTML = count;
var max = $('.js-readname').attr('data-max')-1;
var text = $('.js-readname').children().eq(random(0,max)).text();
$('.js-name').text(text);
var max2 = $('.js-readaddress').attr('data-max')-1;
var text2 = $('.js-readaddress').children().eq(random(0,max2)).text();
$('.js-address').text(text2);
}, 10000)  
})  
</script>
{% endif %}
{% endif %}
----------------------------------------------------------------------------------------------------------------------
RandomSellingProductPopUp.scss.css
{{'RandomSellingProductPopUp.scss.css' | asset_url | stylesheet_tag }}
----------------------------------------------------------------------------------------------------------------------
.popup_random_prod {
visibility: visible;
opacity: 1;
transform: none;
transition: .8s;
position: fixed;
z-index: 9;
width: 500px;
max-width: 100%;
left: 40px;
padding: 20px 20px;
bottom: 40px;
font-size: 14px;
line-height: 28px;
min-width: inherit;
right: auto;
color: white;
background-color: #fff;
text-align: center;
border-radius: 5px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4); }
.popup_random_prod .close_popup {
color: #fff;
border-radius: 50%;
background: #000;
font-size: 7px;
font-weight: 600;
height: 20px;
width: 20px;
line-height: 20px;
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
transition: .3s; }
.popup_random_prod .prod_sidebar {
padding-left: 0;
margin-bottom: 0; }
.popup_random_prod .prod_sidebar .product_info {
overflow: hidden;
list-style: none;
position: relative; }
.popup_random_prod .prod_sidebar .product_info .img_left {
margin-right: 20px;
border: 2px solid #e5e5e5; }
.popup_random_prod .prod_sidebar .product_info .info_right {
text-align: left; }
.popup_random_prod .prod_sidebar .product_info .info_right .info_puchare {
font-size: 14px;
color: #868686;
font-weight: 500;
margin-bottom: 0;
line-height: 19px; }
.popup_random_prod .prod_sidebar .product_info .info_right .product-title {
font-family: Poppins;
font-size: 15px;
font-weight: 500;
color: #000; }
.popup_random_prod .prod_sidebar .product_info .info_right .product-title:hover {
color: #fb5858; }
.popup_random_prod .prod_sidebar .product_info .info_right .minute_random {
font-size: 14px;
color: #333333; }
.popup_random_prod .prod_sidebar .product_info .info_right .minute_random span {
color: #fb5858;
font-weight: 600; }
.hide_popup_random_prod {
visibility: hidden;
opacity: 0;
transform: translateY(-30px);
transition: .4s !important; }
.ti-close:before {
content: "\f00d"; /* NEED FONT FILE FOR CLOSE ICON */
font-family: 'FontAwesome';
font-style: normal; }
/* ========================================
bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css
======================================== */
.border-bottom {
border-bottom: 1px solid #dee2e6!important
}
.d-none {
display: none!important
}
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important
}
-------------------------------------------------------------------------------------------------------
 ADD CODE IN  Config >   settings_data.json
-------------------------------------------------------------------------------------------------------
//==========RandomSellingProductPopUpCodeStart==========//
"ena_random_prod": true,
"best_product_collection": "frontpage",
"name_purchare": "John Smith, Alex Telles, Chris Evans, Jack Hoob, James Laura, Daniel Packer",
"address_purchare": "North Caroline St, Herkimer NY 13350-Lynnway, Lynn MA 1905-State Route 3, Fulton NY 13069 Fairgrounds Memorial Pkwy, Ithaca NY 14850 Fairhaven Commons Way, Fairhaven MA 2719",
"lr_randomprod": "left",
"ena_popup_cookie": false,
"content_cookie": "This website uses cookies to ensure you get the best experience on our website.",
"color_background_fv1": "#3b3c41",
"color_title_fv1": "#fff",
"color_content_fv1": "#868686",
"color_border_bottom_top_fv1": "#434448",
"color_background_fv2": "#ffffff",
"color_title_fv2": "#000000",
"color_content_fv2": "#9a9a9a",
"color_border_bottom_top_fv2": "#dddddd",
"color_bordertop_fv3": "#e8e8e8",
"color_content_fv3": "#000",
"color_hover_content_fv3": "#2dbbf0",
"color_social_fv3": "#222222",
"color_bg_social_fv3": "#f2f2f2",
"color_background_fv4": "#f3f6fa",
"color_title_fv4": "#000",
"color_content_fv4": "#868686",
"color_bordercopyright_fv4": "#e8e8f2",
"color_hover_content_fv4": "#83b735",
"color_bgnewletter_fv4": "#2d2d2d",
"color_placehover_fv4": "#5e5e5e",
"color_background_fv5": "#333a3a",
"color_title_fv5": "#fff",
"color_content_fv5": "#9e9e9e",
"color_border_social_fv5": "#363636",
"color_social_fv5": "#000000",
"color_bordertop_fv6": "#e8e8e8",
"color_content_fv6": "#000000",
"color_hover_content_fv6": "#2dbbf0",
"color_social_fv6": "#000000",
"color_bg_social_fv6": "#000000",
"color_hover_social_fv6": "#fff",
"color_background_fv6": "#f6f6f6",
"color_title_fv6": "#000",
"color_bgsocial_fv6": "#333",
"color_border_center_fv6": "#dadada",
"color_copyright_fv6": "#a5a5a5",
"color_bg_fv3": "#f4f4f4",
"color_menu_fv3": "#333333",
"color_hover_menu_fv3": "#000",
"color_copyright_fv3": "#aaa9a9",
"color_social_ok_fv3": "#fff",
"color_bgsocial_fv3": "#222222",
"color_bgsocial_fv1": "#222",
"color_placehover_fv1": "#495057",
"color_bordertop_fv2": "#e5e5e5",
"color_border_fv2": "#e1e1e1",
"color_social_fv2": "#000",
"icon_mail_fv4": "icon-mail",
"enable_sticky_hdv1": true,
"hdv1_enable_absolute": false,
"hdv1_bg_header_normal": "#ffffff",
"hdv1_bg_header": "#fff",
"hdv1_color_text": "#000000",
"hdv2_bg_header": "#fff",
"hdv2_bg_header_sticky": "#ffffff",
"hdv2_color_text": "#1e1e1e",
"hdv3_bg_header_normal": "#ffffff",
"hdv3_bg_header_sticky": "#ffffff",
"hdv3_color_text": "#000000",
"hdv4_bg_header_normal": "#ffffff",
"hdv4_bg_header_sticky": "#ffffff",
"hdv4_color_text": "#000000",
"hdv5_bg_header_normal": "#ffffff",
"hdv5_bg_header_sticky": "#ffffff",
"hdv5_color_text": "#000000",
"hdv3_bg_header": "rgba(0,0,0,0)",
"hot_label_color": "#000000",
"hot_label_text_color": "#ffffff",
"sold_out_label_color": "#000000",
"sold_out_label_text_color": "#ffffff",
"body_color": "#ffffff",
"dark_color": "#000000",
"gray_color": "#555555",
"white_color": "#ffffff",
"primary_color": "#000000",
"sliver_color": "#999999",
"navi_color": "#1b2b3a",
"blue_color": "#43567e",
"smoke_color": "#cccccc",
"border_color": "#e5e5e5",
//==========RandomSellingProductPopUpCodeFinish==========//
----------------------------------------------------------------------------------







Comments

Post a Comment

Popular posts from this blog

ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY DEBUT THEME 5️⃣

-
Image
  ------------------------------------------------------------------------------------------------------------------------ ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY READ MORE https://youtu.be/acTT5_lkrCg https://stackoverflow.com/questions/45477730/ajax-jquery-autocomplete-in-search-box-shopify https://stackoverflow.com/questions/39593169/sorting-json-results-by-10-max-results DOWNLOAD: https://fbgadgets.myshopify.com/admin/files/0e841afc73cd3152ebf447feabe7abfa/theme_export__fbgadgets-myshopify-com-shopify-debut-theme__05JUL2022-0654am.zip/download ------------------------------------------------------------------------------------------------------------------------ 1) NEEDS JQUERY FILE WITHOUT ASYNC OR DEFFER IN LINK LIKE <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> --> OR CHANGE VENDOR JS FILE LINK IN  LAYOUT>THEME LIQUID FILE <script src="{{ 'vendor.js' | asset_url }}"></script> ...
Read more