I am using Hyva UI components “Ajax ATC A” and “MiniCart A” in which “MiniCart A” is not working properly.
- First, I clicked the Add to Cart button to open the cart popup, and the product was correctly added to the mini cart.
- After I clicked on the mini cart icon and clicked on the updated qty and update button the product qty was updated correctly.
- And now I close the mini cart and click the add to cart button and the popup doesn’t open and the page reloads.
According to us “Ajax ATC A” and “MiniCart A” scripts are not working together in the Hyva theme.
Ajax Cart
<script>
updateItemQty(form) {
if (!form.action) return;
this.isLoading = true;
const action = form.action;
const formData = new FormData(form);
formData.append('form_key', hyva.getFormKey());
if (!formData.uenc) {
formData.append('uenc', hyva.getUenc());
}
console.log(formData)
fetch(action, {
body: formData,
method: 'POST',
mode: "cors",
credentials: "include"
}).then((result) => {
return result.text()
})
.then((content) => {
hyva.replaceDomElement('#maincontent', content);
})
.catch((error) => {
window.dispatchMessages && window.dispatchMessages([{
type: 'error',
text: '<?= $escaper->escapeJs(__("Something went wrong. Please try again.")) ?>'
}]);
}).finally(() => {
this.isLoading = false;
})
},
</script>
<form action="<?= $escaper->escapeUrl($block->getUrl('checkout/cart/updatePost')) ?>" x-data="{
initQty: cartItem.qty,
itemQty: cartItem.qty,
prevQty: cartItem.qty,
updateQty() {
const submitEvent = new Event('submit', { cancelable: true });
this.$root.dispatchEvent(submitEvent);
}
}" @submit.prevent="updateItemQty($event.target);" x-init="$watch('isLoading', isLoading => {
if (!isLoading) return;
initQty = itemQty;
prevQty = itemQty;
})" method="post" class="form form-cart flex gap-3">
<?= $block->getBlockHtml('formkey') ?>
<?php if ($miniCartOptionQtyStyle === "incrementor") : ?>
<button type="button" @click="itemQty <= 0 ? itemQty = 0 : itemQty--"
@click.debounce.1000ms="updateQty($event);"
class="btn p-3 rounded text-slate-900 bg-transparent hover:bg-slate-50 active:bg-slate-100 shadow-none">
<?= $heroicons->minusHtml('', 20, 20, ['aria-hidden' => 'true']); ?>
</button>
<?php endif; ?>
<label class="mb-0">
<span class="sr-only"><?= $escaper->escapeHtml(__('Qty')) ?></span>
<input type="number"
class="qty border-0 focus:border-0 focus:outline-none focus:border-greenhex shadow-none [-moz-appearance:textfield]
<?= $miniCartOptionQtyStyle === "select"
? 'form-select py-2.5 pr-7 pl-3.5 focus:bg-none [&::-webkit-list-button]:w-0 [&::-webkit-calendar-picker-indicator]:!hidden'
: 'form-input' ?>
<?= $miniCartOptionQtyStyle === "incrementor" ? 'w-16 text-center' : 'w-20' ?>
<?= $miniCartOptionQtyStyle === "select" || $miniCartOptionQtyStyle === "incrementor"
? '[&::-webkit-inner-spin-button]:hidden'
: 'hover:[-moz-appearance:auto] [&::-webkit-inner-spin-button]:invisible hover:[&::-webkit-inner-spin-button]:visible' ?>"
required min="0" step="any" x-model.number="itemQty" value="item.qty"
:id="`minicart-${cartItem.item_id}-qty`" :name="`cart[${cartItem.item_id}][qty]`"
<?php if ($miniCartOptionQtyStyle === "select") : ?> :placeholder="item.qty"
<?php endif; ?> <?php if ($miniCartOptionQtySaveAuto) : ?>
@change.debounce.1000ms="updateQty($event)" <?php endif; ?>
<?php if ($miniCartOptionQtyStyle === "select") : ?> list="minicart-autocomplete"
@focus="prevQty = itemQty; itemQty = null"
@blur="itemQty === null ? itemQty = prevQty : () => {}" <?php endif; ?>>
</label>
<?php if ($miniCartOptionQtyStyle === "incrementor") : ?>
<button type="button" @click="itemQty++" @click.debounce.1000ms="updateQty($event);"
class="btn p-3 rounded text-slate-900 bg-transparent hover:bg-slate-50 active:bg-slate-100 shadow-none">
<?= $heroicons->plusHtml('', 20, 20, ['aria-hidden' => 'true']); ?>
</button>
<?php endif; ?>
<?php if (!$miniCartOptionQtySaveAuto) : ?>
<button type="submit"
class="btn justify-center rounded-md w-full p-2 text-base shadow-none hover:shadow-lg active:shadow disabled:shadow-none transition bg-picker text-black border border-transparent hover:bg-picker active:bg-picker disabled:bg-slate-600 disabled:text-slate-50 disabled:opacity-70 disabled:invisible font-poppins-regular"
:disabled="itemQty === initQty || itemQty === null" :aria-label="hyva.str(
'<?= $escaper->escapeJs(__('Update qty for "%1"')) ?>',
cartItem.product_name
)">
<?= $escaper->escapeHtml(__('Update')) ?>
</button>
<?php endif; ?>
</form>
