FROM CACHE - en_header

Screen widht js and liquid integration

Neonail
Tourist
15 0 1

I know that liquid can't detect the screen width, but can i make something like that?

 

<script>
$(document).ready(function(){
var windowWidth = $(window).width();
if( windowWidth < 767 ){
{% assign MobileScreen = "YesMobileScreen" %}
}});
$(document).ready(function(){
var windowWidth = $(window).width();
if( windowWidth > 767 ){
{% assign MobileScreen2 = "NoMobileScreen" %}
}});
</script>

 

 

Replies 7 (7)
Akshay_V
Shopify Partner
438 16 58

@Neonail 

Yes, you can combine liquid and JS into the same function, but it is necessary that you JS file is supported liquid. It means your JS file extension must be filename.js.liquid.

Alternatively, you can assign you content to a JS variable and update it based on window width.

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal
Neonail
Tourist
15 0 1

I put the function in the main theme js file and i put a thing like this in my section but it doesn't work

[in the theme.js file ]
// detect the screen width
$(document).ready(function(){
var windowWidth = $window.innerWidth();
if( windowWidth < 767 ){
{% assign MobileScreen = "YesMobileScreen" %}
else {
{% assign MobileScreen = "NoMobileScreen" %}
}});


[In the liquid section]

 

{% if MobileScreen == "YesMobileScreen" %}           
            {%- render 'product-images',
              section_id: section_id,
              product: product,
              isModal: isModal,
              image_position: image_position,
              product_zoom_size: product_zoom_size,
              product_image_size: product_image_size,
              thumbnail_arrows: thumbnail_arrows,
              thumbnail_position: thumbnail_position,
              video_looping: video_looping,
              video_style: video_style
            -%}
{%- endif -%}
{% if MobileScreen == "NoMobileScreen" %}             
  {%- render 'product-images-2',
              section_id: section_id,
              product: product,
              isModal: isModal,
              image_position: image_position,
              product_zoom_size: product_zoom_size,
              product_image_size: product_image_size,
              thumbnail_arrows: thumbnail_arrows,
              thumbnail_position: thumbnail_position,
              video_looping: video_looping,
              video_style: video_style
            -%}        
{%- endif -%}

Akshay_V
Shopify Partner
438 16 58

@Neonail 

You can't combine theme.js file with any other section file. You are doing the wrong thing to use assign object. Furthermore, you just have to create two HTML blocks, inside 1st add desktop content and in 2nd block paste mobile content. Then using CSS to make is visible to particular screen. 

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal
Neonail
Tourist
15 0 1

I know this way but i have to render the whole product image gallery so in the css way the page will be heavy. 
And i have a problem with video because the double request make me hidden in mobile...

 

So it's impossible to do this?
read the width of the screen
assign a variable
create an if loop
insert a snippet inside
create an else loop
insert another snippet inside

Akshay_V
Shopify Partner
438 16 58

@Neonail 

As I said, you can't combine JS files with section file.

What you want to achieve for desktop and mobile by using screen width?

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal
Neonail
Tourist
15 0 1

I just want to use my theme product gallery for mobile, but use another for desktop. Just this.

Akshay_V
Shopify Partner
438 16 58

@Neonail 

I can understand, but there is no way to combine theme.js file with section file. Can you tell me what is a different between mobile gallery and desktop gallery?

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal