ktyr report

[Shopify][JavaScript]住所編集の国で都道府県更新

Liquid(HTML)

国<select name="address[country]" {% if form.country != blank %}data-default-label="{{ form.country }}{% else %}data-default="Japan{% endif %}">{{ country_option_tags }}</select><br>
都道府県<select name="address[province]" data-default-label="{{ form.province }}"></select>

JavaScript

document.querySelectorAll('[name="address[country]"]').forEach((elm,index)=>{
    elm.addEventListener('change',(e)=>{
        onChangeCountry(e);
    });
});
onChangeCountry(e){
    const option = e.target.querySelector('[value="'+e.target.value+'"]');
    const provinceSelect = e.target.form.querySelector('[name="address[province]"]');
    if(option && provinceSelect){
        let options = [];
        const provinces = JSON.parse(option.dataset['provinces']);
        provinces.forEach((province,index)=>{
            options.push('<option value="'+province[0]+'">'+province[1]+'</option>');
        });
        provinceSelect.innerHTML = options.join('');
    }
}

[JavaScript]ファイルサイズ取得

const options = {
   method  : "HEAD"
};
fetch(elm.href,options)
    .then((response)=>{
        if (!response.ok) {
            throw new Error();
        }
        return response;
    })
    .then((response)=>{
        const fileSize = response.headers.get("Content-Length");
        if(fileSize) {
            console.log(fileSize);
        }else{
            throw new Error();
        }
    })
    .catch((error)=>{
    });

[WordPress]MW WP Formの問い合わせデータ表示順指定カスタムフィールド追加

functions.phpに下記を追記

// カスタムフィールドボックス[問い合わせデータの表示順]
function add_mw_order_fields() {
    //add_meta_box(表示される入力ボックスのHTMLのID, ラベル, 表示する内容を作成する関数名, 投稿タイプ, 表示方法)
    add_meta_box( 'mw_order_setting', '問い合わせデータの表示順', 'insert_mw_order_fields', 'mw-wp-form', 'normal');
}
add_action('admin_menu', 'add_mw_order_fields');
// カスタムフィールドの入力エリア[問い合わせデータの表示順]
function insert_mw_order_fields() {
    global $post;
    echo '<div><input style="width: 100%;" type="text" name="mw_order" value="'.get_post_meta($post->ID, 'mw_order', true).'" size="50" placeholder=""/></div>';
}
// カスタムフィールドの値を保存[問い合わせデータの表示順]
function save_mw_order_fields( $post_id ) {
    if(!empty($_POST['mw_order'])){
        update_post_meta($post_id, 'mw_order', $_POST['mw_order'] );
    }else{
        delete_post_meta($post_id, 'mw_order');
    }
}
add_action('save_post', 'save_mw_order_fields');
// カスタムフィールドの値による問い合わせデータ表示順設定
function my_mwform_inquiry_data_columns( $columns ) {
    if(empty($_GET['post_type']) || strpos($_GET['post_type'],'mwf_') === false){
        return $columns;
    }
    $tmp = explode('_',$_GET['post_type']);
    if(count($tmp) < 2 || !is_numeric($tmp[1])) {
        return $columns;
    }
    $meta = get_post_meta($tmp[1],'mw_order',true);
    if (empty($meta)) {
        return $columns;
    }
    $order = explode(',',$meta);
    $result = [];
    foreach ($order as $key => $value){
        if(empty($value))continue;
        $result[$value] = $value;
    }
    return $result;
}
// フィルターフックの要否を判定し必要なら処理を設定する
if(!empty($_GET['post_type']) && strpos($_GET['post_type'],'mwf_') === 0){
    $tmp = explode('_',$_GET['post_type']);
    if(1 < count($tmp) && is_numeric($tmp[1])) {
        $meta = get_post_meta($tmp[1], 'mw_order',true);
        if (!empty($meta)) {
            add_filter('mwform_inquiry_data_columns-mwf_' . $tmp[1], 'my_mwform_inquiry_data_columns');
        }
    }
}

　
追加されたカスタムフィールドへnameをカンマ区切りで入力する。

[PHP]idiorm #8 save

$record = ORM::for_table($this->table_name)->where('id', $id)->find_one();
if(empty($record)){
    return false;
}
foreach ($data as $key => $value){
    $record->set($key,$value);
}
$result = $record->save();

[React][TypeScript]fetch

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import FetchData from './FetchData';

const importantTarget = ReactDOM.createRoot(
  document.querySelector(".notice .notice-inner") as HTMLElement
);
importantTarget.render(<FetchData wrapper=".notice" url="/notice/?mode=important" />);

　
FetchData.tsx

import { useEffect,useState } from "react";
import parse from "html-react-parser";

type params = {
    wrapper  : string;
    url      : string;
};
function FetchData(props:params){
    const {wrapper,url} = props;
    const [html, setHtml] = useState<string>("");
    const wrapperElm:HTMLElement | null = document.querySelector(wrapper);

    useEffect(() => {
        fetch(url)
        .then((response)=>{
            if (!response.ok) {
                throw new Error();
            }
            return response.text();
        })
        .then((text) => {
            if(text.replace(/\s/g,'')){
                setHtml(text);
                if(wrapperElm){
                    wrapperElm.classList.remove("hide");
                }
            }
        })
        .catch((error) => {

        });
    }, []);

    return <>{html == "" ? "" : parse(html)}</>;
};
FetchData.defaultProps = {
    wrapper  : '',
    url      : '',
};
export default FetchData;

[JavaScript]分割代入備忘録

const d = {
    firstName : 'John',
    lastName  : 'Smith'
};
const t = `I'm ${d.firstName} ${d.lastName}.`;

const {firstName,lastName} = d;
const {firstName:namae,lastName:myoji} = d;

const d = {
    lastName  : 'Smith'
};
const {firstName = 'Jeff',lastName} = d;
const t = `I'm ${firstName} ${lastName}.`;

const d = ['John','Smith'];
const [firstName,lastName] = d;
const t = `I'm ${firstName} ${lastName}.`;

[JavaScript]アロー関数備忘録

const f = (v) => {
    return v;
};
const f = v => {
    return v;
};
const f = (v1,v2) => v1 + v2;
const f = (v1,v2) => (
    {
        firstName : v1,
        lastName  : v2
    }
)
const f = (v = 5) => {
    return v;
};