Get URL Params

[techtinium_dev]

Hi team,

I would like to perform some business operation using URL search parameters. I could saw that earlier in request object, we could able to find the params like below

request.params.variant

Here, I can get the value for the parameter variant. Now I couldn't able to get this value. Is there any other alternative available since params property is not there for now. 

[sandyparihar07]

Hi @techtinium_dev I think you want to get full url with the parameters value then you can use this below code - 

{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
  {%- assign pageUrl = contentForQuerystring
    | split: '"pageurl":"'
    | last
    | split: '"'
    | first
    | split: '.myshopify.com'
    | last
    | replace: '\/', '/'
    | replace: '%20', ' '
    | replace: '\u0026', '&'
  -%}
  {% capture finalurl %}https://{{ pageUrl }}{% endcapture %}
  {{ finalurl }}

How to use this code? for this you can follow and click on it -  How to Get/Fetch Full URL in Shopify with Query String or Parameters

[PascalCortezVi]

Hi @techtinium_dev

I've found a very good solution myself for that.. 

1. Get URL Param(s) within the URL using JavaScript.

2. Send this value to the native and global cart attributes from Shopify

3. Assign the {{ cart.attributes.[value] }} to a custom liquid variable

et voilà! 😄

Example:

{% assign selectedAuthor = cart.attributes.selectedAuthor %}

<script type="text/javascript">
function getURLParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(window.location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

function updateCartAttribute(name, value) {
var formData = new FormData();
formData.append('attributes[' + name + ']', value);

fetch('/cart/update.js', {
method: 'POST',
body: formData
}).then(response => {
if (response.ok) {
console.log('Cart attribute updated');
window.location.href = window.location.pathname + '?author=' + encodeURIComponent(value);
} else {
console.error('Failed to update cart attribute');
}
});
}

function showAuthorContent() {
var content = document.querySelector('.custom-author-content');
if (content) {
content.style.display = 'block';
}
}

function checkAndUpdateCartAttribute() {
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
var currentAuthor = cart.attributes.selectedAuthor;
var authorParam = getURLParameter('author');

if (authorParam && authorParam !== currentAuthor) {
updateCartAttribute('selectedAuthor', authorParam);
} else if (!currentAuthor && authorParam) {
updateCartAttribute('selectedAuthor', authorParam);
} else {
// Show the content if the selectedAuthor is correctly set
showAuthorContent();
}
});
}

document.addEventListener('DOMContentLoaded', checkAndUpdateCartAttribute);
</script>