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.
