Snippets Collections
defineProps({
    leaves: {
        type: [],
    },
    fields: {
        type: ["Name", "Date From ", "Date To", "Status"],
    },
});
<ul id="variants"></ul>

<style>
  .product-form__input {display:none !important}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
  let variants;
  let variants2;
  let merge;
  
  $.getJSON(window.Shopify.routes.root + 'products/kontesut.js', function(product) {
    variants2 = product.variants;
  } );
  $.getJSON(window.Shopify.routes.root + 'products/ojpjedpfaijr.js', function(product) {
    
    variants = product.variants;

    //merge
    merge = $.merge(variants, variants2);
    merge.sort(sortFunc);
    console.log(merge);
    
    $.each(merge, function(index, value){
      let arr = Object.values(value); 
      $("#variants").append("<li data-id='"+arr[0]+"'>"+arr[1]+"</li>");
    })
  } );
  
//sort
  function sortFunc(a, b) {
    a = a.title.toLowerCase();
    b = b.title.toLowerCase();
    return a.localeCompare(b);
  }
  
  //add cart

let items = {};
items["items"] = [];
items["items"].push({"id": 41281037238455, "quantity": 1});
items["items"].push({"id": 41280119079095, "quantity": 1});

  
  $("#variants").on("click", function() {
    
    console.log(33);
    
    fetch(window.Shopify.routes.root + 'cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(items)
    })
    .then(response => {
      return response.json();
    })
    .catch((error) => {
      console.error('Error:', error);
    });
    
  });
  
</script>
<form method="post" action="/cart/add" id="product-form-template--15347120537783__main" accept-charset="UTF-8" class="form" enctype="multipart/form-data" novalidate="novalidate" data-type="add-to-cart-form"><input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="id" value="41279443108023">
  <div class="product-form__buttons">
    <button type="submit" name="add" class="product-form__submit button button--full-width button--secondary">
        <span>カートに追加する</span>
        <div class="loading-overlay__spinner hidden">
          <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
          </svg>
        </div>
    </button>
  </div>
</form>
let output = {}
const inputData = {
  exampleText1: `XXX USD worth of unlocked NEAR Tokens
XXX USD worth of NEAR Token lockup with a 18 month linear release schedule.

XXX USD worth of unlocked NEAR Tokens
XXX USD worth of NEAR Token lockup with a 18 month linear release schedule`,
  exampleText2: `XXX USD worth of unlocked NEAR Tokens
XXX USD worth of NEAR Token lockup with a 18 month linear release schedule.

XXX USD worth of unlocked NEAR Tokens
XXX USD worth of NEAR Token lockup with a 18 month linear release schedule`,
  exampleText3: `XXX USD worth of unlocked NEAR Tokens
XXX USD worth of NEAR Token lockup with a 18 month linear release schedule.

XXX USD worth of unlocked NEAR Tokens
XXX USD worth of NEAR Token lockup with a 18 month linear release schedule`,
  exampleText4: `XXX USD worth of unlocked NEAR Tokens
XXX USD worth of NEAR Token lockup with a 18 month linear release schedule.

XXX USD worth of unlocked NEAR Tokens
XXX USD worth of NEAR Token lockup with a 18 month linear release schedule`,
  exampleText5: `XXX USD worth of unlocked NEAR Tokens
XXX USD worth of NEAR Token lockup with a 18 month linear release schedule.

XXX USD worth of unlocked NEAR Tokens
XXX USD worth of NEAR Token lockup with a 18 month linear release schedule`,
}

// ====== Zapier Code Step =============
// Very sloppy code for modifying newline values between platforms

// Destructure input values
const i1 = inputData.exampleText1
const i2 = inputData.exampleText2
const i3 = inputData.exampleText3
const i4 = inputData.exampleText4
const i5 = inputData.exampleText5
// add more as follows:
// const i6 = inputData.exampleText6

//* If you add any additional inputs, add them to the array below
const inputValueArray = [i1,i2,i3,i4,i5,/*i6*/]
 
// Add more options to this array if needed
// Don't modify the spacing on index 1
const targetPlatformNewlineChars = [`
`, // index 0
  "\\n", // index 1
  "<br />", // index 2
]
 
