前提事項

• ShopifyのBUY BUTTONを使うと

概要

設定方法

{% if customer.tags contains "スタッフユーザー" %}
<div id="product-html-wrapper">
<textarea id="product-html" cols="40" rows="10"></textarea>
<button id="copy-product-html">この商品のHTMLをコピーする</button>
</div>
<script>
	(() => {
		const product_variants = 
		[{%- for variant in product.variants -%}
				{id:{{ variant.id }}, title: '{{ product.title }}{% unless variant.title == "Default Title" %} - {{ variant.title }}{% endunless %}', {% unless variant.featured_image == null %}image_url: '{{ variant.featured_image | image_url: width: 480 | prepend: "https:" }}', image_alt: '{{ variant.featured_image.alt }}',{% else %}{% if product.featured_media.media_type == "video" %}image_url: '{{ product.featured_media.preview_image | image_url: width: 480 | prepend: "https:" }}', image_alt: '{{ product.featured_media.preview_image.alt }}',{% else %}image_url: '{{ product.featured_image | image_url: width: 480 | prepend: "https:" }}', image_alt: '{{ variant.featured_image.alt }}',{% endif %}{% endunless %} price: '{{ variant.price | money }}', url: '{{ variant.url }}'},
		{%- endfor -%}];
		const defaultVariantId = {{ product.first_available_variant.id }};
		const extractVariantIdFromUrl = () => {
			const params = new URLSearchParams(window.location.search);
			const variantId = params.get('variant');
			return variantId ? parseInt(variantId) : defaultVariantId;
		};
		const findCommentByVariantId = (id) => {
			const product_variant = product_variants.find(variant => variant.id === id);
			return product_variant ? product_variant : '';
		};
		const updateTextArea = () => {
			const current_variantId = extractVariantIdFromUrl();
			const product_variant = findCommentByVariantId(current_variantId);
			const productHtml = document.getElementById('product-html');
			productHtml.innerHTML = 
`<div class="product-details">
		<div class="product-image"><img src="${product_variant.image_url}" alt=""></div>
		<h3>${product_variant.title}</h3>
		<div class="price">${product_variant.price}</div>
		<div class="detail"><a href="{%- if product.has_only_default_variant -%}{{product.url}}{%- else -%}${product_variant.url}{%- endif -%}">商品の詳細を見る</a></div>
</div>`
		};
		const copyToClipboard = () => {
			var textArea = document.getElementById("product-html");
			navigator.clipboard.writeText(textArea.value).then(function() {
				alert('クリップボードにコピーしました');
			}, function(err) {
				alert('クリップボードにコピーできませんでした');
			});
		};
		((history) => {
			const originalReplaceState = history.replaceState;
			history.replaceState = (...args) => {
				setTimeout(updateTextArea, 100);
				return originalReplaceState.apply(history, args);
			};
		})(window.history);
		window.addEventListener('DOMContentLoaded', (event) => {
			updateTextArea();
			document.getElementById('copy-product-html').addEventListener('click', copyToClipboard);
		});
	})();
</script>
<style>
	#product-html-wrapper {
		margin: 50px 0;
	}
	#product-html {
		width: 100%;
		padding:5px;
		font-size:14px;
		color:#333;
		border: 1px solid #cccccc;
		border-radius: 4px;
	}
	#copy-product-html {
		width: 100%;
		border:none;
		display:block;
		background:#000;
		color:#ffffff;
		font-weight:bold;
		padding:10px 15px;
		margin: 0;
	}
</style>
{% endif %}

※ブログのトーンやレイアウトに合わせるためには、ヒアドキュメントの部分を修正する必要があります。