CODEWITHSUNDEEP
javascriptjquery
user3767554
user3767554

Reputation: 147

display specific div or content based on URL

I want to be able to display a div containing some content to be URL specific. So only show div on pages that contain specified URL, for example:

if URL is equal to any one of the following:

/makeup/face/foundation/compact-loose-powder/luminous-silk-compact-case/3614270283604.html
/makeup/face/foundation/liquid-foundation/designer-lift-foundation/3605521491268.html
/makeup/face/foundation/liquid-foundation/power-fabric-foundation/ww-00049-arm.html
/makeup/face/foundation/liquid-foundation/maestro-fusion-makeup/AP10123.html
/makeup/face/foundation/face-fabric/ww-00115-arm.html

Show the following div:

<div class="container-content">content</div>

else hide it.

I ave tried the following with no success:

 var paths = ['/makeup/face/foundation/compact-loose-powder/luminous-silk- 
 compact-case/3614270283604.html', '/makeup/face/foundation/compact-loose- 
 powder/luminous-silk-compact-case/3614270283604.html', '/makeup/face/foundation/liquid-foundation/power-fabric-foundation/ww-00049-arm.html', '/makeup/face/foundation/liquid-foundation/maestro-fusion-makeup/AP10123.html', '/makeup/face/foundation/face-fabric/ww-00115-arm.html'];
 $('.container-content').toggle(paths.indexOf(location.path) != -1);

Upvotes: 2

Views: 85

Answers (2)

Alice Girard
Alice Girard

Reputation: 2183

This no longer necessitate use of jQuery as the Liquid object request retrieve current path: https://help.shopify.com/en/themes/liquid/objects/request

So this should do the trick : 

{%- capture urls -%}
/makeup/face/foundation/compact-loose-powder/luminous-silk-compact-case/3614270283604.html, /makeup/face/foundation/liquid-foundation/designer-lift-foundation/3605521491268.html, /makeup/face/foundation/liquid-foundation/power-fabric-foundation/ww-00049-arm.html, /makeup/face/foundation/liquid-foundation/maestro-fusion-makeup/AP10123.html, /makeup/face/foundation/face-fabric/ww-00115-arm.html
{%- endcapture - %}

{% if urls contains request.path %}
<div class="container-content">content</div>
{% endif %}

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337704

You don't need regex for this. Place the local paths in to an array, then test to see if the current location matches any of those paths:

var paths = ['/en-us/mens/designers/brunello_cucinelli', '/en-us/mens/grooming', '/en-us/mens/shoes'];
$('.container-content').toggle(paths.indexOf(location.path) != -1);

Upvotes: 1

Related Questions