// EDITABLE
const options = {
  // OPTION: How does the current platform delimit new lines?
  currentPlatformNewlineChar: "\n",
  // OPTIONS (1-3): single, double, or triple space lines
  linesPerDelimiter: 1,
  // (OPTIONS: 0-2): 0 = `...` | 1 = \n | 2 = <br />
  targetNlIndex: 1
}

// Extract options because zapier doesn't like obj[key] syntax
const targetNlIndex = options.targetNlIndex
const curNewLine = options.currentPlatformNewlineChar
const linesPerDelimiter = options.linesPerDelimiter

// Set newline string
const nl = targetPlatformNewlineChars[targetNlIndex]

// Function to set line spacing
const lineCount = (ct) => {
  let count = ct
  const lines = []
  if (!ct) count = linesPerDelimiter
  for (let i=0;i<count;i++) lines.push(i)
  return lines
}
 
// Function to test if a value is nullish
const testEmpty = (item) => {
  return ['', null, undefined].indexOf(item) !== -1
}

// Function to format each input as a separate key/value pair
const formatArrayOfTextBlocks = (inputTextArr) => {
  const formattedTextArray = []
  
	inputTextArr.forEach((inputText) => {
		const outputText = inputText.split(curNewLine).map((item) => {
  	const itemIsEmpty = testEmpty(item)
  
  	if (itemIsEmpty) return lineCount(linesPerDelimiter * 1)
      .map(_item => nl)
      .join("")
  	else return item + lineCount()
      .map(_item => nl)
      .join("")
    })
    .join("")
  	.trim()
  	.split(nl+nl+nl)
  	.join(nl+nl)
  	.trim()
  	.split(nl)
  	.filter((item ) =>  !!item )
    .join(nl)
  
	formattedTextArray.push(outputText)
})
  
  // Create empty object
  const obj = {}
  const objArr = formattedTextArray.forEach(((item, i) => {
    // Dynamically generate keys
    const key = "item" + (i + 1) + ""
    // Create object
    obj[key] = item
  }))
  // Return Object
  return obj
}

const outputText = formatArrayOfTextBlocks(inputValueArray)
 
output = {...outputText}
// Is the same as:
// output = {
//   item1: outputText.item1,
//   item2: outputText.item2,
//   item3: outputText.item3,
//   item4: outputText.item4,
//   item5: outputText.item5
// };
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";

const ApiService = {
  init() {
    Vue.use(VueAxios, axios);
    Vue.axios.defaults.baseURL = process.env.VUE_APP_SERVICE_API;
  },

  query(resource, params) {
    return Vue.axios.get(resource, params).catch((error) => {
      throw new Error(`ApiService ${error}`);
    });
  },
  get(resource, slug = "") {
    let url = resource

    if (slug !== "")
      url = url + `/${slug}`

    return Vue.axios.get(url).catch((error) => {
      throw new Error(`ApiService ${error}`);
    });
  },

  post(resource, params) {
    return Vue.axios.post(`${resource}`, params);
  },

  update(resource, slug, params) {
    return Vue.axios.put(`${resource}/${slug}`, params);
  },

  put(resource, params) {
    return Vue.axios.put(`${resource}`, params);
  },

  delete(resource) {
    return Vue.axios.delete(resource).catch((error) => {
      throw new Error(`ApiService ${error}`);
    });
  },
};

export default ApiService;
↓これは無理
<p class="cart-attribute__field">
  <label for="your-name0">Your name</label>
  <input id="your-name0" type="text" name="attributes[Your name0]" value="{{ cart.attributes["Your name0"] }}">
</p>



lineこれは行ける
<p class="line-item-property__field">
  <label for="your-name">Your name</label>
  <input id="your-name" type="text" name="properties[Your name]">
</p>


  <div class="new-grid">

    {% assign count = "0" %}
    {%- for article in blog.articles -%}

      {% if article.tags contains 'プレスリリース' %}
        
        {% if count < "3" %}
      
          {%- liquid
            assign style = 'medium'
            if forloop.first
              assign style = 'medium'
            endif
          -%}
          {%- render 'article-grid-item-times',
            section: section,
            blog: blog,
            article: article,
            style: style,
            image_size: section.settings.blog_image_size -%}

          {% capture count %}{{ count | plus: 1 }}{% endcapture %}

          {% else %}
          {% break %}
        {% endif %}

      {% endif %}
    

            

    {%- endfor -%}
  </div>
