Skip to content

Statamic v6 #315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ryanmitchell merged 9 commits into from
Jan 29, 2026
Merged

Statamic v6 #315

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
98517bd
Drop v4, target v5 or v6
ryanmitchell Aug 15, 2025
b199c8f
update action
ryanmitchell Aug 15, 2025
8ebad49
Move to ui components
ryanmitchell Aug 22, 2025
b14297f
Update field types, switch to vite
ryanmitchell Aug 22, 2025
c842635
update js path
ryanmitchell Nov 4, 2025
90d87b9
use ui-stack
ryanmitchell Jan 21, 2026
356fc6c
don't need the padding anymore either. that's handled by statamic now.
duncanmcclean Jan 21, 2026
69f6d4a
update dependencies and tests
ryanmitchell Jan 29, 2026
b507697
update test runner
ryanmitchell Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .github/workflows/test.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ jobs:
strategy:
matrix:
os: [ubuntu-latest]
php: [8.2, 8.3]
laravel: [10.*, 11.*]
statamic: [^5.0]
php: [8.3, 8.4]
laravel: [11.*, 12.*]
statamic: [^5.0, ^6.0]
name: P${{ matrix.php }} - S${{ matrix.statamic }} - L${{ matrix.laravel }} - ubuntu-latest
steps:
- name: Checkout code
Expand Down
2 changes: 1 addition & 1 deletion composer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"require": {
"pixelfear/composer-dist-plugin": "^0.1",
"shopify/shopify-api": "^5.1",
"statamic/cms": "^4.56 || ^5.0"
"statamic/cms": "dev-master"
},
"require-dev": {
"jasonmccreary/laravel-test-assertions": "^2.0",
Expand Down
3 changes: 0 additions & 3 deletions mix-manifest.json
View file
Open in desktop

This file was deleted.

33 changes: 13 additions & 20 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,15 @@
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"cross-env": "^5.1",
"laravel-mix": "^5.0.0",
"vue": "^2.6.0",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"@shopify/storefront-api-client": "^1.0.2",
"axios": "^0.21.1"
}
"scripts": {
"dev": "vite build --watch",
"build": "vite build"
},
"dependencies": {
"@statamic/cms": "file:./vendor/statamic/cms/resources/dist-package",
"@shopify/storefront-api-client": "^1.0.2",
"axios": "^1.11.0"
},
"devDependencies": {
"laravel-vite-plugin": "^1.2.0",
"vite": "^6.3.4"
}
}
14 changes: 6 additions & 8 deletions resources/js/components/ImportButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="flex items-center">
<button type="button" class="btn-primary" @click="fetch()">Import All</button>
<p class="ml-2 text-sm" :class="messageColor" v-if="message">{{ message }}</p>
<ui-button type="button" @click="fetch()" :disabled="processing">{{ processing ? 'Please wait' : 'Run import' }}</ui-button>
<ui-error-message class="ml-2" v-if="message">{{ message }}</ui-error-message>
</div>
</template>

Expand All @@ -16,29 +16,27 @@ export default {
data() {
return {
message: null,
messageColor: 'text-black'
processing: false,
}
},

methods: {
fetch() {
this.message = 'working....'
this.messageColor = 'text-black'
this.message = '';
this.processing = true;

axios.get(this.url)
.then(res => {
console.log(res)
this.message = res.data.message
this.messageColor = 'text-green'

setTimeout(() => this.message = null, 3000)
})
.catch(err => {
this.message = 'Something went wrong. Please try again.'
this.messageColor = 'text-red'

setTimeout(() => this.message = null, 5000)
})
.finally(() => this.processing = false)
}
}
}
Expand Down
43 changes: 21 additions & 22 deletions resources/js/components/ImportProductButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
<template>
<template>
<form @submit.prevent="fetchProduct()" >
<p class="mb-1 max-w-sm"><v-select
placeholder="Select a product"
:options="products"
:get-option-key="(option) => option.product_id"
:get-option-label="(option) => option.title"
:searchable="true"
@input="input"
/></p>
<div class="mb-1 max-w-sm">
<ui-combobox
class="w-full"
clearable="true"
:label="__('Select a product')"
v-model="selectedProduct"
optionLabel="title"
:options="products"
optionValue="product_id"
searchable="true"
/>
</div>

<div class="flex items-center">
<button type="submit" class="btn-primary" >Import Product</button>
<p class="ml-2 text-sm" :class="messageColor" v-if="message">{{ message }}</p>
<ui-button type="button" @click="fetch()" :disabled="processing">{{ processing ? 'Please wait' : 'Import product' }}</ui-button>
<ui-error-message class="ml-2" v-if="message">{{ message }}</ui-error-message>
</div>
</form>
</template>
Expand All @@ -28,10 +32,10 @@ export default {

data() {
return {
products: [],
message: null,
messageColor: 'text-black',
selectedProduct: null
selectedProduct: null,
processing: false,
products: [],
}
},

Expand All @@ -47,25 +51,20 @@ export default {
})
},

input(value) {
this.selectedProduct = value
},

