ktyr report

[WordPress]管理画面でjs,cssを読み込む

function add_admin_style()
{
    wp_enqueue_script('admin_script', get_template_directory_uri().'/scripts/admin.js');
    wp_enqueue_style('admin_style', get_template_directory_uri().'/style/admin.css');
}
add_action('admin_enqueue_scripts', 'add_admin_style');

[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 = "枠線を表示しない"

[WordPress]不要メニューを非表示

function custom_remove_menus()
{
    global $menu;
    /** 投稿 */
    remove_menu_page('edit.php');
    /** コメント */
    remove_menu_page('edit-comments.php');
}
add_action('admin_menu', 'custom_remove_menus');

[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 %}