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
- 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:
- 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.
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.
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!
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.
User | Count |
---|---|
564 | |
215 | |
129 | |
83 | |
45 |