DIsplaying colour swatches makes slider disappear

Tourist
5 0 0

Hi all,

 

Quick note: I have inherited this workload from a previous dev who I cannot get ahold of. I'm the new dev who came in to fix things basically.

 

So the other day I was working on displaying the names of colour swatches when a user hovers their mouse above them. The solution to this ended up being quite simple, as there was a section in the code which he had commented out. Once I removed the comment, the colour swatches names displayed correctly again above the images.

But, once I did this, the slideshow that is on the homepage just disappeared. 

 

The code for the slider on the homepage is this(slider.liquid found in sections):

 

{% if settings.enable_wide_layout %}
  {%- assign max_width = 1280 -%}
{% else %}
  {%- assign max_width = 970 -%}
{% endif %}
{%- assign slide_width = max_width -%}

{% if section.blocks.size > 0 %}
  <div class="small--hide">
<!--     <div class="flexslider" id="flexslider--{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="slideshow-section" data-transition="{{ section.settings.slider_home_transition }}" data-autoplay="{{ section.settings.slider_home_auto }}" data-speed="{{ section.settings.slider_home_rate }}" data-show-dots="{{ section.settings.slider_home_show_dots }}"> -->
      <div class="flexslider" id="homeslider">
        <a href="/collections">
      <ul class="slides supports-js">
        {% for block in section.blocks %}
          {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

          {% if block.settings.image.width < max_width %}
            {%- assign slide_width = block.settings.image.width -%}
          {% endif %}
        
          {% if block.settings.image != blank %}
        
            <li id="slide--{{ block.id }}" data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }} style="background:url('{{ block.settings.image | img_url: '1920x1080' }}')">
             
              {% if block.settings.link != blank %}<a href="{{ block.settings.link }}" class="slide-link slide-link--{{ block.id }}">{% endif %}
              
