Our code is not working on shopify

akhilsaini · February 28, 2019, 11:35am

This code is working normally on local system but it it not working on shopify

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>


<style>.storeListWrapper{
	color:#000;margin-bottom:30px;margin-top:20px;display:inline-block;width:100%}
	.storeListWrapper>div{width:60%;float:left;box-sizing:border-box}
	.storeListWrapper>div.storeContent{width:40%}
	.storeListWrapper h2{font-size:24px;text-align:center;font-weight:700;text-transform:uppercase}
	.storeListWrapper h2 span{font-size:14px;display:block;font-weight:400;text-transform:capitalize}
	.storeicon{ no-repeat;width:28px;margin-bottom:8px;height:25px;display:block}
	.storeContent h2{font-size:24px;text-transform:uppercase;margin-bottom:10px;font-weight:700;text-align:left}
	.storeContent h2 span{font-size:18px;text-transform:capitalize;display:inline-block}.addressCol h3,.storeMenu a{text-transform:uppercase}
	.storeContent p{font-size:14px}.storeContent,.storeContent a{text-decoration:none;color:#000}.storeContent a{display:inline-block;vertical-align:middle;margin-top:10px}
	.discoverStore{border: solid 1px; padding:13px 33px;font-size:16px;margin-right:20px; no-repeat}.discoverStore+a{padding:12px 26px;font-size:24px;}.storeContent a:hover{color:#c6484f}
	.storeContent li{display:none}.storeContent li.active,.storeList a{display:block}.storeList{padding-right:20px}.storeList li{float:left;width:25%;padding-right:10px;box-sizing:border-box;position:relative}.storeList li.storeComming img{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.storeList li.storeComming:after{content:'Coming Soon..';color:#fff;font-size:20px;position:absolute;top:50%;width:100%;text-align:center;margin-top:-10px}
	.storeTag,.storeTag span{font-size:12px}.storeList a{position:relative;overflow:hidden}.storeList a:after,.storeTag{position:absolute;left:0;bottom:0}.storeList a:after{content:'';transition:all .2s;top:0;right:0;background:rgba(0,0,0,.3)}.storeList a img{width: 203px;
    height: 293px;display:block;transition:all .2s}.addressCol,.singleLocation,.storeGetDirection,.storeMenu,.storeMenu li a,.storeMenu ul,.storeTag strong,.storeTopTitlebar .storeicon{display:inline-block}.storeList li:hover img{transform:scale(1.4)}.storeList li.active a:after,.storeList li.active:hover a:after{opacity:0}.storeTag{z-index:1;text-align:center;width:100%;font-weight:700}.storeTag strong{color:#000;padding:3px 5px;box-sizing:border-box;text-align:left;width:100%;background:rgba(255,255,255,.9)}</style>
</head>

<body>
<div class="storeListWrapper">
	<h2>A Mayori store is now blossoming in these cities<span>Visit us for a modern bohemian experience now</span></h2>
	<div class="storeList"><ul><li class="storeOpen active"><a href=""><img src="https://cdnfr.vajor.com/pub/media/wysiwyg/stores/pune1.jpg">
							<div class="storeTag"><strong>Pune  <span style="display:block">The Pavillion</span></strong></div>
						</a>
					</li><li class="storeOpen"><a href=""><img src="https://cdnfr.vajor.com/pub/media/wysiwyg/stores/chennai1.jpg">
							<div class="storeTag"><strong>Chennai  <span style="display:block">Palladium</span></strong></div>
						</a>
					</li><li class="storeOpen"><a href=""><img src="https://cdnfr.vajor.com/pub/media/wysiwyg/stores/delhi3.jpg">
							<div class="storeTag"><strong>Delhi  <span style="display:block">Ambience, Vasant Kunj</span></strong></div>
						</a>
					</li><li class="storeOpen"><a href=""><img  src="https://cdnfr.vajor.com/pub/media/wysiwyg/stores/ban_hm.jpg">
							<div class="storeTag"><strong>Bengaluru  <span style="display:block">100 ft Road, Indiranagar</span></strong></div>
						</a>
					</li></ul></div>
	<div class="storeContent"><ul><li class="storeOpen active">
						<h2>
							<i class="storeicon"></i>
							Pune - <span>The Pavillion</span>
						</h2>
						<p>Our very first retail store in Pune welcomes you to a modern bohemian world of Clothing, Accessories &amp; Decor with a lively flavor indigenous to this city... Walk into a world of earthy charm infused with an effortless shopping experience.</p>
						<a href="http://maps.google.com/?saddr=My+Location&amp;daddr=18.53375,73.82982&amp;travelmode=bike" class="discoverStore" target="_blank">DISCOVER STORE</a>
						

					</li><li class="storeOpen">
						<h2>
							<i class="storeicon"></i>
							Chennai - <span>Palladium</span>
						</h2>
						<p>Bringing its modern bohemian presence to the fresh and green life of Chennai city, Mayori store houses the Clothing, Accessories &amp; Decor that will beautifully interlace with the charming and relaxed vibe of the city.</p>
						<a href="http://maps.google.com/?saddr=My+Location&amp;daddr=12.99295,80.21784&amp;travelmode=bike" class="discoverStore" target="_blank">DISCOVER STORE</a>
						

					</li><li class="storeOpen">
						<h2>
							<i class="storeicon"></i>
							Delhi - <span>Ambience, Vasant Kunj</span>
						</h2>
						<p>Bringing its modern bohemian presence to the fresh and green life of Delhi city, Mayori store houses the Clothing, Accessories &amp; Decor that will beautifully interlace with the charming and relaxed vibe of the city.</p>
						<a href="http://maps.google.com/?saddr=My+Location&amp;daddr=28.5412,77.15491&amp;travelmode=bike" class="discoverStore" target="_blank">DISCOVER STORE</a>
						
					</li><li class="storeOpen">
						<h2>
							<i class="storeicon"></i>
							Bengaluru - <span>100 ft Road, Indiranagar</span>
						</h2>
						<p>Bengaluru, the city that lives to the fullest and loves to the fullest (especially animals), now has a new address for their fashion &amp; lifestyle needs. Vajor, a modern bohemian brand opens doors to its store that houses effortless and meaningful clothing, accessories and decor. Drop by today and experience the world of Vajor today.</p>
						<a href="http://maps.google.com/?saddr=My+Location&amp;daddr=12.9773259,77.6406801&amp;travelmode=bike" class="discoverStore" target="_blank">DISCOVER STORE</a>
						
					</li></ul></div>
</div>
<script  type="text/javascript"  src="https://www.vajor.com/pub/static/frontend/Infortis/ultimo/en_US/requirejs/require.min.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script type="text/javascript">
        //<![CDATA[

        requirejs(['jquery'], function(jQuery) {
            jQuery(function($) {
            	$('.storeList li').mouseover(function(){
            		var inx = $(this).index();
            		$('.storeListWrapper li').removeClass('active');
            		$('.storeContent li:eq('+inx+')').addClass('active');
            		 $(this).addClass('active');
            	});
              
            });
        }); //end: requirejs
        //]]>
    </script>
</body>
</html>

alkapwn3d · February 28, 2019, 11:52am

what errors are you getting in the console?

akhilsaini · March 1, 2019, 9:13am

actually ajax query already included in theme.liquid {{’//ajax-googleapis-com/ajax/libs/jquery/2.2.4/jquery.min.js’ | script_tag }}

and we add also include code-jquery-com/jquery-3.3.1.js

so code is running but “cart ajax and popup” is not working and blank white page is coming some sections are hide

akhilsaini · March 1, 2019, 9:16am

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  {% include 'google-fonts' %}

<!-- Meta
================================================== -->
  <title>
    {{ page_title }}{% if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif %}{% if current_page != 1 %} &ndash; Page {{ current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
  </title>
  {% if page_description %}
    <meta name="description" content="{{ page_description | escape }}" />
  {% endif %}
  <link rel="canonical" href="{{ canonical_url }}" />
  {% include 'social-meta-tags' %}

<!-- CSS
================================================== -->
  {{ 'stylesheet.css' | asset_url | stylesheet_tag }}

<!-- JS
================================================== -->
  {{'//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' | script_tag }}
  {{ "//unpkg.com/eventemitter3@latest/umd/eventemitter3.min.js" | script_tag }}

  {% if settings.show_multiple_currencies %}
    {% include 'currencies' %}
  {% endif %}

  {{ 'theme.js' | asset_url | script_tag }}
  {{ 'option_selection.js' | shopify_asset_url | script_tag }}
  {{ 'jquery.instagram.js' | asset_url | script_tag }}
 
 {{ 'require.min.js' | asset_url | script_tag }}

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- Favicons
================================================== -->
  {% if settings.favicon %}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
  {% endif %}
  {% if template contains 'customers' %}
    {{ "shopify_common.js" | shopify_asset_url | script_tag }}
    {{ "customer_area.js"  | shopify_asset_url | script_tag }}
  {% endif %}

  {{ content_for_header }}

  <script type="text/javascript">
    $(window).load(function() {
      $('.collection-image').matchHeight();
    });
  </script>

</head>

<body class="gridlock shifter shifter-left {% if template contains 'product' %}product{% elsif template contains 'collection' %}collection{% else %}{{ template }}{% endif %}">
  {% section 'mobile-navigation' %}

  {% include 'timber-cart' %}

  <div class="shifter-page{% if settings.ajax_cart_method == 'drawer' %} is-moved-by-drawer{% endif %}" id="PageContainer">
    {% section 'header' %}

    {% include 'collection-banner' %}

    {% assign full_width_page = false %}
    {% if template == 'index' or template == 'blog' or template == 'article' or template contains 'collection.custom' or template contains 'list-collections' or template contains 'page.custom' %}
      {% assign full_width_page = true %}
    {% endif %}

    {% if template contains 'product' and settings.breadcrumb %}
      <div class="row">{% include 'breadcrumb' %}</div>
    {% endif %}
    <div id="content"{% unless full_width_page %} class="row"{% endunless %}>
      {% unless template contains 'product' %}
        {% if settings.breadcrumb and full_width_page == true %}
          <div class="row">{% include 'breadcrumb' %}</div>
        {% elsif settings.breadcrumb and full_width_page == false %}
          {% include 'breadcrumb' %}
        {% endif %}
      {% endunless %}
      {{ content_for_layout }}
     
      {% include 'store-design' %}     <!-- this is custom design    -->
    </div>

    {% section 'footer' %}

    {% if settings.popup %}
      {% include 'popup' %}
    {% endif %}

    {% if settings.show_notfication and settings.notification_position == 'fixed-bottom' -%}
      {% include 'notification' %}
    {% endif %}
  </div>

  {% if settings.ajax_cart_method == 'drawer' %}
    {{ 'handlebars.min.js' | asset_url | script_tag }}
    {% include 'ajax-cart-template' %}
    {{ 'ajax-cart.js' | asset_url | script_tag }}
    <script>
      jQuery(function($) {
        ajaxCart.init({
          formSelector: '.product_form',
          cartContainer: '#CartContainer',
          addToCartSelector: '.AddtoCart',
          cartCountSelector: '.cart-count',
          cartCostSelector: '.CartCost',
          moneyFormat: {{ shop.money_format | json }}
       });
      });
      jQuery('body').on('ajaxCart.afterCartLoad', function(evt, cart) {
        // Bind to 'ajaxCart.afterCartLoad' to run any javascript after the cart has loaded in the DOM
        timber.RightDrawer.open();
        Currency.convertAll(shopCurrency, Currency.currentCurrency);
      });
      {% if settings.show_multiple_currencies %}
        jQuery('body').on('ajaxCart.afterCartLoad', function(evt, cart) {
          // Convert currency when ajaxcart opens
          Currency.convertAll(shopCurrency, Currency.currentCurrency);
        });
      {% endif %}
    </script>
  {% endif %}

  <script type="text/javascript">
    //initiating jQuery
    jQuery(function($) {
      if ($(window).width() >= 981) {
        $(document).ready( function() {
          $('.header-wrapper').stickUp();
        });
      } else {
        $(document).ready( function() {
          $('header').stickUp();
        });
      }
    });
  </script>

  <!-- Responsive Images -->
  {{ 'ls.rias.min.js' | asset_url | script_tag }}
  {{ 'ls.bgset.min.js' | asset_url | script_tag }}
  {{ 'lazysizes.min.js' | asset_url | script_tag }}

  <script>
      document.documentElement.className =
         document.documentElement.className.replace("no-js","js");
  </script>
</body>
</html>