Removing custom selector

Highlighted
New Member
1 0 0

Hi all, first question so please forgive me if this is the wrong spot or code formatting issues.

Our store has a drop down selector to choose a product color. This is not the built-in product variant and our code should only allow this selector to show up on one product type, called 'Climbing Holds'. In trying to fix another issue, I've somehow forced this custom selector to show up on EVERY product. Rolling the files back has not fixed the issue, and looking through the code it still seems like this should only show up on one type of product.

Here is an example of the page the color selector should not be showing up on.

I'm assuming the files that are to blame are our product.liquid template and a snippet called product-form-collection.liquid which I will drop the code for below. Any help getting this color selector removed from items besides the product type 'Climbing Holds' would be much appreciated!

 

product.liquid

{%- include 'bold-product' with product, hide_action: 'break', output: 'none' -%}
{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}
{% section 'related-products' %}

{% if collection %}
  <div class="full-width full-width--return-link" style="position: relative;z-index: 1000;">
    <a href="{{ collection.url }}" class="h1 return-link">
      {% include 'icon-arrow-thin-left' %}
      {{ 'products.product.collection_return' | t: collection: collection.title }}
    </a>
  </div>
{% endif %}

<script>
  // Override default values of shop.strings for each template.
  // Alternate product templates can change values of
  // add to cart button, sold out, and unavailable states here.
  window.productStrings = {
    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    soldOut: {{ 'products.product.sold_out' | t | json }},
    unavailable: {{ 'products.product.unavailable' | t | json }}
  }
  
  {% if product.tags contains 'flat-bolt' %}

  {% else %}
  	{% if product.type == 'Climbing Holds'%} 
      var $button = $('.product-form__cart-submit');

        $button.on('click', function(e) {
            console.log('clicked');

            if($(this).parent().parent().find('#colorSelector').length){
                var thisvariantID = $(this).attr('data-variant');
            }
            //put in else for other selectors for shirts and stuff?
            else{
                var thisvariantID = $(this).parent().parent().find('.product-form__cart-submit').attr('data-variant');

            }
            var color = $(this).parent().parent().find('#colorSelector').find('option:selected').val();

            var quantity = $(this).parent().parent().find('.product-form__item--quantity').find('#Quantity').val();

            var boltSKU = $('#hardware').attr('data-variant');

    // 		CartJS.addItem(boltSKU, quantity);

            if (color.indexOf("preference") !== -1) {
    	CartJS.addItem(thisvariantID, quantity);
    } else {
      
   CartJS.addItem(thisvariantID, quantity, {
          "Hold Color": color});
    }

        });
  		{% else %}
        var $button = $('.product-form__cart-submit');

        $button.on('click', function(e) {
            console.log('clicked');

            var thisvariantID = $('#ProductSelect-product-template').find('option:selected').val();
     
            var quantity = $('#Quantity').val();
            console.log('variantID: ' + thisvariantID);
            console.log('quan: ' + quantity);
            CartJS.addItem(thisvariantID, quantity);

        });
  		{% endif %}
  	{% endif %}
  
</script>

 

product-form-collection.liquid

 

{%- include 'bold-product' with product, hide_action: 'break', output: 'none' -%}
<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form" id="AddToCartForm">

          {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
            {% for option in product.options_with_values %}
              <div class="selector-wrapper js product-form__item">
                <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
                <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                  id="SingleOptionSelector-{{ forloop.index0 }}"
                  data-name="{{ option.name }}"
                  data-index="option{{ forloop.index }}">
                  {% for value in option.values %}
                    <option value="{{ value | escape }}"
                       {% assign index = forloop.index %} 
                       {% for variant in product.variants %}
                         {% if forloop.index == index %}
                              data-variant="{{ variant.id }}"
                         {% endif %}   
                       {% endfor %}    
                       {% if option.selected_value == value %} selected="selected" {% endif %}
                       
                            
                            >{{ value }}</option>
                  {% endfor %}
                </select>
              </div>
            {% endfor %}
          {% endunless %}
  
  {% if product.type == 'Climbing Holds'%}	
  	<div class="selector-wrapper js product-form__item">
  		  <label>Color</label>
  		  {% include "rc-color-options" %}
  		</div>
  {% endif %}
       
          <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
            {% for variant in product.variants %}
              <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
                {% if variant.available %}
                  {{ variant.title }}
                {% else %}
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                {% endif %}
              </option>
            {% endfor %}
          </select>
          <div class="product-form__item product-form__item--quantity">
            <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
            <input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input product-form__quantity">
          </div>
  <div class="rte product-single__description" style="width:100%;">
  {% if product.type == 'Climbing Holds'%}   
         <div id="addHardware" style="margin-top:10px;">
                  
            {% assign currentProduct = product.title %}
            
          		
           	<input type="checkbox" id="hardware-{{ product.handle }}" data-cart-toggle="{% for product in collections.bolts1.products %}{% if product.title contains currentProduct %}{% for variant in product.variants %}{{ variant.id }}{% assign BoltPrice = variant.price  | money %}{% endfor %}{% endif %}{% endfor %}{% for product in collections.bolts2.products %}{% if product.title contains currentProduct %}{% for variant in product.variants %}{{ variant.id }}{% assign BoltPrice = variant.price  | money %}{% endfor %}{% endif %}{% endfor %}{% for product in collections.bolts3.products %}{% if product.title contains currentProduct %}{% for variant in product.variants %}{{ variant.id }}{% assign BoltPrice = variant.price  | money %}{% endfor %}{% endif %}{% endfor %}{% for product in collections.bolts4.products %}{% if product.title contains currentProduct %}{% for variant in product.variants %}{{ variant.id }}{% assign BoltPrice = variant.price  | money %}{% endfor %}{% endif %}{% endfor %}{% for product in collections.bolts5.products %}{% if product.title contains currentProduct %}{% for variant in product.variants %}{{ variant.id }}{% assign BoltPrice = variant.price  | money %}{% endfor %}{% endif %}{% endfor %}"/>
            <label for="hardware-{{ product.handle }}" id="hardwareLabel"><span style="margin-left:10px;">Would you like to Add Hardware?(+{{ BoltPrice }})</span></label>
          </div>   
       {% endif %} 
  </div>
  
          <div class="product-form__item product-form__item--submit">
           {% if customer %} 
            <div 
              data-fancybox-href="#message-{{ product.id }}"
              name="add"
              id="AddToCart-{{ section.id }}"
              class="btn btn--full product-form__cart-submit"
              {% for variant in product.variants %}
                 data-variant="{{ variant.id }}"
              {% endfor %}   
              >
				Add to Cart
            </div>
                        

          {% else %}
               <br /><h4><a href="#" id="priceBlocker">Login or Create Account to Shop</a></h4>
          {% endif %}
        
          </div>
        </form>
        <div class="rte product-single__description" itemprop="description">
          {{ product.description }}
        </div>

 

0 Likes
Highlighted
Astronaut
1083 178 213

Shoot me an e-mail, I'll help you out. In this particular case it's much more work to guide you through than to fix it.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes