Personalized checkout and custom promotions with Shopify Scripts
For some reason my javascript for my product-detail.liquid file won't render when in put in between the liquid tags
{% javascript %}
{% endjavascript %}
But the same code renders when i put between the HTML <script></script> tag in my product-detail.liquid section file. Can some one explain why this is?
Here is the product-detail.liquid file located in the sections directory:
<div class="small-container">
<div class="product-container">
<div class="row-2">
<div class="col-2">
<div class="img-container">
<img src="{{ product.images[0] | img_url: 'master' }}">
</div>
</div>
<div class="col-2 text">
<p class='product-title'>{{product.title}}</p>
<p class=product-price>{{product.price | money}}</p>
<div class="description">
<p>{{ product.description }}
</p>
<p class="inhoud">
100ML
</p>
</div>
{% form 'product', product, id: "add-to-cart"%}
<input type="hidden" id="id" name="id" value="{{ product.variants.first.id }}" />
<input type="hidden" id="quantity" min="1" type="number" id="quantity" name="quantity" value="1"/>
<div class="btn-wrap">
<button type="submit" class='btn' onClick="addItem('add-to-cart'); return false;">
in winkelmand
</button>
</div>
{% endform %}
</div>
</div>
</div>
</div>
<div class="other-products">
<div class="heading">
<p>Bekijk ook</p>
</div>
<div class="other-product">
<div class="row-3">
{% assign this_product = product %}
{% for single_product in collections.frontpage.products %}
{% if single_product == this_product %}
{% else %}
<div class="col-3">
<div class="other-product">
<div class="other-img-container">
<a href="{{ single_product.url }}">
<img src="{{ single_product.images[0] | img_url: 'master'}}">
</a>
</div>
<div class="other-description">
<p class="other-title">
{{ single_product.title }}
</p>
<p class=other-price>{{ single_product.price | money }}</p>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<script type="text/javascript">
function getCart(){
fetch('/cart.js', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
console.log(data.item_count)
document.querySelector('.bag-count').innerHTML = data.item_count;
})
.catch((error) => {
console.error('Error:', error);
});
};
function addItem(form_id){
let id = document.getElementById('id').value;
let quantity = document.getElementById('quantity').value;
let formData = {
'items': [{
'id': id,
'quantity': quantity
}]
};
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
getCart();
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
};
</script>
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025