Personalized checkout and custom promotions with Shopify Scripts
On the product page, I would like to show the Variant Metafield, I was able to do figure out how to get it in there using this:
{% for variant in product.variants %} {% if product.selected_or_first_available_variant.id == variant.id %} <strong>Only {{ variant.metafields.my_fields.quantity_by_color }} PCS are available in {{variant.title}}!</strong> {% endif %} {% endfor %} <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $(".no-js-hidden").on("click", function(){ var refreshint = setInterval(function(){ location.reload(); }, 1000); }); }); </script>
In this example, the person used it to update specific quantities of each variant (in case that is important). I changed it to my metafield and put this in a Custom Liquid block:
{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<strong>{{variant.title}}:</strong> <strong style="color:#CC2229;">{{ variant.metafields.my_fields.shipping_status }} </strong>
{% endif %}
{% endfor %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".no-js-hidden").on("click", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000); }); });
</script>
It works great but the only way to show it when you click on a different variant is to refresh the page which isn't intuitive - I would like it to change depending on what variant you click.
Thanks!
store is: https://detroit-bikes.myshopify.com/
Did you manage to resolve this?
I'm having a similar situation, but I don't mind if it is refreshing the page when variant is switched. My problem is that when I change the product quantity, it refreshes the page and sets the quantity's value to 1 again.
If you solved it, could you share your solution? Thanks.
Exact same issue can someone help please 🙂
In the global.js file you will find the functions that deal with updating parts of the page with eventListener.
In the example I'll show, let's pay attention to updating the SKU information, which I put to be shown just below the price on the product page.
Example:
renderProductInfo() {
fetch(
`${this.dataset.url}?variant=${this.currentVariant.id}§ion_id=${
this.dataset.originalSection
? this.dataset.originalSection
: this.dataset.section
}`
)
.then((response) => response.text())
.then((responseText) => {
const html = new DOMParser().parseFromString(responseText, "text/html");
const destination = document.getElementById(
`price-${this.dataset.section}`
);
const source = html.getElementById(
`price-${
this.dataset.originalSection
? this.dataset.originalSection
: this.dataset.section
}`
);
if (source && destination) destination.innerHTML = source.innerHTML;
const price = document.getElementById(`price-${this.dataset.section}`);
if (price) price.classList.remove("visibility-hidden");
const sku = document.getElementById(`sku-${this.dataset.section}`);
if (sku)
sku.classList.remove("visibility-hidden"), this.updateSku(html);
this.toggleAddButton(
!this.currentVariant.available,
window.variantStrings.soldOut
);
});
}
The function above, calls updateSku() to update its sku dynamically:
updateSku(html) {
const id = `sku-${this.dataset.section}`;
const destination = document.getElementById(id);
const source = html.getElementById(id);
if (source && destination) destination.innerHTML = source.innerHTML;
}
Following that logic you'll can do that kind of update without refreshing the entire page.
Same problem here. Would love a solution to this. What is the point of having variant metafields if they don't update when the variant is chosen?
Did someone found a solution for this?
Anyone has update on this? I'm using Expanse theme and have the same problem
I manage to show the variant, but the problem the page need to refresh
{% for variant in product.variants %}
<div class="variant__description" data-variant-id="{{variant.id}}" {% if product.selected_or_first_available_variant.id == variant.id %} style="display: block;" {% endif %}>
{% if variant.metafields.custom.variant_size %}
<p><span class="font-body-bold">Dimension:</span>{{ variant.metafields.custom.variant_size }}</p>
{% endif %}
{% if variant.metafields.custom.variant_cubage %}
<p><span class="font-body-bold">Cubage:</span>{{ variant.metafields.custom.variant_cubage }}</p>
{% endif %}
</div>
{%- endfor -%}
I found a great tutorial for how to do this by first placing a record of the variants in the product page (invisibly):
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024