implement flexslider in narrative theme

Highlighted
New Member
11 0 0

Hi,

 

I have tried to implement the flexsider plugin  (https://github.com/woocommerce/FlexSlider) into the narrative theme, the slider works fine however I tried to update the theme.js from the narative theme so when a variant is selected the slider goes to the corresponding variant.

 

I added the following code just below _toggleVariantImageHide function in theme.js

  _toggleVariantImageFlexslider: function(variant, $container) {
    if (!variant.featured_image && !this.product.featured_image) return;

    var image = variant.featured_image || this.product.featured_image.id;
    var id = image && image.id;
    var $images = $(selectors$12.variantImageFlexslider, $container);
    var $active = $images.filter('[data-id="' + id + '"]');
    var index = $active.index();
    
    $('#flexslider-variante-id').flexslider(index);
    
  },

I added data-variant-image-flexslider in selector$12 and called the function at the same place where the original toggleVariantImageHide was called.

 

I added the bottom lines in theme.liquid

 <script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>
<script src="{{ 'vendor.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>


<!-- flexsliderslider -->
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' | script_tag }}
<script src="{{ 'jquery.flexslider-min.js' | asset_url }}" defer="defer"></script>
{{ 'flexslider.scss.css' | asset_url | stylesheet_tag }}

and below the code related to the product featured image in the updated product-template2

  {% comment %}
  ------------------------------------------------------------------------------
  Product Featured Image
  ------------------------------------------------------------------------------
  {% endcomment %}
  
  
  
<!-- flex slider initialisation -->  
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
   directionNav: true,
   slideshow: false
});  
});
</script>

    {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

        {% assign max_height = 650 %}
        {% assign max_width = 980 %}
        {% assign max_aspect_ratio = 1.50769 %}

        {% comment %}
        We need to figure out the max width we want the image to be on the page
        based on the aspect ratio of the image and based on the size of the
        image.
        {% endcomment %}
  
                  {% if featured_image.aspect_ratio < max_aspect_ratio%}
                              {% if featured_image.height < max_height %}
                                {% assign max_width = featured_image.width | times: featured_image.aspect_ratio | round %}
                              {% else %}
                                {% assign max_width = max_height | times: featured_image.aspect_ratio | round %}
                              {% endif %}
                            {% else %}
                              {% if featured_image.width < max_width %}
                                {% assign max_width = featured_image.width %}
                              {% endif %}
                            {% endif %}  


        {% comment %}
        Create a container for the image that will never go wider than the
        max width we determined above, and that will keep the same aspect ratio
        of the image by using 'padding-top'.
        {% endcomment %}
  <div class="grid">
   <div class="grid__item medium-up--one-half">  
  		<div class="page-width page-width--no-gutter product__featured-container" >  
  			<div class="flexslider" style="max-width: {{ max_width }}px; " id="flexslider-variante-id">
    				<ul class="slides" style="padding-bottom: {{featured_image.aspect_ratio | times: 100.0}}%;" >
   					{% for image in product.images %}  
                      

                      
          				<li data-id="{{ image.id }}" data-variant-image-flexslider>
                          {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                          <img class="flexslider__image lazyload"
                          {% if featured_image == image %}src="{{ image | img_url: '300x'}}"{% endif %}
                          data-src="{{ img_url }}"
                          data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                          data-aspectratio="{{ image.aspect_ratio }}"
                          data-sizes="auto"
                          alt="{{ image.alt | escape }}"
                          data-variant-image>                      
          				</li> 
      				{% endfor %}
    				</ul>
			</div>  
  		</div>
  </div>

Link to the updated product page

https://nostressnomore.myshopify.com/products/massager-charging-mini-portable-massage-stickers-neck-...

 

- 1st issue: Changing the variants from the selector seems to work fine on computer. However when loading the page on chromedevtool straightaway with a mobile device simulation it is not working anymore. It works when loading the page first on computer and then switching to mobile device on chrome devtool. When I try on my cell phone it is not working...

 

link to the standard product page:

https://nostressnomore.myshopify.com/products/rose-quartz-roller-slimming-face-massager-lifting-tool...

 

- 2nd issue: I can't use the standard product template without getting an error when changing the variant, and I don't know how to fix it, may be boths items are linked.

 

I think it is because I don't have the flexslider class in my standard product-template and flexslider is not initialized.

 

Uncaught TypeError: Cannot read property 'flexAnimate' of undefined
at fe.fn.init.$.fn.flexslider (jquery.flexslider.js…03380471935632:1248)
at Section._toggleVariantImageFlexslider (theme.js?v=1029204…:3749)
at Section._updatedContainer (theme.js?v=1029204…:3640)
at Section.update (theme.js?v=1029204…:3597)
at HTMLDivElement.dispatch (vendor.min.js?v=1836258…:3)
at HTMLDivElement.g.handle (vendor.min.js?v=1836258…:3)

 

 

Weird thing is I am pretty sure it worked last thursday, I was away last week end and when I get back it doesn't work anymore!

 

Anyhelp would be much appreciated, thanks.

 

 

 

0 Likes
Highlighted
New Member
11 0 0

Anyone, please?

0 Likes
Highlighted
New Member
5 0 0

Hi,

 

Would you mine sharing how you edited the narrative product page to have the image on the left side and the product name / Add to cart / description on the right side?  Thanks

0 Likes
Highlighted
New Member
11 0 0

I suggest you follow the steps in this link https://medium.com/@pherkan/customize-the-product-page-of-the-narrative-theme-in-shopify-1c617cf7f76... which is what I did.

0 Likes
Highlighted
New Member
5 0 0
Thank you for the fast reply. I actually tried that tutorial but I have encountered a problem with it. The images are appearing on the left side of the screen, single filed, underneath one another with bullets. And on the right side the text is not centered. Based on the comments on that forum, I found some other people also had the same problem but I couldn't find any solutions.


0 Likes
Highlighted
New Member
11 0 0

Sure. I think it's because the code on the link needs some adjsutments. If I find the solution to my problem I will post my code, for the moment it is not satysfing.

0 Likes
Highlighted
New Member
11 0 0

I think I worked around it with:

  _toggleVariantImageFlexslider: function(variant, $container) {
    if (!variant.featured_image && !this.product.featured_image) return;

    var image = variant.featured_image || this.product.featured_image.id;
    var id = image && image.id;
    var $images = $(selectors$12.variantImageFlexslider, $container);
    var $active = $images.filter('[data-id="' + id + '"]');
    var index = $active.index();
    
    $active
    .css({"opacity":"1","z-index":"2"})
      .siblings()
     .css({"opacity":"0","z-index":"1"})
    
    $active
      .addClass(classes$11.flexActiveClasse)
      .siblings()
      .removeClass(classes$11.flexActiveClasse);    
    
    //$('#flexslider-variante-id').flexslider(index);
    	
    
  },  

I don't understand why the .flexslider was not working on mobile, if anyone has an idea, I would be interested to know the answer!

0 Likes
Highlighted
New Member
2 0 0

Hey man, I was wondering if you could share where you put that code at? Or even better possibly share your product page template code fully? 

Would be a ton of help, thanks in advance! 

0 Likes
Highlighted
New Member
2 0 0

Hey, did you ever find a fix to that?

0 Likes
Highlighted
New Member
11 0 0

Hi,

 

 

Well, to have the image changing when changing the variant, I eventually I just added:

 

<script type="text/javascript">
$(window).load(function() {

$('.flexslider').flexslider({
directionNav: true,
slideshow: false
});


{% if product.variants.size > 1 %}
$(function() { 
$('select.single-option-selector').change(function() { 
index = $('.single-option-selector option:selected').index(); 
$('.flexslider').flexslider(index);
});
}); 
{% endif %} 

});

</script>

at the end of my product liquid page. And I removed the script tag I had in my product-template section.

0 Likes