Snippets Collections
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 26 2022 23:42:20 GMT+0000 (UTC)

#vue
star

Thu Mar 17 2022 04:14:05 GMT+0000 (UTC)

#vue
star

Mon Feb 07 2022 19:04:02 GMT+0000 (UTC)

#vue
star

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

#vue
star

Fri Jan 14 2022 11:09:57 GMT+0000 (UTC) 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 (UTC)

#vue
star

Thu Nov 25 2021 07:53:57 GMT+0000 (UTC)

#vue
star

Fri Oct 01 2021 03:14:30 GMT+0000 (UTC)

#vue
star

Tue Aug 10 2021 03:08:46 GMT+0000 (UTC)

#vue
star

Sun Apr 11 2021 10:59:31 GMT+0000 (UTC)

#html #vue

Save snippets that work with our extensions

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