<!--               <img class="lazyload{% unless forloop.first == true %} lazypreload{% endunless %}"
                     src="{{ block.settings.image | img_url: '300x300' }}"
                     data-src="{{ img_url }}"
                     data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
                     data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                     data-sizes="auto"
                     style="{% if slide_width <= max_width %}{%- assign min_width = slide_width | times: 1.0 | divided_by: max_width -%}{%- assign min_width = min_width | times: 100 -%}min-width: {{ min_width }}%; {% endif %}"
                     alt="{{ block.settings.image.alt | escape }}"> -->
           
            {% if block.settings.link != blank %} <div class="slider-text posi"> {{block.settings.text_1 }}</div>  </a>{% endif %}
            </li>
        
          {% else %}
            <li id="slide--{{ block.id }}" data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
              <span class="slide-link slide-link--{{ block.id }}">
                {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
              </span>
            </li>
          {% endif %}
        {% endfor %}
      </ul>
        </a>
      <noscript>
        {{ section.blocks[0].settings.image | img_url: '1280x', scale: 2 | img_tag: block.settings.image.alt }}
      </noscript>
    </div>
  </div>
{% endif %}
<script>
            $.fn.wrapInTag = function(opts) {

              var tag = opts.tag || 'strong',
                words = opts.words || [],
                regex = RegExp(words.join('|'), 'gi'),
                replacement = '<'+ tag +'>$&</'+ tag +'>';

            return this.html(function() {
              return $(this).text().replace(regex, replacement);
            });
          };

//           $('.slider-text').wrapInTag({
//             tag: '',
//             words: ['SHOP', 'NOW']
//           });
</script>
<!-- <script>
$(document).ready(function() {
	var s = $(".slider-text");
	var pos = s.position();					   
	$(window).scroll(function() {
		var windowpos = $(window).scrollTop();
		if ( windowpos <=$(document).height()*0.15) {
			s.addClass("stick");
		} else {
			s.removeClass("stick");	
		}
	});
});                                           
</script> -->
{% schema %}
  {
    "name": "Slideshow",
    "max_blocks": 6,
    "settings": [
      {
        "type": "checkbox",
        "id": "slider_home_auto",
        "label": "Auto-rotate slides"
      },
      {
        "type": "checkbox",
        "id": "slider_home_show_dots",
        "label": "Show slide indicator dots"
      },
      {
        "type": "select",
        "id": "slider_home_rate",
        "label": "Change slides every",
        "options": [
          {
            "value": "3000",
            "label": "3 seconds"
          },
          {
            "value": "4000",
            "label": "4 seconds"
          },
          {
            "value": "5000",
            "label": "5 seconds"
          },
          {
            "value": "7000",
            "label": "7 seconds"
          },
          {
            "value": "10000",
            "label": "10 seconds"
          },
          {
            "value": "15000",
            "label": "15 seconds"
          }
        ]
      },
      {
        "type": "select",
        "id": "slider_home_transition",
        "label": "Transition effect",
        "options": [
          {
            "value": "fade",
            "label": "Fade"
          },
          {
            "value": "slide",
            "label": "Slide"
          }
        ]
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link URL"
          },
          {
            "type": "text",
            "id": "text_1",
            "label": "Slider text"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Slideshow",
        "category": "Image",
        "settings": {
          "slider_home_auto": true,
          "slider_home_show_dots": false,
          "slider_home_rate": "7000",
          "slider_home_transition": "slide"
        },
        "blocks": [
          {
            "type": "image"
          },
          {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}

The code where I had to remove a comment to make the colour swatches display is this(swatch.liquid also found in snippets):

{% comment %}
  Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}

{% assign file_extension = 'png' %}

{% if swatch == blank %}
<div class="swatch error">
  <p>You must include the snippet swatch.liquid with the name of a product option.</p> 
  <p>Use: <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
  <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
</div>
{% else %}

{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}

{% for option in product.options %}
  {% if option == swatch %}
    {% assign found_option = true %}
    {% assign option_index = forloop.index0 %}
    <style>
      label[for="product-select-option-{{ option_index }}"] { display: none; }
      #product-select-option-{{ option_index }} { display: none; }
      #product-select-option-{{ option_index }} + .custom-style-select-box { display: none !important; }
    </style>
    <script>$(window).load(function() { $('.selector-wrapper:eq({{ option_index }})').hide(); });</script>
    {% assign downcased_option = swatch | downcase %}
    {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
      {% assign is_color = true %}
    {% endif %}
  {% endif %}
{% endfor %}

{% unless found_option %}
<div class="swatch error">
  <p>You included the snippet swatch.liquid with the name of a product option — <code>'{{ swatch }}'</code> — that does not belong to your product.</p>
  <p>Use <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
  <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
  <p><strong>This is case-sensitive!</strong> Do not put in <code>'color'</code> if your product option name is <code>'Color'</code>.</p>
</div>
{% else %}
<div class="swatch clearfix" data-option-index="{{ option_index }}">
  <div class="header">{{ swatch }}</div>
  {% assign values = '' %}
  {% for variant in product.variants %}
    {% assign value = variant.options[option_index] %}
    {% unless values contains value %}
      {% assign values = values | join: ',' %}
      {% assign values = values | append: ',' | append: value %} 
      {% assign values = values | split: ',' %}
      <div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
        {% if is_color %}
  <!-- <div class="tooltip">{{ value }}</div> -->
        {% endif %}
        <input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
        {% if is_color %}
        <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_url }})">
          <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" /> 
        </label>
        {% else %}
        <label for="swatch-{{ option_index }}-{{ value | handle }}">
          {{ value }}
          <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
        </label>
        {% endif %}
      </div>
    {% endunless %}
    {% if variant.available %}
    <script>
      jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
    </script>
    {% endif %}
  {% endfor %}
</div>

{% endunless %}

{% endif %}

The part that says:  <!-- <div class="tooltip">{{ value }}</div> --> is what was commented out.

 

So my question is, how can I make the names of the colour swatches display on hover, without making the slider on the homepage disappear?

 

The webpage is this: https://www.rowdybags.com

 

Any and all help/suggestions is greatly appreciated! :D

 

 

0 Likes