fetchProduct() {
this.message = 'working....'
this.messageColor = 'text-black'
this.message = '';
this.processing = true;

axios.get(`${this.url}?product=${this.selectedProduct.product_id}`)
.then(res => {
this.message = res.data.message
this.messageColor = 'text-green'

setTimeout(() => this.message = null, 3000)
}).catch(err => {
this.message = 'Something went wrong. Please try again.'
this.messageColor = 'text-red'
setTimeout(() => this.message = null, 5000)
})
.finally(() => this.processing = false)
}
}
}
Expand Down
20 changes: 10 additions & 10 deletions resources/js/components/VariantForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<template>
<stack name="Form Stack" :narrow="narrow" @closed="close">
<div class="h-full overflow-auto p-6 bg-gray-300">
<template>
<stack name="variant-form-stack" :narrow="narrow" @closed="close">
Copy link
Member

@duncanmcclean duncanmcclean Jan 21, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Heads up: we've made some changes to the Stack component recently in statamic/cms#13350.

You'll likely need to change this to something like:

Suggested change
<stack name="variant-form-stack" :narrow="narrow" @closed="close">
<ui-stack :open="true" :size="narrow ? 'narrow' : null" @update:open="close">

You also don't need the <header> anymore as we give you an "x" button for free now.

<div class="h-full overflow-auto p-6 bg-white">
<header class="-mt-2 mb-3 flex justify-end">
<button type="button" class="btn-close" @click="close">×</button>
</header>
<publish-form
name="Form Stack publish form"
<ui-publish-form
name="variant-publish-form"
:title="title"
:action="action"
:method="method"
:submit-url="action"
:submit-method="method"
:blueprint="blueprint"
:meta="meta"
:values="values"
:initial-meta="meta"
:initial-values="values"
@saved="saved"
class="max-w-3xl mx-auto"
>
</publish-form>
</ui-publish-form>
</div>
</stack>
</template>
Expand Down
6 changes: 3 additions & 3 deletions resources/js/cp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Variants from './fieldtypes/Variants.vue'
import DisabledText from './fieldtypes/DisabledText.vue'
import ImportProductButton from './components/ImportProductButton'
import ImportButton from './components/ImportButton'
import ImportProductButton from './components/ImportProductButton.vue'
import ImportButton from './components/ImportButton.vue'

Statamic.booting(() => {
Statamic.$components.register('variants-fieldtype', Variants)
Expand All @@ -10,4 +10,4 @@ Statamic.booting(() => {
// Dashboard Stuff
Statamic.$components.register('shopify-import-product-button', ImportProductButton)
Statamic.$components.register('shopify-import-button', ImportButton)
})
});
7 changes: 6 additions & 1 deletion resources/js/fieldtypes/DisabledText.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
<template>
<div>
<input type="text" :value="value" class="input-text" disabled />
<ui-input
:value="value"
disabled
/>
</div>
</template>

<script>
import { FieldtypeMixin as Fieldtype } from '@statamic/cms';

export default {
mixins: [Fieldtype],
};
Expand Down
80 changes: 40 additions & 40 deletions resources/js/fieldtypes/Variants.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,53 @@
<template>
<div class="flex">
<section class="flex-grow border rounded">
<table class="data-table" v-if="variants">
<thead>
<tr>
<th>Title</th>
<th>SKU</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr v-for="(variant, index) in variants" :key="index" class="cursor-pointer" @click="openEditVariantStack(variant)">
<td class="text-base">
{{ variant.title }}
</td>
<td class="text-sm">
{{ variant.sku }}
</td>
<td class="text-sm">
{{ currencyFormat(variant.price) }}
</td>
<td class="text-sm">
{{ variant.inventory_quantity }}
</td>
</tr>
</tbody>
</table>
<p v-else class="p-1 text-sm">To get started, add some variants to products in Shopify.</p>
</section>
<ui-table class="w-full" v-if="variants">
<ui-table-columns>
<ui-table-column>{{ __('Title') }}</ui-table-column>
<ui-table-column>{{ __('SKU') }}</ui-table-column>
<ui-table-column>{{ __('Price') }}</ui-table-column>
<ui-table-column>{{ __('Stock') }}</ui-table-column>
<ui-table-column></ui-table-column>
</ui-table-columns>
<ui-table-row v-for="(variant, index) in variants" :key="index">
<ui-table-cell>
{{ variant.title }}
</ui-table-cell>
<ui-table-cell>
{{ variant.sku }}
</ui-table-cell>
<ui-table-cell>
{{ currencyFormat(variant.price) }}
</ui-table-cell>
<ui-table-cell>
{{ variant.inventory_quantity }}
</ui-table-cell>
<ui-table-cell>
<ui-button @click="openEditVariantStack(variant)" size="sm">Edit</ui-button>
</ui-table-cell>
</ui-table-row>
</ui-table>

<ui-description v-else>To get started, add some variants to products in Shopify.</ui-description>

<variant-form
name="variant stack"
v-if="showVariantStack"
:action="stackAction"
title="Edit Variant"
:blueprint="variantBlueprint"
:meta="variantMeta"
:method="stackMethod"
:values="stackValues"
@closed="showVariantStack = false"
@saved="closeVariantStack"
name="variant stack"
v-if="showVariantStack"
:action="stackAction"
title="Edit Variant"
:blueprint="variantBlueprint"
:meta="variantMeta"
:method="stackMethod"
:values="stackValues"
@closed="showVariantStack = false"
@saved="closeVariantStack"
/>
</div>
</template>

<script>
import axios from 'axios'
import VariantForm from '../components/VariantForm'
import { FieldtypeMixin as Fieldtype } from '@statamic/cms';
import VariantForm from '../components/VariantForm.vue'

export default {
mixins: [Fieldtype],
Expand Down
Loading
Loading