[Shopify]Checkout UI Extensionで設定項目の値を取得
const { banner_status } = useSettings();
[Shopify]Checkout UI Extensionの設定項目をセレクトボックスにする
Checkout UI Extensionのshopify.extension.toml
[[extensions.settings.fields]] key = "banner_status" type = "single_line_text_field" name = "バナーの状態" [[extensions.settings.fields.validations]] name = "choices" value = '["info", "success","warning","critical"]'
[JavaScript]useAppMetafields
let j,productId;
const cartLines = useCartLines();
const appMetafields = useAppMetafields();
if(appMetafields.length){
cartLines.forEach((cartLine,i)=>{
productId = cartLine.merchandise.product.id.split("/").pop();
for(j=0;j<appMetafields.length;j++){
if(appMetafields[j].target.id === productId){
if(appMetafields[j].metafield.key === "metafieldKey" && appMetafields[j].metafield.value === "metafieldValue"){
//処理
}
break;
}
}
});
}
[Shopify][React]カスタムアプリでViewを表示する
import {
View,
Text,
useSettings,
reactExtension,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension("purchase.checkout.block.render", () => (
<Extension />
));
function Extension() {
const { title,left,border } = useSettings();
const _title = title ? title : 'タイトル';
const _left = left ? "start" : "center"
const _border = border ? "none" : "base"
return (
<View display="block" padding="base" border={_border} cornerRadius="base" inlineAlignment={_left}>
<Text size="base" emphasis="bold">{_title}</Text>
</View>
);
}
shopify.extension.tomlに追記
[extensions.settings] [[extensions.settings.fields]] key = "title" type = "single_line_text_field" name = "表示する文言" description = "表示する文言を入力してください" [[extensions.settings.fields]] key = "left" type = "boolean" name = "テキストを左寄せにする" [[extensions.settings.fields]] key = "border" type = "boolean" name = "枠線を表示しない"
[Shopify][React]カスタムアプリでBannerを表示する
Checkout.jsx
import {
Banner,
TextBlock,
reactExtension,
useSettings,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension("purchase.checkout.block.render", () => (
<Extension />
));
function Extension() {
const { title,desc,banner_status } = useSettings();
const _title = title ? title : '';
const _desc = desc ? desc : '';
const _banner_status = banner_status ? banner_status : 'warning';
const descs = _desc.split("\n").map((item,i)=>{
return <TextBlock size="base" appearance={_banner_status}>{item}</TextBlock>
});
return (
<Banner title={_title} status={_banner_status}>
{descs}
</Banner>
);
}
shopify.extension.tomlに追記
[extensions.settings] [[extensions.settings.fields]] key = "title" type = "single_line_text_field" name = "表示するタイトル" description = "表示するタイトルを入力してください" [[extensions.settings.fields]] key = "desc" type = "multi_line_text_field" name = "表示する文言" description = "表示する文言を入力してください" [[extensions.settings.fields]] key = "banner_status" type = "single_line_text_field" name = "バナーの状態" [[extensions.settings.fields.validations]] name = "choices" value = '["info", "success","warning","critical"]'
[Shopify][React]カスタムアプリでCart.attributesを表示する
import {
View,
Text,
Grid,
GridItem,
Link,
Divider,
useApi,
useAttributeValues,
useSettings,
reactExtension,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension("purchase.checkout.block.render", () => (
<Extension />
));
function Extension() {
const { attributes_lines,hide_empty,hide_edit } = useSettings();
const attributeKeys = attributes_lines ? attributes_lines.split("\n") : [];
if(!attributeKeys.length){
return '';
}
let i,j,tmp;
let key,value;
/* 指定キーのattributeを表示 */
const attributeValues = attributeKeys.length ? useAttributeValues(attributeKeys) : [];
const { shop } = useApi();
const cartUrl = shop.storefrontUrl.replace(/\/$/,'') + '/cart';
const rowSpan = attributeKeys.length + 1;
let rows = [];
let attributeKeysIndexList = [];
for (i=0;i<attributeKeys.length;i++) {
value = i < attributeValues.length ? attributeValues[i] : ' ';
if(value){
if(!hide_empty || (hide_empty && value.replace(/[ ]+/g,'') != '')){
attributeKeysIndexList.push(i);
}
}
}
for (j=0;j<attributeKeysIndexList.length;j++) {
i = attributeKeysIndexList[j];
/* ラベル */
key = attributeKeys[i];
tmp = attributesAltLineKeyValues.find((elm) => elm[0] == key);
if(tmp && 1 < tmp.length && tmp[1]){
key = tmp[1];
}
/* 値 */
value = i < attributeValues.length ? attributeValues[i] : ' ';
rows.push(<View border="none" padding="base" key={`${j}_key`}><Text size="base">{key}</Text></View>);
rows.push(<View border="none" padding="base" key={`${j}_value`}><Text size="base">{value}</Text></View>);
if(j < 1 && !hide_edit){
rows.push(
<GridItem rowSpan={rowSpan} spacing="base" key={`${j}_griditem`}>
<View border="none" padding="base" key={`${j}_grid`}>
<Link to={cartUrl} padding="none">変更</Link>
</View>
</GridItem>
);
}
if(1 < attributeKeysIndexList.length && j < attributeKeysIndexList.length-1){
rows.push(
<GridItem columnSpan={2} key={`${j}_divider`}>
<Divider></Divider>
</GridItem>
);
}
}
let gridColumns = hide_edit ? ['auto', 'fill'] : ['auto', 'fill', 'auto'];
let gridRows = [];
for(i=0;i<attributeKeysIndexList.length+(attributeKeysIndexList.length-1);i++){
gridRows.push('auto');
}
return (
<Grid
border="base"
cornerRadius='base'
padding='none'
columns={gridColumns}
rows={gridRows}
>
{rows}
</Grid>
);
}
shopify.extension.toml
[extensions.settings] [[extensions.settings.fields]] key = "attributes_lines" type = "multi_line_text_field" name = "表示するattribute.key" description = "" [[extensions.settings.fields]] key = "hide_attributes" type = "multi_line_text_field" name = "非表示条件のcart.attributesのキー:値" description = "" [[extensions.settings.fields]] key = "hide_empty" type = "boolean" name = "値が空欄の項目を表示しない" [[extensions.settings.fields]] key = "hide_edit" type = "boolean" name = "変更リンクを表示しない"
[Liquid]在庫判定
{% if variant.inventory_management == blank or variant.inventory_policy == "continue" or 0 < variant.inventory_quantity %}
//在庫を追跡しないor在庫切れでも販売を続けるor在庫あり
{% else %}
//在庫なし
{% endif %}
[Liquid]3日後の日付を算出する
assign interval_seconds = 3 | times: 24 | times: 60 | times: 60 assign target_seconds = 'now' | date:'%s' | plus:interval_seconds
{{ target_seconds | date:'%Y/%m/%d' }}
[JavaScript]ShopifyCartAPIを叩く(update.js)
let sendData = {
updates : {}
};
this.deleteItems.forEach((item,index)=>{
sendData.updates[item.key] = 0;
});
let options = {
method : 'POST',
credentials: 'same-origin',
headers : {
'Content-Type': 'application/json'
},
body : JSON.stringify(sendData)
};
fetch(window.Shopify.routes.root+'cart/update.js',options)
.then((response)=>{
if (!response.ok) {
throw new Error();
}
return response.json;
})
.then((json)=>{
this.finishFetch(2);
})
.catch((error)=>{
console.log(error);
});
[JavaScript]ShopifyCartAPIを叩く(change.js)
let sendData = {
id : item.key,
quantity : item.quantity,
properties : {}
};
item.properties.forEach((property,index)=>{
sendData.properties['プロパティ'+(index+1)] = property.value;
});
let options = {
method : 'POST',
credentials : 'same-origin',
headers : {
'Content-Type' : 'application/json'
},
body : JSON.stringify(sendData)
};
fetch(window.Shopify.routes.root+'cart/change.js',options)
.then((response)=>{
if (!response.ok) {
throw new Error();
}
return response.json;
})
.then((json)=>{
this.finishFetch();
})
.catch((error)=>{
console.log(error);
});