CODEWITHSUNDEEP
jqueryurlhrefshopify
user992731
user992731

Reputation: 3520

join() or append to the end of a URL with jquery or javascript in Shopify Framework

I would like to add "+20-30" to the end of my URL below when clicking a button.

Currently I have: mydomain.com/collections/mens/white

I would like my URL to be mydomain.com/collections/mens/white+20-30

   <div class="clearfix filter">
            {% assign tags = 'White, Grey, Tan, Neutral, Blue, Black' | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %}
            <p>Filter Color</p>
             <div id="dd" class="mywrap-dropdown-2" tabindex="2">Select
                    <ul class="dropdowner" id="coll-filter">
                        <li><a href="">All</a></li>
                        {% for tag in tags %}
                      {% if current_tags contains tag %}
                      <li><a href="{{ tag | handle }}" class="selected">{{ tag }}</li>
                      {% elsif collection.all_tags contains tag %}
                      <li><a href="{{ tag | handle }}">{{ tag }}</li>
                      {% endif %}
                      {% endfor %}
                    </ul>
                </div>   
        </div>

jQuery:

 $('#coll-filter li a').on('click', function () {
  var newTags = [];
  jQuery('#coll-filter li a').each(function() { 
    if (jQuery(this).attr('href')) {
    newTags.push(jQuery(this).attr('href'));
  }
});
 if (newTags.length) {
   var query = newTags.join('+');
   var newhref = jQuery('{{ 'tag' | link_to_tag: 'tag'    }}').attr('href').replace('tag', query);
    jQuery(this).attr("href", newhref)
   } 
  else {
     {% if collection.handle %}
     window.location.href = '/collections/{{ collection.handle }}';
      {% elsif collection.products.first.type == collection.title %}
    window.location.href = '{{ collection.title | url_for_type }}';
     {% elsif collection.products.first.vendor == collection.title %}
    window.location.href = '{{ collection.title | url_for_vendor }}';
    {% endif %}

  }
 });

Upvotes: 0

Views: 1720

Answers (3)

Gavin Terrill
Gavin Terrill

Reputation: 1039

Take a look at http://wiki.shopify.com/Link_to_tag

This creates the url for you using liquid.

Upvotes: 0

RichardTheKiwi
RichardTheKiwi

Reputation: 107736

var newhefc = $(this).attr('href') + '+20-30';
$(this).attr('href', newhefc);

Or more directly:

$(this).attr( 'href', $(this).attr('href') + '+20-30' );

Looking at your edit, all else being equal and working, if you merely wanted to add a fixed string, it should be

jQuery(this).attr("href", newhref + '+20-30')

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

Assuming you're updating the href of a link:

$(this).attr('href', function(i,h) { return h + '+20-30'; });

Or, more simply:

this.href += '+20-30';

jQuery isn't always necessary, though it's important to remember that the jQuery method will return exactly what's found within the href attribute, whereas the native DOM approach (the second example) will return an absolute/'parsed' full URL.

(These examples include the explicit assumption that this (and therefore $(this)) reference the relevant a element of which you're trying to update the href attribute.)

Upvotes: 1

Related Questions