Skip to content

Commit e4f7337

Browse files
jissereitsmajissereitsma
committed
Add-to-cart for both PDP and PLP
1 parent d8e1e43 commit e4f7337

5 files changed

Lines changed: 128 additions & 0 deletions

File tree

‎view/frontend/layout/loki_theme_catalog_category_view.xml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0"?>
2+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
3+
<body>
4+
<referenceContainer name="before.body.end">
5+
<block name="loki.script.components.category.addtocart" template="Loki_Theme::script/components/category/addtocart.phtml"/>
6+
</referenceContainer>
7+
</body>
8+
</page>

‎view/frontend/layout/loki_theme_catalog_product_view.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0"?>
2+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
3+
<body>
4+
<referenceContainer name="before.body.end">
5+
<block name="loki.script.components.product.addtocart" template="Loki_Theme::script/components/product/addtocart.phtml"/>
6+
<block name="loki.script.components.tabs" template="Loki_Theme::script/components/tabs.phtml"/>
7+
</referenceContainer>
8+
</body>
9+
</page>

‎view/frontend/layout/loki_theme_default.xml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?xml version="1.0"?>
2+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
3+
<body>
4+
<referenceContainer name="before.body.end">
5+
<block name="loki.alpinejs" template="Loki_Theme::script/alpine-csp.phtml"/>
6+
7+
<block name="loki.script.variables" template="Loki_Theme::script/variables.phtml">
8+
<arguments>
9+
<argument name="form_key_value" xsi:type="object">Loki\Theme\ViewModel\FormKeyValue</argument>
10+
</arguments>
11+
</block>
12+
13+
<block name="loki.script.store.local-storage" template="Loki_Theme::script/store/local-storage.phtml"/>
14+
15+
<block name="loki.script.components.main-menu" template="Loki_Theme::script/components/main-menu.phtml"/>
16+
<block name="loki.script.components.newsletter" template="Loki_Theme::script/components/newsletter.phtml"/>
17+
<block name="loki.script.components.messages" template="Loki_Theme::script/components/messages.phtml"/>
18+
<block name="loki.script.components.minicart" template="Loki_Theme::script/components/minicart.phtml"/>
19+
</referenceContainer>
20+
21+
<referenceContainer name="minicart.addons">
22+
<block name="loki.minicart-contents" template="Loki_Theme::minicart.phtml"/>
23+
</referenceContainer>
24+
</body>
25+
</page>

‎view/frontend/templates/script/components/category/addtocart.phtml‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<?php
2+
declare(strict_types=1);
3+
4+
use Magento\Framework\View\Element\Template;
5+
6+
/** @var Template $block */
7+
?>
8+
<script>
9+
document.addEventListener('alpine:init', () => {
10+
const forms = document.querySelectorAll('[data-role="tocart-form"]');
11+
if (!forms) {
12+
return;
13+
}
14+
15+
Object.values(forms).forEach((form) => {
16+
const button = form.querySelector('button[type="submit"]');
17+
button.disabled = false;
18+
19+
form.addEventListener('submit', (e) => {
20+
e.preventDefault();
21+
22+
button.disabled = true;
23+
24+
const data = new FormData();
25+
data.append('product', form.querySelector('input[name="product"]').value);
26+
data.append('form_key', form.querySelector('input[name="form_key"]').value);
27+
28+
fetch(form.action, {
29+
method: 'POST',
30+
headers: {
31+
'X-Requested-With': 'XMLHttpRequest',
32+
'Content-Type': 'multipart/form-data; charset=UTF-8',
33+
},
34+
body: data
35+
}).finally(function () {
36+
Alpine.store('LumaLocalStorage').refresh('cart,messages');
37+
button.disabled = false;
38+
});
39+
});
40+
});
41+
});
42+
</script>

‎view/frontend/templates/script/components/product/addtocart.phtml‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<?php
2+
declare(strict_types=1);
3+
4+
use Magento\Framework\View\Element\Template;
5+
6+
/** @var Template $block */
7+
?>
8+
<script>
9+
document.addEventListener('alpine:init', () => {
10+
const form = document.getElementById('product_addtocart_form');
11+
if (!form) {
12+
return;
13+
}
14+
15+
const button = form.querySelector('button[type="submit"]');
16+
button.disabled = false;
17+
18+
form.addEventListener('submit', (e) => {
19+
button.disabled = true;
20+
21+
e.preventDefault();
22+
23+
const data = new FormData();
24+
data.append('product', form.querySelector('input[name="product"]').value);
25+
data.append('item', form.querySelector('input[name="item"]').value);
26+
data.append('qty', form.querySelector('input[name="qty"]').value);
27+
data.append('related_product', form.querySelector('input[name="related_product"]').value);
28+
data.append('selected_configurable_option', form.querySelector('input[name="selected_configurable_option"]').value);
29+
data.append('form_key', form.querySelector('input[name="form_key"]').value);
30+
31+
fetch(form.action, {
32+
method: 'POST',
33+
headers: {
34+
'X-Requested-With': 'XMLHttpRequest',
35+
'Content-Type': 'multipart/form-data; charset=UTF-8',
36+
},
37+
body: data
38+
}).finally(function () {
39+
Alpine.store('LumaLocalStorage').refresh('cart,messages');
40+
button.disabled = false;
41+
});
42+
});
43+
});
44+
</script>

0 commit comments

Comments
 (0)