https://ui-elements-generator.myshopify.com/pages/line-item-property
// setup tools tips trigger
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
     return new Tooltip(tooltipTriggerEl, {
           html: true // <- this should do the trick!
     })
});
  const productQuery = () => `
  query {
    shop {
      products( first: 10) {
        edges{
          node {
            id
            handle
            title
	
            variants(first: 10){
              edges{
                node{
                  title
              }
            }
          }
        }
      }  
    }
  }
}
`;


const STOREFRONT_ACCESS_TOKEN =  "xxxxxxxx"

const GRAPHQL_URL = "https://xxxxxxxxx.myshopify.com/api/2021-10/graphql.json"


const GRAPHQL_BODY  = () => {
	return {
	'async': true,
	'crossDomain': true,
	'method': 'POST',
	'headers': {
		'X-Shopify-Storefront-Access-Token': STOREFRONT_ACCESS_TOKEN,
		'Content-Type': 'application/graphql',
	},
	'body': productQuery()
	};
}

fetch(GRAPHQL_URL, GRAPHQL_BODY())
        .then(res => res.json())
	.then(products => {
		console.log('products', products)
	})
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
  mounted() {
    const theme = localStorage.getItem('useDarkTheme');
    if (theme) {
      if (theme == 'true') {
        setTimeout(() => {
          this.$vuetify.theme.dark = true;
        }, 0);
      } else {
        setTimeout(() => {
          this.$vuetify.theme.dark = false;
        }, 0);
      }
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      setTimeout(() => {
        this.$vuetify.theme.dark = true;
      }, 0);
    }
  }
    <meta name="viewport" content="width=device-width">

initial-scale の設定をしないのがポイントです。CSSはBODY要素にmin-widthを指定し、スマートフォン用のメディアクエリでmin-widthを初期化します。

    body {
    	// PC用の横幅を指定
    	min-width: 1080px;
    }
    // スマートフォンのブレイクポイント
    @media screen and (max-width: 769px){
    	body {
    		// 初期化
    		min-width: initial;
    	}
    }
キーボードの『Windows』+『Shift』+『S』 スクリーンキャプチャ
<Buttons
	text="Btn Style 2"
	btn_style="btn btn-style-2"
    :on_click="this.clickEventFire"
	leading_icon="inbox"
	trailing_icon="chevron-right"
/>
star

Tue Apr 11 2023 04:11:37 GMT+0000 (Coordinated Universal Time)

#laravel #inertia #vue
star

Fri Jul 15 2022 18:46:04 GMT+0000 (Coordinated Universal Time)

#vue
star

Thu Jul 14 2022 21:04:42 GMT+0000 (Coordinated Universal Time)

#vue
star

Thu Jul 14 2022 20:23:49 GMT+0000 (Coordinated Universal Time)

#vue
star

Tue Apr 26 2022 23:42:20 GMT+0000 (Coordinated Universal Time)

#vue
star

Thu Mar 17 2022 04:14:05 GMT+0000 (Coordinated Universal Time)

#vue
star

Wed Feb 23 2022 02:30:35 GMT+0000 (Coordinated Universal Time)

#vue
star

Mon Feb 07 2022 19:04:02 GMT+0000 (Coordinated Universal Time)

#vue
star

Tue Jan 25 2022 10:35:35 GMT+0000 (Coordinated Universal Time) https://ui-elements-generator.myshopify.com/pages/line-item-property

#vue
star

Fri Jan 14 2022 11:09:57 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/13704789/can-i-use-complex-html-with-twitter-bootstraps-tooltip

#html #bootstrap #vue
star

Wed Dec 01 2021 08:16:02 GMT+0000 (Coordinated Universal Time)

#vue
star

Thu Nov 25 2021 07:53:57 GMT+0000 (Coordinated Universal Time)

#vue
star

Fri Oct 01 2021 03:14:30 GMT+0000 (Coordinated Universal Time)

#vue
star

Tue Aug 10 2021 03:08:46 GMT+0000 (Coordinated Universal Time)

#vue
star

Fri Jun 25 2021 21:32:04 GMT+0000 (Coordinated Universal Time)

#vue
star

Sun Apr 11 2021 10:59:31 GMT+0000 (Coordinated Universal Time)

#html #vue

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension