0
Shopifyを使用していて、サンプルを注文できるようにページに2番目の「addtocart」ボタンを追加することができました。各製品には2つのバリアントがあります.1つ目は量を選択できるMeter、2つ目は数量ボックスのないSampleです。2番目のaddtocartボタン/フォームを作成するShopify
これはしかし、私たちはそれが欲しくないので、人が何かをメートルやサンプルのカートに追加した後、それらはカートページに持ち込まれます。代わりに商品ページに残り、ミニカートが更新されます。
テーマにはこの機能があり、最初のボタン（メータにリンクされているボタン）でうまくいきますが、最初のボタンをサンプルボタン（クラス名など）にコピーしようとすると、それをクリックすると、1つのサンプルを追加するのではなく、数量欄に量が追加されます。
私はjavascriptをコピーして新しいクラスを追加しようとしましたが、これにリンクされると思ったので新しいセクションを作成しようとしましたが、何も動作していません。私がしたいのは、誰かが「サンプルを注文する」ボタンをクリックしてから商品ページにいて、ミニカートが更新された場合だけです。残念なことに私はjavascriptに関しては完全な初心者ですので、これを解決できません。ここで
は、商品ページのための液体コーディングです：その後、<div id="quick-shop-{{ itemType.id }}" class="quick-shop-content clearfix" {% if itemType.options.size == 1 %}data-option="{{ itemType.options.first | escape }}"{% endif %}>
<div class="showcase {% if itemType.images.size == 1 %}wide{% endif %}">
<div class="container {% if itemType.images.size == 1 or settings.product-thumb-orientation == 'below' %}wide{% endif %}">
<div class="wrap">
<img alt="{{ firstVariantImage.alt }}" src="{{ firstVariantImage | product_img_url: 'large' }}">
{% if settings.product-image-borders %}<span class="overlay"></span>{% endif %}
</div>
</div>
{% if itemType.images.size > 1 %}
<div class="pager {% if settings.product-thumb-orientation == 'below' %}below-main-image{% endif %}">
<div class="inner">
{% for image in itemType.images %}
<div class="wrap thumb {% include 'for-looper' %} {% if forloop.first %}active{% endif %}">
<img alt="{{ image.alt }}" src="{{ image.src | product_img_url: 'small' }}" data-high-res-url="{{ image.src | product_img_url: 'large' }}">
<span class="overlay"></span>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if settings.display-product-email-link %}<div class="notes"><a href="mailto:{{ shop.email }}?subject={{ itemType.title | escape }}" class="email-us"><span class="icon">j</span>{{ 'products.product.email_us' | t }}</a></div>{% endif %}
</div>
<div class="product-details-wrapper {% if itemType.variants.size == 1 and settings.display-product-quantity-option == false %}no-options{% endif %}">
<div class="module header">
<span class="close-modal">v</span>
{% if settings.show-brand-names %}
<p class="brand">{{ itemType.vendor }}</p>
{% endif %}
<p class="title"><a href="{{ itemType.url }}">{{ itemType.title }}</a></p>
{% if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price %}
<p class="price sale"><span class="original money">{{ product.selected_or_first_available_variant.compare_at_price | money }}</span> <span class="money mets" itemprop="price">{{ product.selected_or_first_available_variant.price | money }}</span></p>
{% else %}
<p class="price"><span class="money mets" itemprop="price">{{ product.selected_or_first_available_variant.price | money }}</span></p>
{% endif %}
</div>
<form class="module options quick-shop-form {% unless itemType.available %}unavailable{% endunless %}" action="/cart/add" method="post" id="quick-shop-form-{{ itemType.id }}" data-product-id="{{ itemType.id }}">
<h3 style="text-transform: uppercase; padding-bottom: 10px;">Order by the metre</h3>
{% if itemType.available %} <!-- If the product is available then... -->
<input type="hidden" name="id" class="product-select" value="{{ firstVariant.id }}" data-variant-title="{{ firstVariant.title }}" />
<div class="selector-wrapper quantity" style="margin-bottom: 0;">
<p>Quantity <select id="quantity" class="drops" name="quantity">
{% for i in (2..30) %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select> metres</p>
<p><em>Minimum 2 metres. Whole metres only</em></p>
</div>
<div class="selector-wrapper">
{% if itemType.options.size > 1 %}<label></label>{% endif %}
<input class="action-button submit" type="submit" value="{{ 'products.product.add_to_cart' | t }}" style="margin-top: 0;"/>
</div>
<div class="error-wrap"></div>
{% else %}
<span class="action-button unavailable disabled">{{ 'products.product.sold_out' | t }}</span>
{% endif %}
</form>
<hr style="width: 50%; margin: 0 25% 20px 25%;" />
<h3 style="text-transform: uppercase; padding-bottom: 15px;">Order a free sample</h3>
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.last.id }}" />
<input type="submit" class="action-button" value="{{ 'products.product.add_to_cart' | t }}" />
</form>
<p><em>Max. 5 samples per order</em></p>
<div class="module description">
{% if itemType.description.size > 0 %}
<div class="rte special">{{ itemType.description }}</div>
{% endif %}
<a class="go-to-product" href="{{ itemType.url }}">{{ 'products.product.visit_page' | t }} <span>→</span></a>
</div>
</div>
</div>
<script>
Theme.products["{{ itemType.id }}"] = {{ itemType | json }};
Theme.products["{{ product.id }}"].firstVariant = {{ product.selected_or_first_available_variant.id | json }};
</script>
（これはそこにも上で実装する必要があるとして）そして、ここでコーディング
<section id="product-area" class="clearfix" itemscope itemtype="http://schema.org/Product" data-product-id="{{ product.id }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
{% if settings.show-brand-names %}
<meta itemprop="brand" content="{{ product.vendor }}" />
{% endif %}
<meta itemprop="name" content="{{ product.title }}">
<div class="showcase product-images">
<div class="container {% if product.images.size == 1 or settings.product-thumb-orientation == 'below' or settings.product-thumb-orientation == 'list' %}wide{% endif %}">
<div class="product-main-image wrap">
{% unless settings.product-thumb-orientation == 'list' %}
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
<img itemprop="image" alt="{{ featured_image.alt }}" src="{{ featured_image | img_url: 'original' }}">
{% if settings.product-image-borders %}<span class="overlay"></span>{% endif %}
{% else %}
{% for image in product.images %}
<div class="image-list-item">
<img itemprop="image" alt="{{ image.alt }}" src="{{ image | img_url: 'original' }}">
{% if settings.product-image-borders %}<span class="overlay"></span>{% endif %}
</div>
{% endfor %}
{% endunless %}
{% if settings.product-image-zoom %}
<div class="product-zoom"></div>
{% endif %}
</div>
</div>
{% if product.images.size > 1 and settings.product-thumb-orientation != 'list' %}
<div class="pager {% if settings.product-thumb-orientation == 'below' %}below-main-image{% endif %}">
<div class="inner">
{% for image in product.images %}
<div class="wrap thumb {% include 'for-looper' %} {% if forloop.first %}active{% endif %}">
<img alt="{{ image.alt }}" src="{{ image.src | product_img_url: 'small' }}" data-high-res-url="{{ image.src | product_img_url: 'original' }}">
<span class="overlay"></span>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if settings.display-fullsize-product-viewer %}
<div class="notes">
<a href="#" class="toggle-fullview"><span class="icon">l</span>{{ 'products.product.view_fullsize_image' | t }}</a>
</div>
{% endif %}
{% if settings.display-product-email-link %}
<div class="notes">
<a href="mailto:{{ shop.email }}?Subject={{ product.title | escape }}" class="email-us"><span class="icon">j</span>{{ 'products.product.email_us' | t }}</a>
</div>
{% endif %}
{% if settings.enable-fitting-guide %}
<div class="notes">
<a href="/pages/{{ settings.fitting-guide-link }}" class="fitting-guide"><span class="icon">{{ settings.fitting-guide-icon }}</span>{{ 'products.product.fitting_guide' | t }}</a>
</div>
{% endif %}
</div>
<div class="product-details-wrapper">
<div class="product-details {% if product.images.size > 1 %}border{% endif %} {% if product.variants.size == 1 and settings.display-product-quantity-option == false %}no-options{% endif %}" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="module header">
{% if settings.show-brand-names %}
<h3 class="brand">{{ product.vendor }}</h3>
{% endif %}
<h1 itemprop="name" class="title">{{ product.title }}</h1>
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
{% if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price %}
<p class="price sale"><span class="original money">{{ product.selected_or_first_available_variant.compare_at_price | money }}</span> <span class="money mets" itemprop="price">{{ product.selected_or_first_available_variant.price | money }}</span></p>
{% else %}
<p class="price"><span class="money mets" itemprop="price">{{ product.selected_or_first_available_variant.price | money }}</span></p>
{% endif %}
</div>
<div class="module options {% unless product.available %}unavailable{% endunless %}">
<h3 style="text-transform: uppercase;">Order by the metre</h3>
{% if product.available %}
<!-- If the product is available then... -->
<link itemprop="availability" href="http://schema.org/InStock" />
<form class="product-form" id="product-form" action="/cart/add" method="post">
<input type="hidden" name="id" class="product-select" value="{{ product.selected_or_first_available_variant.id }}" data-variant-title="{{ product.selected_or_first_available_variant.title }}" />
<div id="infiniteoptions-container" class="side-labels"></div>
<div id="uploadery-container" class="side-labels"></div>
<div class="selector-wrapper quantity" style="margin-bottom: 0;">
<p>Quantity <select id="quantity" class="drops" name="quantity">
{% for i in (2..30) %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select> metres</p>
<p><em>Minimum 2 metres. Whole metres only</em></p>
</div>
<div class="selector-wrapper submit-wrapper">
{% if product.options.size > 1 %}<label></label>{% endif %}<input type="submit" class="action-button submit" value="{{ 'products.product.add_to_cart' | t }}">
</div>
</form>
{% else %}
<link itemprop="availability" href="http://schema.org/OutOfStock" />
<span class="action-button unavailable disabled">{{ 'products.product.sold_out' | t }}</span>
{% endif %}
<hr style="width: 50%; margin: 20px 25%;" />
<h3 style="text-transform: uppercase; padding-bottom: 15px;">Order a free sample</h3>
<form class="sample-form" id="sample-form" method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.last.id }}" data-variant-title="{{ product.variants.last.title }}" quantity="1"/>
<input type="submit" class="action-button" value="{{ 'products.product.add_to_cart' | t }}" />
</form>
<p><em>Max. 5 samples per order</em></p>
</div>
{% if product.description.size > 0 %}
<div class="module description">
<div class="rte" itemprop="description">{{ product.description }}</div>
</div>
{% endif %}
</div>
</div>
</section>
そしてQuickshopですこれに関連するjavascriptのセクション（私は何かが不足していると言うと私はそれを投稿することができます）
追加情報やコーディングが必要な場合は、何かお手伝いをしてください。